Taste Lab

taste - ウェブサイトの「デザインの美学」をAIエージェントに伝達する究極のSEO最適化ガイド

現代のAI開発において、単に色やフォントの数値をコピーするだけでは不十分です。真の優れたデザインを実現するためには、その背後にある「意図」や「こだわり」、つまりtaste（テイスト）を理解する必要があります。Sen Lin氏によって開発されたtasteは、あらゆるウェブサイトからデザインの「味」を抽出し、AIエージェントが理解できる形式へと変換する画期的なツールです。

What's taste（tasteとは？）

tasteとは、一言で言えば「意思決定（decisions） × トレードオフ（trade-offs）」の方程式で成り立っています。

一般的なウェブ解析ツールは、背景色が #08090A である、フォントが Inter である、角丸が 6px であるといった「スペックシート」を提示します。しかし、それはtasteではありません。tasteとは、なぜその選択がなされたのかという「理由」を指します。

• 意思決定（Decision）： なぜ純粋な黒ではなく、この特定の「ニア・ブラック（限りなく黒に近い色）」が選ばれたのかという「理由（Why）」。
• トレードオフ（Trade-off）： その選択によって何が得られ、あえて何を捨てたのかという両側面。

AIエージェントが単なるトークン（数値）しか持たない場合、文脈を理解せずに数値をコピーするだけになります。しかし、tasteを備えたAIエージェントは、それぞれの決定が何を意味するのかを理解し、初めて見るページであっても正しいデザイン判断を下すことができるようになります。

Features（主な機能）

tasteは、URLから「デザインの味」を導き出すために、独自の**アブダクティブ推論（仮説的推論）**と4段階の高度なパイプラインを採用しています。

4段階のAIパイプライン

4つの役割を持つAIエージェントが、同じページを異なる視点で読み解き、最終的にAIツールが活用可能なファイルへと凝縮します。

1. Extract Measurements（数値の抽出）： Senior Design AIが、ウェブページから正確で客観的なデザイン測定値を抽出します。
2. Detect Patterns（パターンの検出）： Principal Design Engineerが、ステップ1で得られた数値から、システム的なルール（系統的な規則）を検出します。
3. Infer Taste（テイストの推論）： Ultimate Design Criticが、デザイナーが行った意図的かつ苦渋の「トレードオフ」を導き出し、tasteの核心に迫ります。
4. Observer（オブザーバー）： Lead Critic & Final Editorが、ステップ3の分析を冷徹にフィルタリングし、不要な情報（不純物）を排除して最終出力を完成させます。

高精度なアウトプット

tasteを実行すると、.mdファイルと.jsonファイルの2種類が生成されます。

• Part 1: Design Map（デザインマップ）： 色、タイポグラフィ、スペーシング、角丸、シャドウなど、ページから取得した完全なトークンセット。
• Part 2: Taste DNA（テイストDNA）： デザインの意思決定の背後にある理由を説明する4つの原則。各原則には以下の要素が含まれます。
  • Trigger（トリガー）： どのデザイン判断がこの選択を促したか
  • Decision（決定）： 何が選択されたか
  • Reason（理由）： その背後にあるデザインロジック
  • Evidence（証拠）： ページ上の具体的な数値（px, hex, DOM値）
  • Trade-off（トレードオフ）： この選択によって何を犠牲にしたか

How to Use（使い方）

tasteの導入は非常にシンプルで、わずか3ステップで開始できます。Claude CodeやGemini CLIなどの環境で動作します。

1. クローン作成

まず、GitHubからリポジトリをClaudeのスキルディレクトリにクローンします。

git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

2. Playwrightのインストール

ブラウザ操作に必要なPlaywright MCPをインストールします（初回のみ）。

claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

3. 実行

Claude Codeを再起動し、任意のURLに対してコマンドを実行します。

/taste https://linear.app

これにより、指定したサイトのtasteが解析され、即座にデザインコンテキストが生成されます。

Use Case（活用シーン）

解析されたtasteデータは、普段お使いのAI開発ツールにそのまま読み込ませることができます。セットアップやコピペの必要はなく、AIエージェントが次回の実行時に自動的にデザインの「味」を取り込みます。

• Cursor: .cursor/rules/{domain}-taste.mdc として活用
• Windsurf: .windsurf/rules/{domain}-taste.md として活用
• Claude Code: CLAUDE.md にデザインテイストセクションを追加
• GitHub Copilot: .github/copilot-instructions.md に適用
• v0 by Vercel: taste-tokens.css と指示書として利用
• Figma Make: taste-figma.css と指示書として利用
• Bolt / Lovable: プロジェクトのナレッジとして統合

FAQ（よくある質問）

Q: tasteは他のデザイン抽出ツールと何が違うのですか？ A: 多くのツールはCSSの数値を書き出すだけですが、tasteはその数値がなぜ選ばれたのかという「意思決定」と、それによって生じた「トレードオフ」を解析します。これにより、AIはより人間味のある、文脈に沿ったデザインを再現できます。

Q: どのような出力形式が得られますか？ A: Markdown (.md) と JSON (.json) の2つの形式が出力されます。Design Map（トークンセット）と、4つのTaste DNA（デザイン原則）が含まれており、AIエージェントが即座に理解できる構造になっています。

Q: 対応しているデザイン要素は何ですか？ A: カラーシステム（背景、テキスト、ボーダー）、タイポグラフィ（サイズ、ウェイト、トラッキング）、スペーシング（ベースユニット、パディング）、ボーダー半径（角丸）、深度とシャドウなど、20以上のカテゴリにわたる測定値を網羅しています。

Q: トレードオフの原則は必ず含まれますか？ A: はい、tasteの解析結果には、少なくとも1つの「抑制（Restraint）」に関する原則が含まれるよう設計されています。何を行わないかを定義することが、優れたtasteの構築には不可欠だからです。