taste-skill AIエージェント

概要

taste-skillは、AIコーディングエージェント（AIが自動でコードを書くツールのこと）が生成するフロントエンド（ウェブサイトの見た目部分）の品質を底上げするための、オープンソースの「SKILL.mdファイル（AIへの指示書）」集です。Cursor・Claude Code・Codex・Gemini CLI・v0・Lovableなど主要なAIツールに対応しており、コマンド1本でプロジェクトに導入できます。MITライセンスのもと完全無料で公開されており、誰でもすぐに使い始められます。

AIが生成するUIには「紫のグラデーション・3列のカードグリッド・中央揃えのヒーロー文字」など、いかにもAIらしい没個性なパターン（開発者コミュニティでは「AIスロップ」と呼ばれます）が繰り返されがちです。taste-skillはこの問題に正面から向き合い、レイアウト・タイポグラフィ・余白・アニメーションなどのデザイン判断をAIに学習させ、個性的で高品質なインターフェースを出力させることを目指しています。2026年に公開されて以来、GitHub上で急速に注目を集めているプロジェクトです。

主な機能

• 7種類のスキルバリアント: taste-skill（汎用デザイン）・redesign-skill（既存サイト改善）・soft-skill（ガラス質のプレミアムUI）・minimalist-skill（ミニマルデザイン）・brutalist-skill（ブルータリストデザイン）・output-skill（出力途切れ防止）・stitch-skill（Google Stitch連携）の7種が用意されており、用途に応じて使い分けられます。
• 3ダイヤル式パラメーター調整: DESIGN_VARIANCE（デザインの個性度：1=シンメトリック〜10=アート的カオス）・MOTION_INTENSITY（アニメーションの強度：1=静的〜10=映画的）・VISUAL_DENSITY（情報密度：1=余白たっぷり〜10=ダッシュボード密集）の3つの「つまみ」で出力スタイルを細かく制御できます。
• ブリーフ（依頼内容）の自動読解: AIがコードを書く前に、ページ種別・ターゲットオーディエンス・雰囲気ワード・既存ブランド資産などを読み取り、「このプロジェクトはどんなデザイン方向が適切か」を1行で宣言してから実装に入る仕組みを持ちます。
• デザインシステム自動選定: Material・Fluent・Carbon・shadcn・Tailwindなど、プロジェクトの性格に合った公式デザインシステム（統一された見た目のルール集）を自動で選択・適用します。混在させることなく「1プロジェクト1デザインシステム」を守ります。
• アクセシビリティ対応のダークモード: WCAG AA基準（視覚障害者向けのコントラスト基準）を満たしつつ、ライト・ダークどちらのテーマでも視覚的な階層が崩れないよう厳格なルールが組み込まれています。
• 画像生成スキル連携: imagegen-frontend-web・imagegen-frontend-mobile・brandkitなどの画像生成専用スキルも含まれており、ChatGPT ImagesなどでデザインモックをAI生成し、その結果をCodexやCursorに渡してコード化する「画像→コード」ワークフローも実現できます。
• 厳格な出荷前チェック（プリフライト）: AIが成果物を納品する前に、「AIスロップ要素が含まれていないか」「Core Web Vitals（ページ表示速度の指標）が基準を満たすか」「デザインシステムが混在していないか」などのチェックリストを全項目クリアしなければ完了とみなされません。

料金プラン

全機能が無料で利用できます。料金ページは存在せず、スポンサー支援は任意です。詳細は公式サイト参照。

導入方法

ステップ1：コマンド1行でインストール

プロジェクトのフォルダをターミナルで開き、以下を実行します。

npx skills add https://github.com/Leonxlnx/taste-skill

これで SKILL.md ファイルがプロジェクトに追加され、対応するAIエージェントが自動的に読み込みます。

ステップ2：特定のスキルだけを入れたい場合

# メインの汎用デザインスキル（v2・推奨）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# 旧v1の挙動を維持したい場合
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

# 既存サイトのリデザイン向け
npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-skill"

ステップ3：パラメーターを調整（任意）

インストール後、SKILL.md 内の3つのダイヤル（DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY）を1〜10の数値で変更することで、出力スタイルを好みに合わせて調整できます。

CLIを使わず手動で入れることも可能

GitHubから SKILL.md ファイルを直接コピーして、プロジェクトフォルダに貼り付けるか、ChatGPT / Codexの会話に貼り付けても機能します。

こんな人におすすめ

• 「AIが作るUIがどれも同じに見える」と感じている個人開発者: CursorやClaude Codeでサービスを作っているが、仕上がりがテンプレートっぽく見えてしまう方。追加設定ゼロで出力品質が変わります。
• デザイナー不在のチームや一人開発者: デザインの専門知識がなくても、LandingPage・ポートフォリオ・SaaSトップページをそれらしい見た目で仕上げたい方に向いています。
• 既存サイトをAIでリニューアルしたい方: redesign-skill を使えば、既存コードベースを6カテゴリ（レイアウト・タイポグラフィ・カラー・余白・モーション・アクセシビリティ）で診断してから改善に入るため、壊したくない部分を残しつつ刷新できます。
• 複数のAIツールを使い分けている開発者: Cursor・Claude Code・Codex・Gemini CLI・v0・Lovableなど異なるツールを状況で切り替えている方でも、同じSKILL.mdファイルを使い回せるため、ツールごとに設定をやり直す必要がありません。

よくある質問

Q. SKILL.mdファイルとは何ですか？ A. AIコーディングエージェントが自動で読み込む「携帯可能な指示書」のことです。システムプロンプト（AIへの事前指示）のように機能し、エージェントがプロジェクト内でこのファイルを検出すると、中に書かれたルールに従って動作します。

Q. React以外のフレームワークでも使えますか？ A. はい。taste-skillはフレームワーク非依存で設計されており、React・Vue・Svelte・Astroなどあらゆるフロントエンドフレームワークで動作します。ルールはフレームワーク固有のAPIではなくデザインの意図に焦点を当てているためです。

Q. 追加のAPIキーや有料サービスへの登録は必要ですか？ A. 不要です。taste-skill自体は完全無料のオープンソースで、追加のAPIキーも必要ありません。普段使っているAIツール（CursorやClaude Codeなど）の設定をそのまま使います。

Q. v1とv2（実験的）はどちらを使うべきですか？ A. 公式ドキュメントではv2（インストール名：design-taste-frontend）が推奨されており、新規プロジェクトはv2から始めるのが安全な選択です。既存プロジェクトでv1の動作に依存している場合は --skill design-taste-frontend-v1 で旧バージョンに固定できます。