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

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	製品の種類に関する推奨事項	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI スタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	製品の種類別カラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
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	ウィジェット、状態、レイアウト、テーマ設定

---

ワークフローの例

ユーザーのリクエスト：「プロ向けスキンケアサービスのランディングページを作って」

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. 具体的なキーワードを使う - 「healthcare SaaS dashboard」>「app」
2. 複数回検索する - 異なるキーワードから異なる知見が得られます
3. ドメインを組み合わせる - Style + Typography + Color = 完全なデザインシステム
4. 必ず UX を確認する - よくある問題を見つけるため、「animation」「z-index」「accessibility」を検索します
5. stack フラグを使う - 実装に特化したベストプラクティスを取得します
6. 反復する - 最初の検索結果が合わない場合は、別のキーワードを試します

---

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

UI をプロらしく見せない、見落とされがちな問題は次のとおりです。

アイコンとビジュアル要素

ルール	すること	しないこと
絵文字アイコンを使わない	SVG アイコン（Heroicons、Lucide、Simple Icons）を使用する	🎨 🚀 ⚙️ のような絵文字を UI アイコンとして使用する
安定したホバー状態	ホバー時に色や不透明度のトランジションを使用する	レイアウトをずらす拡大・縮小の変形を使用する
正しいブランドロゴ	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-w-6xl または max-w-7xl を使用する	コンテナの幅を混在させる

---

提供前チェックリスト

UI コードを提供する前に、以下の項目を確認してください。

ビジュアル品質

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

インタラクション

• クリック可能なすべての要素に cursor-pointer が設定されている
• ホバー状態で明確な視覚的フィードバックが得られる
• トランジションがスムーズである（150～300ms）
• キーボード操作時にフォーカス状態が見える

ライト／ダークモード

• ライトモードのテキストに十分なコントラストがある（最低 4.5:1）
• ライトモードでガラス状／透明な要素が見える
• 両方のモードで境界線が見える
• 提供前に両方のモードをテストする

レイアウト

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

アクセシビリティ

• すべての画像に alt テキストがある
• フォーム入力にラベルがある
• 色だけを唯一の手掛かりにしていない
• prefers-reduced-motion に従っている