screenshot-to-code部署教程：截图一键转HTML/React代码（75k星）

📅 2026-08-29 · 🏷️ 截图转代码 · 前端开发 · vibe coding

screenshot-to-code是什么？

老牌开源项目，丢一张网页截图进去，直接输出干净的 HTML/Tailwind/React/Vue 代码。它还支持"录屏转原型"——录一段网站操作的屏幕录像，生成可交互的功能原型。还原度在同类工具里长期领先，75k star 说明一切。

不想折腾本地环境？直接用官方托管版 screenshottocode.com。想自定义、自托管或二开的话，往下看本地部署。

本地部署（Poetry + pnpm）

项目分前后端：React/Vite 前端 + FastAPI 后端。

第一步：配置 API Key

后端 .env 至少配一个模型 Key（OpenAI / Anthropic / Gemini 任选，Replicate 用于生成图片资产）：

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env
echo "REPLICATE_API_KEY=r8_your-key" >> .env

也可以启动后在前端点齿轮图标，在设置弹窗里填写（Replicate 除外，必须写进 backend/.env）。

第二步：启动后端

pip install --upgrade poetry
poetry install
poetry run playwright install chromium
poetry env activate          # 激活输出的虚拟环境命令
poetry run uvicorn main:app --reload --port 7001

Linux 上装 Chromium 需要系统依赖：poetry run playwright install --with-deps chromium（要 sudo/apt）。

第三步：启动前端

cd frontend
pnpm install
pnpm dev

浏览器打开 http://localhost:5173 就能用了。后端换端口的话，改 frontend/.env.local 里的 VITE_WS_BACKEND_URL。

Docker 一键部署

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

起在 http://localhost:5173。注意这种方式适合使用而非开发——改代码不会触发重建。

亮点功能：截图预览自检

装好 Chromium 后（上面 playwright install chromium 那步），应用会自动开启 screenshot preview：AI 渲染自己生成的页面到无头浏览器里，"亲眼看"效果再迭代，还原度明显提升。没装 Chromium 也不会报错，只是跳过该工具，设置弹窗里会显示是否可用。

常见问题

问题	解法
OpenAI 直连不了	设置 OPENAI_BASE_URL 走代理，URL 路径必须含 v1
后端 UTF-8 报错（Windows）	用 Notepad++ 把 .env 编码改为 UTF-8
前端连不上后端	配置 VITE_HTTP_BACKEND_URL 和 VITE_WS_BACKEND_URL
Ollama 本地模型	官方明确不推荐，效果较差

这类"看到什么就生成什么"的工具是 vibe coding 的重要一环，配合 Cloudflare OS自然语言写应用教程可以做到从截图到上线的全流程。装好后想在 IDE 里持续用 AI 生成页面，看Qoder AI编程工具教程。