完蛋，GitHub 70000+ star，我把你（AI）当朋友，你却要代替我，前端同学这下彻底蹦不住了，真的不留一点活路！！！
原创
完蛋，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、提效改版都非常给力。
项目地址
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
