开源项目：利用AI将截图或原型图转为实际的网页代码

项目简介

screenshot-to-code 是一个创新的开源工具，它利用人工智能技术将截图、原型图和 Figma 设计转换为干净、功能完备的代码。这个项目支持多种编程栈和 AI 模型，使得开发者和设计师能够更高效地将视觉设计转化为实际的网页代码。

• 项目名称: screenshot-to-code
• 项目地址: GitHub - abi/screenshot-to-code

支持的编程栈:

• HTML + Tailwind
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

支持的 AI 模型:

• GPT-4O（最佳模型）
• GPT-4 Turbo (April 2024)
• GPT-4 Vision (November 2023)
• Claude 3 Sonnet
• DALL-E 3（用于图像生成）

特点:

• 该项目提供了一个无需安装即可试用的付费托管版本。
• 支持将视频或屏幕录制的网站操作转换为功能性原型。
• 提供了详细的入门指南，包括如何设置后端和前端，以及如何使用 Docker 部署应用。
• 针对常见问题提供了 FAQ 部分，帮助用户解决在设置过程中可能遇到的问题。

技术栈:

• 前端使用 React/Vite
• 后端使用 FastAPI

入门指南:

1. 需要一个 OpenAI API 密钥，以访问 GPT-4 Vision API 或者一个 Anthropic 密钥，如果选择使用 Claude Sonnet 或者实验性的视频支持。
2. 使用 Poetry 进行包管理，通过提供的命令设置环境变量、安装依赖并启动后端。
3. 前端通过 Yarn 管理依赖，并通过 yarn dev 命令启动开发服务器。
4. 应用将运行在 http://localhost:5173，可以通过浏览器访问。

Docker 部署:

• 如果系统上安装了 Docker，可以通过提供的命令快速启动应用。

FAQ:

• 如何解决后端设置中的错误？
• 如何获取 OpenAI API 密钥？
• 如何配置 OpenAI 代理？
• 如何更新前端连接的后端主机？
• 解决运行后端时出现的 UTF-8 编码错误。

示例:

项目中提供了一些示例，如 NYTimes 和 Instagram 页面的代码转换，以及 Hacker News 的示例，展示了颜色调整的过程。

托管版本:

• 项目还提供了一个付费的托管版本，用户可以在这里尝试使用，或者按照入门指南进行本地安装，使用自己的 API 密钥。

反馈与支持:

• 用户可以通过提交 issue 或者在 Twitter 上联系开发者来提供反馈、功能请求或报告 bug。

screenshot-to-code 项目为开发者和设计师提供了一个强大的工具，使得从设计到代码的转换过程更加流畅和高效。通过 AI 的辅助，它大大减少了手动编码的工作量，同时也提高了最终代码的质量和一致性。