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 是一款免费的开源 AI 工具核心功能是Drop in a screenshot and convert it to clean code——把一张截图、一段文字描述或一段屏幕录屏转换成干净、可运行的代码HTML/Tailwind、React、Vue、Bootstrap 等。本指南面向新手带你快速掌握它的截图、文字、视频三大输入模式几分钟就能把手绘稿变成真实网页。一、快速开始如何本地部署 screenshot-to-code准备工作只有两样一个 AI 模型 API KeyOpenAI、Anthropic、Gemini 三选一官方强烈建议 Gemini因为它支持视频模式并能自动提取截图中的真实 Logo/图片资产和Docker。最简单的方式是用 Docker 一键启动项目根目录提供 docker-compose.ymlecho OPENAI_API_KEYsk-your-key .env docker-compose up -d --build启动后打开浏览器访问http://localhost:5173即可使用。如果你想在界面里配置 API Key点击加载后的齿轮图标Settings即可无需重启。想跳过部署直接体验也可以 clone 仓库后按 backend/README.md 的方式分别启动 FastAPI 后端与 React 前端。 新手建议Key 配得越多每次生成时会自动挑选更强的模型组合只配一个 Key 也能完整跑通全部三大模式。二、模式一上传截图——一张设计稿变完整代码这是最核心的功能对应界面中的Upload标签页源码见 frontend/src/components/unified-input/tabs/UploadTab.tsx。操作步骤拖入或点选截图/设计稿图片最多支持5 张多页设计一次传入AI 会生成带页面跳转的完整站点可选在下方文本框补充一句要求例如把配色换成深色主题选择技术栈HTML Tailwind、React Tailwind、Vue Tailwind、Bootstrap、Ionic 等点击生成右侧实时预览 代码视图同步输出两个实用小开关资产提取Asset ExtractionGemini 会自动识别截图里的真实 Logo、图片并直接复用而不是用占位图糊弄你附加文字提示给 AI提需求控制配色、布局、组件风格适合场景复刻竞品页面、把 Figma 导出的设计稿变代码、把手绘 UI 草图落地。 另外两个标签页同样好用URL标签UrlTab.tsx可直接输入网址自动截图再生成Import标签ImportTab.tsx可粘贴现有 HTML 代码导入后继续迭代。三、模式二文字生成——用一句话描述生成页面没有设计稿没关系。界面底部提供Generate from text prompt [BETA]按钮源码见 frontend/src/components/generate-from-text/GenerateFromText.tsx展开后输入一句话即可。操作技巧描述越具体效果越好。推荐格式页面类型 主要模块 风格例如A SaaS 管理后台包含图表、用户列表和侧边导航浅色极简风格输入后按Cmd/Ctrl Enter快速触发生成文字模式本质上是让大模型凭空画页面所以它对品牌色、具体排版没有参照适合快速出 Demo 和原型适合场景灵感一闪时快速出原型、给老板/客户演示概念、生成测试页面。四、模式三视频录屏——把交互演示变成可运行原型这是 screenshot-to-code 的杀手级功能录一段网站操作视频AI 不仅还原页面外观还会让生成结果真的能交互源码见 frontend/src/components/recording/ScreenRecorder.tsx。操作步骤在 Upload 标签页点击Record Screen浏览器会弹出共享此屏幕选中要展示的网页标签像做产品演示一样操作点击按钮、切换页面、展开菜单、滚动列表……把想还原的交互都走一遍点击Finish Recording结束录制视频会以 base64 编码提交给后端后端按 backend/prompts/create/video.py 中的提示词要求模型逐帧理解交互与 UI 状态变化并用 JavaScript 实现同样的行为最终产出可交互原型注意事项视频模式必须配置 GEMINI_API_KEYGemini 是唯一能理解视频流的模型演示要干净利落少停顿、少切屏镜头始终聚焦在应用界面上视频里的后端数据 AI 会用 mock 数据模拟无需担心接口问题适合场景把竞品/灵感站点的交互逻辑快速复刻成自己的可交互原型做技术可行性验证。五、三大输入模式对比该用哪个模式输入优点适合人群截图1~5 张图片最准外观 1:1 还原设计师/复刻竞品文字一句话描述最快无需素材快速出 Demo视频一段屏幕录屏唯一能还原交互行为原型/可行性验证六、常见问题FAQQ1生成的代码质量如何官方默认使用 Gemini 3 Flash/Pro、GPT-5.x、Claude Opus 4.x 等多模型并行为每个变体生成代码多 Key 配置下会自动挑选更强组合。Q2为什么设置里提示截图预览不可用截图预览Screenshot Preview依赖 Chromium本地运行需执行poetry run playwright install chromiumDocker 镜像已内置。缺失也不影响主功能只是 AI 无法自测渲染效果。Q3如何微调已生成的页面生成后支持选择并编辑在预览中点选元素用自然语言下达修改指令也可上传新的局部截图继续迭代历史版本会保留在 frontend/src/components/history/HistoryDisplay.tsx 中可回溯。结语screenshot-to-code 用截图、文字、视频三种输入打通了从灵感到代码的最短路径设计稿用截图模式、一句话点子用文字模式、需要交互的原型用视频模式。把它 clone 到本地git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code配好一个 Gemini 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），仅供参考
