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-codescreenshot-to-code 接收截图、设计稿或屏幕录像借助视觉模型输出 HTML、React、Vue 等前端代码。本文面向需要本地部署的开发者读完可以完成密钥配置、两种启动方式以及第一次从截图到代码的完整流程。先看它适合解决什么问题输入页面截图、设计稿 mockup、Figma 文件或一段操作网站的屏幕录像。输出可直接运行的界面代码覆盖 HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind 六种技术栈。收益跳过手写布局的阶段直接得到一个可修改的代码起点再按业务需求继续开发。边界本地部署需要自行准备模型 API 密钥并启动前后端两个服务不是开箱即用的网页工具。开始前的资源清单资源是否必须缺失时的影响模型密钥OPENAI_API_KEY/ANTHROPIC_API_KEY/GEMINI_API_KEY三者至少其一必须没有任何模型可调用无法生成代码GEMINI_API_KEY强烈建议缺少截图资产提取复用截图中真实 logo 与图片的能力视频模式不可用REPLICATE_API_KEY强烈建议edit_image、remove_background工具不可用图像生成回退到 OpenAI若已配置Poetry 与 Node/pnpm 环境本地运行必须无法安装依赖和启动对应服务Chromium经 Playwright 安装可选截图预览功能不可用agent 无法在无头浏览器中自查渲染结果密钥可以直接写入backend/.env也可以在应用加载后通过设置对话框齿轮图标配置 OpenAI、Anthropic、GeminiReplicate 必须写在backend/.env中。最小可用运行路径先获取代码仓库git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code本地运行准备backend/.env并安装后端依赖cd backend echo OPENAI_API_KEYsk-your-key .env echo ANTHROPIC_API_KEYyour-key .env echo GEMINI_API_KEYyour-key .env echo REPLICATE_API_KEYr8_your-key .env poetry install poetry run playwright install chromium poetry env activate poetry run uvicorn main:app --reload --port 7001Linux 环境下如需系统依赖库把上一步换成poetry run playwright install --with-deps chromium。在另一个终端启动前端cd frontend pnpm install pnpm dev打开 http://localhost:5173 进入应用。如果后端改用了其他端口需要同步修改frontend/.env.local中的VITE_WS_BACKEND_URL。Docker 运行在项目根目录写入密钥文件再启动容器echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build应用同样在 http://localhost:5173 提供访问。注意该方式下修改代码不会触发镜像重建不适合边开发边改源码。第一次使用时的操作主线上传输入把一张页面截图拖入输入区或选择屏幕录像作为输入。选择输出挑选目标技术栈如 HTML Tailwind确认参与生成的模型组合——配置的密钥越多每个变体可选的模型越强。查看结果生成完成后对照预览面板检查布局、间距和文字内容代码在代码页签中查看可下载后放入项目。迭代修正对不满意的局部用自然语言补充要求让服务重新生成而不必从零开始。检查配置打开设置对话框确认密钥状态以及“截图预览”是否可用启用后agent 能在无头浏览器中渲染自己生成的页面并视觉自查有助于提升首轮输出质量。典型场景与使用边界场景适合程度需要注意新闻、博客类内容页面高栅格布局还原较好正文长文本需自行替换为真实内容社交、电商等组件密集界面中高图标与 logo 建议配合GEMINI_API_KEY的资产提取直接复用原图而非占位图屏幕录像转可交互原型中必须配置GEMINI_API_KEY生成耗时明显更长像素级精确还原复杂视觉稿低首次输出通常只能接近原稿需要多轮反馈迭代才能收敛下一步建议先用一张单页截图完整跑通一次“上传—生成—下载”流程确认输出符合预期。再打开设置对话框核对各密钥与截图预览的可用状态。如果常用视频输入建议补充GEMINI_API_KEY后再试录像模式。【免费下载链接】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-codescreenshot-to-code 接收截图、设计稿或屏幕录像借助视觉模型输出 HTML、React、Vue 等前端代码。本文面向需要本地部署的开发者读完可以完成密钥配置、两种启动方式以及第一次从截图到代码的完整流程。先看它适合解决什么问题输入页面截图、设计稿 mockup、Figma 文件或一段操作网站的屏幕录像。输出可直接运行的界面代码覆盖 HTML Tailwind、HTML CSS、React Tailwind、Vue Tailwind、Bootstrap、Ionic Tailwind 六种技术栈。收益跳过手写布局的阶段直接得到一个可修改的代码起点再按业务需求继续开发。边界本地部署需要自行准备模型 API 密钥并启动前后端两个服务不是开箱即用的网页工具。开始前的资源清单资源是否必须缺失时的影响模型密钥OPENAI_API_KEY/ANTHROPIC_API_KEY/GEMINI_API_KEY三者至少其一必须没有任何模型可调用无法生成代码GEMINI_API_KEY强烈建议缺少截图资产提取复用截图中真实 logo 与图片的能力视频模式不可用REPLICATE_API_KEY强烈建议edit_image、remove_background工具不可用图像生成回退到 OpenAI若已配置Poetry 与 Node/pnpm 环境本地运行必须无法安装依赖和启动对应服务Chromium经 Playwright 安装可选截图预览功能不可用agent 无法在无头浏览器中自查渲染结果密钥可以直接写入backend/.env也可以在应用加载后通过设置对话框齿轮图标配置 OpenAI、Anthropic、GeminiReplicate 必须写在backend/.env中。最小可用运行路径先获取代码仓库git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code本地运行准备backend/.env并安装后端依赖cd backend echo OPENAI_API_KEYsk-your-key .env echo ANTHROPIC_API_KEYyour-key .env echo GEMINI_API_KEYyour-key .env echo REPLICATE_API_KEYr8_your-key .env poetry install poetry run playwright install chromium poetry env activate poetry run uvicorn main:app --reload --port 7001Linux 环境下如需系统依赖库把上一步换成poetry run playwright install --with-deps chromium。在另一个终端启动前端cd frontend pnpm install pnpm dev打开 http://localhost:5173 进入应用。如果后端改用了其他端口需要同步修改frontend/.env.local中的VITE_WS_BACKEND_URL。Docker 运行在项目根目录写入密钥文件再启动容器echo OPENAI_API_KEYsk-your-key .env docker-compose up -d --build应用同样在 http://localhost:5173 提供访问。注意该方式下修改代码不会触发镜像重建不适合边开发边改源码。第一次使用时的操作主线上传输入把一张页面截图拖入输入区或选择屏幕录像作为输入。选择输出挑选目标技术栈如 HTML Tailwind确认参与生成的模型组合——配置的密钥越多每个变体可选的模型越强。查看结果生成完成后对照预览面板检查布局、间距和文字内容代码在代码页签中查看可下载后放入项目。迭代修正对不满意的局部用自然语言补充要求让服务重新生成而不必从零开始。检查配置打开设置对话框确认密钥状态以及“截图预览”是否可用启用后agent 能在无头浏览器中渲染自己生成的页面并视觉自查有助于提升首轮输出质量。典型场景与使用边界场景适合程度需要注意新闻、博客类内容页面高栅格布局还原较好正文长文本需自行替换为真实内容社交、电商等组件密集界面中高图标与 logo 建议配合GEMINI_API_KEY的资产提取直接复用原图而非占位图屏幕录像转可交互原型中必须配置GEMINI_API_KEY生成耗时明显更长像素级精确还原复杂视觉稿低首次输出通常只能接近原稿需要多轮反馈迭代才能收敛下一步建议先用一张单页截图完整跑通一次“上传—生成—下载”流程确认输出符合预期。再打开设置对话框核对各密钥与截图预览的可用状态。如果常用视频输入建议补充GEMINI_API_KEY后再试录像模式。【免费下载链接】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），仅供参考