jaytel0/taste

解決する課題

Tasteは、数枚の参照画像から再利用可能なスキルファイル（SKILL.md）を生成します。このファイルには、それらの画像のビジュアルスタイルが具体的なデザインルールとして記録されます。曖昧な言葉で好みを説明する代わりに、AIエージェントが新しいインターフェースを生成する際に従える具体的なルール（例えば、使用するタイポグラフィ、スペーシング、色、シャドウなど）をスキルが明文化します。これにより、長いスタイルガイドを手書きすることなく、AIに特定のビジュアルスタイルを一貫して再現させることができるという問題を解決します。

仕組み

プロセスは5つのステージで構成されます：

1. 参照画像の厳選 – JPG、PNG、WebP画像の厳選されたセットを提供します。クローズアップの切り抜きや高解像度の画像は、視覚的なディテールが読み取りやすいため、最適です。レイアウト、スペーシング、色、タイポグラフィ、テクスチャ、構図、密度、階層の繰り返し例を示すことを意図しています。

2. コーパスのインデックス作成 – パイプラインは全画像をスキャンし、完全な重複を除去し、各画像に安定したIDを割り当てます（1回の実行で最大20枚）。生のファイルリストはruns/{runId}/01-corpus/images.jsonlに保存されます。

3. 各画像の分析 – ビジョンモデルが各画像を個別に読み取ります（デフォルト：OpenAI GPT‑5.5およびAnthropic Claude Sonnet 4‑6）。プロンプトは、アプリの機能を無視し、視覚的な証拠のみに焦点を当てるようモデルに指示します。生のノートはモデルごとにruns/{runId}/02-image-notes/raw/{imageId}/{model}.mdに保存されます。

4. 融合とチャンク分割 – 合成モデルが各画像の生の分析を1つの正規化されたノートに統合します（ソースは匿名化されます）。次に、それらのノートはチャンクにグループ化され、各チャンクはルール合成になり、大規模な実行はマージレイヤーを経て最終的なルールセットが生成されます。中間ファイルはruns/{runId}/03-rule-set/に保存されます。

5. スキルの作成 – 最終的なルールセットは具体的な指示に変換されます。スキルは「プレミアムで上品」のような曖昧なラベルを避け、「ニュートラルなサンセリフ体のタイポグラフィを使用」や「アクセントカラーは局所的に保つ」などと言います。最終成果物はruns/{runId}/04-skill/SKILL.mdです。

リポジトリにはホスト型デモ（taste.jaytel.com）が含まれていますが、ローカルパイプラインがプライベートに使用する最も簡単な方法です。Postgres、Vercel Blob、Cron、ホスト型認証は不要です。APIキーを設定し、画像をフォルダに配置し、npm run tasteを実行するだけです。Webアプリ版は、ワークフロー状態をPostgresに、実行アーティファクトをプライベートなVercel Blobストレージに保存します。

対象ユーザー

• 参照画像からビジュアルスタイルを捉え、AI駆動のフロントエンド生成に再利用したいデザイナーや開発者。
• AIエージェントで構築しており、エージェントに特定の外観を守らせるための再現可能な方法を求めているチーム。
• Node.jsスクリプトをローカルで実行することに抵抗がない、またはホスト型デモを試したい人。

ハイライト

• 画像を再利用可能な具体的なスキルに変換 – 生成されたSKILL.mdは、一般的な賛辞ではなく、視覚的なルールについて明確です。
• 複数のAIプロバイダーに対応 – OpenAIとAnthropicを直接使用するか、OpenRouterやVercel AI Gatewayを介して使用できます。
• ローカルファースト – パイプラインは完全に自分のマシンで実行でき、外部サービスを必要とせず.taste/runs/...に結果を書き込みます。
• 比較で検証 – READMEでは、Tasteスキルがベースモデルや手作りのフロントエンドデザインスキルよりも、ダッシュボードやチャットインターフェースの生成で優れていることを示す並置テストが示されています。

---

注：上記の詳細はすべてプロジェクトのREADMEから直接取得しています。