截图转代码5分钟跑通全流程screenshot-to-code 完整上手指南【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/gh_mirrors/screen/screenshot-to-codescreenshot-to-code 是一款开源的截图转代码工具把一张界面截图、设计稿或 Figma 文件丢进去AI 会自动帮你生成可运行的 HTML、React、Vue、Bootstrap 等代码。你不用写一行布局代码也不用对着设计稿逐像素测量就能在几分钟内拿到一个像模像样的前端页面。先对号入座你是否也卡在这三件事上你大概率遇到过这样的场景设计师丢来一张精美的界面图说就照这个做你打开编辑器心里却开始盘算——这个间距是多少这个字号怎么量栅格怎么排又或者你想抄一个竞品网站的布局却不好意思对着别人的页面敲一下午代码再或者你只是想快速验证一个产品想法手绘了个草图却卡在怎么变成能点的原型这一步。这类从图到代码的重复劳动正是 screenshot-to-code 想替你省掉的部分。一句话看懂它好在哪它把看图写代码这个需要数小时的工作压缩成一次上传 一次点击。同类方案要么只能出静态稿要么绑定某个付费平台而它是完全开源、可本地部署的模型、技术栈、提示词都能自己掌控数据也不用经过第三方服务器。最短路径Docker 一键跑通如果你装了 Docker最快的启动方式只有两步# 1. 在项目根目录写入你的 API 密钥去 OpenAI/Anthropic 官网申请 echo OPENAI_API_KEYsk-你的密钥 .env # 2. 一键构建并启动前后端 docker-compose up -d --build稍等一两分钟浏览器打开http://localhost:5173把一张截图拖进上传区选好技术栈就能看到代码像打字机一样逐行流出来。从零到第一次生成成功通常不超过 10 分钟。不想消耗 API 额度做测试后端支持 Mock 模式会流式返回一段预录好的响应纯练手零成本# 用 MOCKtrue 启动后端不调用真实模型 MOCKtrue poetry run uvicorn main:app --reload --port 7001三种玩法从尝鲜到进阶入门拖一张截图选一个技术栈进入页面后你会看到三个入口上传图片、输入网址、导入已有代码。新手建议从上传本地截图开始。右侧设置面板里可以切换输出格式目前支持 7 种技术栈HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind以及纯 SVG 矢量输出。第一次建议选HTML Tailwind——生成速度快、结构清晰、改起来最顺手。点击生成后界面会同时展示预览图和生成的代码还有复制下载按钮你可以直接把代码下载成 HTML 文件在浏览器里打开前后对比一眼可见。进阶用网址、提示词和多版本对比提升质量当你不再满足于能出代码时可以试试这两个能力输入网址直接抓取在网址输入框粘贴一个公开页面的 URL工具会先自动截图再走生成流程省去手动截图的步骤。用提示词调教输出设置里可以追加指令比如使用深色模式配色移动端适配良好使用语义化类名。你可以在提示词里描述期望的颜色主题、交互状态甚至组件命名规则生成的代码会更贴近你的意图。多版本对比项目默认一次生成 2 个变体可在后端配置NUM_VARIANTS调整并排对比后挑最好的那版继续改。高阶把网页录屏变成可交互原型这是项目的实验性功能录一段网站操作视频比如滚动页面、点击按钮工具会分析画面变化输出一个功能性的原型页面。对产品经理和创业者来说等于把录屏演示直接升级成可点击的 Demo验证想法的成本又被压低了一截。一个完整的实战案例半小时复刻 Hacker News 首页假设你现在要快速做一个类似 Hacker News 的信息流页面传统做法是手写列表、卡片、分页至少半天。用 screenshot-to-code 的流程是这样准备素材截取 Hacker News 首页顶部区域保证 1200px 以上宽度、文字清晰可读配置技术栈选React Tailwind模型选Claude 3.5 Sonnet官方推荐对长文本和布局理解最稳加一句提示词保持列表式布局强调标题层级配色保持简洁黑白生成约 30 秒后得到一版结构完整的 React 组件标题、链接、编号、分页都齐了微调在预览里发现间距偏大把提示词改成压缩行间距再生成一次即可。做前你面对的是一张静态截图做后你拿到的是可运行、可二次开发的代码骨架。剩下的工作只剩业务逻辑和细节打磨而不是从零布局。进阶技巧清单少走弯路的 5 条干货模型按场景选追求还原度选 Claude 3.5 Sonnet想要速度与性价比均衡选 GPT-4o。两个都配好 key还能同图对比效果。截图质量直接决定上限分辨率建议 1200~1920px避免模糊和过度压缩复杂界面分区域截图比一整张大图效果好得多。图片生成按需开启如果页面里需要插图可以配置 DALL-E 3 或 Replicate 上的 Flux Schnell 自动补图不需要时关掉能省不少费用。把提示词沉淀成模板颜色主题、响应式要求、命名规范这些固定诉求写进提示词反复复用团队内还能互相抄作业。调试阶段开 Mock后端MOCKtrue模式下不消耗 token流程跑通后再切真实模型避免调 bug 烧钱。原理速览它内部到底发生了什么整个项目是前后端分离架构前端是 React Vite 的 Web 界面负责截图上传、设置交互和代码预览后端是 FastAPI 服务负责核心链路——图像预处理 → 组装提示词 → 调用多模态大模型 → 流式返回代码。几个设计上的巧思值得一说提示词并非硬编码在代码里而是集中在prompts/目录按场景维护方便调试和扩展OpenAI 和 Anthropic 两套模型的消息格式做了统一翻译切换模型无需改业务代码代码通过 WebSocket 流式推送到前端所以你能看到打字机效果而不是干等一个长请求。理解到这一层你调参、加功能时就不会两眼一抹黑。避坑指南新手最容易踩的 3 个坑API 连接失败九成是因为.env里 key 没写对或网络访问不了 OpenAI/Anthropic。可以配置代理——在backend/.env里设置OPENAI_BASE_URL注意路径里要带v1形如https://你的代理域名/v1。前端连不上后端如果改过后端端口记得同步修改frontend/.env.local里的VITE_WS_BACKEND_URL和VITE_HTTP_BACKEND_URL否则前端会一直转圈。生成质量忽高忽低别急着怀疑工具先检查截图清晰度再尝试换模型、补提示词。项目文档也明确建议本地跑 Ollama 等开源小模型效果较差不推荐用于生产。社区与路线图一个正在快速生长的开源项目这个项目在 GitHub 上非常活跃支持多种语言和模型社区讨论集中在新增前端框架支持、优化多模型对比体验、改进视频转原型的效果以及完善评估体系仓库里自带一套基于真实案例的 AI 生成质量评估工具。如果你愿意参与贡献方向很明确翻译提示词、补充示例库、修 WebSocket 断线重连之类的小 issue都是低门槛的切入点。现在就去试一把打开终端克隆项目配好 key拖一张你手头最想复制的界面截图进去——10 分钟后你就能拥有第一版代码。别忘了AI 生成的是高质量草稿不是免检产品。上线前请务必做一轮代码审查确认可访问性、兼容性和性能尤其是涉及用户数据的页面。工具的价值不在于替代你写代码而在于把最枯燥的翻译工作外包出去让你把时间留给真正需要判断力的部分。【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/gh_mirrors/screen/screenshot-to-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 截图转代码，5分钟跑通全流程：screenshot-to-code 完整上手指南
截图转代码5分钟跑通全流程screenshot-to-code 完整上手指南【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/gh_mirrors/screen/screenshot-to-codescreenshot-to-code 是一款开源的截图转代码工具把一张界面截图、设计稿或 Figma 文件丢进去AI 会自动帮你生成可运行的 HTML、React、Vue、Bootstrap 等代码。你不用写一行布局代码也不用对着设计稿逐像素测量就能在几分钟内拿到一个像模像样的前端页面。先对号入座你是否也卡在这三件事上你大概率遇到过这样的场景设计师丢来一张精美的界面图说就照这个做你打开编辑器心里却开始盘算——这个间距是多少这个字号怎么量栅格怎么排又或者你想抄一个竞品网站的布局却不好意思对着别人的页面敲一下午代码再或者你只是想快速验证一个产品想法手绘了个草图却卡在怎么变成能点的原型这一步。这类从图到代码的重复劳动正是 screenshot-to-code 想替你省掉的部分。一句话看懂它好在哪它把看图写代码这个需要数小时的工作压缩成一次上传 一次点击。同类方案要么只能出静态稿要么绑定某个付费平台而它是完全开源、可本地部署的模型、技术栈、提示词都能自己掌控数据也不用经过第三方服务器。最短路径Docker 一键跑通如果你装了 Docker最快的启动方式只有两步# 1. 在项目根目录写入你的 API 密钥去 OpenAI/Anthropic 官网申请 echo OPENAI_API_KEYsk-你的密钥 .env # 2. 一键构建并启动前后端 docker-compose up -d --build稍等一两分钟浏览器打开http://localhost:5173把一张截图拖进上传区选好技术栈就能看到代码像打字机一样逐行流出来。从零到第一次生成成功通常不超过 10 分钟。不想消耗 API 额度做测试后端支持 Mock 模式会流式返回一段预录好的响应纯练手零成本# 用 MOCKtrue 启动后端不调用真实模型 MOCKtrue poetry run uvicorn main:app --reload --port 7001三种玩法从尝鲜到进阶入门拖一张截图选一个技术栈进入页面后你会看到三个入口上传图片、输入网址、导入已有代码。新手建议从上传本地截图开始。右侧设置面板里可以切换输出格式目前支持 7 种技术栈HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind以及纯 SVG 矢量输出。第一次建议选HTML Tailwind——生成速度快、结构清晰、改起来最顺手。点击生成后界面会同时展示预览图和生成的代码还有复制下载按钮你可以直接把代码下载成 HTML 文件在浏览器里打开前后对比一眼可见。进阶用网址、提示词和多版本对比提升质量当你不再满足于能出代码时可以试试这两个能力输入网址直接抓取在网址输入框粘贴一个公开页面的 URL工具会先自动截图再走生成流程省去手动截图的步骤。用提示词调教输出设置里可以追加指令比如使用深色模式配色移动端适配良好使用语义化类名。你可以在提示词里描述期望的颜色主题、交互状态甚至组件命名规则生成的代码会更贴近你的意图。多版本对比项目默认一次生成 2 个变体可在后端配置NUM_VARIANTS调整并排对比后挑最好的那版继续改。高阶把网页录屏变成可交互原型这是项目的实验性功能录一段网站操作视频比如滚动页面、点击按钮工具会分析画面变化输出一个功能性的原型页面。对产品经理和创业者来说等于把录屏演示直接升级成可点击的 Demo验证想法的成本又被压低了一截。一个完整的实战案例半小时复刻 Hacker News 首页假设你现在要快速做一个类似 Hacker News 的信息流页面传统做法是手写列表、卡片、分页至少半天。用 screenshot-to-code 的流程是这样准备素材截取 Hacker News 首页顶部区域保证 1200px 以上宽度、文字清晰可读配置技术栈选React Tailwind模型选Claude 3.5 Sonnet官方推荐对长文本和布局理解最稳加一句提示词保持列表式布局强调标题层级配色保持简洁黑白生成约 30 秒后得到一版结构完整的 React 组件标题、链接、编号、分页都齐了微调在预览里发现间距偏大把提示词改成压缩行间距再生成一次即可。做前你面对的是一张静态截图做后你拿到的是可运行、可二次开发的代码骨架。剩下的工作只剩业务逻辑和细节打磨而不是从零布局。进阶技巧清单少走弯路的 5 条干货模型按场景选追求还原度选 Claude 3.5 Sonnet想要速度与性价比均衡选 GPT-4o。两个都配好 key还能同图对比效果。截图质量直接决定上限分辨率建议 1200~1920px避免模糊和过度压缩复杂界面分区域截图比一整张大图效果好得多。图片生成按需开启如果页面里需要插图可以配置 DALL-E 3 或 Replicate 上的 Flux Schnell 自动补图不需要时关掉能省不少费用。把提示词沉淀成模板颜色主题、响应式要求、命名规范这些固定诉求写进提示词反复复用团队内还能互相抄作业。调试阶段开 Mock后端MOCKtrue模式下不消耗 token流程跑通后再切真实模型避免调 bug 烧钱。原理速览它内部到底发生了什么整个项目是前后端分离架构前端是 React Vite 的 Web 界面负责截图上传、设置交互和代码预览后端是 FastAPI 服务负责核心链路——图像预处理 → 组装提示词 → 调用多模态大模型 → 流式返回代码。几个设计上的巧思值得一说提示词并非硬编码在代码里而是集中在prompts/目录按场景维护方便调试和扩展OpenAI 和 Anthropic 两套模型的消息格式做了统一翻译切换模型无需改业务代码代码通过 WebSocket 流式推送到前端所以你能看到打字机效果而不是干等一个长请求。理解到这一层你调参、加功能时就不会两眼一抹黑。避坑指南新手最容易踩的 3 个坑API 连接失败九成是因为.env里 key 没写对或网络访问不了 OpenAI/Anthropic。可以配置代理——在backend/.env里设置OPENAI_BASE_URL注意路径里要带v1形如https://你的代理域名/v1。前端连不上后端如果改过后端端口记得同步修改frontend/.env.local里的VITE_WS_BACKEND_URL和VITE_HTTP_BACKEND_URL否则前端会一直转圈。生成质量忽高忽低别急着怀疑工具先检查截图清晰度再尝试换模型、补提示词。项目文档也明确建议本地跑 Ollama 等开源小模型效果较差不推荐用于生产。社区与路线图一个正在快速生长的开源项目这个项目在 GitHub 上非常活跃支持多种语言和模型社区讨论集中在新增前端框架支持、优化多模型对比体验、改进视频转原型的效果以及完善评估体系仓库里自带一套基于真实案例的 AI 生成质量评估工具。如果你愿意参与贡献方向很明确翻译提示词、补充示例库、修 WebSocket 断线重连之类的小 issue都是低门槛的切入点。现在就去试一把打开终端克隆项目配好 key拖一张你手头最想复制的界面截图进去——10 分钟后你就能拥有第一版代码。别忘了AI 生成的是高质量草稿不是免检产品。上线前请务必做一轮代码审查确认可访问性、兼容性和性能尤其是涉及用户数据的页面。工具的价值不在于替代你写代码而在于把最枯燥的翻译工作外包出去让你把时间留给真正需要判断力的部分。【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/gh_mirrors/screen/screenshot-to-code创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考