Nutlope/napkins

これは何？

主な機能

• 01Together AI経由でKimi K2.5を使い、ワイヤーフレームやスクリーンショットからアプリのコードを生成します。
• 02ブラウザー内のSandpackコードサンドボックスで、生成したアプリをプレビューできます。
• 03アップロードされた画像をS3に保存します。
• 04Next.js app routerとTailwind CSSで構築されています。

ユースケース

• 手描きの簡単なUIスケッチから、実行可能なプロトタイプを作る。
• ビジョンLLMがスクリーンショットをどのようにフロントエンドコードへ変換するかを試す。
• 拡張可能なNext.jsとTailwindプロジェクトの出発点として使う。

クイックスタート

1. 1

   リポジトリをクローンする

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

   .envファイルを作成し、Together AIのAPIキーを追加する

3. 3

   S3バケットを作成し、.env.exampleの値を使って認証情報を.envに追加する

4. 4

   依存関係をインストールして、ローカルで実行する

   npm install && npm run dev

使う前に知っておきたいこと

• !アプリを生成するには、有料のTogether AI APIキーが必要です。
• !画像を保存するには、S3バケットの設定が必要です。

トピック

よくある質問

napkins とは？

Kimi K2.5とTogether AIを活用し、ワイヤーフレームやスクリーンショットから動作するアプリを生成するオープンソースツール。 Napkins.devは、ワイヤーフレームからアプリを生成するツールです。UIのスケッチやスクリーンショットをアップロードすると、画像を認識できるLLMが動作するアプリのコードを生成し、ブラウザー内のコードサンドボックスでプレビューできます。

napkins は無料で使えますか？ライセンスは？

napkins は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

napkins は今もメンテナンスされていますか？

活発にメンテナンス中。napkins の最終コミットは 2026年10月23日 です。

napkins は何に使えますか？

手描きの簡単なUIスケッチから、実行可能なプロトタイプを作る。 ビジョンLLMがスクリーンショットをどのようにフロントエンドコードへ変換するかを試す。 拡張可能なNext.jsとTailwindプロジェクトの出発点として使う。

napkins のインストール方法は？

リポジトリをクローンする: git clone https://github.com/Nutlope/napkins .envファイルを作成し、Together AIのAPIキーを追加する S3バケットを作成し、.env.exampleの値を使って認証情報を.envに追加する 依存関係をインストールして、ローカルで実行する: npm install && npm run dev

napkins はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Nutlope/napkins