拓冰网站定制 
5 分钟跑通 screenshot-to-code本地 AI 截图转代码工具【免费下载链接】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-code 是一个可以在本地运行的 AI 截图转代码工具丢进一张截图、设计稿甚至一段屏幕录像它会输出可运行的 HTML 或 React 页面代码。前端是 React/Vite后端是 FastAPI跑起来需要至少一个 LLM 的 API 密钥。这篇讲清楚安装、启动和几个值得调的设置项。 从一张截图说起手上有某个现成产品的截图但没有设计文件也没有源码。手工把页面扒下来很磨人调来调去还原度总是不对。screenshot-to-code 就是为这种场景做的把截图放进页面它基于视觉识别直接产出页面代码生成的结果可以立即预览。它解决的问题一句话把有图和有代码之间的距离压缩到最短。三步跑起来环境要求不复杂Python配 Poetry、Node.js用 pnpm再加上 OpenAI、Anthropic、Gemini 三家的 Key 任选其一。后端是 FastAPI 服务前端是 React/Vite 应用两边分别启动。后端cd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run uvicorn main:app --reload --port 7001前端cd frontend pnpm install pnpm dev浏览器打开 http://localhost:5173 就能用了。Docker 一键部署不想折腾本地环境就走 Docker在项目根目录把 API Key 写入 .env 文件再运行docker-compose up -d --build应用会直接起在 http://localhost:5173。注意这种模式适合自用不适合改代码开发。丢一张图进去会发生什么拿一张电商商品页的截图为例选好 React Tailwind 技术栈点生成出来的是一段可以直接塞进项目的 React 组件布局、字体、配色和原图基本对得上换成 HTML Tailwind 则得到单个可直接用浏览器打开的文件。没有参考图的时候也可以用文字描述想要的页面或者丢一段屏幕录像让它生成带基本交互的原型。支持的技术栈有HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind在前端的下拉框里随时切换。⚙️ 省时间的几个配置Key 至少配一个多配更好配得越多系统自动挑选的模型组合越强同一张图可以对比多个模型的输出。Key 也可以不手动改文件直接在应用内设置面板齿轮图标里填但 Replicate 的 Key 目前只能写进 backend/.env。选模型看场景追求还原度选下拉框里标 Max 的变体想控制成本选标 Fast 的变体。调试阶段可以开 mock 模式MOCKtrue整套流程走一遍但不消耗真实 API 额度。适合谁不适合谁它最用得上的是这几类情况需要快速把某个现成页面复刻进项目不想手工翻译设计想用可运行的原型快速验证想法生成代码可以直接接着改想比较不同模型、不同技术栈在同一张图上的产出差异局限也很明确它处理的是视觉还原交互逻辑、数据接入、业务状态都得自己补高度定制化的复杂设计还原度同样有上限。接下来可以做什么clone 下来先试一次最有感觉的截图git clone https://gitcode.com/GitHub_Trending/sc/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 5 分钟跑通 screenshot-to-code：本地 AI 截图转代码工具
5 分钟跑通 screenshot-to-code本地 AI 截图转代码工具【免费下载链接】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-code 是一个可以在本地运行的 AI 截图转代码工具丢进一张截图、设计稿甚至一段屏幕录像它会输出可运行的 HTML 或 React 页面代码。前端是 React/Vite后端是 FastAPI跑起来需要至少一个 LLM 的 API 密钥。这篇讲清楚安装、启动和几个值得调的设置项。 从一张截图说起手上有某个现成产品的截图但没有设计文件也没有源码。手工把页面扒下来很磨人调来调去还原度总是不对。screenshot-to-code 就是为这种场景做的把截图放进页面它基于视觉识别直接产出页面代码生成的结果可以立即预览。它解决的问题一句话把有图和有代码之间的距离压缩到最短。三步跑起来环境要求不复杂Python配 Poetry、Node.js用 pnpm再加上 OpenAI、Anthropic、Gemini 三家的 Key 任选其一。后端是 FastAPI 服务前端是 React/Vite 应用两边分别启动。后端cd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run uvicorn main:app --reload --port 7001前端cd frontend pnpm install pnpm dev浏览器打开 http://localhost:5173 就能用了。Docker 一键部署不想折腾本地环境就走 Docker在项目根目录把 API Key 写入 .env 文件再运行docker-compose up -d --build应用会直接起在 http://localhost:5173。注意这种模式适合自用不适合改代码开发。丢一张图进去会发生什么拿一张电商商品页的截图为例选好 React Tailwind 技术栈点生成出来的是一段可以直接塞进项目的 React 组件布局、字体、配色和原图基本对得上换成 HTML Tailwind 则得到单个可直接用浏览器打开的文件。没有参考图的时候也可以用文字描述想要的页面或者丢一段屏幕录像让它生成带基本交互的原型。支持的技术栈有HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind在前端的下拉框里随时切换。⚙️ 省时间的几个配置Key 至少配一个多配更好配得越多系统自动挑选的模型组合越强同一张图可以对比多个模型的输出。Key 也可以不手动改文件直接在应用内设置面板齿轮图标里填但 Replicate 的 Key 目前只能写进 backend/.env。选模型看场景追求还原度选下拉框里标 Max 的变体想控制成本选标 Fast 的变体。调试阶段可以开 mock 模式MOCKtrue整套流程走一遍但不消耗真实 API 额度。适合谁不适合谁它最用得上的是这几类情况需要快速把某个现成页面复刻进项目不想手工翻译设计想用可运行的原型快速验证想法生成代码可以直接接着改想比较不同模型、不同技术栈在同一张图上的产出差异局限也很明确它处理的是视觉还原交互逻辑、数据接入、业务状态都得自己补高度定制化的复杂设计还原度同样有上限。接下来可以做什么clone 下来先试一次最有感觉的截图git clone https://gitcode.com/GitHub_Trending/sc/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考