嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！
Screenshot to Code 是一个 AI 驱动的开源工具，用于将截图、Figma 设计稿甚至屏幕录制内容，迅速转换为干净的、可用的前端代码。它支持多种技术栈，搭配 GPT‑4 Vision、Claude Sonnet、DALL‑E 3，实现了从视觉到代码的桥梁 。
应用场景
- 设计快速迭代：UI 产出图快速成型页面，缩短设计开发交接周期。
- Hackathon 快速建站：临时展示页、Demo、PPT 页面生成利器。
- 样式迁移改造：将 Bootstrap 布局改为更现代的 Tailwind/React 版本。
- 教育学习辅助：了解前端结构，拿到示例代码模仿练习。
- UI设计→一键代码转换：从 Figma、Photoshop 或手绘 mockup，快速产出页面原型。
- 旧站改版复原：将已有页面截图，重构现代前端框架版本。
- 快速原型验证：从产品经理图纸直接生成可运行 HTML，以便快速演示。
- 开源作品参考学习：获取干净示例代码，学习排版结构。
核心功能
- 多语言多框架支持：HTML + Tailwind、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic、SVG 等
- AI 模型多选：支持 Claude Sonnet 3.7、GPT‑4o；可对比输出效果
- 视频转原型：可将 30s 录屏拆帧，生成动态原型代码
- 本地运行 & Mock 模式：离线部署，不怕费用无限制；并支持 mock 模式节省调用成本
- 高精度输出：经实测表单、Bootstrap 布局辨识率高，视觉识别准确
- 自定义 Prompt 轻松上手：改写 prompts.py 支持如 Ant Design、Tailwind 混搭格式
- 生成 SVG 协助占位图形：内置 DALL‑E 3 随机占位图生成
- 适配 UI 复杂度高：实测多控件表单、电商卡片等布局切图效果优异
技术架构图
架构及优势
| 模块 | 技术栈 | 优势总结 |
| 前端 | React + Vite | 热重载、实时预览，UX 流畅 |
| 后端 | FastAPI + Python + Poetry | 快速启动、自包含依赖管理 |
| AI 模型 | GPT‑4 Vision / Claude Sonnet | 超强视觉 + 代码理解能力 |
| 支持架构 | 多种前端栈输出 | 满足不同开发者需求 |
| 视频支持 | 录屏拆帧分析输入 | 原型生成更生动 |
| 可扩展 prompts | prompts.py 模块化编写 | DIY 干预能力强 |
界面演示
与同类项目对比
| 项目 | 输入形式 | 输出技术栈 | 本地运行 | 视频支持 | AI 模型 | 优势 |
| abi/screenshot-to-code | 截图、mockup、录屏 | HTML/CSS/Tailwind/React/Vue/Bootstrap/Ionic/SVG | ✅ | ✅ | GPT4‑Vision / Claude Sonnet | 覆盖面广、支持视频、AI 模型强、易扩展、社区活跃（70K★） |
| emilwallner 扩展版 | 截图 | HTML + Bootstrap | ✅ | ❌ | pix2code NN | 专注 Bootstrap，精度高（~97%） |
| OmniGPT / Veo3 类型 | 截图 + 设计优化建议 | HTML/CSS + Tailwind | ❌（服务型） | ❌ | 私有 GPT/LLM | 帮助设计优化，非本地开源 |
小结
Screenshot‑to‑Code 真正实现了“AI 助力前端开发”的落地：上手简单、功能强大、可本地部署、自定义方便，尤其视频转原型功能填补了空白。 即便只是开发者工具，也能帮助快速生成干净结构，用来学习、制作 Demo、提效改版都非常给力。
