screenshot-to-code 实操指南:3 步完成截图转代码,从本地部署到第一版页面【免费下载链接】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 就是做截图转代码的开源工具,顺带支持设计稿还原和录屏转原型。适合想快速出原型的前端开发者、设计师,以及需要把竞品界面改成内部页面的团队。下面按跑起来 → 出代码 → 迭代改三步走,每步只保留真正要执行的命令。 第 1 步:两条路线跑起本地服务装了 Docker 的话,从仓库根目录执行下面 4 条命令,约 5 分钟后打开 http://localhost:5173 就能用:git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build至少需要一个模型 API 密钥(OpenAI、Anthropic、Gemini 三选一)。想要更高的还原度,官方建议再补 Gemini 和 Replicate 的 key:前者负责从截图里提取真实的 logo 与图片,后者负责图片生成和去背景。想改代码或自托管,走本地路线,在 backend 目录执行:cd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001playwright 那步装的是无头 Chromium,给截图预览自检用,可跳过但建议保留。再到 frontend 目录执行pnpm install和pnpm dev,浏览器访问同一地址。后端接口的完整列表在 backend/routes/,想改端口或加路由从那里入手。 第 2 步:上传截图,选技术栈,拿到第一份代码进入页面后,输入区支持本地图片、网页 URL 和屏幕录制三种来源。技术栈在 HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind 六种里选,默认第一种,也最通用,点生成即可。生成前的几个选项,各解决一类问题:变体数量:一次出多份候选代码,解决一次不满意只能重来的问题,适合对还原度挑剔的场景;技术栈切换:输出必须匹配现有项目时,直接换到 React 或 Vue;截图预览:生成后 agent 自己打开无头浏览器核对渲染效果,长页面更有保障,Chromium 没装时该功能自动跳过,不影响出码。 第 3 步:对话式修改,不用从头再生成第一版拿到后,在历史区继续输入把导航改成深色这类指令,模型基于上一版代码增量修改,而不是重画整页。不想用文字描述时,预览区还支持点选具体元素再下指令,设计师指哪改哪,省掉我刚才说的那个按钮的沟通成本。生成链路本身是标准的 agent 循环:读图、写代码、调工具自检,想看每一步发给模型的提示词,翻 backend/prompts/ 即可。⚙️ 进阶:换模型、接录屏、调前后端连接点齿轮图标进设置面板,可以在线填各家 API key、切换生成模型,Gemini、GPT、Claude 系列都在列表里,面板同时显示截图预览是否可用。录屏转原型是个隐藏玩法:对着一个网站的交互录十几秒屏,生成出来的页面带基础交互,需要 Gemini key。前端默认连ws://127.0.0.1:7001,后端挪了端口就在 frontend/.env.local 里改VITE_WS_BACKEND_URL。界面组件想定制,去 frontend/src/components/ 找对应文件。 下一步:评测、设计文档与社区想验证不同模型组合的效果,项目自带评测集和对比工具,入口在 backend/evals/;对 agent 工具调用的流程好奇,先读 design-docs/ 下的几篇设计文档。有 bug 或功能想法,直接到仓库提 issue,这也是贡献代码最快的入口。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 screenshot-to-code 实操指南:3 步完成截图转代码,从本地部署到第一版页面
screenshot-to-code 实操指南:3 步完成截图转代码,从本地部署到第一版页面【免费下载链接】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 就是做截图转代码的开源工具,顺带支持设计稿还原和录屏转原型。适合想快速出原型的前端开发者、设计师,以及需要把竞品界面改成内部页面的团队。下面按跑起来 → 出代码 → 迭代改三步走,每步只保留真正要执行的命令。 第 1 步:两条路线跑起本地服务装了 Docker 的话,从仓库根目录执行下面 4 条命令,约 5 分钟后打开 http://localhost:5173 就能用:git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build至少需要一个模型 API 密钥(OpenAI、Anthropic、Gemini 三选一)。想要更高的还原度,官方建议再补 Gemini 和 Replicate 的 key:前者负责从截图里提取真实的 logo 与图片,后者负责图片生成和去背景。想改代码或自托管,走本地路线,在 backend 目录执行:cd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001playwright 那步装的是无头 Chromium,给截图预览自检用,可跳过但建议保留。再到 frontend 目录执行pnpm install和pnpm dev,浏览器访问同一地址。后端接口的完整列表在 backend/routes/,想改端口或加路由从那里入手。 第 2 步:上传截图,选技术栈,拿到第一份代码进入页面后,输入区支持本地图片、网页 URL 和屏幕录制三种来源。技术栈在 HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind 六种里选,默认第一种,也最通用,点生成即可。生成前的几个选项,各解决一类问题:变体数量:一次出多份候选代码,解决一次不满意只能重来的问题,适合对还原度挑剔的场景;技术栈切换:输出必须匹配现有项目时,直接换到 React 或 Vue;截图预览:生成后 agent 自己打开无头浏览器核对渲染效果,长页面更有保障,Chromium 没装时该功能自动跳过,不影响出码。 第 3 步:对话式修改,不用从头再生成第一版拿到后,在历史区继续输入把导航改成深色这类指令,模型基于上一版代码增量修改,而不是重画整页。不想用文字描述时,预览区还支持点选具体元素再下指令,设计师指哪改哪,省掉我刚才说的那个按钮的沟通成本。生成链路本身是标准的 agent 循环:读图、写代码、调工具自检,想看每一步发给模型的提示词,翻 backend/prompts/ 即可。⚙️ 进阶:换模型、接录屏、调前后端连接点齿轮图标进设置面板,可以在线填各家 API key、切换生成模型,Gemini、GPT、Claude 系列都在列表里,面板同时显示截图预览是否可用。录屏转原型是个隐藏玩法:对着一个网站的交互录十几秒屏,生成出来的页面带基础交互,需要 Gemini key。前端默认连ws://127.0.0.1:7001,后端挪了端口就在 frontend/.env.local 里改VITE_WS_BACKEND_URL。界面组件想定制,去 frontend/src/components/ 找对应文件。 下一步:评测、设计文档与社区想验证不同模型组合的效果,项目自带评测集和对比工具,入口在 backend/evals/;对 agent 工具调用的流程好奇,先读 design-docs/ 下的几篇设计文档。有 bug 或功能想法,直接到仓库提 issue,这也是贡献代码最快的入口。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考