# screenshot-to-code
**Repository Path**: yanlang0123/screenshot-to-code
## Basic Information
- **Project Name**: screenshot-to-code
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-14
- **Last Updated**: 2025-11-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 截图转代码
一个使用 AI 将截图、设计稿和 Figma 设计转换为简洁可用代码的简单工具。现已支持 Claude Sonnet 3.7！
https://github.com/abi/screenshot-to-code/assets/23818/6cebadae-2fe3-4986-ac6a-8fb9db030045
支持的开发栈：
- HTML + Tailwind
- HTML + CSS
- React + Tailwind
- Vue + Tailwind
- Bootstrap
- Ionic + Tailwind
- SVG
支持的 AI 模型：
- Claude Sonnet 3.7 - 最佳模型！
- GPT-4o - 同样推荐！
- DALL-E 3 或 Flux Schnell（通过 Replicate）用于图像生成
更多演示请参阅下面的[示例](#-示例)部分。
我们还新增了实验性功能：可以将网站操作视频/屏幕录像转换为可运行的原型。
[在此了解视频功能的更多信息](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。
[在 Twitter 上关注我获取更新](https://twitter.com/_abi_)。
## 🌍 在线版本
[在托管版本上在线试用（付费）](https://screenshottocode.com)。
## 🛠 快速开始
该应用包含 React/Vite 前端和 FastAPI 后端。
所需密钥：
- [具有 GPT-4 访问权限的 OpenAI API 密钥](https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md) 或 Anthropic 密钥（可选）
- 建议同时准备两种密钥，以便比较 Claude 和 GPT4o 的结果
如果你想使用 Ollama 开源模型运行此应用（由于效果较差，不推荐），[请参考此评论](https://github.com/abi/screenshot-to-code/issues/354#issuecomment-2435479853)。
运行后端（我使用 Poetry 进行包管理 - 如果没有安装请执行 `pip install --upgrade poetry`）：
```bash
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
```
你也可以在前端的设置对话框中配置密钥（加载前端后点击齿轮图标）。
运行前端：
```bash
cd frontend
yarn
yarn dev
```
打开 http://localhost:5173 即可使用应用。
如果希望在后端使用不同端口，请更新 `frontend/.env.local` 中的 VITE_WS_BACKEND_URL
出于调试目的，如果不想消耗 GPT4-Vision 额度，可以在模拟模式下运行后端（会流式传输预录制的响应）：
```bash
MOCK=true poetry run uvicorn main:app --reload --port 7001
```
## Docker
如果系统已安装 Docker，在根目录下运行：
```bash
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
```
应用将在 http://localhost:5173 启动并运行。注意此设置无法进行应用开发，因为文件更改不会触发重新构建。
## 🙋♂️ 常见问题
- **设置后端时遇到错误怎么办？** [尝试此解决方案](https://github.com/abi/screenshot-to-code/issues/3#issuecomment-1814777959)。如果仍无法解决，请提交 issue。
- **如何获取 OpenAI API 密钥？** 参见 https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
- **如何配置 OpenAI 代理？** - 如果无法直接访问 OpenAI API（例如由于国家/地区限制），可以尝试使用 VPN，或者配置 OpenAI 基础 URL 使用代理：在 `backend/.env` 中设置 OPENAI_BASE_URL，或直接在 UI 的设置对话框中配置。确保 URL 路径中包含 "v1"，格式如下：`https://xxx.xxxxx.xxx/v1`
- **如何更新前端连接的后端主机？** - 在 front/.env.local 中配置 VITE_HTTP_BACKEND_URL 和 VITE_WS_BACKEND_URL。例如设置 VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001
- **运行后端时出现 UTF-8 错误？** - 在 Windows 上，使用 notepad++ 打开 .env 文件，然后转到编码菜单选择 UTF-8。
- **如何提供反馈？** 对于反馈、功能请求和错误报告，请提交 issue 或在 [Twitter](https://twitter.com/_abi_) 上联系我。
## 📚 示例
**纽约时报**
| 原图 | 复刻结果 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 
| 
|
**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