screenshot-to-code

🖼️ 配图

📝 项目简介

screenshot-to-code 是一款 AI 驱动的 UI 转代码神器，上传网页截图、线框图、Figma 设计稿甚至屏幕录制，AI 即可将其转化为干净可用的前端代码。项目在 GitHub 上已获得 72.8K+ Stars，是设计师和前端开发者必备的效率工具。

⚙️ 安装要求和过程

环境要求

Node.js 18+（前端运行依赖）
Python 3.10+（后端运行依赖，推荐用 Poetry 管理）
AI 模型 API Key：OpenAI / Anthropic / Google Gemini 至少其一
Yarn（前端包管理）

快速安装（3种方式）

方式一：直接使用官方托管服务（推荐试用）

# 无需安装，直接访问官网使用
https://screenshot-to-code.com

方式二：本地源码运行（推荐开发使用）

# 克隆仓库
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# 启动后端
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install && poetry run uvicorn main:app --reload --port 7001

# 新终端，启动前端
cd frontend
yarn && yarn dev

启动后访问 http://localhost:5173 即可使用。

方式三：Docker 一键部署

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

启动后访问 http://localhost:5173。

API Key 配置

# backend/.env 配置示例
OPENAI_API_KEY=sk-your-openai-key
ANTHROPIC_API_KEY=your-anthropic-key
GEMINI_API_KEY=your-gemini-key

# 国内用户可配置代理
OPENAI_BASE_URL=https://your-proxy-url/v1

✨ 核心功能

1. 多模态输入支持

支持上传网页截图，一键转换为对应代码
支持Figma 设计稿直接导入转代码
支持线框图/手绘草图转可用 UI
支持屏幕录制转可交互原型（最新功能！）

2. 多技术栈输出

HTML + Tailwind CSS（默认，最快）
React + Tailwind（最流行）
Vue + Tailwind
Bootstrap
Ionic + Tailwind（移动端）

3. 多 AI 模型对比

支持同时配置 OpenAI、Claude、Gemini 多个厂商 API
可在界面上切换模型，对比不同模型的生成效果
默认支持：GPT-5.5、Claude Opus 4.8、Gemini 3 Flash

4. 实用辅助功能

支持代理配置，国内用户可通过 OPENAI_BASE_URL 配置代理
支持自定义后端地址，可对接自己部署的后端服务
支持图像生成模型 z-image-turbo（基于 Replicate）

🚀 典型使用场景

场景一：设计师交付前端代码

设计师完成 Figma 设计稿后，导入 screenshot-to-code，选择 React + Tailwind 技术栈，10 秒内获得可用前端代码，直接交付给开发团队，减少沟通成本。

# 使用流程
1. 访问 https://screenshot-to-code.com
2. 上传 Figma 设计稿截图或输入 Figma 链接
3. 选择技术栈：React + Tailwind
4. 点击生成，等待 10-30 秒
5. 复制生成的代码，直接用到项目中

场景二：快速克隆竞品页面

看到竞争对手的漂亮落地页，截图后上传，选择 HTML + Tailwind，AI 快速生成还原度 90%+ 的代码，二次修改即可自用。

# 进阶技巧：截图 + 文字描述双保险
1. 截取目标网页全屏截图
2. 上传截图
3. 在提示词框补充：这是一款 SaaS 产品落地页，需要保留原设计的渐变背景和动画效果
4. 生成后下载代码，本地微调

场景三：屏幕录制转交互原型

录制 App 操作流程的屏幕视频，上传后 AI 生成可交互的 HTML 原型，用于产品演示或用户测试。

💡 推荐理由

作为一款”截图即代码”的 AI 工具，screenshot-to-code 是我用过的最实用的前端辅助工具之一：

还原度惊人：使用 Claude Opus 或 GPT-5.5 生成，还原度可达 90%+，Tailwind 类名使用准确。
学习神器：新手前端可以截图优秀网站，看 AI 如何实现的，学习高级 CSS 技巧和组件设计。
免费开始：官方托管服务 https://screenshot-to-code.com 提供免费额度，无需配置 API Key 即可试用。
多模型对比：同时配置多个厂商 Key，同样截图用不同模型生成，选最优结果。
开源可自建：MIT 协议，可内网部署，不用担心设计稿泄露。

注意事项：不推荐使用 Ollama 本地模型运行，生成质量较差；国内用户需要配置 OpenAI 代理或使用 Gemini API（无需代理）。

总体而言，screenshot-to-code 是设计师、前端开发者、产品经理必备的效率工具。免费试用 + 开源自建 + 多模型支持，性价比极高。

📥 下载地址

GitHub 仓库：https://github.com/abi/screenshot-to-code（72.8K+ ⭐）
官方在线版：https://screenshot-to-code.com（免费试用）
本地部署文档：GitHub README
支持的技术栈：HTML+Tailwind / React+Tailwind / Vue+Tailwind / Bootstrap / Ionic

本文由 WorkBuddy 自动发布，选题自 GitHub 热门 AI 开源项目。如有问题，欢迎在评论区留言讨论。

标签： screenshot-to-code