### [screenshot-to-code：72.8K Stars！截图秒变代码，设计师和前端开发者必备神器](https://www.willai.cc/article/1383)

**Published:** 2026-06-08T07:19:23

**Author:** hiyoho

**Excerpt:** 🖼️ 配图 screenshot-to-code – 截图秒变可用代码 📝 项目简介 screenshot-to-code 是一款 AI 驱动的 UI 转代码神器，上传网页截图、线框图、Figma 设计稿甚至屏幕录制，AI 即可将其转化为干

## 🖼️ 配图

![screenshot-to-code 演示](https://raw.githubusercontent.com/abi/screenshot-to-code/main/docs/demo.gif)

screenshot-to-code – 截图秒变可用代码

## 📝 项目简介

**screenshot-to-code** 是一款 AI 驱动的 UI 转代码神器，上传网页截图、线框图、Figma 设计稿甚至屏幕录制，AI 即可将其转化为干净可用的前端代码。项目在 GitHub 上已获得 **72.8K+ Stars**，是设计师和前端开发者必备的效率工具。

## ⚙️ 安装要求和过程

### 环境要求

-   **Node.js** 18+（前端运行依赖）
-   **Python** 3.10+（后端运行依赖，推荐用 Poetry 管理）
-   **AI 模型 API Key**：OpenAI / Anthropic / Google Gemini 至少其一
-   **Yarn**（前端包管理）

### 快速安装（3种方式）

**方式一：直接使用官方托管服务（推荐试用）**

```bash
# 无需安装，直接访问官网使用
https://screenshot-to-code.com
```

**方式二：本地源码运行（推荐开发使用）**

```bash
# 克隆仓库
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# 启动后端
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install && poetry run uvicorn main:app --reload --port 7001

# 新终端，启动前端
cd frontend
yarn && yarn dev
```

启动后访问 `http://localhost:5173` 即可使用。

**方式三：Docker 一键部署**

```bash
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
```

启动后访问 `http://localhost:5173`。

### API Key 配置

```bash
# backend/.env 配置示例
OPENAI_API_KEY=sk-your-openai-key
ANTHROPIC_API_KEY=your-anthropic-key
GEMINI_API_KEY=your-gemini-key

# 国内用户可配置代理
OPENAI_BASE_URL=https://your-proxy-url/v1
```

## ✨ 核心功能

### 1\. 多模态输入支持

-   支持上传**网页截图**，一键转换为对应代码
-   支持**Figma 设计稿**直接导入转代码
-   支持**线框图/手绘草图**转可用 UI
-   支持**屏幕录制**转可交互原型（最新功能！）

### 2\. 多技术栈输出

-   **HTML + Tailwind CSS**（默认，最快）
-   **React + Tailwind**（最流行）
-   **Vue + Tailwind**
-   **Bootstrap**
-   **Ionic + Tailwind**（移动端）

### 3\. 多 AI 模型对比

-   支持同时配置 **OpenAI、Claude、Gemini** 多个厂商 API
-   可在界面上切换模型，对比不同模型的生成效果
-   默认支持：GPT-5.5、Claude Opus 4.8、Gemini 3 Flash

### 4\. 实用辅助功能

-   支持**代理配置**，国内用户可通过 `OPENAI_BASE_URL` 配置代理
-   支持**自定义后端地址**，可对接自己部署的后端服务
-   支持**图像生成模型** z-image-turbo（基于 Replicate）

## 🚀 典型使用场景

### 场景一：设计师交付前端代码

设计师完成 Figma 设计稿后，导入 screenshot-to-code，选择 React + Tailwind 技术栈，10 秒内获得可用前端代码，直接交付给开发团队，减少沟通成本。

```bash
# 使用流程
1. 访问 https://screenshot-to-code.com
2. 上传 Figma 设计稿截图或输入 Figma 链接
3. 选择技术栈：React + Tailwind
4. 点击生成，等待 10-30 秒
5. 复制生成的代码，直接用到项目中
```

### 场景二：快速克隆竞品页面

看到竞争对手的漂亮落地页，截图后上传，选择 HTML + Tailwind，AI 快速生成还原度 90%+ 的代码，二次修改即可自用。

```bash
# 进阶技巧：截图 + 文字描述双保险
1. 截取目标网页全屏截图
2. 上传截图
3. 在提示词框补充：这是一款 SaaS 产品落地页，需要保留原设计的渐变背景和动画效果
4. 生成后下载代码，本地微调
```

### 场景三：屏幕录制转交互原型

录制 App 操作流程的屏幕视频，上传后 AI 生成可交互的 HTML 原型，用于产品演示或用户测试。

## 💡 推荐理由

作为一款”截图即代码”的 AI 工具，screenshot-to-code 是我用过的最实用的前端辅助工具之一：

1.  **还原度惊人**：使用 Claude Opus 或 GPT-5.5 生成，还原度可达 90%+，Tailwind 类名使用准确。
2.  **学习神器**：新手前端可以截图优秀网站，看 AI 如何实现的，学习高级 CSS 技巧和组件设计。
3.  **免费开始**：官方托管服务 https://screenshot-to-code.com 提供免费额度，无需配置 API Key 即可试用。
4.  **多模型对比**：同时配置多个厂商 Key，同样截图用不同模型生成，选最优结果。
5.  **开源可自建**：MIT 协议，可内网部署，不用担心设计稿泄露。

**注意事项**：不推荐使用 Ollama 本地模型运行，生成质量较差；国内用户需要配置 OpenAI 代理或使用 Gemini API（无需代理）。

总体而言，screenshot-to-code 是**设计师、前端开发者、产品经理**必备的效率工具。免费试用 + 开源自建 + 多模型支持，性价比极高。

## 📥 下载地址

-   **GitHub 仓库**：[https://github.com/abi/screenshot-to-code](https://github.com/abi/screenshot-to-code)（72.8K+ ⭐）
-   **官方在线版**：[https://screenshot-to-code.com](https://screenshot-to-code.com)（免费试用）
-   **本地部署文档**：[GitHub README](https://github.com/abi/screenshot-to-code#readme)
-   **支持的技术栈**：HTML+Tailwind / React+Tailwind / Vue+Tailwind / Bootstrap / Ionic

* * *

_本文由 WorkBuddy 自动发布，选题自 GitHub 热门 AI 开源项目。如有问题，欢迎在评论区留言讨论。_

**Tags:** AI, AI Agent, AI开源, GitHub, LLM, screenshot-to-code, UI生成, 人工智能, 光影效果, 前端开发

**Categories:** 开源项目

---