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/.envcd backend echo OPENAI_API_KEYsk-your-key .env echo GEMINI_API_KEYyour-key .env几个建议Gemini 强烈建议配上截图转代码的素材提取和录屏转代码模式都依赖它REPLICATE_API_KEY可选加上后解锁图片编辑、抠背景能力密钥也可以在前端界面加载后点齿轮图标在设置弹窗里填写不必只靠.env第三步启动后端服务cd backend poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001playwright 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_KEYsk-your-key .env docker-compose up -d --build稍等构建完成直接访问http://localhost:5173即可。注意该方式下改代码不会触发重建只适合使用不适合开发编排文件见 docker-compose.yml。生成第一份截图转代码结果部署完成后使用流程非常直白上传截图在输入面板选择图片文件。要求不苛刻——界面简洁、元素边界清晰即可。也可以切换到文字描述、URL 或录屏入口选择输出技术栈右侧设置面板切换 HTML/React/Vue 等格式默认 HTML Tailwind 就够用点击生成分析加生码通常 10~30 秒复杂页面会稍长预览与修改左侧实时预览渲染效果右侧是完整代码可直接复制或下载不满意就在对话框里继续提修改意见让效果更贴近设计稿的三个技巧① 截图决定上限。背景干净、留白合理、文字可读的截图生成质量明显更高。超长页面建议分区域截图各生成一段后人工拼合比一次性硬转一整屏稳定得多。② 用好素材提取。截图中有真实 logo 和品牌图时确保 Gemini 密钥可用——它会做像素级裁剪并直接引用原图输出页面的像不像很大程度上取决于这一步。相关实现在 backend/agent/tools/extract_assets.py。③ 多版本对比着选。配置多家密钥后一次生成会并行产出多个模型变体逐个预览挑最好的比反复调 prompt 更省事。踩坑与排查清单症状处理办法后端安装/启动报错先查官方排障文档 Troubleshooting.md仍无解则提 issueWindows 下报 UTF-8 编码错误用 Notepad 打开.env另存为 UTF-8 编码无法直连 OpenAI在backend/.env设置OPENAI_BASE_URL指向代理注意路径需带v1前端连不上后端改了后端端口的话同步修改frontend/.env.local里的VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL没有截图预览能力检查是否执行过playwright install chromium设置弹窗会显示该功能是否可用想换本地 Ollama 模型官方明确不推荐生成质量差距明显仅建议用于体验流程适用边界它能替你做什么不能做什么说句实话截图转代码生成的是视觉层的产物。布局、样式、素材还原度可以很高但点击交互、表单校验、数据请求这些业务逻辑仍需自己补。把它定位为快速原型加速器而不是替代品用起来就不会失望。另外两点提醒生成走的是各家 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考