Screenshot to Code

产品简介

Screenshot to Code 是一款将截图、设计稿和屏幕录像直接转换为可运行代码的 AI 工具，支持 HTML/Tailwind、React、Vue、Bootstrap 等主流前端技术栈。由开发者 abi 开源维护，GitHub 标星数超过 3.4 万，是当前最受欢迎的 AI 辅助前端开发工具之一。产品提供官方托管版本screenshottocode.com，无需任何本地配置即可快速体验；同时也支持本地部署，可完全自托管并深度定制。

核心功能

• 截图转代码：上传任意截图或设计稿，自动识别 UI 元素并生成对应的 HTML/Tailwind、React、Vue 或 Bootstrap 代码
• 设计稿解析：支持 Figma 设计稿直接导入，保留布局、颜色、字体等细节
• 屏幕录像转原型：录制网站操作过程，自动生成可交互的可视化原型代码
• 多模型支持：默认使用 Gemini 3 Flash Preview 和 Gemini 3.1 Pro Preview，同时支持 GPT-5.5、Claude Opus 4.6/4.8 等主流大模型
• 本地部署：提供完整的 FastAPI 后端 + React/Vite 前端，可完全自主托管，支持自定义 API Key
• 开源可扩展：项目代码完全开源，支持二次开发和功能扩展

特色优势

Screenshot to Code 的最大亮点在于「所见即所得」的极简工作流——设计师交付一张截图，开发者即可获得一段可直接运行的前端代码，大幅缩短从设计到原型验证的周期。项目支持多种主流前端框架输出，代码结构清晰、可维护性强。此外，产品支持 Gemini、GPT、Claude 三大模型体系，用户可根据成本和质量需求灵活切换。相比动辄收费数十美元的同类商业工具，这款开源工具完全免费，适合个人开发者和小型团队快速搭建原型。

应用场景

• 前端原型快速开发：设计师出图后，开发者在几分钟内即可获得可运行的前端代码，大幅压缩原型制作时间
• 设计稿自动化还原：将 UI 设计师交付的 Sketch/Figma 稿自动转化为 HTML/CSS 代码，减少手工还原工作量
• 竞品分析演示：抓取竞品网站截图，快速生成对应风格的演示页面用于对比分析
• 低代码平台集成：可将生成的代码嵌入低代码平台或内部工具中，提升开发效率
• 技术博客配图演示：博主将文章中的 UI 描述截图，直接转化为可运行的代码片段供读者交互

适用人群

• 前端开发者、UI 设计师、产品经理
• 需要快速验证 UI 想法的创业者和小团队
• 希望通过 AI 提升原型制作效率的技术团队
• 学习现代前端框架（React、Vue、Tailwind）的学生和自学者

出品方

abi（独立开发者），项目采用 MIT 开源协议，托管于 GitHub 平台。

更新动态

项目保持活跃更新，最近版本增强了多模型支持（新增 GPT-5.5 和 Claude Opus 4.8），并优化了屏幕录像转原型的识别准确率。官方托管版本持续运行，团队也在开发付费云服务以支撑项目长期维护。

官网链接

https://screenshottocode.com