丢一张截图，还你一份能跑的代码
更新于 2026-08-30 · 数据来源：GitHub API（采集于 2026-08-30）
← 返回汇总多模态 LLM 时代的第一个现象级应用
截图、设计稿、Figma、甚至屏幕录制 → 干净可用的前端代码（HTML+Tailwind / React / Vue / Bootstrap / Ionic 六种栈）。2023 年 11 月 GPT-4V 刚开放视觉能力时爆火的「品类定义者」，76k stars 至今仍在演进。适合前端原型起手、设计稿还原、旧界面现代化改造的场景。
29 位贡献者 · MIT 许可 · 最近推送 2026-08-14 · 默认模型池：Gemini 3 Flash / 3.1 Pro（README 官宣最佳）、GPT-5.5 / 5.4 Mini、Claude Opus 4.6 / 4.8、z-image-turbo（Replicate）
一张精修的设计稿，前端手工还原要数小时：量间距、挑颜色、对齐栅格、导出资源。设计师的像素意图在传递中层层丢失。
产品想法验证最贵的是第一版 UI。白板草图 / 手绘线框到可点击原型之间隔着一整个前端工程的启动成本。
老系统、竞品参考、只有截图没有源码的遗留页面——想现代化重写，第一步「把它变成代码」就是拦路虎。
答案粗暴而有效：把截图 base64 进 prompt，让多模态 LLM 直接「看图写码」——再用 agent 循环和资产提取把「能用」打磨成「好用」。
交互精髓：用户在渲染结果上框选局部追加指令（「这个按钮改成蓝色」），而不是整页重生成——上下文窗口里保留完整代码 + 选区截图，局部 diff 修正。
这一步是「玩具」与「工具」的分水岭：纯看图生成只保证代码看起来像，自检循环让模型知道自己生成的页面实际渲染成什么样——布局塌了、字体小了，自己看见自己改。这是项目从 v1 到今天最重要的架构演化。
生成页面里的 logo、产品图、图标，不是让模型「画一个像的」——而是从原截图里抠出真实位图资源直接复用（asset_extraction.py）。README 明确推荐 Gemini 就为此：还原度从此前的「风格像」跃升到「素材真」。配套 Replicate 做背景去除、图像编辑、缺省资产生成（z-image-turbo）。
录一段网站操作屏摄，抽帧描述每步界面状态，生成带交互的功能原型（按钮可点、状态切换）——从「还原一张静态图」升级到「还原一段使用过程」。需 Gemini key（视频理解）。
两把武器都吃模型红利：图像理解越强、视频理解越强，产出越接近可用——这也是为什么默认模型池两年间从 GPT-4V 一路换到 Gemini 3 / GPT-5.5 / Opus 4.6。
| Key | 必需性 | 解锁能力 |
|---|---|---|
GEMINI_API_KEY | 三选一，强烈推荐 | Gemini 3 Flash / 3.1 Pro 代码生成；真资产提取；视频模式 |
OPENAI_API_KEY | 三选一 | GPT-5.5 / GPT-5.4 Mini 变体 |
ANTHROPIC_API_KEY | 三选一 | Opus 4.6 / 4.8 等变体 |
REPLICATE_API_KEY | 强烈推荐 | 图像生成 / 背景去除 / 图像编辑（缺了这三类后处理不可用） |
evals/ 与 costs/——代码生成质量与成本都有回归评估（run_evals.py），这在同类玩具项目里罕见# 任选一把 key 起步，配齐四把最佳 $ echo "GEMINI_API_KEY=your-key" > .env $ echo "OPENAI_API_KEY=sk-..." >> .env $ docker-compose up -d --build # → http://localhost:5173
「视觉 → 代码」已是 AI 编码的基础设施级能力，这个项目是品类的活化石与教科书：从 GPT-4V 单发 prompt 到 agent 自检循环 + 资产提取 + 视频理解的三年演进路径，本身就是多模态应用工程的最佳案例研究。开源版会长久存在——它是能力演示、教育样本与自托管选项，但商业化的主战场已被资本更厚的玩家占据。