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、EC、ポートフォリオ、ダッシュボード、ランディングページなど
- スタイルキーワード: ミニマル、遊び心、プロフェッショナル、エレガント、ダークモードなど
- 業界: ヘルスケア、フィンテック、ゲーム、教育など
- スタック: 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>]
推奨検索順序:
- プロダクト - 製品タイプに応じたスタイルの推奨を取得
- スタイル - 詳細なスタイルガイドを取得（色、エフェクト、フレームワーク）
- タイポグラフィ - Google Fontsのインポートを含むフォントペアリングを取得
- カラー - カラーパレットを取得（プライマリ、セカンダリ、CTA、背景、テキスト、ボーダー）
- ランディング - ページ構造を取得（ランディングページの場合）
- チャート - チャートの推奨を取得（ダッシュボード/アナリティクスの場合）
- UX - ベストプラクティスとアンチパターンを取得
- スタック - スタック固有のガイドラインを取得（デフォルト: 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、EC、ポートフォリオ、ヘルスケア、美容、サービス |
style | UIスタイル、色、エフェクト | グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム |
typography | フォントペアリング、Google Fonts | エレガント、遊び心、プロフェッショナル、モダン |
color | 製品タイプ別のカラーパレット | SaaS、EC、ヘルスケア、美容、フィンテック、サービス |
landing | ページ構造、CTA戦略 | ヒーロー、ヒーロー中心、 testimonial、価格、ソーシャルプルーフ |
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. 製品タイプを検索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. スタイルを検索（業界に基づく: 美容、エレガント）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. タイポグラフィを検索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. カラーパレットを検索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. ランディングページ構造を検索
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. UXガイドラインを検索
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. スタックガイドラインを検索（デフォルト: html-tailwind）
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
その後: すべての検索結果を統合し、デザインを実装します。
より良い結果を得るためのヒント
- キーワードを具体的に - 「ヘルスケアSaaSダッシュボード」>「アプリ」
- 複数回検索する - 異なるキーワードで異なる知見が得られる
- ドメインを組み合わせる - スタイル + タイポグラフィ + カラー = 完全なデザインシステム
- 常にUXを確認する - 一般的な問題については「アニメーション」、「z-index」、「アクセシビリティ」を検索
- スタックフラグを使用する - 実装固有のベストプラクティスを取得
- 反復する - 最初の検索で一致しない場合は、異なるキーワードを試す
プロフェッショナル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で確認済み）
- ホバー状態がレイアウトのずれを引き起こさない
- テーマカラーを直接使用する（bg-primary）var()ラッパーは使用しない
インタラクション
- すべてのクリック可能な要素に
cursor-pointerがある - ホバー状態が明確な視覚的フィードバックを提供する
- トランジションがスムーズである（150-300ms）
- キーボードナビゲーションのためのフォーカス状態が可視である
ライト/ダークモード
- ライトモードのテキストに十分なコントラストがある（4.5:1以上）
- ガラス/透明要素がライトモードで可視である
- 境界線が両方のモードで可視である
- 納品前に両方のモードをテストする
レイアウト
- フローティング要素が端から適切なスペーシングを持っている
- 固定ナビバーの背後にコンテンツが隠れていない
- 320px、768px、1024px、1440pxでレスポンシブである
- モバイルで水平スクロールがない
アクセシビリティ
- すべての画像に代替テキストがある
- フォーム入力にラベルがある
- 色だけが唯一のインジケーターではない
-
prefers-reduced-motionが尊重されている