### [Screenshot to Code：72.7K Stars！截图秒变代码，让前端开发效率提升10倍](https://www.willai.cc/article/896)

**Published:** 2026-05-30T11:25:23

**Author:** hiyoho

**Excerpt:** 上传截图，AI自动生成对应代码 🚀 项目简介 Screenshot to Code 是一款AI驱动的开发辅助神器，只需上传一张网页截图、线框图或Figma设计稿，即可自动生成干净的可用代码。支持 HTML+CSS、React、Vue、Boo

![Screenshot to Code 演示](https://admin.hiyoho.com/wp-content/uploads/2026/05/s2c_featured.png)

上传截图，AI自动生成对应代码

* * *

### 🚀 项目简介

**Screenshot to Code** 是一款AI驱动的开发辅助神器，只需上传一张网页截图、线框图或Figma设计稿，即可自动生成干净的可用代码。支持 HTML+CSS、React、Vue、Bootstrap 等多种技术栈，让设计稿到代码的转换从数小时缩短到几秒钟。

* * *

## ⚙️ 安装要求和过程

### 💡 环境要求

-   Python 3.9+（后端依赖）
-   Node.js 18+（前端依赖）
-   Poetry（Python 依赖管理，推荐）
-   Docker（可选，快速部署方式）
-   API密钥：OpenAI / Anthropic / Google Gemini（三选一即可）

### 🚀 快速安装步骤

方式一：本地源码运行（推荐开发调试）

```
# 1. 克隆项目
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# 2. 配置API密钥（后端）
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env

# 3. 安装依赖并启动后端
poetry install
poetry run uvicorn main:app --reload --port 7001

# 4. 新终端启动前端
cd ../frontend
yarn
yarn dev
```

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

方式二：Docker 一键运行（推荐快速体验）

```
# 在项目根目录执行
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
```

* * *

## ✨ 核心功能

### 🎯 截图转代码

上传任意网页截图或设计稿，AI自动分析布局结构，生成对应前端代码，支持多种技术栈自由切换。

### 🔄 多模型支持

内置支持 Claude Opus/Sonnet、GPT-4.5/4.1、Gemini 3 Flash/Pro 等顶级模型，也支持自定义API兼容接口。

### 🛠️ 多技术栈输出

支持 HTML+CSS、HTML+Tailwind、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic+Tailwind、SVG 等主流技术栈。

### 🎬 录屏转原型（实验性）

支持上传网站操作录屏视频，AI直接生成可交互的功能原型，非常适合产品快速验证和演示。

### 🔒 隐私优先，本地可控

支持通过 Ollama 运行本地开源模型，所有数据不出本地；也可自托管 Docker 版本，完全掌控数据隐私。

* * *

## 🎬 典型使用场景

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

设计师完成 Figma 设计稿后，开发人员只需截图上传，即可快速获得可运行的前端代码骨架，大幅减少从设计到代码的重复劳动。实测可将一个中等复杂度页面从 **2小时** 缩短到 **30秒** 出初稿。

### 🎓 场景二：学习前端的新手临摹练习

想临摹一个漂亮的网页但不懂怎么实现？截一张图上传，AI 帮你生成完整代码，新手可以在生成的代码基础上学习和修改，快速提升前端技能。

### 🚀 场景三：产品快速原型验证

产品经理用录屏功能记录期望的操作流程，Screenshot to Code 直接生成可交互的 HTML 原型，团队可以在此基础上快速评审和迭代，不需要写一行代码。

* * *

## 💎 推荐理由

我第一次用这个工具的时候，简直惊呆了——随手截了一张纽约时报首页的截图上传，不到 **20秒** 就生成了一个几乎一模一样的 HTML 页面，连字体、间距、配色都还原得非常到位！

最让我惊喜的是它对 **Tailwind CSS** 的支持——生成的代码不是一堆乱七八糟的行内样式，而是结构清晰、可直接维护的 Tailwind 类，这对实际项目来说太重要了。

当然也要说一下不足：复杂交互（比如多步骤表单、动画过渡）还是需要人工补充；如果使用 OpenAI/Claude 的 API，每次生成会产生一定的 **API 费用**（不过项目支持 Ollama 本地模型，可以零成本使用）。总体来说，这是目前 **「设计稿转代码」** 这个细分领域里最成熟、最好用的开源方案，没有之一。

* * *

## 📥 下载地址

-   🌟 **GitHub 仓库**：[https://github.com/abi/screenshot-to-code](https://github.com/abi/screenshot-to-code)（72.7K+ Stars）
-   🌐 **在线体验版**：[https://screenshottocode.com](https://screenshottocode.com)（官方付费版，可快速体验效果）
-   📖 **Screen Recording to Code 文档**：[查看 Wiki](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)
-   🐛 **问题反馈**：[GitHub Issues](https://github.com/abi/screenshot-to-code/issues)

* * *

— 由 WorkBuddy AI 自动采集撰写 · 开源项目系列第43期 —

**Tags:** AI, AI Agent, AI编程, GitHub, Tailwind, 人工智能, 前端开发, 开源, 设计稿转代码

**Categories:** 开源项目

---