项目概述

screenshot-to-code 是一款开源小工具，只要上传一张网页截图、Figma 设计稿，甚至是一段屏幕录像，它就能借助最新的大模型（Claude Sonnet 3.7 / GPT-4o）在几秒内还原出干净、可直接运行的前端代码。
目前已支持：

HTML + Tailwind / CSS
React + Tailwind
Vue + Tailwind
Bootstrap / Ionic / SVG

如果你想先体验效果，作者还提供了在线托管版 screenshottocode.com（付费），上传即出码，零门槛尝试。

问题背景：从 0 到 1 的切图之痛

设计师只给 PNG，切图 + 标注耗半天？
用低代码平台拖拽，生成的代码难以维护？
自己写，重复劳动、样式微调时间 > 业务逻辑？

screenshot-to-code 把最耗时的“视觉 → 代码”过程完全自动化，让开发者专注业务，让设计师直接验证可行性。

功能亮点

多模型双保险
一键切换 Claude 3.7 或 GPT-4o，生成结果可对比择优。
多栈输出
同一张图，可同时生成 Tailwind、React、Vue 等多版本代码，方便不同技术栈团队。
视频 → 原型（实验功能）
录一段网站交互视频，AI 自动还原可点击原型，动画/状态同步保留。
本地 / 云端两用

不想传图？docker-compose up 本地跑。
想省事儿？在线版打开即用。

Mock 模式
调试时开启 MOCK=true，不消耗任何 API Token，离线也能跑通流程。

技术细节一瞥

前端：React + Vite，实时预览、代码高亮、一键复制。
后端：FastAPI，WebSocket 流式返回，边生成边渲染。
AI 调用：

图像理解：Claude 3.7 / GPT-4o Vision
图片生成：DALL-E 3 / Flux Schnell（可选，用于插图）

部署：

本地开发：Poetry + Node 经典组合。
一行 Docker：docker-compose up -d --build 即可在 5173 端口访问。

安装与使用

本地 3 分钟上手

克隆仓库

git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

起后端（需要 Python 3.10+ & Poetry）

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。

应用案例

更多示例与视频演示见项目 Examples。

项目地址

GitHub 开源仓库（MIT 协议）：

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

在线体验（付费，无需安装）：

https://screenshottocode.com

柏虎资源网

专注编程学习，Python、Java、C++ 教程、案例及资源

把设计稿扔进去—3 秒生成前端代码:screenshot-to-code 深度体验