Taste-Skill 実測：AI が生成する UI から「AI 臭」を完全に取り除く 79k Stars のオープンソース神器
AI コーディングにおける「AI 臭」問題
Cursor、Claude Code、Codex などの AI コーディングツールを頻繁に使うなら、このシナリオに馴染みがあるでしょう：
AI にランディングページを書かせると、3 秒でコードが出てくる。プレビューを開くと—紫のグラデーション、Inter フォント、同じ幅の 3 つのカード、border-radius 16px、大量の余白。別のプロジェクトでも結果はほぼ同じ。
これがいわゆる「AI 臭」（AI Slop）です。コード品質の問題ではなく、ロジックは完全に正しいかもしれない。問題は視覚的な画一性にある。
原因は単純：大規模言語モデルの訓練データで、shadcn/ui テンプレート、Tailwind のデフォルトカラー、Vercel スタイルのランディングページの比重が極めて高い。
Taste-Skill とは
Taste-Skill は Leonxlnx が始めたオープンソースプロジェクトで、2026 年 8 月時点で 79,000+ GitHub Stars を獲得している。
技術的に、Taste-Skill はコードライブラリでも Figma プラグインでもない。Agent Skill ファイルの集合体——AI にフロントエンドコード生成時のデザイン原則を指示する構造化 Markdown 文書。
主な特徴：
- 主要 AI コーディングツール全てに対応：Cursor、Claude Code、Codex、Gemini CLI、v0、Lovable、OpenCode
- ワンコマンドインストール：
npx skills add https://github.com/Leonxlnx/taste-skill - 13 の独立した Skill：シーン別に選択
- MIT ライセンス：商用利用可能
コア原理
3 つの調整ノブ
| パラメータ | 意味 | 低値 | 高値 |
|---|---|---|---|
| DESIGN_VARIANCE | レイアウト実験性 | 中央揃え、対称 | 非対称、モダン |
| MOTION_INTENSITY | アニメーション深度 | hover のみ | スクロール駆動 |
| VISUAL_DENSITY | 情報密度 | 広い余白 | ダッシュボード風 |
Brief 推論（v2 新機能）
v2 はまずプロジェクト要件を「読む」：
- プロジェクトタイプを分析
- ターゲット層と業界慣習を推論
- 適切なデザインシステムを選択
- 3 つのノブを調整
インストール
npx skills add https://github.com/Leonxlnx/taste-skill対応ツール
| ツール | 方法 | 互換性 |
|---|---|---|
| Cursor | .cursor/skills/ ディレクトリ | ✅ |
| Claude Code | SKILL.md 自動読込 | ✅ |
| Codex | 会話に貼り付け / npx | ✅ |
| Gemini CLI、v0、Lovable、OpenCode | SKILL.md | ✅ |
13 の Skill 一覧
コード生成
| Skill | インストール名 | 用途 |
|---|---|---|
| taste-skill (v2) | design-taste-frontend | 汎用デフォルト |
| gpt-tasteskill | gpt-taste | GPT/Codex 用、厳格なルール |
| image-to-code-skill | image-to-code | 画像→分析→コード |
| redesign-skill | redesign-existing-projects | 既存プロジェクトの監査 |
| output-skill | full-output-enforcement | 不完全な出力を防止 |
ビジュアルスタイル
| Skill | 名前 | スタイル |
|---|---|---|
| soft-skill | high-end-visual-design | ソフト、プレミアム感 |
| minimalist-skill | minimalist-ui | Notion/Linear 風 |
| brutalist-skill | industrial-brutalist-ui | スイス・タイポグラフィ |
画像生成
| Skill | 名前 | 用途 |
|---|---|---|
| imagegen-frontend-web | imagegen-frontend-web | Web デザイン参考画像 |
| imagegen-frontend-mobile | imagegen-frontend-mobile | モバイル UI 参考画像 |
| brandkit | brandkit | ブランドビジュアルボード |
効果比較
SaaS ランディングページ
Taste-Skill なし：紫〜青グラデ、Inter フォント、同じ幅の 3 カード、中央 CTA。
Taste-Skill (v2) あり：Skill がプロジェクトタイプを推論 → shadcn/ui を選択 → 非対称 hero → ディープブルー＋アンバーのアクセント → スクロールアニメーション → 高い情報密度。
結論
おすすめ度：⭐⭐⭐⭐½（4.5/5）
Taste-Skill は AI コーディング時代の中核的な課題を解決する：コード生成がボトルネックでなくなった今、デザインの味わいが最大の短板となる。
FAQ
1. Taste-Skill と shadcn/ui の関係は？
直接の関係はない。shadcn/ui はコンポーネントライブラリ、Taste-Skill はデザイン指示セット。併用可能。
2. Cursor や Claude Code がなくても使える？
はい。SKILL.md をサポートするツールならどれでも使用可能。
3. Taste-Skill は AI 生成を遅くする？
ほぼしない。Skill ファイルは追加 API 呼び出し不要のテキスト指示。
4. v1 と v2、どちらを選ぶべき？
v1 の特定動作に依存していなければ、v2 を推奨。
5. 本番環境で使用できる？
Skill 自体は開発段階のコード生成にのみ影響し、本番環境にパッケージングされない。
