screenshot-to-code：把界面截图快速还原成可继续开发的前端代码
一分钟看懂
screenshot-to-code 是一个面向前端原型和界面复刻的开源工具。你可以给它一张网页截图、设计稿或 Figma 界面，也可以提供一段屏幕录制，它会借助多模态 AI 分析页面结构、颜色、间距和组件关系，再生成能够在浏览器中运行的代码。
它支持 HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap 以及 Ionic + Tailwind 等输出形式。它最有价值的地方不是“一键生成最终产品”，而是把从视觉稿到第一版代码的机械工作压缩掉：先得到一个接近原图、可以运行和编辑的基础版本，再由开发者补充交互、响应式适配、组件抽象和工程规范。
你可以用它做什么
- 快速还原参考页面：上传截图后生成可运行页面，用来搭建活动页、落地页或后台界面的第一版。
- 把设计稿变成原型：将 Figma 导出的界面图转成前端代码，帮助设计和开发更快验证布局与视觉效果。
- 从录屏恢复交互流程：根据页面操作录屏生成可点击的原型，适合演示产品流程或验证需求。
- 辅助迁移旧页面：先把旧系统界面还原为现代前端结构，再逐步替换真实数据和业务逻辑。
- 学习界面实现方法：对照原图与生成结果，观察布局、样式和组件如何落到代码中。
主要能力
项目由 React/Vite 前端和 FastAPI 后端组成。后端负责调用视觉模型理解输入素材并生成代码，前端提供上传、预览和迭代修改界面。除了 OpenAI、Anthropic、Gemini 等模型提供方，它还可以结合 Replicate 处理图片生成、编辑或去背景等任务。
如果安装了 Chromium/Playwright，生成代理还能把页面真正渲染出来，再根据视觉结果继续修正。这个过程比只生成一次代码更接近“边看边改”，尤其适合处理间距、字号和整体布局偏差。但最终质量仍与输入截图的清晰度、模型能力、提示信息和目标页面复杂度有关。
适合哪些人
- 需要频繁制作页面原型的产品经理、独立开发者和创业团队。
- 想减少重复切图与基础布局工作的前端开发者。
- 希望快速验证设计方案，但暂时没有完整前端资源的设计师。
- 需要理解或迁移现有界面的团队。
它不太适合直接生成对安全、无障碍、复杂状态管理或像素级一致性要求极高的正式系统。复杂产品仍需要开发者理解业务并进行工程化改造。
怎么开始使用
项目提供在线版本，也可以在本地运行。自部署时需要分别安装前端与后端依赖，并配置至少一个受支持的模型 API Key。选择模型时，可以根据视觉理解能力、费用和数据合规要求决定；如果需要处理素材提取或视频输入，官方说明中尤其提到了 Gemini 相关能力。
实际使用时，建议先从单个、边界清晰的页面开始：上传高分辨率截图，选择目标技术栈，生成后先检查整体结构，再逐步提出具体修改。不要在第一轮就同时要求它完成真实接口、权限、复杂动画和全套响应式布局，这样更容易获得可控结果。
使用前需要知道
截图只呈现某一时刻的视觉状态，无法完整说明页面语义、交互逻辑、异常状态和移动端规则。因此生成结果应当被视为开发起点，而不是无需审查的成品。上线前仍要检查代码结构、响应式表现、可访问性、浏览器兼容性、性能和安全问题。
使用云端模型会产生 API 费用，也意味着截图可能被发送给相应模型服务。包含内部系统、客户信息或其他敏感数据时，应先确认数据政策或使用符合组织要求的模型环境。复刻第三方页面时，还要注意商标、图片、字体和整体设计的授权边界。