> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 屏幕截图生成代码
- URL: https://www.hubwiz.com/blog/screenshot-to-code/
- Published: 2024-11-25T04:37:56.000Z
- Updated: 2024-11-25T04:37:56.000Z
- Description: Screenshot-to-code是一个简单的工具，可使用 AI 将屏幕截图、模型和 Figma 设计转换为干净、实用的代码。现在支持 Claude Sonnet 3.5 和 GPT-4o！
- Author: admin
- Tags: TOOL, CODE GENERATION, SCREENSHOT-TO-CODE, CLAUDE, OPENAI, GPT4o, DALL-E, FLUX.1, DOCKER, #Import 2026-10-14 14:41

[Screenshot-to-code](https://github.com/abi/screenshot-to-code?ref=hubwiz.com)是一个简单的工具，可使用 AI 将屏幕截图、模型和 Figma 设计转换为干净、实用的代码。现在支持 Claude Sonnet 3.5 和 GPT-4o！

Screenshot-to-code支持的技术栈：

- HTML + Tailwind
- HTML + CSS
- React + Tailwind
- Vue + Tailwind
- Bootstrap
- Ionic + Tailwind
- SVG

Screenshot-to-code支持的 AI 模型：

- Claude Sonnet 3.5 - 最佳模型！
- GPT-4o - 也推荐！
- DALL-E 3 或 Flux Schnell（使用 Replicate）用于图像生成

## 1、快速入门

Screen-to-code包含React/Vite 前端和 FastAPI 后端。

所需密钥：

- 可访问 GPT-4 的 OpenAI API 密钥或 Anthropic 密钥（可选）
- 建议同时使用这两种密钥，以便你比较 Claude 和 GPT4o 的结果

如果你想使用 Ollama 开源模型运行该应用程序（由于结果质量差，不推荐），请[关注此评论](https://github.com/abi/screenshot-to-code/issues/354?ref=hubwiz.com#issuecomment-2435479853)。

运行后端（我使用 Poetry 进行包管理 - 安装请使用 `pip install poetry`）：

```
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
```

你还可以使用前端的设置对话框设置密钥（加载前端后单击齿轮图标）。

运行前端：

```
cd frontend
yarn
yarn dev
```

打开 `http://localhost:5173` 以使用该应用程序。

如果希望在其他端口上运行后端，请在 `frontend/.env.local` 中更新 `VITE_WS_BACKEND_URL` 。

出于调试目的，如果你不想浪费 GPT4-Vision 积分，可以在模拟模式下运行后端（流式传输预先录制的响应）：

```
MOCK=true poetry run uvicorn main:app --reload --port 7001
```

## 2、使用Docker

如果你的系统上安装了 Docker，请在根目录中运行：

```
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
```

该应用程序将在 `http://localhost:5173` 上启动并运行。请注意，你无法使用此设置开发应用程序，因为文件更改不会触发重建。

## 3、常见问题解答

> 我在设置后端时遇到错误。我该如何修复它？

[试试这个](https://github.com/abi/screenshot-to-code/issues/3?ref=hubwiz.com#issuecomment-1814777959)。如果仍然不起作用，请打开一个问题。

> 如何获取 OpenAI API 密钥？

请参阅[这里的说明](https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md?ref=hubwiz.com)。

> 如何配置 OpenAI 代理？ 

如果你无法直接访问 OpenAI API，可以配置 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`。

---

原文链接：[Drop in a screenshot and convert it to clean code](https://github.com/abi/screenshot-to-code?ref=hubwiz.com)

汇智网翻译整理，转载请标明出处