Taste Skill
AI が書くフロントエンドを、汎用的でつまらない UI ではなく、モダンでプレミアムなデザインにするスキル集。
Taste Skill は、AI ツール（Cursor や Claude Code など）が生成するフロントエンドコードの「見た目」を、汎用的で退屈なテンプレートっぽいものから、モダンでプレミアムなデザインに寄せるための SKILL.md の集合。レイアウト・タイポグラフィ・色・余白・モーション・ビジュアル品質をルール化し、AI に読ませて従わせることで、一貫した品質の UI を出させる。
各スキルは独立したフォルダに SKILL.md が 1 本あるだけ。プロジェクトにコピーして、AI に「この SKILL を読んで従え」と指示するだけで使える。
| スキル | フォルダ | 役割 |
|---|---|---|
| taste-skill | taste-skill/ |
メインのデザインスキル。ゼロから「ちゃんとした」フロントを書かせる。レイアウト・タイポグラフィ・色・余白・モーション・ビジュアル品質をカバー。 |
| redesign-skill | redesign-skill/ |
既存プロジェクトのアップグレード用。ゼロから作り直さず、現状を監査してから最大のデザイン問題を優先して直す。任意の CSS フレームや vanilla CSS と組み合わせ可能。 |
| soft-skill | soft-skill/ |
「高級感」に特化。プレミアムフォント・大きな余白・奥行きのあるカード・スプリングベースのアニメーション・フローティングナビなど。AI がやりがちな汎用デフォルトを禁止し、テンプレート感を消す。 |
| output-skill | output-skill/ |
出力の「手抜き」を防ぐ。プレースホルダーコメント・省略されたコードブロック・未完成の出力を禁止し、AI に最後まで書き切らせる。 |
taste-skill は React/Next.js・Tailwind・Framer Motion などを前提にした具体的なルール（フォント・色・レイアウト・アニメーション）を持つ。redesign-skill は「Scan → Diagnose → Fix」の流れで既存コードを監査し、タイポグラフィ・色・レイアウトの改善ポイントを列挙してから修正する。soft-skill は Awwwards 級のビジュアルを目指す persona と、禁止パターン・レイアウトアーキタイプ・コンポーネントの作法を定義する。output-skill はコード内の // ... や「続きは同じパターン」といった省略を禁止し、トークン制限に達した場合は「continue で再開」と明示する運用を定める。
- 使いたいスキルのフォルダから
SKILL.mdをプロジェクトにコピーする。 - AI に「この SKILL を読んで従え」と指示する。多くのエディタではファイルを直接参照できる（例: Cursor の
@SKILL.md）。
以上。AI がファイルを読んでルールに従い、生成するコードの見た目や出力の完結度がスキルに沿うようになる。
taste-skill の SKILL.md 先頭には、1〜10 の数値で変えられる設定が 3 つある。プロダクトの種類に合わせて調整する。
| 設定 | 意味 | 1–3 | 4–7 | 8–10 |
|---|---|---|---|---|
DESIGN_VARIANCE |
レイアウトの実験度 | クリーン・中央揃え・標準グリッド | 重なり・サイズのばらつき | 非対称・大胆な余白・非常にモダン |
MOTION_INTENSITY |
アニメーションの量 | ほぼなし・シンプルなホバー | フェードイン・スムーススクロール | マグネティック効果・スプリング・スクロール連動 |
VISUAL_DENSITY |
1 画面あたりの情報量 | 大きくゆったり・高級感 | 一般的なアプリ・サイト程度 | 密・ダッシュボードやデータ重視 UI |
ユーザーがチャットで「もっと動きを抑えて」などと指定した場合は、その指示に合わせて AI がこれらの値を動的に解釈して使う。
- GitHub: Leonxlnx/taste-skill — 本体リポジトリ（README・4 スキル・examples・research）
- リポジトリ内
research/— スキル設計の背景調査（laziness の原因と対策など） - README の Examples — taste-skill で作ったサンプル画像（Floria など）