AIにWebサイトを作らせると、なぜか毎回「同じ3カラム、Interフォント、紫のグラデ」になりがち――いわゆる“AIスロップ（量産っぽいダサさ）”。Taste Skill は、AIエージェントに“良いセンス”を与えてこれを防ぐ、フロントエンド向けのスキル集です。GitHubで約46,000スターを集める人気プロジェクト（MITライセンス）を解説します。
Taste Skill とは
Taste Skill は「The Anti-Slop Frontend Framework for AI Agents（AIエージェント向けアンチスロップ・フロントエンドフレームワーク）」を掲げる、ポータブルなエージェントスキルの集まりです。作者は Leonxlnx 氏。レイアウト・タイポグラフィ・モーション・余白の質を引き上げ、ボイラープレート的なUIではなく「デザインスタジオが作ったような」見た目へ寄せます（スキルの基礎は Claudeスキル入門 も参照）。
仕組み：3つのダイヤルで“作風”を数値化
中心となる design-taste-frontend（現在は v2・実験版）は、まず依頼文（ブリーフ）を読んでデザインの方向性を推論し、次の3つのダイヤル（各1〜10）で作風を調整します。
| ダイヤル | 意味 | 上げると |
|---|---|---|
| VARIANCE | 崩し・非対称さ | 整然としたグリッドから外れ、個性的に |
| MOTION | アニメーションの強さ | 動きのある躍動的な印象に |
| DENSITY | 情報密度 | 1画面の情報量が増える |
既定値は 8 / 6 / 4。「アーティスティックで躍動的、でもカオスにはならない」バランスです。特徴的なのは、いちいち許可を求めず、チャットで上書き指定されない限り自動でセンス判断を適用すること。「毎回ゼロから component を組む」状態を避け、Next.js / Tailwind / Framer Motion / Radix といった意見の入った構成や、GSAP の定番コード雛形を前提に動きます。
想定用途はランディングページ・ポートフォリオ・リデザイン。ダッシュボードやデータテーブル、多段の業務UIは対象外です。リデザイン時は既存サイトを“監査ファースト”で読み、出力前に厳格なpre-flightチェックを行います。
収録スキル（1スキル＝1役割）
用途ごとに小さなスキルに分かれており、全部を一度に使う必要はありません。実装系はコードを、画像生成系は参照画像（リファレンスボード）を出力します。
| スキル | インストール名 | 役割 |
|---|---|---|
| taste-skill | design-taste-frontend | 本体（v2・実験版）。ブリーフ推論・3ダイヤル・GSAP雛形・リデザイン監査 |
| taste-skill-v1 | design-taste-frontend-v1 | 旧v1。既存挙動に依存する場合の互換用 |
| gpt-tasteskill | gpt-taste | GPT/Codex向け強化版。崩し大きめ・GSAP強め・アンチスロップ徹底 |
| imagegen-frontend-web / -mobile / brandkit | — | Web/モバイル/ブランドキットの参照画像を生成 |
| image-to-code-skill | — | 参照生成からコード実装まで一気通貫 |
この「1つのスキルは1つの仕事だけ」という設計は、Claude Codeスキル『9つの型』で語られる原則とも一致します。
対応エージェントと導入
Claude Code・Codex・Cursor・Cline・Windsurf・Goose・GitHub Copilot・Zed など、主要なAIコーディングツールで動作します（Agent Skills互換）。Claude Code への導入はワンコマンドです。
# 本体スキルをClaude Codeに導入
npx -y skills add leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code導入後は通常どおり「ランディングページを作って」などと頼むだけ。スキルがブリーフを読み、ダイヤルに沿ってセンスのある実装を返します。一部にはHTMLだけでなく、Playwright でスクロール時のスクショやホバー挙動まで参照する高度なモードもあります。
純正 frontend-design との違い
Anthropic も「generic な見た目を避ける」公式スキル frontend-design を提供しており、狙いは共通です。違いは、Taste Skill は VARIANCE / MOTION / DENSITY のダイヤルで作風を“数値で制御”でき、画像リファレンス生成やGPT向け強化版まで揃う点。「もっと崩したい／動きを抑えたい」を数値で指示できるのが使いどころです。なお出力されるのはあくまで雛形・土台なので、最終的な調整と確認は人が行うのが前提です。
主な情報源
スキル名・ダイヤルの既定値・対応ツール・スター数は公開時点のものです（本体は実験版v2で仕様が変わる可能性あり）。収集・要約はAI、公開判断は人。