设计师提供的往往是 PNG 或 Figma 文件，而开发者则需要花费大量时间进行布局还原、像素微调和样式还原。这一环节既重复又低效。
最近我在体验一款开源项目 —— ，它直接用大模型（Claude 3.7 / GPT-4o）来解决这个问题：
上传一张设计稿或截图，几秒内生成可运行的 HTML、React 或 Vue 代码。
这类项目其实不新鲜，但 screenshot-to-code 的实现方式更接近“生产可用”级别，值得开发者深入了解。
项目概述
| 维度 | 内容 |
|---|---|
| 项目名称 | screenshot-to-code |
| 开源协议 | MIT |
| 支持输入 | 图片、Figma 文件、屏幕录像 |
| 支持输出 | HTML、React、Vue、Tailwind、Bootstrap、Ionic、SVG |
| 模型支持 | Claude Sonnet 3.7 / GPT-4o Vision |
| 在线体验 | （付费版） |
| 本地部署 | 支持 Docker / Poetry / Node.js |
该项目由开发者 abi 创建，核心逻辑是将视觉输入（截图、录屏）通过多模态模型解析为布局结构与样式描述，再生成对应技术栈的代码文件。
核心功能
1. 多模型双引擎
支持 Claude 3.7 与 GPT-4o 双模型切换，生成结果可直接对比，适合开发团队评估不同模型在视觉理解和代码生成上的差异。
2. 多技术栈输出
一次上传可生成多版本代码（如 React + Tailwind / Vue + Tailwind），便于团队根据现有前端架构直接集成。
3. 视频 → 可交互原型（实验功能）
通过录制网站交互视频，AI 能自动识别页面结构与状态变化，重建可点击原型。这在验证交互逻辑或复现竞品界面时尤其有用。
4. 本地 / 云端两种模式
本地运行：开发者可通过 Docker Compose 或 Poetry 本地部署，避免上传设计稿到外部服务器。
在线托管版：无需安装环境，直接上传截图体验出码效果。
5. Mock 模式
支持 MOCK=true 参数，模拟 AI 返回结果，方便测试前后端联调流程。
技术架构
| 模块 | 技术栈 | 功能说明 |
|---|---|---|
| 前端 | React + Vite | 实时预览、代码高亮、一键复制 |
| 后端 | FastAPI + WebSocket | 支持流式生成与实时反馈 |
| AI 层 | Claude 3.7 / GPT-4o Vision | 图像理解与结构解析 |
| 图像生成 | DALL·E 3 / Flux Schnell（可选） | 生成补图或视觉增强 |
| 部署方式 | Docker / Poetry / Yarn | 适合个人与团队部署 |
这种架构使得项目兼具灵活性与可扩展性，开发者可以轻松替换模型接口或扩展输出模板。
安装与快速上手
本地运行（约 3 分钟）
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
后端启动
cd backend
echo "OPENAI_API_KEY=sk-xxx" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
poetry install && poetry shell
poetry run uvicorn main:app --reload --port 7001
前端启动
cd ../frontend
yarn && yarn dev
打开浏览器访问：http://localhost:5173
Docker 一键启动
echo "OPENAI_API_KEY=sk-xxx" > .env
docker-compose up -d --build
默认访问地址：http://localhost:5173
应用场景
| 场景 | 使用方式 | 价值 |
|---|---|---|
| 快速验证设计稿 | 设计师导出 Figma 截图，AI 生成页面 | 验证视觉与响应式布局 |
| 低保真原型生成 | 上传竞品录屏生成原型 | 用于分析交互逻辑 |
| 教学与演示 | 将静态界面自动转成可运行代码 | 辅助教学、技术演示 |
| 前端组件复用 | 从截图中提取组件结构 | 快速搭建 UI 库原型 |
类似项目对比
| 项目 | 输入类型 | 输出格式 | 模型 | 部署方式 | 开源 |
|---|---|---|---|---|---|
| screenshot-to-code | 图片 / 视频 / Figma | HTML / React / Vue | Claude / GPT-4o | 本地 & 云端 | ✅ |
| v0.dev | 文本描述 | React + Tailwind | GPT-4 | 云端 | ❌ |
| Builder.io AI | 设计稿 / 文本 | React / JSX | GPT-4 Vision | 云端 | ❌ |
相比 v0.dev 等云端工具，screenshot-to-code 最大的差异化在于 完全开源可部署，能用于企业内部环境或自定义模型接入。
总结
从截图生成代码并非新概念，但 screenshot-to-code 让这件事更接近落地使用：
它不依赖封闭平台，模型可替换，结果可验证，且部署方式灵活。
对前端开发者而言，它适合用于快速原型验证与UI 组件抽取；
对设计师或产品经理而言，它提供了一种低门槛的可视化到可执行路径。
虽然目前生成代码的质量仍需人工调整，但在“从视觉到可运行”这一链路上，这类工具的价值正不断放大。
项目地址：https://github.com/abi/screenshot-to-code
在线体验：