Screenshot to Code 截图转代码完整指南5分钟把一张界面图变成可运行的 HTML/React【免费下载链接】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 Codescreenshot-to-code是一个免费开源项目核心功能就一句话丢进一张界面截图它自动还你一份干净的 HTML/Tailwind、React 或 Vue 代码。支持 HTMLTailwind、HTMLCSS、ReactTailwind、VueTailwind、Bootstrap 等 6 种技术栈连录屏都能转成可交互原型。适合照着别人的界面做一个同款或把设计稿快速落成页面这类需求。场景钩子设计稿躺在桌面三天没动的时刻你大概经历过这种循环产品给了张截图说就按这个做你打开编辑器从!DOCTYPE html开始量间距、猜字号、对齐按钮一小时过去了页面还差一半。如果对方是竞品页面或者一张 Figma 导出图这种手工临摹的活一天能干三份——而它本来可以压缩到一杯咖啡的时间。下面这个开源项目干的就是这件事。一句话定位一个看得懂设计稿的翻译官把 Screenshot to Code 想成一位翻译你递给它一张图片外语它还你一段能跑的代码中文。它靠多模态视觉模型识别截图里的布局、文字、颜色和图标位置再按你选的框架输出代码。和手写相比它的产出约九成可复现原始布局剩下的一成——交互逻辑、真实文案、图片素材——仍需你自己补但骨架和样式这块最磨人的活儿它包了。最快跑通步骤三步约 5 分钟你拿到的是一个本地可跑的前后端应用FastAPI 后端 React/Vite 前端。前提只有一条——至少申请一个模型服务商的 API KeyOpenAI、Anthropic、Gemini 三选一Gemini 官方最推荐能复用截图里的真实图片资产视频模式也依赖它。第 1 步克隆仓库并写入 Keygit clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code/backend echo GEMINI_API_KEYyour-key .env # 换成你的任意一个 Key第 2 步启动后端cd backend poetry install poetry run python start.py # 默认监听 7001 端口第 3 步启动前端打开浏览器cd frontend pnpm install pnpm dev浏览器访问http://localhost:5173即可。上传截图 → 右侧设置面板选输出格式HTML/React/Vue和 Tailwind 版本 → 点生成十几秒到半分钟出代码右边预览窗直接渲染效果。实战效果一张登录页截图变成 200 行 Tailwind 代码举个贴近日常的例子竞品改了登录页产品让你先复刻一版。你截一张登录页的图丢进去选 HTML Tailwind30 秒后得到的不是截图那种死板还原而是一份结构化的代码左栏品牌区用 flex 布局、右栏表单用w-96固定宽度、按钮圆角和阴影的 class 都对应上了原始间距。再切到 React Tailwind 生成一遍同样的界面变成了带useState的组件表单输入框已经拆成可控组件。值得留意的是后端还会把 agent 生成的页面在 headless 浏览器里渲染一次、看一眼自己的作业再修正poetry run playwright install chromium即可启用所以输出的排版错乱率比盲写低不少。想继续深挖模型与生成链路可以看 backend/agent/providers/各模型适配层和 backend/routes/generate_code.py核心生成接口。避坑清单问题 → 对策新手最容易卡在这几处按现象 → 处理整理后端起不来或提示端口占用start.py会自动在 7001 起往上找空闲端口若换过端口导致前端连不上在frontend/.env.local里设VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL指向新地址。生成失败或报权限错误检查.env里 Key 是否写对、账号是否有余额Windows 下.env被存成非 UTF-8 会直接报错用编辑器转存为 UTF-8 再试。生成代码不完整、元素缺失截图别贪大裁到关键区域重新传元素边界清晰、界面干净的图还原度明显更高。样式错乱优先在设置里确认 Tailwind 版本与目标项目一致仍不对就手动微调 class。AI 生成的是外观交互逻辑点击、请求、校验需要自己补——这是所有同类工具的通病。本地跑得慢或想换模型对比复杂页面可以分区域生成再拼多配几个服务商的 Key工具会自动为不同变体挑选更强的模型组合。更详细的排查步骤见 Troubleshooting.md。值不值得试给新手的一个判断判断标准很简单如果你一周里有哪怕一次照着截图/设计稿手搓页面的活这个工具就回本了——省下的不是 100% 时间补交互、换素材还是你的活而是最枯燥的那 70%量布局、写 class、对间距。它免费、开源、本地自托管Key 成本按调用计费对低频用户几乎可以忽略。现在就 clone 下来挑一张你最近想复刻的界面截图5 分钟跑通效果如何你自己看。【免费下载链接】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 截图转代码完整指南：5分钟把一张界面图变成可运行的 HTML/React
Screenshot to Code 截图转代码完整指南5分钟把一张界面图变成可运行的 HTML/React【免费下载链接】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 Codescreenshot-to-code是一个免费开源项目核心功能就一句话丢进一张界面截图它自动还你一份干净的 HTML/Tailwind、React 或 Vue 代码。支持 HTMLTailwind、HTMLCSS、ReactTailwind、VueTailwind、Bootstrap 等 6 种技术栈连录屏都能转成可交互原型。适合照着别人的界面做一个同款或把设计稿快速落成页面这类需求。场景钩子设计稿躺在桌面三天没动的时刻你大概经历过这种循环产品给了张截图说就按这个做你打开编辑器从!DOCTYPE html开始量间距、猜字号、对齐按钮一小时过去了页面还差一半。如果对方是竞品页面或者一张 Figma 导出图这种手工临摹的活一天能干三份——而它本来可以压缩到一杯咖啡的时间。下面这个开源项目干的就是这件事。一句话定位一个看得懂设计稿的翻译官把 Screenshot to Code 想成一位翻译你递给它一张图片外语它还你一段能跑的代码中文。它靠多模态视觉模型识别截图里的布局、文字、颜色和图标位置再按你选的框架输出代码。和手写相比它的产出约九成可复现原始布局剩下的一成——交互逻辑、真实文案、图片素材——仍需你自己补但骨架和样式这块最磨人的活儿它包了。最快跑通步骤三步约 5 分钟你拿到的是一个本地可跑的前后端应用FastAPI 后端 React/Vite 前端。前提只有一条——至少申请一个模型服务商的 API KeyOpenAI、Anthropic、Gemini 三选一Gemini 官方最推荐能复用截图里的真实图片资产视频模式也依赖它。第 1 步克隆仓库并写入 Keygit clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code/backend echo GEMINI_API_KEYyour-key .env # 换成你的任意一个 Key第 2 步启动后端cd backend poetry install poetry run python start.py # 默认监听 7001 端口第 3 步启动前端打开浏览器cd frontend pnpm install pnpm dev浏览器访问http://localhost:5173即可。上传截图 → 右侧设置面板选输出格式HTML/React/Vue和 Tailwind 版本 → 点生成十几秒到半分钟出代码右边预览窗直接渲染效果。实战效果一张登录页截图变成 200 行 Tailwind 代码举个贴近日常的例子竞品改了登录页产品让你先复刻一版。你截一张登录页的图丢进去选 HTML Tailwind30 秒后得到的不是截图那种死板还原而是一份结构化的代码左栏品牌区用 flex 布局、右栏表单用w-96固定宽度、按钮圆角和阴影的 class 都对应上了原始间距。再切到 React Tailwind 生成一遍同样的界面变成了带useState的组件表单输入框已经拆成可控组件。值得留意的是后端还会把 agent 生成的页面在 headless 浏览器里渲染一次、看一眼自己的作业再修正poetry run playwright install chromium即可启用所以输出的排版错乱率比盲写低不少。想继续深挖模型与生成链路可以看 backend/agent/providers/各模型适配层和 backend/routes/generate_code.py核心生成接口。避坑清单问题 → 对策新手最容易卡在这几处按现象 → 处理整理后端起不来或提示端口占用start.py会自动在 7001 起往上找空闲端口若换过端口导致前端连不上在frontend/.env.local里设VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL指向新地址。生成失败或报权限错误检查.env里 Key 是否写对、账号是否有余额Windows 下.env被存成非 UTF-8 会直接报错用编辑器转存为 UTF-8 再试。生成代码不完整、元素缺失截图别贪大裁到关键区域重新传元素边界清晰、界面干净的图还原度明显更高。样式错乱优先在设置里确认 Tailwind 版本与目标项目一致仍不对就手动微调 class。AI 生成的是外观交互逻辑点击、请求、校验需要自己补——这是所有同类工具的通病。本地跑得慢或想换模型对比复杂页面可以分区域生成再拼多配几个服务商的 Key工具会自动为不同变体挑选更强的模型组合。更详细的排查步骤见 Troubleshooting.md。值不值得试给新手的一个判断判断标准很简单如果你一周里有哪怕一次照着截图/设计稿手搓页面的活这个工具就回本了——省下的不是 100% 时间补交互、换素材还是你的活而是最枯燥的那 70%量布局、写 class、对间距。它免费、开源、本地自托管Key 成本按调用计费对低频用户几乎可以忽略。现在就 clone 下来挑一张你最近想复刻的界面截图5 分钟跑通效果如何你自己看。【免费下载链接】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），仅供参考