企业官网建设流程全解析

一张截图出 6 种技术栈的代码：screenshot-to-code 新手从设计稿到原型

【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code

想把设计稿变成页面，你多半得逐像素抄，或者找设计师要标注。截图转代码开源工具 screenshot-to-code 把这件事直接接走：丢一张截图进去，它交回能跑的 HTML、React、Vue 代码。读完这篇，你会把工具跑起来，生成第一个页面，并掌握 4 种输入方式和 3 种导出方式。

📦 它能干什么：截图、设计稿、录屏都转成前端代码

screenshot-to-code 是一个可以自托管的 UI 转代码工具。给一张截图、一份设计稿、一段屏幕录制，它交回一个能直接打开跑的页面。

• 一张图出多框架代码：HTML、React、Vue 都能选，样式走 Tailwind 或 Bootstrap
• 输入不限于图片：贴 URL 可以，录几秒操作也能得到交互原型
• 模型可换：GPT、Claude、Gemini 都能出码，配几个密钥就有几组结果
• 本地部署，密钥在自己手里，截图和代码都不离开你的机器

🐳 部署两条路：Docker 一键，或本地起

Docker 路径（推荐）。装好 Docker 的话，写个密钥文件，一条命令起全套，然后打开浏览器就能用：

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

起来后访问 http://localhost:5173 ，端口和构建细节都写在 docker-compose.yml 里。

本地路径。要改代码、调流程才需要，顺序是克隆仓库、配密钥、起后端、起前端：

git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code

cd backend echo "OPENAI_API_KEY=sk-your-key" > .env poetry install poetry run uvicorn main:app --reload --port 7001

cd frontend pnpm install pnpm dev

前后端都起来后，打开 http://localhost:5173 进入应用。密钥清单和每一步说明见 README.md 。

🚀 第一次生成：四步从截图到代码

界面分三块：左侧上传区、中间预览区、右侧代码区，你只管在中间流转。

1. 把截图拖进 Upload Image 区域
2. 选一个技术栈，比如 React + Tailwind
3. 点 Generate Code，等模型跑完
4. 预览区看效果，代码区取代码

整条生成流程走的是 generate_code.py 里的管道，排查问题从这里入手。

🔗 换输入源：从 URL 和屏幕录制出代码

从 URL 直接生成代码

1. 在 URL Input 框贴入目标网页地址
2. 选定技术栈和生成选项
3. 点 Generate from URL，等结果出完

屏幕录制转交互原型

1. 点 Record Screen，录下页面的一段操作
2. 演示完就停止，系统自动切分视频
3. 查看生成的可交互前端原型

视频拆解和处理都在 backend/video/ 目录，录屏结果缺交互时先看这里。

✂️ 生成之后：选中改、设置调、三种导出

选中即改

Select and Edit 模式让你直接在预览区改元素：点中任意元素，改文案和样式，效果实时刷新。入口在页面顶部的 Select and Edit 按钮，逻辑在 select-and-edit/ 。

生成设置

右上角齿轮图标打开设置面板，模型选择、代码风格等参数都能调，改动从下一次生成生效。组件在 settings/ 。

三种导出方式

• 点代码区的 Download，把完整项目打包带走
• 单文件复制，粘进你自己的仓库继续开发
• 换不同设置多生成几轮，挑最贴近原稿的那份

🩹 翻车记录与补救

• API 密钥报错：现象是选不到模型；原因是密钥没写或格式错；解法是把 OpenAI、Anthropic、Gemini 三选一写进 .env。
• 生成质量差：现象是布局和原稿对不上；原因是截图太小或元素发糊；解法换高清截图，并把模型换更强的。
• 前后端连不上：现象是浏览器一直转圈；原因是后端没跑在 7001 端口或前端变量没改；解法是核对 frontend/.env.local 里的 VITE_WS_BACKEND_URL。

更多情况按 Troubleshooting.md 里的排查清单走。

一张截图进，一个页面出，第一个原型不必再逐像素抄。

• 项目总览：README.md
• 设计文档：design-docs/general.md
• 示例文件：frontend/src/tests/fixtures/

仓库还在持续强化 agent 化生成与多模型对比能力，后续更新值得关注。

【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code