Taste Skill — インストール & ライブデモ

なぜ使うのか

主な機能

タイポグラフィルール：スケール・コントラスト・ヒエラルキー
スペーシングシステムの強制（1px差のパディングなし）
カラーパレットの規律（単一アクセント・セマンティックニュートラル）
コンポジション批評（視覚的重量・ホワイトスペース）
自己解説型：修正の理由を説明、「これをしろ」だけでなく
Tailwind・バニラCSS・SwiftUI・Composeに対応

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Taste Skill

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

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

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

フロー

批評する

Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ コピーしました

→ 10〜20件の違反、それぞれにタグ付き
Tier-1を修正する

Apply only severity-high fixes. Don't change copy — only visual/structural.✓ コピーしました

→ 差分が適用；サイトが「汎用的」な見た目でなくなる
繰り返す

Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ コピーしました

→ 2パスで収束

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

注意点

スキルがブランドと相容れないスタイルを強制する — --brand /design/brand.mdを渡してガードレールを尊重させてください

組み合わせ： filesystem

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

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

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

フロー

批評する

Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ コピーしました

→ 引用行付きの問題
バリアントを確認する

Compare hover, focus, and disabled states for visual coherence.✓ コピーしました

→ あればドリフトが検出される

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

注意点

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

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

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

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

フロー

ベースラインを生成する

Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ コピーしました

→ 選択ごとの理由付きtokens.json
ストレステストする

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?	リリース前レビュー
fix	path, severity_threshold	批評後、tier-1/2をターゲットに
baseline	context: {product, audience}	デザインシステムをコールドスタートする

コストと制限

運用コスト

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

セキュリティ

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

最小スコープ： filesystem-read filesystem-write

認証情報の保管： なし

データ送信先： ローカル

トラブルシューティング

よくあるエラーと対処法

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

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

fixがレイアウトを壊す

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

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

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

代替案

Taste Skill 他との比較

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

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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