screenshot-to-code （截图转代码工具）
81,162
Stars
0
Forks
0
Watchers
0
Open Issues
未知
许可证
Python
语言
创建时间
最近更新
项目能做什么
上传界面截图，即可一键生成干净规范的 HTML/Tailwind/React/Vue 代码。
来源：基于仓库元数据
· 内容以仓库实际 README 为准
使用说明 查看原始 README 原仓库文档
{
"project_name": "screenshot-to-code",
"markdown": "## 项目简介\nscreenshot-to-code 是一款利用 AI 将屏幕截图、设计原型、Figma 设计稿以及屏幕录像直接转换为整洁可用代码的工具。项目前端基于 React + Vite，后端基于 FastAPI 构建，同时也提供了免安装的官方托管在线版本。\n\n## 核心功能\n- **多技术栈支持**：支持输出 HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap 以及 Ionic + Tailwind。\n- **录屏转原型**：支持将一段网站操作的屏幕录像直接转换为可交互的功能原型。\n- **多模型支持与图像处理**：\n - 支持调用 Gemini 3 Flash / 3.1 Pro、GPT-5.5 / GPT-5.4 Mini、Claude Opus 等模型进行代码生成。\n - 配合 Replicate 实现图像生成、抠图/背景去除（remove backgrounds）及图片编辑功能。\n - 借助 Gemini 提取截图中原有的真实 Logo 和图片素材。\n- **生成预览自检（Screenshot Preview）**：利用 Playwright/Chromium 无头浏览器对生成的页面进行视觉自检与校对。\n\n## 适合谁用\n- 想要快速将设计稿或截图还原为前端代码的开发者。\n- 需要二次开发、自托管代码转换工具的工程师。\n- 想使用在线版免配置快速体验功能的用户。\n\n## 安装步骤\n\n### 方式一：本地手动运行\n\n**1. 启动后端**（包管理工具使用 Poetry，若未安装需先运行 `pip install --upgrade poetry`）：\n```bash\ncd backend\n# 配置 API 密钥（至少需要一个提供商的 Key）\necho \"OPENAI_API_KEY=sk-your-key\" > .env\necho \"ANTHROPIC_API_KEY=your-key\" >> .env\necho \"GEMINI_API_KEY=your-key\" >> .env\necho \"REPLICATE_API_KEY=r8_your-key\" >> .env\n\n# 安装依赖\npoetry install\n\n# 安装 Chromium 浏览器用于截图预览\n# 注意：Linux 系统请改用 poetry run playwright install --with-deps chromium\npoetry run playwright install chromium\n\n# 激活虚拟环境（执行该命令输出的提示，例如 source /path/to/venv/bin/activate）\npoetry env activate\n\n# 启动后端服务\npoetry run uvicorn main:app --reload --port 7001\n```\n\n**2. 启动前端**：\n```bash\ncd frontend\npnpm install\npnpm dev\n```\n启动完成后，在浏览器打开 `http://localhost:5173` 即可使用。\n\n### 方式二：Docker 运行\n在项目根目录下执行：\n```bash\necho \"OPENAI_API_KEY=sk-your-key\" > .env\ndocker-compose up -d --build\n```\n构建启动后访问 `http://localhost:5173`。注意：此模式不支持文件改动热重载。\n\n## 配置说明\n- **API Key 要求**：在 `OPENAI_API_KEY`、`ANTHROPIC_API_KEY`、`GEMINI_API_KEY` 中**至少提供一个**。官方强烈推荐配置 `GEMINI_API_KEY`（用于资源提取及视频模式）和 `REPLICATE_API_KEY`（用于生图与抠图），提供更多 Key 可获得更好的生成效果。\n- **前端配置 Key**：OpenAI、Anthropic 和 Gemini 的 Key 也可在前端页面加载后点击齿轮（Settings）图标直接填入。但 `REPLICATE_API_KEY` 必须写入 `backend/.env`。\n- **更换后端端口**：如需更改后端端口，需在 `frontend/.env.local` 中配置 `VITE_WS_BACKEND_URL`。\n- **本地模型支持**：支持通过 Ollama 接入开源模型（但官方由于效果较差不推荐，详情参考官方 Issue #354）。\n\n## 常见问题\n- **后端启动报错**：可参考官方排查指南中的已知解决方案（Issue #3 讨论），若仍无法解决可在仓库提交 Issue。\n- **如何获取 OpenAI API Key**：请参考项目根目录下的 `Troubleshooting.md`。\n- **OpenAI 代理配置**：若无法直接访问 OpenAI API，可使用 VPN 或在配置文件中设置 `OPENAI_BASE_URL`。（注：具体文件路径原文被截断未完整说明，请查看原仓库）"
}
原始 README 摘录（英文原文，节选前 3000 字符）
# screenshot-to-code Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI. The easiest way to try this is using <a href="https://screenshottocode.com/?utm_source=github&utm_medium=readme&utm_campaign=oss_readme&utm_content=top_cta" target="_blank" rel="noopener noreferrer">the official, hosted product at screenshottocode.com →</a> https://github.com/user-attachments/assets/ec08a5e6-9606-41c5-b03a-1bf47dfeba75 Supported stacks: - HTML + Tailwind - HTML + CSS - React + Tailwind - Vue + Tailwind - Bootstrap - Ionic + Tailwind Default AI models: - Gemini 3 Flash Preview and Gemini 3.1 Pro Preview - the best models - GPT-5.5 and GPT-5.4 Mini - Claude Opus 4.6, Claude Opus 4.8 - z-image-turbo (using Replicate) for image generation See the [Examples](#-examples) section below for more demos. Screenshot to Code also supports taking a screen recording of a website in action and turning that into a functional prototype.  ## 🛠 Getting Started Choose the path that fits what you want to do: - **Run locally:** best if you want to customize, self-host, or contribute. - **Use the hosted app:** the fastest way to try Screenshot to Code with no local setup. <a href="https://screenshottocode.com/?utm_source=github&utm_medium=readme&utm_campaign=oss_readme&utm_content=getting_started_cta" target="_blank" rel="noopener noreferrer">Open the hosted app →</a> Running locally requires API keys and a backend/frontend setup. The app has a React/Vite frontend and a FastAPI backend. ### API keys You need **at least one** model provider key (OpenAI, Anthropic, or Gemini). **Gemini and Replicate are strongly recommended for the best quality of screenshot-to-code accuracy** — Gemini powers asset extraction (reusing the real logos/images from your screenshot) and Replicate powers image generation, background removal, and image editing. Adding all four keys gives the best results and lets you compare multiple models per generation. | Key | Required? | What it unlocks | |-----|-----------|-----------------| | `OPENAI_API_KEY` | One of these three | GPT code-gen variants (GPT-5.5, GPT-5.4 Mini) | | `ANTHROPIC_API_KEY` | One of these three | Claude code-gen variants (Opus 5, Opus 4.8, Fable 5, Sonnet 4.6) | | `GEMINI_API_KEY` | One of these three — **strongly recommended** | Gemini code-gen variants (3 Flash, 3.1 Pro); extracts real assets from the screenshot; required for video mode | | `REPLICATE_API_KEY` | **Strongly recommended** | Image editing, background removal, and Replicate-backed image generation — without it, `edit_images` and `remove_backgrounds` are unavailable | With more keys, the app automatically picks a stronger mix of models per variant; with a single key it uses that provider's models only. If you'd like to run the app with Ollama open-source models (not recommended due to poor阅读完整原文
商业机会分析 规则生成（AI 未配置）
综合评分 45.0 分。该项目在“个人可实施性”维度得 60 分，“付费可能性”维度得 20.0 分，差异化空间 40.0 分（评分依据见评分卡）。
面向细分需求的二次开发产品
| 产品构想 | 基于 screenshot-to-code 的核心能力，聚焦一个更窄的场景（如某平台、某行业）做差异化。 |
| 目标用户 | 该细分场景用户 |
| 难度/周期 | 中 · 2~6 周 |
| 收费模式 | 买断制 / 订阅制 / 广告 |
| 竞争风险 | 细分需求规模需验证 |
| 依据 | AI 推测：基于项目主题标签的判断 |
封装为在线小工具或 API 服务
| 产品构想 | 把项目最常用的一个功能做成网页小工具，靠流量变现或按量计费。 |
| 目标用户 | 搜索引擎带来的长尾用户 |
| 难度/周期 | 低 · 1~3 周 |
| 收费模式 | 免费引流 + 增值功能 / API 按量计费 |
| 竞争风险 | 同质化竞争，需做好 SEO |
| 依据 | AI 推测：基于技术栈与部署特征的判断 |
以上为规则引擎基于仓库公开数据生成的参考结论，包含推测成分，不构成投资或创业承诺；配置 AI 后可获得更深入的分析。
报告会保存到 个人中心
竞品与相似项目 GitHub Search 真实检索
| 项目 | 中文简介 | Stars | 语言 |
|---|---|---|---|
| emilwallner/Screenshot-to-code | 利用神经网络将设计原型图转换为静态网页的工具。 | 16,531 | HTML |
| riccardoperra/codeimage | 基于 SolidJS 和 Fastify 构建的代码截图美化工具。 | 2,092 | TypeScript |
| mostafasadeghi97/design2code | 将网页设计截图转换为干净的 HTML/CSS 代码。 | 684 | TypeScript |
| oil-oil/draw-ui | 面向 Claude Code 与 Codex 的 UI 设计稿生成与页面还原技能插件。 | 551 | Python |
| oncework/Codeexpander | 集成截图标注与剪贴板管理的跨平台文本与代码片段快速扩展工具。 | 475 | JavaScript |
| Sfedfcv/redesigned-pancake | 中文介绍暂未生成 Skip to content github / docs Code Issues 80 Pull requests 3 |
278 | - |
以上为通过 GitHub 官方 Search API 检索的相似项目，功能差异与优劣势需进一步人工确认，配置 AI 后可生成对比分析。
项目优势与风险
| 技术成熟度 | 创建于 ，最近推送 |
| 社区活跃 | Star 81,162 / Fork 0 / Issue 0（数据支持，可自行核实） |
| 许可证 | 未检测到（需人工确认） |
| 主要风险 | 上游项目方向可能变化；同赛道竞争者较多（见竞品表）；热度与需求不完全等价 |
安装与使用
快速开始（以仓库 README 为准）
git clone https://github.com/abi/screenshot-to-code.git cd screenshot-to-code # 请阅读仓库 README 获取确切安装步骤（依赖、配置、启动命令）
术语说明：Docker＝应用容器（把程序和依赖打包运行）；API Key＝调用外部服务的密钥；Git Clone＝把仓库代码下载到本地。常见错误：API Key 未配置 / 端口占用 / 数据库连接失败，多数项目在 README 的 Troubleshooting 章节有说明。