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