一张截图生成可运行的 React 页面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 代码还原度较高逐像素对图调样式的时间基本省下来了。工具速览screenshot-to-code 是个可自部署的截图生成代码工具FastAPI 后端加 Vite 前端输入交给大模型输出是可跑的前端项目。三个要点记一下输出覆盖 HTML Tailwind/CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic接 OpenAI、Anthropic、Gemini 任意一家或几家的 key 就能跑输入不只有截图网页 URL、屏幕录制都行用 Docker 跑通第一个生成结果系统要求一句话带过走 Docker 的话 Python 和 Node 都不用单独操心自己搭环境则需要 Python 3.8 和 Node 14。Docker 路径最省事依次执行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.env里至少要配 OpenAI、Anthropic、Gemini 三家中的一家的 key推荐再加GEMINI_API_KEY——它负责从截图里提取真实图片素材录屏模式也必须要它。跑完最后一行等构建结束浏览器打开 http://localhost:5173 就能用了。想自己魔改代码backend 用 poetry 装依赖、配好.env后起 uvicorn7001 端口frontend 用 pnpm dev细节见 backend/README.md。打开页面后选个技术栈比如 React Tailwind上传一张截图点 Generate Code。生成过程走 WebSocket 推状态中间预览和右侧代码区一起更新出来的是完整可下载的文件不是贴一段片段。三个场景实战截图转代码是最基本的路径你拿到一张 UI 导出图想要可维护的组件代码就在上传区丢图、选栈、点生成产出的组件结构和 Tailwind 类名都是可读的直接进项目用。同一张图换个目标栈再跑一遍也能对比效果——生成是带变体的配了多家 key 时每个变体会挑不同模型方便你挑最像原稿的那一版。URL 转代码适合找参考你拿到一个做得不错的站点地址想要同款布局把地址填进 URL 输入框、选栈、点生成它先截页面再走同样的转码流程适合拿来做风格借鉴的起点。录屏转原型是隐藏玩法 ✨你有一段产品演示录屏想要个能点的交互原型点 Record Screen 录完自动抽帧处理输出带交互状态的前端原型。这个模式依赖 Gemini key没配的话该入口不可用。进阶技巧想让生成更准优先用高清截图别让元素被压缩糊掉装了 Chromiumpoetry run playwright install chromium后agent 会自己渲染页面、截图校验一遍再交活偏差肉眼可见地小。想换更强的模型点右上角齿轮打开设置面板直接切OpenAI、Anthropic、Gemini 的 key 也能在这里补填不用改.env重启。还原度不满意先换技术栈组合再试——同一张图在 React Tailwind 和 Bootstrap 下的产出差异不小多跑一两个变体挑最好的往往比纠结提示词划算。踩坑速查生成时报 API 错误→ 多半是 key 没生效确认.env里 key 名写对了Windows 下把.env用记事本另存为 UTF-8OpenAI 访问受限就在设置里配OPENAI_BASE_URL指到代理。前端一直连不上后端→ 端口对不上默认后端在 7001改过端口就在frontend/.env.local里配VITE_WS_BACKEND_URL。录屏模式不可用→ 缺GEMINI_API_KEY补上后重启容器即可。动手试一下把你手头最近一张 UI 截图丢进去选个技术栈跑一遍看看它生成得值不值一杯咖啡钱。想深挖就翻 后端生成逻辑项目还会持续加模型和框架支持值得跟进。【免费下载链接】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），仅供参考 一张截图生成可运行的 React 页面：screenshot-to-code 完整流程
一张截图生成可运行的 React 页面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 代码还原度较高逐像素对图调样式的时间基本省下来了。工具速览screenshot-to-code 是个可自部署的截图生成代码工具FastAPI 后端加 Vite 前端输入交给大模型输出是可跑的前端项目。三个要点记一下输出覆盖 HTML Tailwind/CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic接 OpenAI、Anthropic、Gemini 任意一家或几家的 key 就能跑输入不只有截图网页 URL、屏幕录制都行用 Docker 跑通第一个生成结果系统要求一句话带过走 Docker 的话 Python 和 Node 都不用单独操心自己搭环境则需要 Python 3.8 和 Node 14。Docker 路径最省事依次执行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.env里至少要配 OpenAI、Anthropic、Gemini 三家中的一家的 key推荐再加GEMINI_API_KEY——它负责从截图里提取真实图片素材录屏模式也必须要它。跑完最后一行等构建结束浏览器打开 http://localhost:5173 就能用了。想自己魔改代码backend 用 poetry 装依赖、配好.env后起 uvicorn7001 端口frontend 用 pnpm dev细节见 backend/README.md。打开页面后选个技术栈比如 React Tailwind上传一张截图点 Generate Code。生成过程走 WebSocket 推状态中间预览和右侧代码区一起更新出来的是完整可下载的文件不是贴一段片段。三个场景实战截图转代码是最基本的路径你拿到一张 UI 导出图想要可维护的组件代码就在上传区丢图、选栈、点生成产出的组件结构和 Tailwind 类名都是可读的直接进项目用。同一张图换个目标栈再跑一遍也能对比效果——生成是带变体的配了多家 key 时每个变体会挑不同模型方便你挑最像原稿的那一版。URL 转代码适合找参考你拿到一个做得不错的站点地址想要同款布局把地址填进 URL 输入框、选栈、点生成它先截页面再走同样的转码流程适合拿来做风格借鉴的起点。录屏转原型是隐藏玩法 ✨你有一段产品演示录屏想要个能点的交互原型点 Record Screen 录完自动抽帧处理输出带交互状态的前端原型。这个模式依赖 Gemini key没配的话该入口不可用。进阶技巧想让生成更准优先用高清截图别让元素被压缩糊掉装了 Chromiumpoetry run playwright install chromium后agent 会自己渲染页面、截图校验一遍再交活偏差肉眼可见地小。想换更强的模型点右上角齿轮打开设置面板直接切OpenAI、Anthropic、Gemini 的 key 也能在这里补填不用改.env重启。还原度不满意先换技术栈组合再试——同一张图在 React Tailwind 和 Bootstrap 下的产出差异不小多跑一两个变体挑最好的往往比纠结提示词划算。踩坑速查生成时报 API 错误→ 多半是 key 没生效确认.env里 key 名写对了Windows 下把.env用记事本另存为 UTF-8OpenAI 访问受限就在设置里配OPENAI_BASE_URL指到代理。前端一直连不上后端→ 端口对不上默认后端在 7001改过端口就在frontend/.env.local里配VITE_WS_BACKEND_URL。录屏模式不可用→ 缺GEMINI_API_KEY补上后重启容器即可。动手试一下把你手头最近一张 UI 截图丢进去选个技术栈跑一遍看看它生成得值不值一杯咖啡钱。想深挖就翻 后端生成逻辑项目还会持续加模型和框架支持值得跟进。【免费下载链接】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），仅供参考