/ ディレクトリ / プレイグラウンド / Taste Skill
● コミュニティ Leonxlnx ⚡ 即起動

Taste Skill

作者 Leonxlnx · Leonxlnx/taste-skill

デザインの美的センス(タイポグラフィ・スペーシング・カラー・コンポジションのルール)をエンコードし、ClaudeがよくあるAIデザインを卒業し、シニアレベルの仕上がりを生み出せるようにする。

Taste Skillは、AI生成UIで最もよくある問題を未然に防ぐ、小さくて意見を持ったルールセットです:フォントが多すぎる・マーケティングサイトのボディテキストが14px・3つの競合するアクセント・2018年のBootstrap 4のようなヒーロースタック。生成されたUIに対してルールを適用してなぜ修正が重要かを説明する、レビューと書き直しステップとして機能します。スキルをサポートする任意のエージェントで使用可能。

なぜ使うのか

主な機能

ライブデモ

実際の動作

準備完了

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "taste-skill-leon",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "taste-skill-leon": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Leonxlnx/taste-skill",
          "~/.claude/skills/taste"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add taste-skill-leon -- git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: Taste Skill

Claude生成ランディングページをテイストフィルターでレビューする

👤 Claudeが作ったマーケティングページをリリースする開発者 ⏱ ~30 min intermediate

使うタイミング: 最初のアウトプットは問題ないが印象に残らない場合。

前提条件
  • スキルのインストール — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste
フロー
  1. 批評する
    Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ コピーしました
    → 10〜20件の違反、それぞれにタグ付き
  2. Tier-1を修正する
    Apply only severity-high fixes. Don't change copy — only visual/structural.✓ コピーしました
    → 差分が適用;サイトが「汎用的」な見た目でなくなる
  3. 繰り返す
    Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ コピーしました
    → 2パスで収束

結果: 生成ではなく作られたと読めるページ。

注意点
  • スキルがブランドと相容れないスタイルを強制する--brand /design/brand.mdを渡してガードレールを尊重させてください
組み合わせ: filesystem

単一コンポーネントのテイスト問題を監査する

👤 デザインシステムに触れる開発者 ⏱ ~15 min beginner

使うタイミング: 新しいコンポーネントをシステムにリリースする前。

フロー
  1. 批評する
    Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ コピーしました
    → 引用行付きの問題
  2. バリアントを確認する
    Compare hover, focus, and disabled states for visual coherence.✓ コピーしました
    → あればドリフトが検出される

結果: 「なんか変に見える」チケットが少ない状態でコンポーネントがリリースされる。

注意点
  • 批評が意図的なデザイン選択を無視する(例:ブルータリストスタイル)--style brutalistまたは類似を渡して一部のルールを緩和してください

taste-skillを使って新しいデザインシステムのベースラインを設定する

👤 新しいプロダクトを始めるチーム ⏱ ~60 min intermediate

使うタイミング: トークンスケール・フォント・パレットを選択していて、合理的なデフォルトが欲しい場合。

フロー
  1. ベースラインを生成する
    Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ コピーしました
    → 選択ごとの理由付きtokens.json
  2. ストレステストする
    Generate sample pages (login, dashboard, settings) using the baseline. Critique your own output.✓ コピーしました
    → ページ + 改善案付きの自己批評

結果: ステークホルダーと交渉しなくて済む、説明可能な出発点。

注意点
  • 生成されたベースラインが「安全すぎる」 — ブランドインプット(ムード・参考例)を提供して、凡庸な出力にならないようにしてください
組み合わせ: design-extract-mcp

組み合わせ

他のMCPと組み合わせて10倍の力を

taste-skill-leon + design-extract-mcp

参考サイトからトークンを取得し、taste-skillで洗練させる

Extract tokens from https://linear.app, then run taste critique on a page using them.✓ コピーしました
taste-skill-leon + filesystem

批評をデザインレビューレコードとして永続化する

Save each critique to /design/reviews/$(date +%F)-<page>.md.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
critique path_or_url, brand? リリース前レビュー 0
fix path, severity_threshold 批評後、tier-1/2をターゲットに 0
baseline context: {product, audience} デザインシステムをコールドスタートする 0

コストと制限

運用コスト

APIクォータ
N/A
呼び出しあたりのトークン
中程度 — フルページ批評は5〜10k token
金額
無料
ヒント
フルページよりコンポーネントレベルの批評がコスト安;そちらで繰り返してください

セキュリティ

権限、シークレット、影響範囲

最小スコープ: filesystem-read filesystem-write
認証情報の保管: なし
データ送信先: ローカル

トラブルシューティング

よくあるエラーと対処法

明らかに汎用的なUIで批評が違反を返さない

スキルが「lenient」モードの可能性があります — --strictを渡してください

fixがレイアウトを壊す

まず--diff-previewで実行し、選択的に適用してください

ブランドガイドラインと競合する

スキルが例外を尊重するよう--brandでブランドMarkdownを渡してください

代替案

Taste Skill 他との比較

代替案代わりに使う場面トレードオフ
stevembarclay/pencilplaybookPencilのプロダクトをルーツとするUIデザインのテイストが欲しい場合Pencil固有;taste-skillは汎用
単なるbrand.mdプロンプト1つのプロダクトしかリリースしない場合このスキルが対策するAI汎用パターンをキャッチしない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る