Screenshot to Code 完整指南：3 步本地跑通截图转代码，AI 生成的界面代码能直接用吗

Screenshot to Code 完整指南3 步本地跑通截图转代码AI 生成的界面代码能直接用吗【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-codeScreenshot to Code 是一个用 AI 视觉模型把截图变成前端代码的开源工具丢进一张界面截图它能输出 HTML Tailwind、React 组件这类干净可运行的代码。本文带你三步在本地把它跑起来并说清楚它擅长什么、边界在哪。 先看它解决什么问题设计稿往往在设计师手里前端开发要手动把每个盒子、间距、字号翻译成代码这段重复劳动正是 Screenshot to Code 接手的部分——你只负责把稿子传上去。输入不只是截图除了静态截图它还能接收一段网站操作录屏并把它转成可交互的功能原型Figma 设计稿同样可以作为输入。如果你的需求是这个页面点完会发生什么录屏比单张截图能描述得更准确。输出的技术栈一次说清支持的输出格式包括 HTML Tailwind默认推荐、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap 和 Ionic Tailwind全部可以在前端设置面板里切换不需要动后端。 三分钟本地部署从 API Key 到浏览器仓库是 React/Vite 前端 FastAPI 后端唯一硬性前置是至少一个模型厂商的 API KeyOpenAI、Anthropic、Gemini 三选一。先拿到代码本文使用 gitcode 镜像源git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code第一步写入 API Key后端从backend/.env读取密钥。优先写 Gemini 的 Key——官方推荐且它影响截图资产提取和视频模式cd backend echo GEMINI_API_KEYyour-key .env可以再加 OPENAI_API_KEY 或 ANTHROPIC_API_KEYKey 越多单次生成能对比的模型变体越多。Replicate 的 Key 可选用于图像编辑和去背景。第二步分别启动后端和前端后端负责模型调用与代码生成逻辑装好依赖后在 7001 端口启动Linux 上需要顺带安装 Chromium 以启用截图预览poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001前端在另一个终端跑cd frontend pnpm install pnpm dev浏览器打开 http://localhost:5173 即可使用。备选Docker 一条命令只想体验、不参与开发的话Docker Compose 一次拉起全部服务echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build️ 亲测一次上传到出码要多久上传截图并选择输出栈页面顶部的统一输入面板提供四个入口图片上传、文字描述、URL 导入和录屏。选择上传后挑一张设计稿再到设置面板选好技术栈和模型。单屏、清晰、元素边界分明的稿子效果最稳。生成过程与耗时点击生成代码后模型先分析页面布局结构再逐块写出代码整个过程通常需要 10-30 秒。右侧可以直接预览渲染结果、复制代码或导出文件。部署时如果装好了 Chromiumagent 还会渲染出自己生成的页面做视觉比对能明显提升首次生成的质量。 进阶如何切换工具背后的 AI 模型模型从哪里来、在哪里选模型变体来自 backend/agent/providers/ 下的各厂商实现覆盖 Gemini、GPT、Claude 的多个版本。在前端设置对话框里能直接看到当前可用的模型清单以及截图预览是否可用。截图预览与真实资产提取两个值得知道的细节一是截图预览agent 用无头 Chromium 渲染生成的页面、截图和输入稿比对来自我修正二是资产提取模型会把截图里的真实图片比如 logo提取出来直接复用而不是用占位图。两者默认启用但依赖对应的 Key 配置到位。⚠️ 边界与常见坑生成样式错乱时去哪里调先别改代码先改输入检查截图是否模糊、元素边界是否清晰再换一个模型变体重跑对比。想深入调整模型与计费参数时入口是 backend/config.py。它擅长什么、不擅长什么静态布局还原、列表页、卡片和表单类界面是它的强项登录态、接口调用、路由这类交互逻辑不在能力范围内——模型只能看到截图的视觉层。想接 Ollama 本地开源模型的话官方标注效果不佳不推荐。建议从一张简单的单屏界面开始第一次生成用默认技术栈把完整流程走通再逐步尝试录屏输入和多模型对比把生成结果当脚手架用交互逻辑部分仍要自己补完。【免费下载链接】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），仅供参考