Screenshot to Code 截图转代码完全指南：4 步跑通本地部署，用 AI 生成 UI 代码

Screenshot to Code 截图转代码完全指南：4 步跑通本地部署，用 AI 生成 UI 代码

【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code

产品把一张设计稿甩过来，说"照着这个做一版页面"——你是愿意花半天对齐像素、手写 CSS，还是想让 AI 直接吐出代码？开源工具Screenshot to Code就是为解决这类问题而生的：把截图丢给它，它用 AI 视觉分析生成干净、可运行的 HTML/Tailwind、React 或 Vue 代码。本文带你完成从克隆仓库到产出第一份截图转代码结果的最短路径，并附上让效果更贴近设计稿的几个关键技巧。

它到底能做什么

先花 30 秒搞清楚这个工具的能力边界，避免上手后产生错误预期：

• 输入形式多：支持截图、设计稿（含 Figma 导出图），甚至网页操作录屏，都能转成可交互原型
• 输出技术栈：HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind 六种，覆盖大多数前端场景
• 多模型可选：后端接入 OpenAI、Anthropic、Gemini 三家模型，密钥配得越多，每次生成可对比的模型组合越强
• 素材提取：配置 Gemini 后，它会从截图里把真实的 logo、配图"抠"出来直接复用，而不是让模型重画
• 可对话修改：生成后可以在界面里继续用自然语言提修改意见，类似"导航栏改成深色"

适合谁：做快速原型的开发者、想验证 UI 想法的设计师、需要批量仿制界面的前端工程师。

最小可用流程：从零到跑起来

整个部署分四步，照做即可。预期总耗时 15~20 分钟（不含等密钥）。

第一步：拿到项目代码

git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code

仓库分两个主要部分：FastAPI 写的backend/（负责 AI 调用与代码生成，核心逻辑见 backend/routes/generate_code.py）和 React/Vite 写的frontend/（操作界面）。

第二步：准备模型密钥

至少需要OpenAI、Anthropic、Gemini 三家的其中一家API Key，写入backend/.env：

cd backend echo "OPENAI_API_KEY=sk-your-key" > .env echo "GEMINI_API_KEY=your-key" >> .env

几个建议：

• Gemini 强烈建议配上：截图转代码的素材提取和录屏转代码模式都依赖它
• REPLICATE_API_KEY可选，加上后解锁图片编辑、抠背景能力
• 密钥也可以在前端界面加载后点齿轮图标，在设置弹窗里填写，不必只靠.env

第三步：启动后端服务

cd backend poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001

playwright install chromium是可选但推荐的一步：它给 Agent 装上一个"眼睛"，能把自己生成的页面渲染出来肉眼自检，效果明显更好。Linux 下若缺系统库，改用poetry run playwright install --with-deps chromium。

预期结果：终端停在 uvicorn 的启动日志，监听 7001 端口。

第四步：启动前端并打开页面

另开一个终端：

cd frontend pnpm install pnpm dev

浏览器访问http://localhost:5173，看到上传界面即部署成功。

懒人方案——Docker 一键起：如果你不想装 Python/Node 环境，在仓库根目录执行：

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

稍等构建完成，直接访问http://localhost:5173即可。注意该方式下改代码不会触发重建，只适合使用不适合开发，编排文件见 docker-compose.yml。

生成第一份截图转代码结果

部署完成后，使用流程非常直白：

1. 上传截图：在输入面板选择图片文件。要求不苛刻——界面简洁、元素边界清晰即可。也可以切换到文字描述、URL 或录屏入口
2. 选择输出技术栈：右侧设置面板切换 HTML/React/Vue 等格式，默认 HTML + Tailwind 就够用
3. 点击生成：分析加生码通常 10~30 秒，复杂页面会稍长
4. 预览与修改：左侧实时预览渲染效果，右侧是完整代码，可直接复制或下载；不满意就在对话框里继续提修改意见

让效果更贴近设计稿的三个技巧

① 截图决定上限。背景干净、留白合理、文字可读的截图，生成质量明显更高。超长页面建议分区域截图，各生成一段后人工拼合，比一次性硬转一整屏稳定得多。

② 用好素材提取。截图中有真实 logo 和品牌图时，确保 Gemini 密钥可用——它会做像素级裁剪并直接引用原图，输出页面的"像不像"很大程度上取决于这一步。相关实现在 backend/agent/tools/extract_assets.py。

③ 多版本对比着选。配置多家密钥后，一次生成会并行产出多个模型变体，逐个预览挑最好的，比反复调 prompt 更省事。

踩坑与排查清单

适用边界：它能替你做什么，不能做什么

说句实话：截图转代码生成的是视觉层的产物。布局、样式、素材还原度可以很高，但点击交互、表单校验、数据请求这些业务逻辑仍需自己补。把它定位为"快速原型加速器"而不是"替代品"，用起来就不会失望。

另外两点提醒：生成走的是各家 API，按调用计费，复杂页面多轮修改时留意用量；截图转代码对超小字号、密集表格类页面表现一般，这类输入请降低预期。

现在就可以动手：克隆仓库、贴一个 API Key、装依赖、起服务——约 20 分钟后，你会看到自己的第一份 AI 生成 UI 代码在浏览器里跑起来。

【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code