拖一张截图，直接出代码！74k Star 的 AI 设计还原神器

设计师丢一张图，工程师用两天抠像素——这个「UI 像素还原」的无谓消耗，终于有了一个开源解法。

screenshot-to-code 是一个把截图直接转成干净代码的工具，GitHub 累计 74.3k Star，MIT 协议，前端用 React/Vite，后端 FastAPI，支持的输出栈覆盖了 HTML+Tailwind、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic、SVG，可以说主流前端方案全收了。

用法极度简单：拖一张截图进去，选目标技术栈，点生成，拿代码。全程不用写一行 CSS，真正把「设计稿→可运行骨架」这件事从天级压缩到分钟级。

模型侧支持 Gemini 3、Claude Opus 4.5、GPT-5.x，DALL-E 3 或 Flux 用于生成匹配图片。有意思的是它的实验性功能——录屏转原型：录一段竞品 App 的操作，它尝试生成可交互的代码，适合竞品调研和快速 POC。

用 Docker 跑起来一行搞定：

git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
# 打开 http://localhost:5173

不想本地装的，直接去 screenshottocode.com 用在线版，带上你自己的 API Key 就能跑。

当然要清醒：生成结果不等于可以直接上生产，Code Review 和组件抽象还是得人来。但它把「从零搭骨架」的阶段彻底省掉了——这个阶段以前靠人盯像素，现在让 AI 先出一个可用版本，人再介入微调，效率提升是实质的。

GitHub：https://github.com/abi/screenshot-to-code

GitHub: https://github.com/abi/screenshot-to-code