如何用截图生成网页？screenshot-to-code 上手指南

如何用截图生成网页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 就是为这种场景做的上传一张界面截图AI 直接生成对应的 HTML、React 或 Vue 代码。下面是从克隆仓库到第一次生成完成的完整动线。什么时候用它最值需要参考图快速还原页面时它是最省事的选择。输出格式覆盖 HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap 和 Ionic Tailwind也可以喂网站录屏产出带交互的原型。个人项目里能跑就行的场景它基本够用。从零到第一次生成的完整动线先拿代码并配好密钥git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code/backend echo OPENAI_API_KEYyour-key .env poetry install密钥 OpenAI、Anthropic、Gemini 三者至少配一个即可配得越多应用自动挑到的模型组合越强想要复用截图里的真实 logo 和配图建议加上GEMINI_API_KEY。装完后在 backend 目录运行poetry run python start.py后端默认监听 7001 端口这个终端要一直开着。另开一个终端启动前端cd frontend pnpm install pnpm dev起来后打开http://localhost:5173。把截图拖进上传区也可以填图片 URL在右侧设置里选输出格式默认 HTML Tailwind然后点生成。整个过程大约 10 到 30 秒出来的代码可以在代码区直接复制也能下载整套文件。让生成结果更好用的几个调法元素太密怕遗漏先裁剪关键区域单独上传生成后手动拼成完整页面。想让页面复用截图里原有的 logo 和图片在backend/.env配GEMINI_API_KEY生成时会自动从截图里提取真实素材。想换生成用的模型看 backend/agent/providers/ 目录每个 provider 对应一组代码生成变体具体模型与费用上限在 backend/config.py 里。样式错乱先在设置里核对 Tailwind 版本再手动改生成的 CSS 类。交互逻辑不对AI 只负责把截图还原成静态结构点击、表单这类行为需要自己补。常见情况速查现象可能原因处理办法生成的代码不完整截图模糊或元素过多裁剪到关键区域后重新上传样式错乱Tailwind 版本不匹配在设置里调整版本或手动改 CSS 类本地跑得慢模型与设备配置受限换一家 provider或先简化截图7001 端口被占用已有服务占着该端口start.py会自动找下一个可用端口以终端打印为准前端连不上后端后端主机或端口有变化修改frontend/.env.local里的VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL写在最后如果你经常要把参考图变成可跑的页面值得亲手跑一遍克隆仓库、配一个密钥、生成第一张页面。生成结果算起点交互和细节留给人手打磨。【免费下载链接】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），仅供参考