screenshot-to-code10 分钟把设计截图跑成可运行页面【免费下载链接】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设计师丢给你一张 PNG你要花半天量边距、手写 Tailwind 类名这是前端日常里最常见的消耗。screenshot-to-code 就是干这件事的上传截图、设计稿、Figma 文件甚至一段屏幕录屏它会按你选的技术栈生成页面代码浏览器里直接可预览。整体是 React/Vite 前端加 FastAPI 后端的结构配一个 API Key 就能在本地跑起来。 先跑起来Docker 部署Docker 路径最省事在项目根目录执行两条命令echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build访问 http://localhost:5173 就能用。注意这种方式不适合开发文件改动不会触发重建。想改源码就走本地模式后端在 backend/ 目录cd backend poetry install poetry run uvicorn main:app --reload --port 7001另开一个终端启动前端cd frontend pnpm install pnpm dev密钥也可以不写进 .env应用加载后点设置面板齿轮图标填入即可。能输出什么技术栈与模型代码生成支持六种技术栈技术栈说明HTML Tailwind默认组合最常见HTML CSS不使用工具类的传统写法React Tailwind组件化项目Vue TailwindBetaBootstrap快速出原型Ionic Tailwind移动端方向Beta模型方面代码生成默认提供 Gemini 3 Flash Preview / Gemini 3.1 Pro Preview、GPT-5.5 / GPT-5.4 Mini 和 Claude Opus 系列实际可选项取决于你配了哪些 Key图片生成走 Replicate 的 z-image-turbo。 上手建议密钥配置OpenAI、Anthropic、Gemini 三者至少配一个四把 Key 全配齐含 Replicate时每次生成会自动挑选更强的模型组合并解锁截图资产提取、抠图等功能。模型怎么选只关心还原精度就优先 Gemini这是 README 明确推荐的只配单一 Key 时输出也只有该厂商的模型。关键配置项后端换端口后要同步修改 frontend/.env.local 里的VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URLWindows 下 .env 需存为 UTF-8否则会报编码错误。自检能力本地装好 Chromiumpoetry run playwright install chromium后Agent 会在无头浏览器里渲染自己生成的页面做视觉自查Docker 镜像里已预装。适合谁用做快速原型的后端或前端开发、想把想法变成可点击原型的产品与设计同学都比较合适。典型场景是把新闻站的复杂布局、社交 App 的信息流或电商商品页转成代码先看到效果再决定往哪个方向细化。【免费下载链接】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），仅供参考