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设计稿交付后照着像素把卡片、间距、文案手动敲进 HTML往往要耗掉半天。screenshot-to-code 把这件事变成一步操作上传一张截图直接产出可运行的前端代码覆盖 HTMLTailwind、React、Vue、Bootstrap、Ionic 等 6 种技术栈还能把屏幕录像转成可点击的原型。一键启动步骤本地跑通截图转代码克隆仓库git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code配置密钥并启动后端至少配一个模型 Key建议加 Gemini 以提升截图识别和素材提取效果cd backend echo OPENAI_API_KEYsk-your-key .env echo GEMINI_API_KEYyour-key .env poetry install poetry run playwright install chromium # 无头浏览器供截图预览工具使用 poetry run uvicorn main:app --reload --port 7001另开终端启动前端cd frontend pnpm install pnpm dev打开http://localhost:5173选好技术栈上传一张截图点击 Generate Code。右侧出现代码、中间出现页面预览就算跑通了。代码生成逻辑在后端 generate_code.py 中。用 Docker 的话更省事echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build它能帮你做什么设计稿交付后把 Figma 导出图拖进去几分钟拿到一份带真实素材的 React 组件。Gemini 模型还能从截图里提取原图 logo 和图片复用省掉你挨个问设计要切图。手头只有竞品页面的截图上传后重建整套页面结构先拿一个90% 还原的初稿再按自己的数据源改文案和接口。给客户演示新产品流程时录一段操作视频丢进去系统逐帧分析交互产出一份能点、能切视图的前端原型。比静态标注图更有说服力客户可以直接上手点。对第一次生成的效果不满意同一张截图可以并行跑多个模型变体横向对比后挑最接近设计稿的那份在它基础上继续迭代不用推倒重来。进阶玩法改已生成的代码进入 Select and Edit 模式直接在预览里点击文字、按钮弹出面板改内容或样式代码实时同步。适合逐像素对齐设计稿比手动找 DOM 快得多。调生成参数点右上角齿轮打开设置面板可切换 AI 模型、6 种技术栈组合和设计系统组件入口见 settings/。导出交付满意后点代码区的 Download打包下载完整项目下载逻辑在 download.ts 里也可以直接复制单个文件贴进现有工程。避坑速查遇到前后端连不上多半是后端没起或端口不一致。确认 7001 端口的 uvicorn 在运行若改过端口同步更新frontend/.env.local里的VITE_WS_BACKEND_URL。遇到生成效果差最常见原因是截图分辨率太低或元素重叠。换 2 倍屏截图重试或换 Gemini 这类默认推荐模型。遇到后端启动报 UTF-8 编码错误Windows用记事本另存.env时选 UTF-8 编码保存即可。screenshot-to-code 适合想省掉像素级还原工作的前端、产品和独立开发者。完整文档和示例见 README.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），仅供参考