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它适合手里有设计稿或界面截图、需要先把前端实现出来再打磨细节的场景也适合做原型时快速验证一种布局。两类输入不适合一是带表单校验、登录这类强交互的界面模型只还原视觉交互逻辑要你自己补二是元素极多的营销长页一次很难还原到位拆成几段更稳。 本地跑起来 Screenshot to Code项目由 FastAPI 后端和 React 前端组成本地运行至少需要一个 AI 厂商的 keyOpenAI、Anthropic、Gemini 三选一。先克隆仓库git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code再启动后端。key 由 backend/config.py 从环境变量读取写进 backend 目录下的 .env 即可cd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001最后一行在 7001 端口启动服务playwright 那步是可选的装好 Chromium 后模型能在无头浏览器里自查生成页面的渲染效果。另一个终端启动前端cd frontend pnpm install pnpm dev浏览器打开 http://localhost:5173也可以在进入后的齿轮设置面板里填 key它只存在本地浏览器里。 第一张截图转代码一次完整流程打开页面输入区默认是 Upload 标签页。你拖入一张干净的登录页截图右侧的输出栈选项里选 React Tailwind点击生成。后端调用 AI 模型几十秒后下方出现几个变体结果。点开一个变体左边是真实渲染出的页面右边是对应代码复制代码或下载完整文件都可以。 让生成代码更好截图保持干净裁剪到目标区域别带系统菜单栏、浏览器地址栏和弹窗长页面先分块截图、分别生成再拼装比给模型一张超长图更稳配齐更多 key 能换来更多模型组合系统按变体选更强的模型并行出多个结果结果不满意就重跑一次生成就有多个变体挑最好的那个跑不通时怎么办前端设置面板里没有可用模型检查 .env 里是否至少写入了 OpenAI、Anthropic、Gemini 三个 key 之一并重启后端。key 只在启动时读取不会热更新。后端报 UTF-8 解码错误Windows 下常见。用记事本打开 backend/.env把编码改成 UTF-8 保存后再重启后端。GPT 模型返回 403 之类的错误OpenAI 账户需要达到 Tier 1充值并开启自动续充详见 Troubleshooting.md如果 API 直连不了在 backend/.env 里配置 OPENAI_BASE_URL 指向代理URL 路径里要带 v1。把仓库克隆下来挑一张你熟悉的截图比如常用产品的登录页完整走一遍流程再把生成的代码和真实页面对一遍你就知道它的还原边界在哪了。【免费下载链接】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 截图转代码
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它适合手里有设计稿或界面截图、需要先把前端实现出来再打磨细节的场景也适合做原型时快速验证一种布局。两类输入不适合一是带表单校验、登录这类强交互的界面模型只还原视觉交互逻辑要你自己补二是元素极多的营销长页一次很难还原到位拆成几段更稳。 本地跑起来 Screenshot to Code项目由 FastAPI 后端和 React 前端组成本地运行至少需要一个 AI 厂商的 keyOpenAI、Anthropic、Gemini 三选一。先克隆仓库git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code再启动后端。key 由 backend/config.py 从环境变量读取写进 backend 目录下的 .env 即可cd backend echo OPENAI_API_KEYsk-your-key .env poetry install poetry run playwright install chromium poetry run uvicorn main:app --reload --port 7001最后一行在 7001 端口启动服务playwright 那步是可选的装好 Chromium 后模型能在无头浏览器里自查生成页面的渲染效果。另一个终端启动前端cd frontend pnpm install pnpm dev浏览器打开 http://localhost:5173也可以在进入后的齿轮设置面板里填 key它只存在本地浏览器里。 第一张截图转代码一次完整流程打开页面输入区默认是 Upload 标签页。你拖入一张干净的登录页截图右侧的输出栈选项里选 React Tailwind点击生成。后端调用 AI 模型几十秒后下方出现几个变体结果。点开一个变体左边是真实渲染出的页面右边是对应代码复制代码或下载完整文件都可以。 让生成代码更好截图保持干净裁剪到目标区域别带系统菜单栏、浏览器地址栏和弹窗长页面先分块截图、分别生成再拼装比给模型一张超长图更稳配齐更多 key 能换来更多模型组合系统按变体选更强的模型并行出多个结果结果不满意就重跑一次生成就有多个变体挑最好的那个跑不通时怎么办前端设置面板里没有可用模型检查 .env 里是否至少写入了 OpenAI、Anthropic、Gemini 三个 key 之一并重启后端。key 只在启动时读取不会热更新。后端报 UTF-8 解码错误Windows 下常见。用记事本打开 backend/.env把编码改成 UTF-8 保存后再重启后端。GPT 模型返回 403 之类的错误OpenAI 账户需要达到 Tier 1充值并开启自动续充详见 Troubleshooting.md如果 API 直连不了在 backend/.env 里配置 OPENAI_BASE_URL 指向代理URL 路径里要带 v1。把仓库克隆下来挑一张你熟悉的截图比如常用产品的登录页完整走一遍流程再把生成的代码和真实页面对一遍你就知道它的还原边界在哪了。【免费下载链接】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），仅供参考