技術 約4分で読めます

UI UX Pro Max Skill：AIのUI生成を改善するスキルを過去記事と比較してみた

Claude Code AI UI UX

GitHubで「UI UX Pro Max Skill」というClaude Code向けスキルを見つけた。AIがUI/UXを作る際のガイダンスを提供するもので、以前書いた記事と比較すると面白い違いがあったのでまとめる。

UI UX Pro Max Skillとは

Claude Code、Cursor、Windsurf等のAIコーディングアシスタント用のスキル（プラグイン）。「美容スパのランディングページを作って」と依頼すると、業界に応じた最適なスタイル・色・フォント・レイアウトを自動推論してくれる。

内蔵データベース:

  • 67種類のUIスタイル（Glassmorphism、Neumorphism、Brutalism等）
  • 96種類のカラーパレット（業界別）
  • 57種類のフォントペアリング
  • 100の業界別推論ルール（SaaS、医療、Eコマース等）
  • 25種類のチャートタイプ推奨
  • 99のUXガイドライン

例えば「美容スパ」と入力すると、こんな感じでデザインシステムが生成される:

  • スタイル: Soft UI Evolution
  • カラー: Soft Pink + Sage Green + Gold
  • フォント: Cormorant Garamond / Montserrat
  • Anti-patterns: Bright neon colors, Harsh animations, AI purple/pink gradients

過去記事との比較

以前、AIのUI出力を改善する方法について2本の記事を書いた。

これらの記事とUI UX Pro Max Skillのアプローチを比較してみる。

観点過去記事のアプローチUI UX Pro Max Skill
方針決定人間が決める（カラー3色、フォント、方向性）AIが自動推論（業界から逆算）
知識ベース外部リソース参照（Atlassian、UX心理学など）内蔵DB（67スタイル、96パレット、100ルール）
NGリストfrontend-design SKILL.mdで定義業界ごとのAnti-patternsとして定義
哲学「意図を持って選ぶ」ことが重要業界ベストプラクティスに収束
AI依存度補助輪、判断は人間推論エンジンで自動化

アプローチの違い

過去記事: 人間が意図を持つ

過去記事では「AIっぽい量産型デザイン」からの脱却には人間の意図が必要と書いた。

具体的には:

  • カラーは3色くらい決めておく
  • フォントはNGリスト（Inter、Roboto、Space Grotesk）を避ける
  • 背景アニメーションは謎の動くやつを入れてくることがあるので注意

frontend-design SKILL.md（Anthropic公式）の核心ルールは「コーディング前に美的方向性を決める」こと。ブルータリスト、レトロフューチャー、ミニマルなど「極端な方向性」を人間が選ぶ。

UI UX Pro Max Skill: 業界から自動推論

一方、UI UX Pro Max Skillは「業界を指定すれば最適解を出す」というアプローチ。

100の業界別推論ルールがあり、それぞれに:

  • 推奨パターン（ランディングページ構造）
  • スタイル優先度
  • カラームード
  • タイポグラフィムード
  • Anti-patterns（やってはいけないこと）

が定義されている。「美容スパ」と言えば自動で「Soft UI + Sage Green + Cormorant Garamond」、「Fintech」なら「Trust & Authority + Dark Mode + 紫グラデーション禁止」みたいに決まる。

どちらが効くのか

UI UX Pro Max Skillの強み

  • 判断力がなくても業界標準に乗せてくれる
  • 「紫グラデーション on 白背景」のようなAIデフォルトは確実に避けられる
  • データベースが充実している（67スタイル、96パレット）

UI UX Pro Max Skillの懸念

  • 「AIデフォルトの量産型」は避けられるが、「その業界っぽい量産型」になる可能性
  • 美容スパなら全部Soft UI、Fintechなら全部Trust & Authorityになりがち
  • 「意図的な逸脱」ができない

過去記事アプローチの強み

  • 人間が方向性を決めるので、独自性が出せる
  • 「あえてFintechにBrutalism」みたいな選択ができる
  • 外部リソース（Atlassian、UX心理学）で判断根拠が補強される

過去記事アプローチの懸念

  • 判断力がないと結局AIデフォルトに戻る
  • 外部リソースを読み込む手間がかかる
  • 方向性を決めるのに時間がかかる

使い分け

結論として、こんな使い分けが良さそう:

UI UX Pro Max Skillが向いているケース:

  • クライアントワークで「業界標準」を求められる
  • デザイン判断に自信がない
  • とにかく早くそれっぽいものを出したい

過去記事アプローチが向いているケース:

  • 独自性・ブランド感を出したい
  • デザインの方向性に明確な意図がある
  • 「業界標準」から外れても構わない

両方使うのもあり。UI UX Pro Max Skillで土台を作って、frontend-design SKILL.mdで「あえて外す」方向性を足すとか。

試してみるか

正直、データベースの充実度はすごい。67スタイル、96パレット、100ルールは手作業で集めたら相当な労力。

ただ、過去記事で書いた「AIは補助輪であって、何を作るべきか・何がマズいかの判断は人間がやる」というスタンスは変わらない。このスキルも結局は「より良い補助輪」であって、最終判断は人間がやるべき。

時間があったら実際にインストールして比較検証してみたい。