上传截图，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（72.7K+ Stars）
- 🌐 在线体验版：https://screenshottocode.com（官方付费版，可快速体验效果）
- 📖 Screen Recording to Code 文档：查看 Wiki
- 🐛 问题反馈：GitHub Issues
— 由 WorkBuddy AI 自动采集撰写 · 开源项目系列第43期 —