ui-ux-pro-max

UI/UX Pro Max

概要

UI UX Pro Max は NextLevelBuilder によるオープンソース（MIT）のスキルパックです。コーディングエージェントがオフラインで検索できるデザインデータを提供します。検索可能な UI スタイル 79 種、対応するパレット付きの製品タイプ 192 種、フォントの組み合わせ 74 種、チャートタイプ 25 種、UX ガイドライン 119 件、22 種のスタック向けルール（v2.15.0 時点の件数）に加え、これらを組み合わせて製品向けのデザインシステムを生成するツールも含まれています。このスキルでは、パックのインストールと検索方法に加え、パックのインストールの有無にかかわらず応用できる、インタラクションデザイン、ユーザーフロー、コンポーネントパターン、アクセシビリティ、マイクロインタラクションを網羅した簡潔なデザイン手法も扱います。

手順

利用可能な場合は UI UX Pro Max パックを使用する

インストールを提案する前に、すでにインストールされていないか確認してください。インストーラーは 7 つのスキル（ui-ux-pro-max、design、design-system、ui-styling、brand、banner-design、slides — 約 170 ファイル、5 MB）をプロジェクトにコピーするため、まずユーザーに確認してください。

# Already installed? (project, universal, or home directory)
ls .claude/skills/ui-ux-pro-max/scripts/search.py .agents/skills/ui-ux-pro-max/scripts/search.py \
   ~/.claude/skills/ui-ux-pro-max/scripts/search.py 2>/dev/null
python3 --version

# Install into the current project (the npm package is ui-ux-pro-max-cli; its command is uipro)
npx ui-ux-pro-max-cli init --ai claude       # .claude/skills/   also: cursor, gemini, copilot, windsurf, opencode, all
npx ui-ux-pro-max-cli init --ai codex        # .agents/skills/   (same target as --ai universal)
npx ui-ux-pro-max-cli init --ai claude --global   # ~/.claude/skills/ for every project

Claude Code では、このパックはプラグインとしても利用できます。/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill を実行してから、/plugin install ui-ux-pro-max@ui-ux-pro-max-skill を実行してください。

まずデザインシステムを生成し、その後に詳細を検索します。パックのインストール先を SEARCH に指定してください。

SEARCH=.claude/skills/ui-ux-pro-max/scripts/search.py

# One recommendation: landing pattern, style, palette, typography, effects, anti-patterns, checklist
python3 $SEARCH "veterinary clinic appointment booking" --design-system -p "Pawline Vet" -f markdown

# Save it for later sessions: design-system/pawline-vet/MASTER.md plus pages/booking.md
# (files that already exist are left untouched; add --force to overwrite MASTER.md)
python3 $SEARCH "veterinary clinic appointment booking" --design-system --persist -p "Pawline Vet" --page booking --output-dir .

# Targeted lookups (-n sets the number of results, default 3; --json returns untruncated fields)
python3 $SEARCH "form validation error message" --domain ux -n 2
python3 $SEARCH "form validation" --stack nextjs
python3 $SEARCH "skeleton loading" --domain ux --json

--domain では style、color、chart、landing、product、ux、typography、icons、gsap、react、web、google-fonts を指定できます。--stack では react、nextjs、vue、nuxtjs、nuxt-ui、svelte、astro、angular、laravel、html-tailwind、shadcn、threejs、swiftui、jetpack-compose、react-native、flutter、javafx、wpf、winui、avalonia、uno、uwp を指定できます。保存済みのデザインシステムがある場合は、UI コードを書く前に MASTER.md を読み込んでください。pages/ 内のファイルは、そのページに限り MASTER.md の設定を上書きします。

デザイン手法

ユーザーから UI/UX に関するガイダンスや実装を求められた場合は、次の手順に従ってください。

ステップ 1：デザインの背景を把握する

項目	確認する内容
ユーザー	どのような人ですか？ 技術に詳しいですか？ 利用頻度はどのくらいですか？
タスク	ユーザーは何を達成しようとしていますか？
利用環境	デスクトップ、モバイル、またはその両方ですか？ 時間に追われていますか、それとも探索的に使っていますか？
複雑さ	手順はいくつありますか？ データ量はどのくらいですか？ 選択肢はいくつありますか？
既存のパターン	その製品では、どのような慣習がすでに使われていますか？

ステップ 2：UX の基本原則を適用する

段階的な情報開示： 各ステップで必要な情報だけを表示します。折りたたみ可能なセクション、ツールチップ、詳細設定の背後に複雑さを隠します。

フィードバックループ： ユーザーの操作には、すべて 100ms 以内に目に見えるフィードバックを返す必要があります。クリック、送信、エラー、成功のすべてに明確な応答を用意します。

エラー処理よりエラー防止： 無効な選択肢を無効化し、入力中に検証を行い、適切なデフォルトを使います。ミスからの復旧より、ミスを未然に防ぐ方が低コストです。

記憶より認識： ユーザーが選択肢を覚えるのではなく、目にできるようにします。選択肢が決まっている場合は、自由入力ではなくドロップダウンを使います。最近使った項目や候補も表示します。

一貫性： 同じ操作には、どこでも同じパターンを使います。あるページで行をクリックすると詳細パネルが開くなら、すべてのページで同じ動作にします。

ステップ 3：インタラクションパターンを設計する

ナビゲーションパターン：

Top nav:        Best for < 7 primary sections, public sites
Sidebar nav:    Best for apps with deep hierarchy, frequent switching
Bottom tabs:    Best for mobile, 3-5 primary destinations
Breadcrumbs:    Best for deep hierarchies where users need to backtrack
Command palette: Best for power users, keyboard-driven apps

フォームパターン：

Single column:  Best for most forms (faster completion)
Multi-column:   Only for related short fields (city/state/zip)
Stepped wizard: Best for 7+ fields or complex flows
Inline editing: Best for settings and profile pages

データ表示パターン：

Table:          Best for comparing items with many attributes
Card grid:      Best for visual items or browsing
List:           Best for sequential or prioritized items
Detail panel:   Best for master-detail workflows
Dashboard:      Best for monitoring metrics at a glance

ステップ 4：細部まで仕上げて実装する

読み込み状態：

• スピナーよりスケルトンスクリーンを使います（唐突さが少なく、より速く感じられます）
• 3 秒を超える操作にはプログレスバーを表示します
• よく使われる操作には楽観的 UI を使います（すぐに成功を表示し、失敗した場合は元に戻します）

空の状態：

• 画面を空白のままにしないでください。ここに何が表示されるのか、利用を始めるにはどうすればよいのかを説明します
• 空の印象を和らげるため、イラストやアイコンを含めます
• 主な操作ボタン（「最初のプロジェクトを作成」）を用意します

トランジションとアニメーション：

Duration:   150-300ms for UI transitions (faster feels snappy)
Easing:     ease-out for entrances, ease-in for exits
Motion:     Fade + slight translate (8-16px) for appearing elements
Hover:      Scale 1.02-1.05 for cards, color shift for buttons
Focus:      Visible ring (2px offset) for keyboard navigation

重要なマイクロインタラクション：

• ボタンの押下：アクティブ時にわずかに縮小します（0.97）
• トグルスイッチ：色の変化を伴う滑らかなスライド
• チェックボックス：チェックマークがわずかに弾むように描画されます
• フォーム送信：ボタンに読み込み状態を表示し、その後、成功を示すチェックマークを表示します
• 削除：項目がスライドして消え、取り消しのトーストが表示されます

ステップ 5：デザインを検証する

• 5 秒テスト： 初めて利用するユーザーが、5 秒でページの目的を把握できますか？
• 目を細めるテスト： 目をぼかして見ても、視覚的な階層は機能していますか？
• Tab テスト： キーボードだけで一連の操作をすべて実行できますか？
• エラーテスト： 問題が発生した場合、どうなりますか？データが空の場合は？長いテキストの場合は？ネットワークが遅い場合は？

例

例 1：パックでデザインシステムを生成して保存する

ユーザーのリクエスト：「動物病院の Pawline Vet 向けに予約サイトを作っています。デザインの方向性を決め、ページ全体で統一してください。」

SEARCH=.claude/skills/ui-ux-pro-max/scripts/search.py
python3 $SEARCH "veterinary clinic appointment booking" --design-system --persist -p "Pawline Vet" --page booking --output-dir .

結果： スクリプトは推奨内容を出力し、初回実行時に 2 つのファイルを書き込みます。返された主な値は次のとおりです。

Category:    Veterinary Clinic
Pattern:     Trust & Authority + Conversion (Hero > Proof > Solution overview > Clear CTA path)
Style:       Claymorphism — light mode supported, dark mode conditional
Colors:      Primary #0D9488, Secondary #14B8A6, Accent/CTA #EA580C, Background #F0FDFA, Foreground #134E4A
Typography:  Varela Round (headings) / Nunito Sans (body), with the Google Fonts import
Checklist:   contrast 4.5:1, visible focus states, prefers-reduced-motion, responsive at 375/768/1024/1440px

design-system/pawline-vet/MASTER.md          # colors as CSS variables, typography, spacing, component specs
design-system/pawline-vet/pages/booking.md   # overrides for the booking page only

提案された CTA は「営業に問い合わせる／見積もりを依頼する」でしたが、病院には適していません。実装を始める前に MASTER.md 内で「診察を予約する」に置き換え、その後、これらのファイルを使ってページを実装してください。

例 2：設定ページの UX を改善する

ユーザーのリクエスト：「設定ページが分かりにくいので、再設計を手伝ってください」

分析と出力：

## Current Issues
1. All settings on one long page — overwhelming
2. No grouping — unrelated settings mixed together
3. Save button only at the bottom — easy to miss
4. No indication of which settings were changed

## Recommended Design

### Structure
- Group settings into logical sections with a left sidebar:
  - General, Notifications, Security, Billing, Integrations
- Each section loads as its own panel on the right

### Interaction
- Auto-save with a subtle "Saved" toast (no save button needed)
- Or: floating save banner that appears only when changes are detected
- Show changed fields with a subtle highlight
- Add "Reset to default" per field, not per page

### Component Pattern
[Sidebar] → [Section Header + Description] → [Setting Group]

Each setting:
  Label (bold) + Description (gray, smaller)
  Input/Toggle/Select aligned to the right
  Divider between settings

例 3：デザインシステムのコンポーネント監査

ユーザーのリクエスト：「アプリで一貫性のあるボタンスタイルを作るのを手伝ってください」

出力：

## Button System

### Hierarchy (use exactly these 4 variants)
| Variant | Use Case | Example |
|---------|----------|---------|
| Primary | Main CTA, 1 per screen | "Save", "Submit", "Create" |
| Secondary | Supporting actions | "Cancel", "Back", "Export" |
| Ghost | Tertiary actions | "Learn more", "View all" |
| Destructive | Irreversible actions | "Delete", "Remove" |

### Sizes
| Size | Height | Padding | Font | Use Case |
|------|--------|---------|------|----------|
| sm | 32px | 12px 16px | 13px | Tables, dense UI |
| md | 40px | 12px 20px | 14px | Default, forms |
| lg | 48px | 14px 24px | 16px | Hero CTAs, landing |

### States (every button needs all of these)
- Default → Hover (darken 10%) → Active (darken 15%, scale 0.98)
- Focus (visible ring, 2px offset)
- Disabled (50% opacity, no pointer events)
- Loading (spinner replaces text, same width to prevent layout shift)

### Rules
- Max 1 primary button per visible area
- Destructive buttons require a confirmation step
- Icon-only buttons need a tooltip and aria-label
- Button text: verb + noun ("Create project" not just "Create")

ガイドライン

• 80％のケースを対象に設計します。一般的な操作を最適化し、例外的なケースはメニューや詳細設定にまとめます。
• すべての画面に、次に行うべきことを明確に 1 つ示します。ユーザーがためらうなら、デザインはうまく機能していません。
• 余白は無駄なスペースではありません。要素を詰め込んでも、インターフェースが使いやすくなるわけではありません。
• コピーも UX の一部です。「問題が発生しました」はよくありません。「変更を保存できませんでした。接続を確認して、もう一度お試しください」は適切です。
• 実際のデータでテストします。3 語なら見栄えのよいカードも、30 語では崩れることがあります。最悪のケースを想定して設計します。
• パフォーマンスも UX の一部です。美しいインターフェースでも、応答に 4 秒かかれば壊れているように感じられます。
• アクセシビリティはすべての人にとっての UX です。キーボード操作、スクリーンリーダー、色のコントラスト、動きに関する設定は、すべて重要です。
• 迷ったときは、うまく機能しているものを参考にします。人々がすでに使い、気に入っているインターフェースを調べます。十分な理由なく、既存のパターンを作り直さないでください。
• パックのデザインシステムは出発点として扱います。行はキーワードの一致度で順位付けされるため、一致したカテゴリを確認し、製品に合わないものがあれば調整します。カテゴリが間違っている場合は、より具体的なクエリで再実行します。
• 現行の npm パッケージ ui-ux-pro-max-cli を使用します。旧パッケージの uipro-cli は 2.2.3（2026 年 1 月）で更新が止まり、古いデータが含まれています。
• .claude/skills/ui-ux-pro-max/ がすでに存在する場合（たとえば、このスキルがその名前でインストールされている場合）、init --ai claude は成功を報告しますが、何も書き込みません。--ai universal を指定してインストールするか、Claude Code プラグインを使うか、--force を渡してください。--force を指定すると、既存の SKILL.md がパック独自のものに置き換わります。
• uipro versions は GitHub API に問い合わせるため、未認証の利用枠を使い切るとレート制限エラーになります。init は npm パッケージからインストールするため、GitHub API は必要ありません。uipro uninstall は確認を求めるので、ユーザー自身に実行してもらってください。
• パックを動作させるために Python などのソフトウェアをインストールしないでください。python3 が見つからない場合は、その旨をユーザーに伝え、デザイン手法に沿って続行してください。