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 是一款免费的开源 AI 工具，核心功能是"Drop in a screenshot and convert it to clean code"——把一张截图、一段文字描述或一段屏幕录屏，转换成干净、可运行的代码（HTML/Tailwind、React、Vue、Bootstrap 等）。本指南面向新手，带你快速掌握它的截图、文字、视频三大输入模式，几分钟就能把手绘稿变成真实网页。
一、快速开始：如何本地部署 screenshot-to-code
准备工作只有两样：一个 AI 模型 API Key（OpenAI、Anthropic、Gemini 三选一，官方强烈建议 Gemini，因为它支持视频模式并能自动提取截图中的真实 Logo/图片资产）和Docker。
最简单的方式是用 Docker 一键启动（项目根目录提供 docker-compose.yml）：
echo "OPENAI_API_KEY=sk-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 Extraction）：Gemini 会自动识别截图里的真实 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_KEY（Gemini 是唯一能理解视频流的模型）
- 演示要"干净利落"：少停顿、少切屏，镜头始终聚焦在应用界面上
- 视频里的后端数据 AI 会用 mock 数据模拟，无需担心接口问题
适合场景：把竞品/灵感站点的交互逻辑快速复刻成自己的可交互原型，做技术可行性验证。
五、三大输入模式对比：该用哪个？
| 模式 | 输入 | 优点 | 适合人群 |
|---|---|---|---|
| 截图 | 1~5 张图片 | 最准，外观 1:1 还原 | 设计师/复刻竞品 |
| 文字 | 一句话描述 | 最快，无需素材 | 快速出 Demo |
| 视频 | 一段屏幕录屏 | 唯一能还原交互行为 | 原型/可行性验证 |
六、常见问题（FAQ）
Q1：生成的代码质量如何？官方默认使用 Gemini 3 Flash/Pro、GPT-5.x、Claude Opus 4.x 等多模型并行为每个变体生成代码，多 Key 配置下会自动挑选更强组合。
Q2：为什么设置里提示"截图预览不可用"？截图预览（Screenshot Preview）依赖 Chromium，本地运行需执行poetry run playwright install chromium（Docker 镜像已内置）。缺失也不影响主功能，只是 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），仅供参考
