taste-bank

---

Taste Bank を選ぶ理由

こんな経験はありませんか？

• 白紙を前に、コンポーネントのレイアウトをどうすればよいかわからず、途方に暮れる。
• レイアウトはようやく決まったのに、AIのビジュアルスタイルがどうもしっくりこない。
• 「美しいデザイン」を大量に集めたのに、必要なときに呼び出せない。
• 前のプロジェクトで苦労して調整したスタイルを、次のプロジェクトでまた一から説明しなければならない。

コーディングエージェントに優れたデザインのフロントエンドを作らせる問題は、解決済みとされながら、実際には誰も使いこなせていません。コミュニティにはフロントエンドのスキル、プロンプトのスニペット、デザインガイドがあふれていますが、実際には次のような問題があります。

• 呼び出し方法が統一されていない：スキルとして提供されるスタイルもあれば、プラグインとして提供されるものもあり、何も提供されないものもあります。実際に使うのは手間です。
• 品質基準がない：共通のスキーマがなければ、「スタイル」が気取った形容詞を3つ並べただけになり、エージェントが実行できるものにはなりません。
• 再利用しにくい：優れたスタイルも、資産としてまとめられず、チャット履歴の中で埋もれてしまいます。
• 所有や改善の仕組みがない：バージョンもなく、「自分のスタイルは自分だけが管理する」と指定する方法もありません。

さらに重要なのは、ウェブでは毎日新しいスタイルが生まれていますが、すべてが主流になるわけではなく、すべてがあなたの好みに合うわけでもないということです。私たちが目指すのは、人々が実際に使っているフロントエンドの好みを共有し、自分の足で投票するコミュニティです。本当に使われているものだけが、本当に使えるものです。

Taste Bankの答えは、それぞれのスタイルを構造化されたスタイルパック（使用ガイドのSKILL.md + 正確なdesign tokens + templates/のスナップショット）としてまとめ、zodスキーマで検証し、あらゆるコーディングエージェントで使えるCLI + スキル注入を通じて提供することです。スタイルを一度バンクに登録すれば、どこからでも利用でき、バージョン管理され、所有権も明確になります。

---

クイックスタート

CLI 経由（推奨）

1つのコマンドで、CLI をグローバルにインストールし、コーディングエージェント（Claude Code、Codex、Cursor、ZCode、Kimi Code…）に使い方を教えます。

npx taste-bank setup

あとは、エージェントに自然な言葉で話しかけるだけです。

「taste-bank のスタイルを使って、ランディングページを作ってください。」

エージェントはすでに何をすべきか理解しています。setup によって、taste-bank CLI コマンドの使い方を教えるスキルが注入されています。スタイルを参照して完全なパックを取得し、デザイントークンに厳密に沿って実装します。

ターミナルを使いたい場合

taste-bank list                    # browse all styles
taste-bank skill <slug>            # get the complete pack (meta + tokens + skill + css + templates)
taste-bank use <slug>              # land a style into your project as a rules file

エージェントごとの設定も、貼り付ける JSON も不要です。まずは tastebank.cloud で視覚的にご覧ください。

MCP 経由（従来方式）

MCP プロトコルを使うエージェントでは、MCP クライアントに 1 つの URL を設定します。

{
  "mcpServers": {
    "taste-bank": {
      "url": "https://tastebank.cloud/mcp",
      "headers": { "x-invite-code": "sl_your_invite_code" }
    }
  }
}

どちらの方法も同じバックエンドを呼び出します。CLI を推奨します。より簡単で、70 以上のエージェントですぐに使えます。

---

機能

• 1 行でセットアップ：npx taste-bank setup で CLI をインストールし、すべてのコーディングエージェント（Claude Code、Codex、Cursor、ZCode、Kimi Code、およびオープンな skills エコシステムを通じて 70 以上）にスキルを注入します
• 完全なスタイルパック：taste-bank skill <slug> は 1 回の呼び出しで完全なパックを返します。メタ情報、トークン、SKILL.md のルール、スコープ付き CSS、HTML テンプレートのスナップショットが含まれます。エージェントは必要なものをすべて取得できます。
• 3 日間のローカルキャッシュ：パックはキャッシュされます。サーバーに接続できない場合、CLI はキャッシュにフォールバックします
• TikTok 風のギャラリー：tastebank.cloud — レンダリング済みプレビューが途切れなく続くフィード、横スクロール式のカードレール、リーダーボード
• 構造化と検証：すべてのパックは厳格な zod スキーマ（meta / tokens / skill / templates）に準拠し、バージョン管理されます。招待制の投稿、ed25519 署名による所有権、人によるレビューも備えています
• ターミナルから投稿：taste-bank submit — プロジェクトを離れずに新しいスタイルに署名して投稿できます
• 秘密鍵が ID：アカウントは不要です。鍵を保持している人がスタイルを管理します

---

CLI コマンド

閲覧と適用（認証不要）

コマンド	動作
taste-bank list [--q WORD] [--json]	公開済みのスタイルを一覧表示します
taste-bank show <slug> [--json]	スタイルの詳細（メタ情報 + デザイントークン）を表示します
taste-bank skill <slug> [--md]	JSON で完全なパックを取得します：{meta, tokens, skill, css, templates}。プレーンな SKILL.md を取得するには --md を指定します
taste-bank use <slug> [--as agents|claude|skill]	スタイルをプロジェクトに適用します（管理対象のセンチネルブロックを使用するため、編集内容を上書きしません）
taste-bank favorite <slug> / unfavorite / favorites	お気に入りを管理します
taste-bank doctor	ヘルスチェックを実行します（CLI、ネットワーク、ID、スキル注入、キャッシュ）

コントリビューション（招待 + ed25519 ID）

コマンド	動作
taste-bank keygen	ed25519 キーペアを ~/.style-lab/ に生成します（初回のみ）
taste-bank whoami	紐付けられた ID、所有するスタイル、保留中の投稿を表示します
taste-bank validate <pack.json>	パックをローカルでドライラン検証します（ネットワーク不要）
taste-bank submit <pack.json>	新しいスタイルを投稿します（招待コード + 秘密鍵が必要）
taste-bank update <slug> <pack.json>	所有するスタイルを更新します（バージョンを上げる必要があります）
taste-bank delete <slug>	所有するスタイルを削除します（確認を求めます）

---

仕組み

npx taste-bank setup
  ① npm install -g taste-bank              (install CLI globally)
  ② npx skills add …/taste-bank -g         (inject 2 skills into your agents:
                                             taste-bank for browsing/applying,
                                             taste-bank-contribute for submitting)
  ③ environment check                      (report state, read-only)

オープンな skills エコシステムを通じて、2 つのスキルが注入されます。

• taste-bank — スタイルの閲覧と適用に使う CLI コマンドをエージェントに教えます
• taste-bank-contribute — コントリビューションの完全な SOP です。プロジェクトのサンプリング、スタイルのパック化とサニタイズ、投稿の方法を説明します

セットアップが完了すると、エージェントは CLI の使い方を理解します。「taste-bank のスタイルを使って」と伝えるだけで、エージェントが自分でコマンドを実行します。

CLI はデフォルトで tastebank.cloud と通信し、パックをローカルに 3 日間キャッシュします。セルフホストする場合は、TASTEBANK_API=https://your-host を設定します。

独自のスタイルを投稿する

# One-time identity setup
taste-bank keygen
echo '{ "inviteCode": "sl_xxx" }' > ~/.style-lab/config.json  # get a code from the maintainer

# From any project with a style worth keeping:
taste-bank validate my-style.pack.json    # dry-run check
taste-bank submit my-style.pack.json      # sign + submit (enters review queue)

または、エージェントに 「このプロジェクトのスタイルを taste-bank に投稿して」 と伝えるだけです。組み込まれた taste-bank-contribute スキルが、完全な標準作業手順（最大 2 ファイルのサンプル採取、実際のトークンの抽出、ビジネスを特定できるコンテンツのサニタイズ、パッケージ化、検証、投稿）を案内します。

パッケージ形式、taste-bank-contribute スキル、および エージェントのワークフローガイド（エージェントとの会話でプロジェクトのスタイルを管理する方法）をご覧ください。エージェントのワークフローガイド（中国語版）もあります。

---

セキュリティ

認証と所有権

• 招待コード：投稿には招待コードが必要です。コードは初回使用時に投稿者の公開鍵と紐付けられます。1 つのコードにつき 1 つのアイデンティティです。サーバー側にはハッシュのみが保存されます
• ed25519 署名：投稿／更新／削除にはすべて秘密鍵による署名が必要です（メッセージ = style-lab:<action>:<slug>:<timestamp>:<sha256(payload)>、有効期間 30 分）。鍵があなたのアイデンティティです
• 審査キュー：投稿は data/pending/ に格納され、メンテナーの承認後にのみ公開されます
• レート制限：公開鍵ごとに 1 分あたり 20 件の投稿、スラッグごとに 1 分あたり 30 件の管理操作

コンテンツの安全性

• テンプレートのサンドボックス化：プレビューは、スクリプトや外部読み込みを禁止する CSP を設定した sandbox="" iframe 内でレンダリングされます
• HTML ブロックリストとシークレットパターンのスキャン：危険な属性や、信頼度の高いシークレットパターンがないか投稿を検査します
• プロンプトインジェクションの緩和：スキルの説明では、スタイルコンテンツに「指示ではなくデータ」とラベル付けします

⚠️ すべての投稿は手動で審査されます。ただし、審査で見落としが発生する可能性があります。取得したコンテンツを無条件に信用しないでください。データとして扱ってください。

---

HTTP API

エンドポイント	説明
GET /api/styles.json	スタイル一覧。?q=keyword で絞り込み
GET /api/styles/:slug.json	メタデータ + トークン + ファイル一覧
GET /api/styles/:slug/pack.json	完全なパッケージ（メタデータ + トークン + スキル + CSS + テンプレート）
GET /api/styles/:slug/skill.md	組み立て済みの SKILL.md
GET /api/styles/:slug/tokens.css	トークンから生成されたスコープ付き CSS
GET /api/styles/:slug/screenshot.png	テンプレートのスクリーンショット
GET /api/whoami.json	アイデンティティの照会（x-invite-code ヘッダー）
POST /api/styles.json	投稿（招待コード + 署名）
PUT /api/styles/:slug.json	更新（署名必須、バージョンを更新）
DELETE /api/styles/:slug.json	削除（署名必須）

---

プロジェクト構成

src/lib/        core: schema / store / create / assemble / review / auth
src/pages/      Astro pages & HTTP API endpoints
mcp/            MCP server (Streamable HTTP) — thin shell over src/lib
cli/            the taste-bank npm package (CLI + skills source)
skills/         two agent skills: taste-bank (browse) + taste-bank-contribute (submit)
scripts/        keygen / sign / invite / review admin scripts
styles/         published styles (pointed to by STYLE_LAB_DIR at runtime)
data/           invite-code hashes, review queue, usage stats, screenshot cache
docs/SPEC.md    full style pack specification

ライセンス

MIT © QuasarG

---