截图转代码实操指南用 Screenshot to Code 把设计稿变成 HTML、React 或 Vue【免费下载链接】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设计师甩来一张设计稿你盯着屏幕把 HTML 一格格敲到深夜改完尺寸又被告知“间距再调 4 像素”。Screenshot to Code 把这段重复劳动砍掉它是一个开源工具输入一张界面截图由视觉大模型识别布局、文字和样式直接输出 HTML Tailwind、React 或 Vue 代码生成后你只负责换数据和补交互。它能覆盖的输入与输出类别内容输入界面截图、Figma 导出的设计稿、网站运行的录屏输出HTML Tailwind默认、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind模型OpenAI / Anthropic / Gemini至少配置其中一个的 API key原理不神秘截图直接发给多模态大模型模型看图写出代码环境配好后Agent 还能用无头浏览器把自己生成的页面截图与原图比对做自查。key 配得越多每次生成可并行的模型组合越多方便你挑最接近原图的那一版。三步跑通本地环境第一步克隆仓库git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code第二步启动后端FastAPI默认 7001 端口。至少配置一个模型 key写入 backend/.envcd backend echo GEMINI_API_KEY你的key .env poetry install poetry run python start.py第三步启动前端Vite Reactcd frontend pnpm install pnpm dev打开 http://localhost:5173 即可使用。代码定位模型供应商实现在 backend/agent/providers/生成入口在 backend/routes/generate_code.pykey 读取与功能开关在 backend/config.py。一条完整的生成链路拿到截图。Figma 稿直接导出 PNG已有网站截全页图。画面干净、元素边界清晰后面的识别就稳。选输出格式。右侧设置里选 HTML、React 或 Vue按落点选独立静态页选 HTML Tailwind要合进现有工程就选对应框架版本省掉一轮重写。触发生成。上传截图后点生成。多模型并行时会给出多个变体逐版对比取最接近原图的。微调落地。产出的是结构与样式代码不是业务逻辑换成真实数据源、补上链接和表单事件再提交进仓库。把效果做稳的几个习惯复杂界面分区域截图、分块生成再拼装比一张大图整页生成更接近原稿。小字号、低对比度的文字最容易识别错导出前把设计稿调大或提高对比度。官方 README 推荐优先配置 Gemini它还能从截图里抽取真实图片资源logo、配图复用而不是全部用占位图。想换模型、加 key只动 .env 和 backend/.env不必碰生成逻辑本身。常见坑与修法现象原因解法生成页面缺整块内容截图过宽或分辨率太低细节被模型丢掉裁掉无关区域、放大关键部分重新生成布局错位、样式散原稿用了非标准间距或 Tailwind 版本与项目不一致设置里对齐项目使用的 Tailwind 版本手工修关键间距类生成特别慢耗时主要在外部 API 调用不在本机只保留一个模型的 key需要代理时在 .env 设 OPENAI_BASE_URLWindows 下 .env 出现编码报错把它另存为 UTF-8 即可更多环境问题见 Troubleshooting.md。写在最后如果你的日常包含“把设计变成页面”这一环值得花十分钟把本地环境跑起来。第一版生成之后工作流基本就是截图、选格式、等一分钟、改代码——重复劳动交给模型手感留给微调。【免费下载链接】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），仅供参考