设计稿转代码用 screenshot-to-code 把网页截图变成前端代码【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/gh_mirrors/screen/screenshot-to-code设计师把 Figma 稿丢给你页面结构看着不难但一上手就是整整一天的组件搬运。screenshot-to-code 就是干这个的丢一张网页截图进去它用 AI 帮你生成可用的前端代码省掉大部分重复劳动。 它能干什么一句话定位输入一张截图或一段屏幕录屏输出干净、能跑的前端代码。你上传的内容可以是网页截图PNG/JPG、Figma 设计稿导出图、移动端界面截图甚至实验性的网站录屏视频。它支持的技术栈基本覆盖常见前端场景HTML Tailwind纯静态页适合快速原型HTML CSS不依赖任何框架React Tailwind直接拆成组件最常用Vue Tailwind、Bootstrap适配对应技术栈的团队SVG把界面元素转成矢量图形Ionic Tailwind移动端方向实验性3 步本地跑起来先确认装了 Node.js、Python 3.10 和 PoetryPython 包管理工具。1. 克隆项目git clone https://gitcode.com/gh_mirrors/screen/screenshot-to-code cd screenshot-to-code2. 配密钥并启动后端进入backend目录echo OPENAI_API_KEY你的key .env poetry install poetry run uvicorn main:app --reload --port 70013. 启动前端进入frontend目录yarn install yarn dev打开浏览器访问http://localhost:5173即可使用。想先白嫖试跑、不烧 API 额度用MOCKtrue poetry run uvicorn main:app --reload --port 7001启动后端它会流式返回一段预录制的生成结果适合先熟悉界面。密钥也可以不写 .env前端页面加载后点右上角齿轮图标在设置弹窗里粘贴 API key 也行。如果装了 Docker也可以在项目根目录写好.env后直接docker-compose up -d --build一条命令起全套。一次完整生成怎么走1. 上传素材。首页直接拖图或粘贴剪贴板截图也可以填一个 URL 让它自动截图或把已有代码粘进去做代码转代码。2. 选输出框架。按你的交付场景选做快速演示选 HTML Tailwind产出要进 React 工程就选 React Tailwind——它会把内容拆成组件结构而不是一个大文件。3. 选 AI 模型。推荐 Claude Sonnet 3.5官方标注最佳或 GPT-4O两个都配 key 的话可以同一张图各生成一遍对比效果。4. 填高级提示词可选。比如使用深色模式配色保证移动端适配CSS 类名用语义化命名越具体生成结果越贴近你的要求。5. 等待生成。代码会逐块流式输出到预览区你可以同时看代码标签页和渲染效果不满意可以取消重来或让后端生成多个版本variants挑一个。质量提升清单用清晰原始截图宽度 1200~1920px别用压缩过的图。复杂页面分区域截图单张图信息量小还原度更高。提示词写具体指令别写好看一点这种空话。颜色、字体不对时在提示词里直接指出导航栏背景应为 #fff再重新生成。同图换 Claude 和 GPT-4O 各跑一次取更好的那份。常见疑问现象填了密钥还是报错。排查确认 key 对应账户有额度和权限用 GPT-4 需要账户达到 Tier 1国内网络可设置OPENAI_BASE_URL走代理注意路径要带v1。最后看后端终端日志错误信息都在那里。现象前端能打开但一点生成就没反应。排查99% 是后端没在 7001 端口跑。确认uvicorn main:app --port 7001还在运行换了端口的话记得同步改前端frontend/.env.local里的VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL。现象Windows 下后端启动报 UTF-8 编码错误。排查把.env用 Notepad 打开在编码里选以 UTF-8 编码保存再重启即可。写在最后它适合需要快速还原页面、做竞品原型、或者想把手稿草图先变成可交互页面的开发者和产品同学——省的是重复劳动不是你的判断力。最后温和提醒一句AI 生成的代码上线前仍需人工审查组件拆分、无障碍和交互逻辑都要过一遍别直接照搬。【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/gh_mirrors/screen/screenshot-to-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考