# screenshot-to-code
一个简单的工具，可将截图、设计稿和 Figma 设计转换为干净且功能完整的代码，使用 AI 实现。**现已支持 Claude Sonnet 3.5 和 Gemini 2.0 Flash！**
[项目链接](https://github.com/abi/screenshot-to-code/assets/23818/6cebadae-2fe3-4986-ac6a-8fb9db030045)
支持的技术栈：
支持的 AI 模型：
参见 [示例](#-examples) 部分以查看更多演示内容。
我们还新增了对**将网站视频/屏幕录制内容转化为功能原型**的实验性支持。
[了解更多视频功能](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。
[在 Twitter 上关注我获取更新](https://twitter.com/_abi_)。
## 🌍 托管版本
[试用托管版（付费）](https://screenshottocode.com)。如果您是中大型企业（50 名以上员工），[预约会议以探索定制企业计划](https://cal.com/abi-raja-wy2pfh/30min)。
## 🛠 快速开始
应用包括一个基于 React/Vite 的前端和一个基于 FastAPI 的后端。
所需密钥：
如果您希望使用 Ollama 开源模型运行应用（结果质量较差，不推荐），请参见 [此评论](https://github.com/abi/screenshot-to-code/issues/354#issuecomment-2435479853)。
### 启动后端（我使用 Poetry 进行包管理 - 如果没有，先安装 `pip install poetry`）：
bash</s><i> </i>cd backend echo "OPENAI_API_KEY=sk-your-key" > .env echo "ANTHROPIC_API_KEY=your-key" >> .env poetry install poetry shell poetry run uvicorn main:app --reload --port 7001<i> </i><e>
您也可以通过前端的设置对话框（点击加载前端后的齿轮图标）设置密钥。
### 启动前端：
bash</s><i> </i>cd frontend yarn yarn dev<i> </i><e>
打开 [http://localhost:5173](http://localhost:5173) 使用应用。
如果希望在其他端口运行后端，请更新 `frontend/.env.local` 中的 `VITE_WS_BACKEND_URL`。
### 模拟模式（避免浪费 GPT4-Vision 额度）：
bash</s><i> </i>MOCK=true poetry run uvicorn main:app --reload --port 7001<i> </i><e>
### 使用 Docker
如果系统已安装 Docker，在项目根目录运行：
bash</s><i> </i>echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build<i> </i><e>
应用将运行在 [http://localhost:5173](http://localhost:5173)。注意，此配置无法用于开发环境，文件变更不会触发重新构建。
## 🙋♂️ 常见问题
## 📚 示例
**纽约时报**
| 原始版本 | 复刻版本 |
|---|---|
 |  |
**Instagram 页面（不含明星照片）**
https://github.com/abi/screenshot-to-code/assets/23818/503eb86a-356e-4dfc-926a-dabdb1ac7ba1
**Hacker News**（初始颜色有误，我们手动调整）
https://github.com/abi/screenshot-to-code/assets/23818/3fec0f77-44e8-4fb3-a769-ac7410315e5d
