Screenshot-to-code是一个简单的工具，可使用 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 开源模型运行该应用程序（由于结果质量差，不推荐），请关注此评论。
运行后端（我使用 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 70012、使用Docker
如果你的系统上安装了 Docker，请在根目录中运行：
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build该应用程序将在 http://localhost:5173 上启动并运行。请注意，你无法使用此设置开发应用程序，因为文件更改不会触发重建。
3、常见问题解答
我在设置后端时遇到错误。我该如何修复它？
试试这个。如果仍然不起作用，请打开一个问题。
如何获取 OpenAI API 密钥？
请参阅这里的说明。
如何配置 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。
原文链接：屏幕截图生成代码 - 汇智网