项目简介
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
入门指南:
- 需要一个
OpenAI API密钥，以访问GPT-4 Vision API或者一个Anthropic密钥，如果选择使用Claude Sonnet或者实验性的视频支持。 - 使用
Poetry进行包管理，通过提供的命令设置环境变量、安装依赖并启动后端。 - 前端通过
Yarn管理依赖，并通过yarn dev命令启动开发服务器。 - 应用将运行在 http://localhost:5173，可以通过浏览器访问。
Docker 部署:
- 如果系统上安装了
Docker，可以通过提供的命令快速启动应用。
FAQ:
- 如何解决后端设置中的错误？
- 如何获取
OpenAI API密钥？ - 如何配置
OpenAI代理？ - 如何更新前端连接的后端主机？
- 解决运行后端时出现的
UTF-8编码错误。
示例:
项目中提供了一些示例，如 NYTimes 和 Instagram 页面的代码转换，以及 Hacker News 的示例，展示了颜色调整的过程。
托管版本:
- 项目还提供了一个付费的托管版本，用户可以在这里尝试使用，或者按照入门指南进行本地安装，使用自己的
API密钥。
反馈与支持:
- 用户可以通过提交
issue或者在Twitter上联系开发者来提供反馈、功能请求或报告 bug。
screenshot-to-code 项目为开发者和设计师提供了一个强大的工具，使得从设计到代码的转换过程更加流畅和高效。通过 AI 的辅助，它大大减少了手动编码的工作量，同时也提高了最终代码的质量和一致性。
文章来源：
鸿辰
版权声明：本网站可能会转载或引用其他来源的文章、图片、数据等信息。对于这些转载内容，版权归原作者所有。本站尊重原作者的劳动成果，并在可能的情况下注明来源和作者。如有任何版权问题，请及时联系，收到后将第一时间处理。