10分钟把设计稿变成可运行代码：screenshot-to-code 使用实战指南-港品优选

10分钟把设计稿变成可运行代码：screenshot-to-code 使用实战指南

【免费下载链接】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

设计师把一张设计稿甩进群里、而你希望在午饭前就交出界面初稿时，screenshot-to-code 就是为这个场景准备的。丢一张截图进去，它的 AI 后端会产出干净、可直接跑的 HTML/Tailwind、React 或 Vue 代码，省掉逐行写 CSS 和反复对齐像素的时间。

先看懂它能做什么

一句话：本地化的「截图进、可运行前端代码出」工具，FastAPI 后端 + React 前端，前后端都开源。

多栈输出：HTML+Tailwind、React+Tailwind、Vue+Tailwind、HTML+CSS、Bootstrap、Ionic+Tailwind 六种组合
模型可切换：GPT、Claude、Gemini 按任务挑，配的 key 越多，每次生成可用的模型组合越多
资产提取：把截图里真实的 logo、图片抠出来直接复用，不用找占位图
录屏转原型：输入一段屏幕录制，输出可交互、还原操作流程的前端原型

三步装好并启动 🚀

系统要求：较新版本的 Node.js 与 Python（3.10+）、Docker 可选；另需至少一家模型厂商的 API key（OpenAI / Anthropic / Gemini 三选一）。

第一步，克隆仓库：

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

第二步，两条启动路径任选其一。Docker 路径（推荐，共两行）：

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

本地开发路径（改代码方便）：后端用 Poetry，在终端里依次执行：

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

然后另开终端起前端：

cd frontend pnpm install pnpm dev

打开 http://localhost:5173 即进入主界面。GEMINI_API_KEY、REPLICATE_API_KEY想加就写进backend/.env，也可以稍后在界面右上角齿轮设置面板里直接填。

完成一次完整的截图转代码

上传截图：点左侧 Upload Image，选一张清晰的整页截图，分辨率越高越好。
选栈：在选项区选定目标栈（如 React + Tailwind），顺便确认本次用的模型。
点击 Generate Code：AI 在后台处理，生成过程会通过 WebSocket 实时推进度。
核对结果：中间是生成界面的实时预览，右侧是按文件拆好的源码，先看预览再决定要不要用。
导出：代码区支持直接下载完整项目，或单文件复制。

没有现成截图时，也可以走 URL 输入框让后端自己截图后生成；或点 Record Screen 录一段操作，得到交互原型。

把生成效果再推进一步

用高分辨率截图提升还原度

模型感知受图片分辨率限制，模糊、压缩过的截图必然导致字号、间距、配色漂移。用 2x 的整页截图，结果肉眼可见地更贴近原稿。

用资产提取保留设计稿里的原图

配好GEMINI_API_KEY后，生成时模型会提取截图中的 logo 等真实素材并直接引用进代码，不再出现占位图。注意视频模式依赖这个能力，属于硬性要求。

让模型自己截图自查

playwright install chromium装好后，后端会让 agent 用无头浏览器打开自己刚生成的页面，与原图对比纠错。设置面板会显示该能力是否可用；它是性价比最高的一道「降糙」环节。

避开五个高频坑

问题	可能原因	处理办法
启动或调用报 key 错误	.env 里 key 写错，或 key 无该模型权限	核对 key 格式、确认厂商账户可用，详见 Troubleshooting.md
前端连不上后端	后端没跑在 7001，或改了端口没同步前端	核对 uvicorn 端口；改端口时同步更新`frontend/.env.local`的`VITE_WS_BACKEND_URL`
Windows 下报 UTF-8 解码错误	.env 以非 UTF-8 编码保存	用编辑器另存为 UTF-8 编码
无法直连 OpenAI	网络受限	在`backend/.env`配`OPENAI_BASE_URL`指向代理，路径需含 v1
生成效果明显偏离原图	截图分辨率低、模型偏弱	在设置里换更强的模型，换高清图重试

用一句话总结这个工具的价值

screenshot-to-code 把「看着设计稿手写代码」压缩成了一步操作，适合快速原型、竞品分析和学习参考三类场景。

README.md：完整安装说明、API key 配置与支持栈清单
backend/README.md：后端细节
design-docs/general.md：项目架构设计笔记

项目后续还会持续扩展新栈与 agent 能力，本地环境搭好后，跟进更新即可直接用上新特性。

【免费下载链接】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），仅供参考

企业官网建设流程全解析