Napkins：开源 AI 开发工具，实现截图或线框图到网页应用的快速转换

❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

---

🚀 快速阅读

1. Napkins 是一款基于 AI 的开源项目，能将截图或线框图快速转换成网页应用。
2. 项目依托 Meta 的 Llama 模型和 Together.ai，提供代码生成、编辑、多主题选择等功能。
3. 适用于快速原型开发、教育学习、初创团队等多种场景，大幅提升开发效率。

正文（附运行示例）

Napkins 是什么

Napkins 是一个创新的开源项目，利用 AI 技术将用户的截图或线框图迅速转换成可运行的网页应用程序。该项目基于 Meta 的 Llama 3.1 405B 大型语言模型和 Llama 3.2 Vision 视觉模型，结合 Together.ai 的推理服务，实现从视觉设计到代码的自动生成，极大提升了开发效率。

Napkins 的主要功能

• 快速应用生成：用户上传线框图或截图，系统自动识别设计元素和布局，生成相应代码，快速构建应用基础结构。
• 代码编辑和定制：支持用户对生成的代码进行编辑和定制，满足特定业务需求。
• 多主题选择：提供多种主题风格，用户可根据喜好选择，改变应用外观。
• 版本管理：内置版本管理功能，方便开发者追踪更改历史，避免数据丢失。

Napkins 的技术原理

• 大型语言模型（LLM）：利用 Meta 的 Llama 3.1 405B 模型理解设计图的文本内容和结构。
• 视觉模型：Llama 3.2 Vision 模型负责识别和理解截图中的视觉元素。
• LLM 推理服务：Together.ai 平台提供推理服务，优化生成代码的准确性和可靠性。
• 代码沙箱：基于 Sandpack 创建安全代码运行环境，支持测试和调试。
• 云存储服务：使用 S3 服务存储用户上传的截图和生成的代码，确保数据安全。

如何运行 Napkins

1. 克隆仓库：在终端运行以下命令克隆项目仓库：

git clone https://github.com/Nutlope/napkins

2. 配置环境变量：创建.env文件，添加 Together AI API 密钥：

TOGETHER_API_KEY=your_api_key_here

3. 设置 S3 存储桶：按照此指南创建 S3 存储桶，并将凭证添加到.env文件。

4. 安装依赖并运行：在项目目录下运行以下命令安装依赖并启动开发服务器：

npm install
npm run dev

资源

• Napkins 官网：napkins.dev
• GitHub 仓库：github.com/Nutlope/napkins
• Together AI API 密钥获取：dub.sh/llama3.2vision
• S3 设置指南：next-s3-upload.codingvalue.com/setup

---

❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦