UI/UX Pro Max - Design Intelligence

ウェブアプリケーションとモバイルアプリケーションのための包括的なデザインガイド。50以上のスタイル、97のカラーパレット、57のフォントペアリング、99のUXガイドライン、9つのテクノロジースタック全体にわたる25種類のチャートタイプを含みます。優先度ベースの推奨機能を備えた検索可能なデータベース。

使用すべき場面

以下の場合にこのガイドラインを参照してください：

• 新しいUIコンポーネントまたはページをデザインする
• カラーパレットとタイポグラフィを選択する
• UXの問題についてコードをレビューする
• ランディングページまたはダッシュボードを構築する
• アクセシビリティ要件を実装する

優先度別ルールカテゴリ

優先度	カテゴリ	影響度	ドメイン
1	アクセシビリティ	CRITICAL	ux
2	タッチ&インタラクション	CRITICAL	ux
3	パフォーマンス	HIGH	ux
4	レイアウト&レスポンシブ	HIGH	ux
5	タイポグラフィ&カラー	MEDIUM	typography, color
6	アニメーション	MEDIUM	ux
7	スタイル選択	MEDIUM	style, product
8	チャート&データ	LOW	chart

クイックリファレンス

1. アクセシビリティ (CRITICAL)

• color-contrast - 通常テキストの最小4.5:1の比率
• focus-states - インタラクティブ要素に目に見えるフォーカスリング
• alt-text - 意味のある画像の説明的なalt属性
• aria-labels - アイコンのみのボタンにはaria-label属性を使用
• keyboard-nav - タブ順序が視覚的な順序と一致
• form-labels - label要素にfor属性を使用

2. タッチ&インタラクション (CRITICAL)

• touch-target-size - 最小44x44pxのタッチターゲット
• hover-vs-tap - プライマリインタラクションにはクリック/タップを使用
• loading-buttons - 非同期操作中はボタンを無効化
• error-feedback - 問題の近くに明確なエラーメッセージを表示
• cursor-pointer - クリック可能な要素に cursor-pointer を追加

3. パフォーマンス (HIGH)

• image-optimization - WebP、srcset、遅延読み込みを使用
• reduced-motion - prefers-reduced-motion をチェック
• content-jumping - 非同期コンテンツのために領域を確保

4. レイアウト&レスポンシブ (HIGH)

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - モバイルのボディテキストは最小16px
• horizontal-scroll - コンテンツがビューポート幅に収まることを確認
• z-index-management - z-indexスケールを定義 (10, 20, 30, 50)

5. タイポグラフィ&カラー (MEDIUM)

• line-height - ボディテキストに1.5-1.75を使用
• line-length - 1行あたり65-75文字に制限
• font-pairing - 見出しと本文フォントの個性を合わせる

6. アニメーション (MEDIUM)

• duration-timing - マイクロインタラクションに150-300msを使用
• transform-performance - 幅/高さではなく transform/opacity を使用
• loading-states - スケルトンスクリーンまたはスピナーを使用

7. スタイル選択 (MEDIUM)

• style-match - スタイルが製品タイプと一致する
• consistency - すべてのページで同じスタイルを使用
• no-emoji-icons - 絵文字ではなくSVGアイコンを使用

8. チャート&データ (LOW)

• chart-type - チャートタイプをデータタイプに合わせる
• color-guidance - アクセシブルなカラーパレットを使用
• data-table - アクセシビリティのためのテーブル代替案を提供

使用方法

下記のCLIツールを使用して特定のドメインを検索します。

---

前提条件

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-commerce、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルキーワード: minimal、playful、professional、elegant、dark modeなど
• 業界: healthcare、fintech、gaming、educationなど
• スタック: React、Vue、Next.jsまたはデフォルトのhtml-tailwind

ステップ2：デザインシステムを生成 (必須)

常に--design-systemで開始して、推論とともに包括的な推奨事項を取得します：

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

このコマンド：

1. 5つのドメインを並列検索 (product、style、color、landing、typography)
2. ui-reasoning.csvからの推論ルールを適用して最適な一致を選択
3. 完全なデザインシステムを返す: パターン、スタイル、色、タイポグラフィ、エフェクト
4. 避けるべきアンチパターンを含む

例:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

ステップ3：必要に応じて詳細検索を補充

デザインシステムを取得後、ドメイン検索を使用して追加の詳細を取得：

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

詳細検索を使用すべき場合：

必要な項目	ドメイン	例
より多くのスタイルオプション	style	--domain style "glassmorphism dark"
チャート推奨事項	chart	--domain chart "real-time dashboard"
UXベストプラクティス	ux	--domain ux "animation accessibility"
代替フォント	typography	--domain typography "elegant luxury"
ランディングページ構成	landing	--domain landing "hero social-proof"

ステップ4：スタックガイドライン (デフォルト: 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-commerce、portfolio、healthcare、beauty、service
style	UIスタイル、色、エフェクト	glassmorphism、minimalism、dark mode、brutalism
typography	フォントペアリング、Google Fonts	elegant、playful、professional、modern
color	製品タイプ別のカラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
landing	ページ構成、CTA戦略	hero、hero-centric、testimonial、pricing、social-proof
chart	チャートタイプ、ライブラリ推奨事項	trend、comparison、timeline、funnel、pie
ux	ベストプラクティス、アンチパターン	animation、accessibility、z-index、loading
react	React/Next.jsパフォーマンス	waterfall、bundle、suspense、memo、rerender、cache
web	ウェブインターフェースガイドライン	aria、focus、keyboard、semantic、virtualize
prompt	AIプロンプト、CSSキーワード	(スタイル名)

利用可能なスタック

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

---

ワークフロー例

ユーザーリクエスト: 「Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp」

ステップ1：要件を分析

• 製品タイプ：ビューティ/スパサービス
• スタイルキーワード：elegant、professional、soft
• 業界：ビューティ/ウェルネス
• スタック：html-tailwind (デフォルト)

ステップ2：デザインシステムを生成 (必須)

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

出力: パターン、スタイル、色、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。

ステップ3：必要に応じて詳細検索を補充

# アニメーションとアクセシビリティのためのUXガイドラインを取得
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# 必要に応じて代替タイポグラフィオプションを取得
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

ステップ4：スタックガイドライン

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

その後: デザインシステム + 詳細検索を合成して、デザインを実装します。

---

出力フォーマット

--design-systemフラグは2つの出力フォーマットをサポート：

# ASCIIボックス (デフォルト) - ターミナル表示に最適
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - ドキュメント向け
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

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

1. キーワードを具体的に - 「healthcare SaaS dashboard」>「app」
2. 複数回検索 - 異なるキーワードは異なるインサイトを明かします
3. ドメインを組み合わせる - スタイル + タイポグラフィ + カラー = 完全なデザインシステム
4. 常にUXをチェック - 「animation」、「z-index」、「accessibility」を検索して一般的な問題を確認
5. スタックフラグを使用 - 実装固有のベストプラクティスを取得
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-width	同じmax-w-6xlまたはmax-w-7xlを使用	さまざまなコンテナ幅を混在

---

配信前チェックリスト

UIコードを配信する前に、これらの項目を確認します：

ビジュアル品質

• アイコンとして絵文字を使用していない (SVGを使用)
• すべてのアイコンが一貫したアイコンセットから (Heroicons/Lucide)
• ブランドロゴが正確 (Simple Iconsから検証済み)
• ホバー状態がレイアウトをシフトさせない
• var()ラッパーではなく直接テーマカラーを使用

インタラクション

• すべてのクリック可能要素にcursor-pointerがある
• ホバー状態が明確なビジュアルフィードバックを提供
• トランジションがスムーズ (150-300ms)
• キーボードナビゲーション用のフォーカス状態が見える

ライト/ダークモード

• ライトモードのテキストに十分なコントラスト (最小4.5:1)
• ガラス/透明要素がライトモードで見える
• ボーダーが両方のモードで見える
• 配信前に両方のモードをテスト

レイアウト

• フローティング要素が端から適切なスペーシングを持つ
• コンテンツが固定ナビバーの後ろに隠れない
• 375px、768px、1024px、1440pxでレスポンシブ
• モバイルで横スクロールがない

アクセシビリティ

• すべての画像にalt属性がある
• フォーム入力にラベルがある
• 色が唯一の指標ではない
• prefers-reduced-motionが尊重されている