Taste Lab
Taste Lab（/taste）は、あらゆるウェブサイトのURLを、正確なUI測定値、システムパターン、AIエージェントが従うことができる簡潔なテイストDNAを抽出した、完全で証拠に基づいた「デザインテイスト」の概要に変換します。
https://tastelab.xyz/?ref=producthunt&utm_source=aipure
製品情報
更新日:2026年06月16日
Taste Labとは
Taste Labは、あらゆるウェブサイトの視覚的な「テイスト」をリバースエンジニアリングし、AIエージェントや開発者向けの実用的なデザインコンテキストに変換するデザイン分析ツールです。ターゲットURLを分析することで、完全なデザインマップ（色、タイポグラフィ、間隔、半径、影などのデザイントークン）とテイストDNA（デザイン決定の背後にある推論とトレードオフ）を含む構造化された出力を生成します。その目的は、曖昧なスタイル形容詞ではなく、客観的な測定に基づいた明確さで、サイトのデザイン意図をチームやAIツールが再現できるように支援することです。
Taste Labの主な機能
Taste Lab (tastelab.xyz) は、あらゆるウェブサイトのURLをAIエージェント向けの完全な「デザインコンテキスト」に変換するデザイン分析ツール/スキルです。マルチエージェントパイプラインを使用して、正確なUI測定値（色、タイポグラフィ、間隔、半径、影などのトークン）を抽出し、システムレベルのデザインルールを検出し、根底にある「テイストDNA」（トリガー、決定、証拠、トレードオフを伴う原則）を推測します。出力はMarkdownとJSONの両方で生成され、一般的なAIコーディング/デザインワークフロー（例：Cursor、Windsurf、Claude Code、Copilot）に統合できるため、エージェントは参照サイトのデザインテイストに合った一貫性のあるUIを構築できます。
URLからデザインコンテキストへの抽出: ウェブサイトのURLを入力し、16進数の色、フォントサイズ/ウェイト、間隔単位、半径、影などの客観的なUIトークンをキャプチャする構造化されたデザインマップを生成します。
高精度な測定（近似なし）: 約20の測定カテゴリで正確なpx/hex/比率を引用し、デザインシステムのベースラインとして再利用できるトークンセットを生成します。
パターン検出からシステムルールへ: 抽出された測定値から5〜8の体系的なルールを導き出し、それぞれに証拠と明確なデザイン目標（なぜそのルールが存在するのか）が含まれます。
トレードオフを伴うテイストDNA原則: 主要なデザイン選択の背後にある理由を説明する4つの「テイスト原則」（少なくとも1つの制約原則を含む）を生成し、証拠と明示的なトレードオフによって裏付けられます。
デュアル出力：Markdown + JSON: 人間が読めるブリーフ（.md）と機械が消費できるファイル（.json）を書き出し、チームが決定を確認し、ツールがトークンを確実に取り込めるようにします。
AIツールとのワークフロー統合: ツール固有の指示場所（例：Cursorルール、Windsurfルール、CLAUDE.md、Copilot指示）にエクスポートし、AIエージェントがその後の実行で抽出されたテイストを適用できるようにします。
Taste Labのユースケース
迅速なプロトタイピングのためのデザインクローン作成: 製品チームは、競合他社やインスピレーションとなるURLを入力してトークンセットと原則を生成し、手動での監査なしに同様の感覚のUI作成を加速できます。
エージェント主導のコードでのUI実装: AIコーディングアシスタントを使用する開発者は、Taste Labの出力を添付することで、エージェントが一貫した間隔、タイポグラフィ、色の決定に従うコンポーネント/ページを生成できます。
スタートアップ向けのデザインシステムブートストラップ: 初期段階のチームは、高品質な参照サイトから初期のデザインシステムを作成し、再利用可能なトークンとルールを生成して、製品がスケールしても一貫性を保つことができます。
ブランド/デザインの一貫性監査: デザインリーダーは、複数のページやプロパティ間で出力を比較して、トークンとルールのずれを検出し、単一の原則セットに標準化できます。
代理店向けの再利用可能な「テイストブリーフ」: 代理店は、簡潔で証拠に基づいたデザインブリーフ（トークン + 原則 + トレードオフ）を提供して、ステークホルダーの認識を合わせ、引き渡し時のやり取りを減らすことができます。
メリット
プログラムによる再利用に適した、正確で証拠に基づいたデザインTトークン（px/hex/比率）を生成します。
UIがどうなっているかだけでなく、なぜそうなっているのか（原則 + トレードオフ）を捉え、エージェントの信頼性とチームの連携を向上させます。
人間にも機械にも優しい形式で出力し、複数のAIツールチェーンに接続できます。
デメリット
既存のデザインテイストの抽出と体系化に焦点を当てており、ゼロから全く新しい視覚的な方向性を生成するのにはあまり役立たない可能性があります。
最良の結果は、ターゲットウェブページのアクセシビリティ/構造と自動抽出の忠実度（例：動的なスタイルやキャンバスを多用するUIは解析が難しい場合があります）に依存します。
Taste Labの使い方
1) 前提条件をインストールする: CLI環境（Claude CodeまたはGemini CLI）を準備します。Playwright MCPも利用可能である必要があります（Chromiumランタイムを約100MBダウンロードします）。
2) Tasteスキルをエージェントのスキルディレクトリにクローンする: リポジトリをツールの正しいフォルダにクローンします。Claude Codeの場合: `git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste` または Gemini CLIの場合: `git clone https://github.com/senlindesign/taste-skill ~/.gemini/skills/taste`。
3) Playwright MCPサーバーを追加する（一度限りの設定）: Claude Codeの場合: `claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated` を実行します。Gemini CLIの場合: `~/.gemini/settings.json` にPlaywright MCPを次のように追加します: `{ "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest", "--isolated"] } } }`。
4) エージェントツールを再起動する: 新しいスキルとMCPサーバーの設定を読み込むために、Claude CodeまたはGemini CLIを再起動します。
5) ウェブサイトのURLでTaste Labを実行する: コマンド `/taste <url>` を実行します（例: `/taste https://linear.app`）。Tasteは4つのエージェントパイプラインを実行します: 測定値の抽出 → パターンの検出 → テイストの推論 → オブザーバー（最終エディター/品質ゲート）。
6) 生成された出力を確認する: 各実行では、`{domain}.md` と `{domain}.json` の2つのファイルが生成されます。これらには、(1) デザインマップ（色、タイポグラフィ、間隔、半径、影などのトークンと正確な値）と (2) テイストDNA（トリガー、決定、理由、証拠、トレードオフを含む4つの原則。少なくとも1つの制約原則を含む）が含まれます。
7) 出力を使用してAIツールをガイドする: 生成されたテイストコンテキストを、ツールが読み込む統合ファイルに配置/追加することで適用します。例: Cursor: `.cursor/rules/{domain}-taste.mdc`、Windsurf: `.windsurf/rules/{domain}-taste.md`、Claude Code: `CLAUDE.md`（デザインテイストセクションを追加）、GitHub Copilot: `.github/copilot-instructions.md`、Bolt: `.bolt/prompt`、Gemini: `GEMINI.md`。
8) テイストコンテキストを有効にしてエージェントを再実行する: テイストファイルがツールの指示/ルールのある場所に配置されたら、通常のビルド/デザインタスクを再度実行します。エージェントは次回の実行でデザイントークンとテイストDNAの原則を認識するはずです。
Taste Labのよくある質問
Taste Labは、ウェブサイトの「デザインテイスト」をリバースエンジニアリングするツール/スキルです。その/tasteコマンドは、あらゆるURLをAIエージェント向けの完全なデザインコンテキストに変換します。これには、デザインマップ（デザイントークン）とテイストDNA（原則と推論）が含まれます。
Taste Labに類似した最新のAIツール
Personalized License Plate Generator
ユーザー入力に基づいてユニークでパーソナライズされたナンバープレートデザインを生成するAI駆動のツールです
Keak
Keakは、ウェブサイトのバリエーションを自動的に生成し、テストを開始し、コンバージョンを最適化するAI駆動のA/Bテストツールです。
Makeasite
Makeasiteは、ユーザーがプロンプトを使用して迅速にウェブサイトを作成および共有できる革新的なウェブサイトビルダーです。
Adviseful
Advisefulは、ITコンサルタントやデジタルエージェンシー向けに、アイデアを数分で有資格のリードに変えるウェブおよびモバイルアプリの計画を加速するAI駆動のツールです。
Taste Labに似た人気のAIツール
GPT Engineer
GPTエンジニアは、誰でもAIエンジニアとチャットすることでウェブアプリケーションを構築できるAI駆動のソフトウェア開発ツールです。
Framer
Framerは、デザイナーが直感的なインターフェースを使用して驚くべきレスポンシブウェブサイトを作成し、コーディングなしで瞬時に公開できる強力なウェブビルダーです。
Framer Workshop
Framer Workshopは、Framerに組み込まれたAI搭載のコンポーネントジェネレーターであり、デザイナーや開発者は、簡単な会話型プロンプトを通じてコードを記述せずに、高度でカスタマイズ可能なウェブサイトコンポーネントを作成できます。
Wireframer
Wireframerは、FramerによるAI搭載ツールであり、簡単なプロンプトからクリーンでレスポンシブなWebページレイアウトとワイヤーフレームをすばやく生成し、デザイナーが特定の視覚スタイルに縛られることなく構造的な青写真を作成するのに役立ちます。