一张截图出 6 种技术栈的代码：screenshot-to-code 新手从设计稿到原型

一张截图出 6 种技术栈的代码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 把这件事直接接走丢一张截图进去它交回能跑的 HTML、React、Vue 代码。读完这篇你会把工具跑起来生成第一个页面并掌握 4 种输入方式和 3 种导出方式。 它能干什么截图、设计稿、录屏都转成前端代码screenshot-to-code 是一个可以自托管的 UI 转代码工具。给一张截图、一份设计稿、一段屏幕录制它交回一个能直接打开跑的页面。一张图出多框架代码HTML、React、Vue 都能选样式走 Tailwind 或 Bootstrap输入不限于图片贴 URL 可以录几秒操作也能得到交互原型模型可换GPT、Claude、Gemini 都能出码配几个密钥就有几组结果本地部署密钥在自己手里截图和代码都不离开你的机器前端框架样式方案HTMLTailwind / 纯 CSSReactTailwind CSSVueTailwind CSSBootstrapBootstrapIonicTailwind CSS 部署两条路Docker 一键或本地起Docker 路径推荐。装好 Docker 的话写个密钥文件一条命令起全套然后打开浏览器就能用echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build起来后访问 http://localhost:5173 端口和构建细节都写在 docker-compose.yml 里。本地路径。要改代码、调流程才需要顺序是克隆仓库、配密钥、起后端、起前端git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-codecd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run uvicorn main:app --reload --port 7001cd frontend pnpm install pnpm dev前后端都起来后打开 http://localhost:5173 进入应用。密钥清单和每一步说明见 README.md 。 第一次生成四步从截图到代码界面分三块左侧上传区、中间预览区、右侧代码区你只管在中间流转。把截图拖进 Upload Image 区域选一个技术栈比如 React Tailwind点 Generate Code等模型跑完预览区看效果代码区取代码整条生成流程走的是 generate_code.py 里的管道排查问题从这里入手。 换输入源从 URL 和屏幕录制出代码从 URL 直接生成代码在 URL Input 框贴入目标网页地址选定技术栈和生成选项点 Generate from URL等结果出完屏幕录制转交互原型点 Record Screen录下页面的一段操作演示完就停止系统自动切分视频查看生成的可交互前端原型视频拆解和处理都在 backend/video/ 目录录屏结果缺交互时先看这里。✂️ 生成之后选中改、设置调、三种导出选中即改Select and Edit 模式让你直接在预览区改元素点中任意元素改文案和样式效果实时刷新。入口在页面顶部的 Select and Edit 按钮逻辑在 select-and-edit/ 。生成设置右上角齿轮图标打开设置面板模型选择、代码风格等参数都能调改动从下一次生成生效。组件在 settings/ 。三种导出方式点代码区的 Download把完整项目打包带走单文件复制粘进你自己的仓库继续开发换不同设置多生成几轮挑最贴近原稿的那份 翻车记录与补救API 密钥报错现象是选不到模型原因是密钥没写或格式错解法是把 OpenAI、Anthropic、Gemini 三选一写进 .env。生成质量差现象是布局和原稿对不上原因是截图太小或元素发糊解法换高清截图并把模型换更强的。前后端连不上现象是浏览器一直转圈原因是后端没跑在 7001 端口或前端变量没改解法是核对 frontend/.env.local 里的 VITE_WS_BACKEND_URL。更多情况按 Troubleshooting.md 里的排查清单走。一张截图进一个页面出第一个原型不必再逐像素抄。项目总览README.md设计文档design-docs/general.md示例文件frontend/src/tests/fixtures/仓库还在持续强化 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），仅供参考