Repolode
提交项目
Nutlope

Nutlope/napkins

开源工具，可将线框图或截图生成可运行的应用，底层使用 Kimi K2.5 与 Together AI。

在 GitHub 查看官网
Star
1,483
Fork
206
未关闭 Issue
6
最近提交
15天前

这是什么？

Napkins.dev 是一个从线框图生成应用的工具。用户上传用户界面的草图或截图，应用借助支持视觉输入的大语言模型生成代码，并可在浏览器内的代码沙箱中预览运行效果。

项目基于 Next.js（app router）和 Tailwind 构建。模型推理通过 Together AI 调用 Kimi K2.5，生成的代码在 Sandpack 中运行，上传的图片存储在 S3 存储桶中。本地运行需要在 .env 文件中配置 Together AI API Key 和 S3 凭证。

后续计划包括优化移动端布局、在侧边栏展示视觉模型的输出、通过追加提示词编辑生成的应用、可选主题，以及在编辑过程中保存版本。

核心功能

  • 01借助 Together AI 上的 Kimi K2.5，将线框图或截图转换为应用代码。
  • 02在浏览器内的 Sandpack 代码沙箱中预览生成的应用。
  • 03将上传的图片存储在 S3 中。
  • 04基于 Next.js app router 与 Tailwind CSS 构建。

适用场景

  • 将手绘的界面草图快速转为可运行的原型。
  • 研究视觉大模型如何把截图转换为前端代码。
  • 以此为起点，扩展一个基于 Next.js 与 Tailwind 的项目。

快速上手

  1. 1

    克隆仓库

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

    创建 .env 文件并添加你的 Together AI API 密钥

  3. 3

    创建 S3 存储桶并将其凭证添加到 .env，参考 .env.example 中的值

  4. 4

    安装依赖并在本地运行

    npm install && npm run dev

使用前须知

  • 生成应用需要付费的 Together AI API 密钥。
  • 需要配置 S3 存储桶用于图片存储。

标签

#ai#llm#code-generation#nextjs#wireframe#prototyping#typescript

常见问题

napkins 是什么？
开源工具，可将线框图或截图生成可运行的应用，底层使用 Kimi K2.5 与 Together AI。 Napkins.dev 是一个从线框图生成应用的工具。用户上传用户界面的草图或截图，应用借助支持视觉输入的大语言模型生成代码，并可在浏览器内的代码沙箱中预览运行效果。
napkins 可以免费使用吗？用的什么许可证？
napkins 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
napkins 还在维护吗？
活跃维护中。napkins 最近一次提交是在 2026年10月23日。
napkins 适合用来做什么？
将手绘的界面草图快速转为可运行的原型。 研究视觉大模型如何把截图转换为前端代码。 以此为起点，扩展一个基于 Next.js 与 Tailwind 的项目。
napkins 怎么安装和运行？
克隆仓库: git clone https://github.com/Nutlope/napkins 创建 .env 文件并添加你的 Together AI API 密钥 创建 S3 存储桶并将其凭证添加到 .env，参考 .env.example 中的值 安装依赖并在本地运行: npm install && npm run dev
在哪里获取 napkins？
源代码和安装说明在 GitHub 上：https://github.com/Nutlope/napkins

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目