3 步把设计稿变成能跑的页面代码：screenshot-to-code 实战教程

3 步把设计稿变成能跑的页面代码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拿到一张设计稿你是不是还在手写 CSS间距、字号、配色值一个个抠一个 1440px 的首页就能耗掉半天。screenshot-to-code 是一个基于 AI 视觉代码生成的截图转代码工具把截图、设计稿、Figma 导出图直接转成可运行的前端代码还支持把屏幕录屏变成可交互原型。 这个截图转代码工具能做什么按真实使用场景分三组说网页复刻。上传一张公开页面的 1440px 截图约 30 秒内返回结构完整的 HTML 代码布局、间距、字号基本对齐。适合先要一个差不多的版本的场景后续再精修。原型快速搭建。产品同学或非前端角色把草稿图、竞品界面照片丢进去直接产出 React Tailwind 或 Vue Tailwind 的代码跑起来就能在评审会上演示不用再等前端排期。Figma 落地。对从 Figma 交付设计的团队来说它就是一个 Figma 转 HTML 工具把设计稿导出为 PNG 投喂拿到的设计稿转前端代码首版通常按常规组件结构组织方便接着改。输出技术栈共 6 种HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind在生成前的下拉框里选。另外还有一个实验特性录一段网站操作过程它能还原出可点击的交互原型。⚡ 三种启动方式三选一先准备好至少一个模型 API 密钥OpenAI、Anthropic、Gemini 三选一即可。方式一Docker最省事只使用不改代码git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build上面 4 行完成克隆、写入密钥并一键拉起前后端结束后访问 http://localhost:5173 即可。方式二本地前后端开发模式后端是 Python FastAPI 项目位于 backend/cd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001再开一个终端跑前端frontend/React Vitecd frontend pnpm install pnpm dev带--reload启动改代码即时生效适合想给这个项目贡献代码的人。方式三前后端分离部署后端部署在远程机器时前端不用整套本地起只要在frontend/.env.local里把VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL指到后端地址就行。 用好它的 3 个关键点1. 密钥配得越多可选模型越多应用会按你实际拥有的密钥自动组合模型。只配一个密钥就用该家的模型多配几个则同一张截图可以并排对比多家模型的输出。官方推荐加配 Gemini它除了代码生成还负责从截图里提取真实的 logo 和图片资源录屏模式也依赖它。2. 让 AI 自己检查作业装好 Chromium 后后端自带截图预览能力agent 会在无头浏览器里渲染自己刚生成的页面看到效果后再修正错误。前端设置面板齿轮图标里能看到这个能力当前是否可用。3. 配置只有两个地方模型密钥在backend/.env或前端设置对话框里改前后端连接地址在frontend/.env.local里改没有别的配置文件。适合谁 / 不适合谁适合需要先跑起来的场景设计交付、快速原型、旧页面逆向拿到的是质量不错的初稿但像素级对齐和复杂交互仍需人工打磨。如果你的目标是 100% 还原设计稿或者期望生成的代码直接上生产、一行不改那它帮你省的是前一半时间不是全部。先拿一张你手写过 CSS 的页面截图试试看输出和你原来的代码差多远比看十篇评测都有感觉。【免费下载链接】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），仅供参考