截图直接变代码：Screenshot to Code
Screenshot to Code 是一个把设计稿截图直接转成前端代码的开源项目，来自独立开发者 abi，目前在 GitHub 上拥有 76k 星和 9.3k 分支，采用 MIT 协议，是「截图 → 代码」这个方向里被验证得最彻底的工具之一。它做的事情一句话就说得清：丢进去一张截图，输出一套能直接跑的代码。支持的目标栈覆盖 HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind 等主流组合。
项目由一个 FastAPI 后端和一个 React + Vite 前端组成。后端负责把截图交给大模型做视觉描述与代码生成，前端提供拖拽上传、多区域圈选编辑的交互界面。底层模型可以在 OpenAI、Anthropic Claude、Google Gemini 之间切换，也可以对接自定义的 OpenAI 兼容端点。仓库非常活跃，最近一次提交落在 2026 年 7 月底，累计超过 1400 次提交，默认模型组合也在持续用真实评估集对标更新。
三个最惊艳的能力
能一块一块地圈选编辑。上传一张复杂页面后，可以直接在图上框选某个区域单独重新生成，而不是整页重来。只动按钮、不碰整张卡片的排布，这种局部重生成的粒度，改样式时非常省事。
输入源不止静态截图，还支持屏幕录像。录一段网页在真实交互下的操作，它能把它转成一个可点击的功能原型。配合 Gemini 做素材提取、用 Replicate 做背景移除和图片编辑，这个工具把「设计稿 → 原型」的路径铺得比想象中更宽。
模型和端点完全可配置。后端通过 OPENAI_BASE_URL 就能把请求导向任意一个兼容地址，也可以在前端的设置面板里直接填 key 和代理地址。对受网络条件限制的开发者来说，这个可移植性比默认值本身更重要。
白物集里的真实用法
白物集网站是深色优先的 Apple 风设计系统。设计令牌是写死的常量：画布近黑 #0a0a0c，主强调色青 #0099cc，导航栏用了 backdrop-filter 毛玻璃，卡片是 12px 圆角加细边框，响应式 auto-fill 网格排布，背景是两个径向渐变，浅色主题通过 data-theme="light" 可选并持久化到本地。
我们在做页面时有一条固定的「设计稿 → 代码」链路：先用一个内部技能把页面或架构图渲染成 HTML，在浏览器里打开，截图当作配图。这里的截图是「设计输出」。但反过来，当我们要把一张参考图、或别人家的页面还原成自己的组件时，就得手写 JSX 和 Tailwind——这是整条链路里最耗时的一环，结构要重搭、令牌要重对齐、间距要一个个调。
Screenshot to Code 补的正是这一段。把已经看到的视觉稿直接转成可继续改的代码，而不是从零搭结构。生成出来的 Tailwind 里那些颜色和圆角值，落回我们的设计常量体系后能保持一致。视觉语言一旦固化在代码里，比截图一改就要重画一遍省事得多，也避免了「图是图、代码是代码」两边漂移的老问题。
适合与不适合
适合：快速原型；把一个静态设计稿变成可点击的前端；还原参考页面的骨架；给设计系统批量生成组件范例；以及在「图已经画好、代码还没写」这个真实中间态里，省掉搭框架的时间。
不适合：需要精确控制像素级间距、大量自定义交互和复杂状态管理的正经业务页。生成码是好起点但不是终态，复杂逻辑还是要手动接管。另外它依赖大模型调用，成本比纯手写是增加的；模型的输出质量直接决定了还原度上限，越复杂的稿子越要靠人工收尾。
快速上手
- 克隆仓库：
git clone https://github.com/abi/screenshot-to-code - 配好至少一个 key（OpenAI、Anthropic、Gemini 选一），推荐再加 Gemini 和 Replicate
- 启动后端：
cd backend && poetry install && poetry run uvicorn main:app --reload --port 7001 - 启动前端：
cd frontend && pnpm install && pnpm dev - 浏览器打开本地端口，粘贴一张截图，选好目标技术栈，点 Generate
不想本地折腾的话，它有个官方托管版 screenshottocode.com,粘贴即可用,适合先试效果再决定要不要自托管。