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 前端前后端都开源。多栈输出HTMLTailwind、ReactTailwind、VueTailwind、HTMLCSS、Bootstrap、IonicTailwind 六种组合模型可切换GPT、Claude、Gemini 按任务挑配的 key 越多每次生成可用的模型组合越多资产提取把截图里真实的 logo、图片抠出来直接复用不用找占位图录屏转原型输入一段屏幕录制输出可交互、还原操作流程的前端原型三步装好并启动 系统要求较新版本的 Node.js 与 Python3.10、Docker 可选另需至少一家模型厂商的 API keyOpenAI / Anthropic / Gemini 三选一。第一步克隆仓库git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code第二步两条启动路径任选其一。Docker 路径推荐共两行echo OPENAI_API_KEYsk-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 CodeAI 在后台处理生成过程会通过 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_URLWindows 下报 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），仅供参考
