ui-ux-pro-max

UI/UX Pro Max - デザインインテリジェンス

UI スタイル、カラーパレット、フォントの組み合わせ、チャートの種類、製品の推奨事項、UX ガイドライン、スタック固有のベストプラクティスを検索できるデータベースです。

前提条件

Python がインストールされているか確認します:

python3 --version || python --version

Python がインストールされていない場合は、ユーザーの OS に応じてインストールします:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

---

このスキルの使い方

ユーザーが UI/UX の作業 (設計、構築、作成、実装、レビュー、修正、改善) を依頼した場合は、次のワークフローに従います:

ステップ 1: ユーザーの要件を分析する

ユーザーのリクエストから重要な情報を抽出します:

• 製品タイプ: SaaS、eコマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード: ミニマル、遊び心、プロフェッショナル、エレガント、ダークモードなど
• 業界: ヘルスケア、フィンテック、ゲーミング、教育など
• スタック: React、Vue、Next.js、またはデフォルトの html-tailwind

ステップ 2: 関連するドメインを検索する

search.py を複数回使用して、包括的な情報を収集します。十分なコンテキストが得られるまで検索します。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

推奨される検索順序:

1. Product - 製品タイプに応じたスタイルの推奨事項を取得する
2. Style - 詳細なスタイルガイド (色、エフェクト、フレームワーク) を取得する
3. Typography - Google Fonts のインポートを含むフォントの組み合わせを取得する
4. Color - カラーパレット (Primary、Secondary、CTA、Background、Text、Border) を取得する
5. Landing - ページ構造を取得する (ランディングページの場合)
6. Chart - チャートの推奨事項を取得する (ダッシュボード/分析の場合)
7. UX - ベストプラクティスとアンチパターンを取得する
8. Stack - スタック固有のガイドラインを取得する (デフォルト: html-tailwind)

ステップ 3: スタックガイドライン (デフォルト: html-tailwind)

ユーザーがスタックを指定しない場合は、デフォルトで html-tailwind を使用します。

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

利用可能なスタック: html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	製品タイプの推奨事項	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI スタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心、プロフェッショナル、モダン
color	製品タイプ別のカラーパレット	saas、eコマース、ヘルスケア、美容、フィンテック、サービス
landing	ページ構造、CTA 戦略	ヒーロー、ヒーロー中心、お客様の声、料金、ソーシャルプルーフ
chart	チャートの種類、ライブラリの推奨事項	トレンド、比較、タイムライン、ファネル、円
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、ローディング
prompt	AI プロンプト、CSS キーワード	(スタイル名)

利用可能なスタック

スタック	フォーカス
html-tailwind	Tailwind ユーティリティ、レスポンシブ、a11y (デフォルト)
react	状態、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、ストア、SvelteKit
swiftui	ビュー、状態、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、状態、レイアウト、テーマ設定
shadcn	shadcn/ui コンポーネント、テーマ設定、フォーム、パターン

---

ワークフローの例

ユーザーのリクエスト: 「プロフェッショナルなスキンケアサービスのランディングページを作成して」

AI が行うべきこと:

# 1. Search product type
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product

# 2. Search style (based on industry: beauty, elegant)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style

# 3. Search typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

# 4. Search color palette
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color

# 5. Search landing page structure
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing

# 6. Search UX guidelines
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux

# 7. Search stack guidelines (default: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind

次に: すべての検索結果を統合し、デザインを実装します。

---

より良い結果を得るためのヒント

1. キーワードを具体的にする - 「アプリ」よりも「ヘルスケア SaaS ダッシュボード」
2. 複数回検索する - 異なるキーワードから異なる知見が得られます
3. ドメインを組み合わせる - スタイル + タイポグラフィ + カラー = 完全なデザインシステム
4. 常に UX を確認する - よくある問題について「アニメーション」「z-index」「アクセシビリティ」を検索します
5. スタックフラグを使用する - 実装固有のベストプラクティスを取得できます
6. 反復する - 最初の検索が合わない場合は、別のキーワードを試します

---

プロフェッショナルな UI のための共通ルール

これらは見落とされがちで、UI を素人っぽく見せてしまう問題です:

アイコンと視覚要素

ルール	やるべきこと	やってはいけないこと
絵文字アイコンを使わない	SVG アイコンを使用する（Heroicons、Lucide、Simple Icons）	🎨 🚀 ⚙️ のような絵文字を UI アイコンとして使う
安定したホバー状態	ホバー時に色や不透明度のトランジションを使用する	レイアウトがずれる scale トランスフォームを使う
正しいブランドロゴ	Simple Icons から公式の SVG を調べる	推測したり、誤ったロゴパスを使う
一貫したアイコンサイズ	固定の viewBox（24x24）と w-6 h-6 を使用する	異なるアイコンサイズをランダムに混在させる

インタラクションとカーソル

ルール	やるべきこと	やってはいけないこと
カーソルポインター	クリック可能／ホバー可能なすべてのカードに cursor-pointer を追加する	インタラクティブな要素にデフォルトカーソルを残す
ホバーフィードバック	視覚的なフィードバック（色、影、ボーダー）を提供する	要素がインタラクティブであることを示さない
滑らかなトランジション	transition-colors duration-200 を使用する	即時の状態変化、または遅すぎる変化（500ms 超）

ライト／ダークモードのコントラスト

ルール	やるべきこと	やってはいけないこと
グラスカードのライトモード	bg-white/80 以上の不透明度を使用する	bg-white/10 を使用する（透明すぎる）
ライトモードのテキストコントラスト	テキストに #0F172A（slate-900）を使用する	本文テキストに #94A3B8（slate-400）を使用する
ライトモードの控えめなテキスト	最低でも #475569（slate-600）を使用する	gray-400 またはそれより薄い色を使用する
ボーダーの視認性	ライトモードで border-gray-200 を使用する	border-white/10 を使用する（見えない）

レイアウトとスペーシング

ルール	やるべきこと	やってはいけないこと
フローティングナビバー	top-4 left-4 right-4 のスペーシングを追加する	ナビバーを top-0 left-0 right-0 に固定する
コンテンツのパディング	固定ナビバーの高さを考慮する	固定要素の背後にコンテンツを隠す
一貫した max-width	同じ max-w-6xl または max-w-7xl を使用する	異なるコンテナ幅を混在させる

---

納品前チェックリスト

UI コードを納品する前に、これらの項目を確認してください:

視覚品質

• アイコンとして絵文字を使用していない（代わりに SVG を使用する）
• すべてのアイコンが一貫したアイコンセット（Heroicons／Lucide）から選ばれている
• ブランドロゴが正しい（Simple Icons から確認済み）
• ホバー状態がレイアウトのずれを引き起こさない
• テーマカラーを直接使用している（bg-primary）。var() ラッパーではない

インタラクション

• すべてのクリック可能な要素に cursor-pointer がある
• ホバー状態が明確な視覚的フィードバックを提供する
• トランジションがスムーズである（150～300ms）
• キーボードナビゲーション向けにフォーカス状態が表示される

ライト/ダークモード

• ライトモードのテキストに十分なコントラストがある（最低 4.5:1）
• ガラス/透明要素がライトモードで表示される
• 両方のモードで境界線が表示される
• 納品前に両方のモードをテストする

レイアウト

• フローティング要素が端から適切な間隔を保っている
• 固定ナビゲーションバーの背後にコンテンツが隠れていない
• 320px、768px、1024px、1440px でレスポンシブである
• モバイルで横スクロールが発生しない

アクセシビリティ

• すべての画像に alt テキストがある
• フォーム入力にラベルがある
• 色だけが唯一の指標になっていない
• prefers-reduced-motion が尊重されている

---

関連

• エージェント: ui-ux-designer - 完全なデザイン仕様ワークフロー（PRD 分析 → デザイン戦略 → DESIGN_SPEC.md）