見出し画像

AIが作るUIが毎回同じ……そのモヤモヤを解消する「taste-skill」の使い方

しゃり

AIコーディングツールを使ってフロントエンドを作ると、なぜか毎回似たようなデザインが出てくる——そう感じたことはないでしょうか。

3カラムのアイコングリッド。
グラデーションの効いたボタン。
全体的に「清潔感があるけど個性がない」Material Designっぽい画面。

これ、実は世界中のAIユーザーが抱えている共通の悩みで、「AIスロップ（AI slop）」と呼ばれています。
そのスロップを防ぐために生まれたのが、今GitHubでじわじわと話題を集めているオープンソースプロジェクト「taste-skill」です。

この記事では、taste-skillが何を解決するのか、どうやって使うのか、をわかりやすく解説します。

🎨 「AIスロップ」とは何か

まず「AIスロップ」という言葉について整理しておきます。

AIに「ランディングページを作って」と頼むと、たいてい同じパターンが返ってきます。
ヒーローセクション・特徴の3カラム・CTA・フッター。
フォントはInterかRoboto。
余白は均等。
カラーは青か紫のグラデーション。

機能的に問題はない。でも、どこかで見たことがある気がする。
他のAIが作ったページと見分けがつかない。

これがAIスロップです。

AIはコードを速く書けます。
でも、そのデザインの質はどうしても「統計的に一番無難な選択肢」に収束してしまう。
理由はシンプルで、AIは「平均的なWebデザイン」を大量に学習しているから、出力も「平均的なWebデザイン」に近づくんです。

🛠️ taste-skillとは何か

taste-skillは、AIコーディングエージェントに「デザインのセンス」を注入するための、オープンソースのスキルフレームワークです。

2026年2月19日に開発者のLeon Lin（GitHub: Leonxlnx）が公開しました。
公式サイトは https://www.tasteskill.dev/ で、リポジトリは https://github.com/Leonxlnx/taste-skill から確認できます。

どうやって機能するのか

taste-skillの核心は「SKILL.mdファイル」です。

SKILL.mdとは、AIエージェントに対する指示書のようなもの。
「レイアウトはこう組め」「タイポグラフィはこう扱え」「余白の取り方はこうしろ」というデザインヒューリスティック（経験則）が詰まったテキストファイルです。

このファイルをAIエージェントのコンテキストウィンドウ（作業記憶）に直接読み込ませることで、AIが参照するデフォルトのスタイリング判断を上書きします。

「AIが自分で判断する」から「opinionatedな指針に従う」へ。
この仕組みで、ありきたりなUIからの脱出を試みます。

対応しているツール

  • Cursor

  • Claude Code

  • Codex

  • Gemini CLI

  • v0

  • Lovable

  • OpenCode

SKILL.mdファイルの読み込みに対応しているツールなら、基本的にどれでも使えます。

📦 インストール・導入方法

では、実際の使い方を見ていきます。

方法1：npxコマンドでインストール

一番手軽な方法は、npxコマンドを使う方法です。
Node.js（v18以上が必要とされています）がインストールされている環境で、以下を実行します。

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

特定のスキルバリアントを指定してインストールする場合は、こちらです。

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

方法2：SKILL.mdを直接コピーする

もっとシンプルな方法もあります。
GitHubリポジトリからSKILL.mdファイルをダウンロードして、プロジェクトに直接コピーするだけです。

この方法はnpxを使わないので、プラットフォームや環境に依存しません。
ChatGPTやCodexの会話に貼り付けて使うこともできます。

「とにかく試してみたい」という場合は、こちらのほうが手軽かもしれません。

🎭 スキルバリアントの選び方

taste-skillには12種類のスキルバリアントが用意されているとされています。
プロジェクトの目的やスタイルに合わせて選べます。

主なバリアントを紹介します。

  • taste-skill — 汎用スキル。まず試すならこれ

  • gpt-tasteskill — より厳格なルールセット

  • image-to-code-skill — 画像ファーストのワークフロー向け（デザインモックアップからコードを起こす場面に）

  • redesign-skill — 既存プロジェクトのリデザイン向け

  • soft-skill — やわらかくぬくもりのあるデザイン方向性

  • minimalist-skill — ミニマリストなデザイン方向性

  • brutalist-skill — ブルータリストなデザイン方向性

バリアントの違いは「どんな方向性のデザインにするか」という違いです。
最初はデフォルトの「taste-skill」から始めて、合わなければ別バリアントを試すのが自然な流れです。

✅ 向いている用途・向いていない用途

どんなツールにも得意・不得意があります。taste-skillも例外ではありません。

向いている場面

  • ランディングページ

  • ポートフォリオサイト

  • 既存サイトのリデザイン

これらは「デザインの印象が重要で、個性が求められる」用途です。
AIのデフォルト出力に個性がない問題が一番痛い場面でもあり、taste-skillが最も力を発揮します。

向いていない場面

  • ダッシュボード（管理画面）

  • データテーブル中心のUI

これらは「情報の整理と視認性が最優先」の用途です。
デザインの個性よりも機能性が求められるため、taste-skillのような美的ヒューリスティックが邪魔になる可能性があるとされています。

🇯🇵 日本語環境での利用について

taste-skillはオープンソースのGitHubプロジェクトなので、日本からでも制限なく利用できます。

ただし、SKILL.mdファイルの内容は英語で書かれています。
英語のプロンプトをAIが処理するので、デザインの指示は英語ベースになります。
日本語の読者向けUIや日本語テキストを含むデザインに適用する場合は、AIが適切に解釈できるか確認しながら使うのが安全です。

また、日本語のUIに固有のタイポグラフィ（縦書き・ルビ・可変長の漢字列など）については、SKILL.mdがカバーしていない可能性があります。
日本語フロントエンド開発への応用は、まだ各自の工夫が必要な段階と考えておくのが現実的です。

💡 使ってみて気づくこと

taste-skillが特に評価されているのは「事後修正ではなく、事前制約」という発想の転換です。

通常のやり方だと「AIにUIを生成させる → ありきたりなデザインが出る → 文句を言って修正させる → また似たようなものが出る」というループに陥りがちです。

taste-skillは「AIに渡すコンテキストをあらかじめ整える」アプローチを取ります。
修正コストを後から払うのではなく、最初から制約を与えておく。

このアプローチは、AIコーディングを日常的に使うフロントエンド開発者から支持を集めています。
公開から数ヶ月でGitHubスター数がトレンド入りする水準まで増えていることが、その証左です。

📝 まとめ

今回紹介した「taste-skill」のポイントを振り返ります。

  • AIが生成するフロントエンドUIのありきたりさ（AIスロップ）を防ぐオープンソーススキルフレームワーク

  • SKILL.mdファイルをAIエージェントのコンテキストに注入することで機能する

  • Cursor・Claude Code・Codex・Gemini CLI など主要ツールに対応

  • npxコマンドで導入するか、SKILL.mdを直接コピーするだけで試せる

  • ランディングページ・ポートフォリオのような「デザインの個性が問われる用途」に特に向いている

AIで開発スピードは上がった。でも、出てくるUIがどこか物足りない——そう感じているなら、taste-skillが一つの突破口になるかもしれません。

気になった方はぜひリポジトリを覗いてみてください。

少しでも参考になれば幸いです。
最後まで読んでいただきありがとうございました。

#AI #生成AI #AIツール #フロントエンド #プログラミング #テクノロジー #taste -skill #AIエージェント #エンジニア

いいなと思ったら応援しよう！

しゃり よろしければ応援をお願いします！ 記事作成のお供のコーヒーやより良い記事を作成するためのAI/自己研鑽費用にさせていただきます！