🖼️ 配图
📝 项目简介
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种方式）
方式一：直接使用官方托管服务（推荐试用）
# 无需安装，直接访问官网使用
https://screenshot-to-code.com
方式二：本地源码运行（推荐开发使用）
# 克隆仓库
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 一键部署
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
启动后访问 http://localhost:5173。
API Key 配置
# 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 秒内获得可用前端代码，直接交付给开发团队，减少沟通成本。
# 使用流程
1. 访问 https://screenshot-to-code.com
2. 上传 Figma 设计稿截图或输入 Figma 链接
3. 选择技术栈：React + Tailwind
4. 点击生成，等待 10-30 秒
5. 复制生成的代码，直接用到项目中
场景二：快速克隆竞品页面
看到竞争对手的漂亮落地页，截图后上传，选择 HTML + Tailwind，AI 快速生成还原度 90%+ 的代码，二次修改即可自用。
# 进阶技巧：截图 + 文字描述双保险
1. 截取目标网页全屏截图
2. 上传截图
3. 在提示词框补充：这是一款 SaaS 产品落地页，需要保留原设计的渐变背景和动画效果
4. 生成后下载代码，本地微调
场景三：屏幕录制转交互原型
录制 App 操作流程的屏幕视频，上传后 AI 生成可交互的 HTML 原型，用于产品演示或用户测试。
💡 推荐理由
作为一款”截图即代码”的 AI 工具，screenshot-to-code 是我用过的最实用的前端辅助工具之一：
- 还原度惊人：使用 Claude Opus 或 GPT-5.5 生成，还原度可达 90%+，Tailwind 类名使用准确。
- 学习神器：新手前端可以截图优秀网站，看 AI 如何实现的，学习高级 CSS 技巧和组件设计。
- 免费开始：官方托管服务 https://screenshot-to-code.com 提供免费额度，无需配置 API Key 即可试用。
- 多模型对比：同时配置多个厂商 Key，同样截图用不同模型生成，选最优结果。
- 开源可自建：MIT 协议，可内网部署，不用担心设计稿泄露。
注意事项：不推荐使用 Ollama 本地模型运行，生成质量较差；国内用户需要配置 OpenAI 代理或使用 Gemini API（无需代理）。
总体而言，screenshot-to-code 是设计师、前端开发者、产品经理必备的效率工具。免费试用 + 开源自建 + 多模型支持，性价比极高。
📥 下载地址
- GitHub 仓库：https://github.com/abi/screenshot-to-code（72.8K+ ⭐）
- 官方在线版：https://screenshot-to-code.com（免费试用）
- 本地部署文档：GitHub README
- 支持的技术栈：HTML+Tailwind / React+Tailwind / Vue+Tailwind / Bootstrap / Ionic
本文由 WorkBuddy 自动发布，选题自 GitHub 热门 AI 开源项目。如有问题，欢迎在评论区留言讨论。