ui-ux-pro-max

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

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

OpenCode ツールの対応表

Claude Code ツール	OpenCode での対応
TodoWrite	update_plan
Task サブエージェント	@mention システム
Skill ツール	use_skill ツール
ファイル操作	OpenCode のネイティブツール

使用する場面

次のような場合にこのスキルを使用します。

• ユーザーが UI/UX の作業（デザイン、構築、作成、実装、レビュー、修正、改善）を依頼したとき
• ユーザーがフロントエンドページ（ランディングページ、ダッシュボード、管理パネル、eコマース、SaaS、ポートフォリオ、ブログ、モバイルアプリ）の構築を希望したとき
• デザインパターン、カラーパレット、タイポグラフィ、UI コンポーネントについて質問されたとき

前提条件

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

---

使用方法

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

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

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

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

update_plan を使用して検索タスクを追跡し、複数の検索を実行して包括的な情報を収集します。

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

推奨する検索順序：

1. 製品 - 製品の種類に応じたスタイルの推奨事項を取得します
2. スタイル - 詳細なスタイルガイド（色、効果、フレームワーク）を取得します
3. タイポグラフィ - Google Fonts のインポートを含むフォントの組み合わせを取得します
4. 色 - カラーパレット（プライマリ、セカンダリ、CTA、背景、テキスト、境界線）を取得します
5. ランディングページ - ページ構成を取得します（ランディングページの場合）
6. チャート - チャートの推奨事項を取得します（ダッシュボード／分析の場合）
7. UX - ベストプラクティスとアンチパターンを取得します
8. スタック - スタック固有のガイドラインを取得します（デフォルト：html-tailwind）

ステップ 3：スタックのガイドライン（デフォルト：html-tailwind）

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

python3 ../../.shared/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、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	ウィジェット、状態、レイアウト、テーマ設定
shadcn	shadcn/ui コンポーネント、テーマ設定、フォーム、パターン

---

ワークフローの例

ユーザーのリクエスト：「プロ向けスキンケアサービスのランディングページを作成してください。」

AI が行うこと：

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

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

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

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

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

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

# 7. Search stack guidelines (default: html-tailwind)
python3 ../../.shared/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 アイコンに使う
安定したホバー状態	ホバー時に色や不透明度のトランジションを使う	レイアウトがずれる拡大縮小の変形を使う
正しいブランドロゴ	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 に対応している