Taste icon

Taste

Tasteは、URLからWebサイトのデザインのテイストを読み取り、デザイントークンとその理由を生成するClaude Codeスキルです。AIエージェントや開発ツールで使えるMarkdownとJSONを出力します。

Taste

概要

Taste は、URL から Web サイトのデザインのテイストを読み取る Claude Code スキルです。ページを AI エージェントが使えるデザインコンテキストに変換し、抽出したトークンと、その背後にある視覚的判断の理由を組み合わせます。

ホームページによると、各実行は計測、パターン、テイスト推論、observer レビューの 4 回に分けてサイトを分析します。その結果、完全なトークンセットと、デザインが何を選び、何を手放しているかを説明するテイスト原則を含む簡潔な brief が得られます。

機能

4 ステップの分析パイプライン

同じページを計測、パターン、テイスト、編集レビューの観点から確認できるよう、4 つのエージェント役割で URL を処理します。

デザイントークンの抽出

色、余白、角丸、影、タイポグラフィ、その他のピクセル、16 進値、比率で示された計測値を含め、ページから正確なデザイン値を収集します。

テイスト推論の出力

トリガー、決定、理由、証拠、トレードオフを含む、デザインの意図を説明する 4 つのテイスト原則を導き出します。

品質チェックと検証

最終ファイルを書き出す前に JSON を検証する anti-slop 品質ゲートを実行します。

2 ファイルの出力

各実行で 2 つの出力ファイルを書き込みます。1 つは `.md` の brief、もう 1 つは解析したドメイン名で命名された `.json` ファイルです。

ユースケース

  • Webサイトのデザインをリバースエンジニアリングする

    既存サイトを調べ、その見た目を形作っていそうなデザイントークンと理由を抽出したいときに Taste を使います。

  • デザインコンテキストを AI エージェントに渡す

    AI コーディングエージェントが実装判断やルールファイルに変換できる、構造化されたデザインコンテキストが必要なときに使います。

  • 再利用可能なデザイン成果物を生成する

    特定ドメイン向けに brief と機械可読な JSON ファイルを生成し、その出力を後続の実行やツールで再利用したいときに使います。

  • サイト間の分析を標準化する

    複数の Web サイトを比較しながら、主観的なメモではなく、一貫した計測カテゴリと原則ベースの分析が必要なときに使います。

Pros and Cons

Pros

  • 単一パスの要約ではなく、構造化されたマルチパスのワークフローを使用します。
  • 近似ではなく、正確な値で具体的なデザイン計測を取得します。
  • 生のトークンに説明を組み合わせるため、AI エージェントがデザイン意図を再現しやすくなります。
  • Markdown と JSON の両方で出力するので、下流のツールで使いやすいです。
  • 無効または品質の低い出力を除外する品質ゲートを備えています。

Cons

  • 収集された証拠では価格ページが利用できないため、料金やプラン構成は確認できません。
  • サイトは Claude Code と Gemini CLI のセットアップのみを明示的に文書化しており、他の複数のツール対象に触れているにもかかわらず、そこは明確ではありません。

FAQ

Taste はどのプラットフォームをサポートしていますか?

Claude Code スキルで、Gemini CLI でも使用できるようです。ホームページには、Cursor、Windsurf、GitHub Copilot、Bolt、Antigravity、Vercel の v0、Figma、Lovable 向けの出力先も記載されていますが、セットアップ例として明示されているのは Claude Code と Gemini CLI のみです。

出力はどのような形式ですか?

ホームページでは、4 段階のワークフローとして、Webページから計測値を抽出し、パターンを検出し、テイストを推論し、最後に結果を絞り込む observer パスを実行する流れが説明されています。最終成果物は、解析したドメイン向けの `.md` ファイルと `.json` ファイルです。

どのように使いますか?

ホームページでは、Claude Code または Gemini CLI に対して 3 ステップのセットアップが示されています。まず該当する skills ディレクトリにスキルをクローンし、次に Playwright MCP をインストールし、最後に CLI を再起動して URL に対して `/taste` を実行します。

誰向けですか?

このサイトによると、このスキルは任意の Web サイトのデザインのテイストを読み取り、URL からデザインコンテキストを生成できます。既存サイトから構造化されたデザイントークンと理由を得たい AI エージェントや開発者向けです。

料金は公開されていますか?

`/pricing` の価格ページは現在 404 を返すため、収集された証拠の範囲では公開された料金体系は提供されていません。

Quick Facts

カテゴリ
開発者向けツール
主な形式
Claude Code スキル
対応 CLI の例
Claude Code、Gemini CLI
ソースドメイン
tastelab.xyz
出力ファイル
.md と .json
料金
収集された証拠では未公開