完蛋，GitHub 70000+ star，我把你（AI）当朋友，你却要代替我，前端同学这下彻底蹦不住了，真的不留一点活路！！！

嗨，我是小华同学，专注解锁高效工作与前沿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、提效改版都非常给力。

项目地址

https://github.com/abi/screenshot-to-code