ui-ux-pro-max

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

UI スタイル、配色、フォントの組み合わせ、チャートの種類、製品の推奨事項、UX ガイドライン、特定の技術スタック向けのベストプラクティスを含む、検索可能なデータベースです。

前提条件

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

python3 --version || python --version

Python がインストールされていない場合は、ユーザーのオペレーティングシステムに応じてインストールします：

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 "<关键词>" --domain <领域> [-n <最大结果数>]

推奨される検索順序：

1. Product（製品） - 製品の種類に応じたスタイルの提案を取得します
2. Style（スタイル） - 詳細なスタイルガイド（色、エフェクト、フレームワーク）を取得します
3. Typography（タイポグラフィ） - Google Fonts のインポートコード付きのフォントの組み合わせを取得します
4. Color（色） - 配色（メイン、サブ、CTA、背景、テキスト、境界線）を取得します
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 "<关键词>" --stack html-tailwind

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

---

検索リファレンス

利用可能な分野（Domains）

分野（domain）	用途	キーワードの例
product	製品の種類に関する推奨事項	SaaS、e-commerce（E コマース）、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（読み込み）
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能な技術スタック（Stacks）

技術スタック（stack）	主な対象
html-tailwind	Tailwind ユーティリティクラス、レスポンシブ対応、アクセシビリティ（既定）
react	状態管理、hooks、パフォーマンス、パターン
nextjs	SSR（サーバーサイドレンダリング）、ルーティング、画像の最適化、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、stores、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

**その後：**すべての検索結果を統合してデザインを実装します。

---

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

1. 具体的なキーワードを使う - 「app」よりも「healthcare SaaS dashboard」（医療 SaaS ダッシュボード）のほうが適しています。
2. 複数回検索する - キーワードを変えると、異なる知見が得られます。
3. 分野を組み合わせる - Style（スタイル）＋ Typography（タイポグラフィ）＋ Color（色）＝完全なデザインシステム。
4. 必ず UX を確認する - 「animation」（アニメーション）、「z-index」、「accessibility」（アクセシビリティ）を検索して、よくある問題を回避します。
5. Stack フラグを使う - 特定の実装に関するベストプラクティスを取得します。
6. 繰り返し試す - 最初の検索結果が合わない場合は、別のキーワードを試します。

---

プロフェッショナルな UI の基本ルール

見落とされがちで、UI をプロフェッショナルに見えなくする問題を以下に示します：

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

ルール	すべきこと（Do）	すべきでないこと（Don't）
アイコンに絵文字を使わない	SVG アイコン（Heroicons、Lucide、Simple Icons）を使用する	UI アイコンとして 🎨 🚀 ⚙️ などの絵文字を使用する
ホバー状態を安定させる	ホバー時に色や不透明度のトランジションを使用する	レイアウトのずれを引き起こす拡大縮小変換を使用する
正しいブランドロゴを使う	Simple Icons から公式 SVG を探す	ロゴのパスを推測したり、誤ったパスを使用したりする
アイコンのサイズを統一する	固定の viewBox（24x24）と w-6 h-6 を使用する	サイズの異なるアイコンを無作為に混在させる

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

ルール	すべきこと（Do）	すべきでないこと（Don't）
ポインターカーソル（Cursor pointer）	クリックまたはホバー可能なすべてのカードに cursor-pointer を追加する	インタラクティブ要素にデフォルトのカーソルを使用する
ホバー時のフィードバック	視覚的なフィードバック（色、影、境界線）を提供する	要素が操作可能であることを示す手がかりを設けない
スムーズなトランジション	transition-colors duration-200 を使用する	状態を瞬時に切り替えたり、切り替えに時間をかけすぎたりする（>500ms）

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

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

布局与间距

规则	应做 (Do)	不应做 (Don't)
悬浮导航栏	添加 top-4 left-4 right-4 间距	将导航栏紧贴 top-0 left-0 right-0
内容内边距 (Padding)	考虑到固定导航栏的高度	让内容隐藏在固定元素后面
一致的最大宽度	使用统一的 max-w-6xl 或 max-w-7xl	混合使用不同的容器宽度

---

交付前检查清单

在交付 UI 代码之前，请验证这些项目：

视觉质量

• 没有将 Emoji 用作图标（应使用 SVG）
• 所有图标来自一致的图标集 (Heroicons/Lucide)
• 品牌 Logo 正确（已通过 Simple Icons 验证）
• 悬停状态不会导致布局偏移
• 直接使用主题颜色 (bg-primary) 而不是 var() 包装器

交互体验

• 所有可点击元素都有 cursor-pointer
• 悬停状态提供清晰的视觉反馈
• 过渡效果平滑 (150-300ms)
• 键盘导航时焦点状态可见

亮/暗模式

• 亮色模式文本有足够的对比度（最低 4.5:1）
• 玻璃/透明元素在亮色模式下可见
• 边框在两种模式下均可见
• 交付前在两种模式下都进行了测试

布局

• 悬浮元素与边缘有适当的间距
• 没有内容隐藏在固定导航栏后面
• 在 320px, 768px, 1024px, 1440px 下均响应良好
• 移动端没有水平滚动条

无障碍性

• 所有图片都有 alt 文本
• 表单输入框有标签 (label)
• 颜色不是唯一的指示器
• 尊重 prefers-reduced-motion（减少动态效果）设置