| name | ui-designer |
| description | UI/UX デザインインテリジェンス。Webアプリの画面構成、レイアウト、コンポーネント、スタイル方針をまとめる。50以上のスタイル、97カラーパレット、57フォントペアリング、99 UXガイドライン、25チャートタイプ、9テクノロジースタック対応の検索可能なデザインデータベース付き。「UIを設計して」「UXを改善して」「画面レイアウトを提案して」などのリクエストで発動する。 |
| metadata | {"version":"1.0.1","tier":"experimental","category":"design","tags":["ui","ux","layout","design-system"]} |
ui-designer
Webアプリ・モバイルアプリ向けの包括的デザインガイド。50以上のスタイル、97カラーパレット、57フォントペアリング、99 UXガイドライン、25チャートタイプを9テクノロジースタックにわたって網羅。優先度ベースの推奨を備えた検索可能なデータベース。
適用タイミング
以下の場面でこのガイドラインを参照する:
- 新しいUIコンポーネントやページを設計するとき
- カラーパレットやタイポグラフィを選定するとき
- コードのUX問題をレビューするとき
- ランディングページやダッシュボードを構築するとき
- アクセシビリティ要件を実装するとき
ルールカテゴリ（優先度順）
| 優先度 | カテゴリ | 影響度 | ドメイン |
|---|
| 1 | アクセシビリティ | 最重要 | ux |
| 2 | タッチ＆インタラクション | 最重要 | ux |
| 3 | パフォーマンス | 高 | ux |
| 4 | レイアウト＆レスポンシブ | 高 | ux |
| 5 | タイポグラフィ＆カラー | 中 | typography, color |
| 6 | アニメーション | 中 | ux |
| 7 | スタイル選定 | 中 | style, product |
| 8 | チャート＆データ | 低 | chart |
クイックリファレンス
1. アクセシビリティ（最重要）
color-contrast - 通常テキストで最低4.5:1のコントラスト比focus-states - インタラクティブ要素に可視フォーカスリングalt-text - 意味のある画像に説明的なaltテキストaria-labels - アイコンのみのボタンにaria-labelkeyboard-nav - タブ順序がビジュアル順序と一致form-labels - for属性付きlabelを使用
2. タッチ＆インタラクション（最重要）
touch-target-size - 最小44x44pxのタッチターゲットhover-vs-tap - メインの操作にはclick/tapを使用loading-buttons - 非同期操作中はボタンを無効化error-feedback - 問題箇所の近くに明確なエラーメッセージcursor-pointer - クリック可能な要素にcursor-pointerを追加
3. パフォーマンス（高）
image-optimization - WebP、srcset、遅延読み込みを使用reduced-motion - prefers-reduced-motionを確認content-jumping - 非同期コンテンツ用のスペースを確保
4. レイアウト＆レスポンシブ（高）
viewport-meta - width=device-width initial-scale=1readable-font-size - モバイルで最小16pxの本文テキストhorizontal-scroll - コンテンツがビューポート幅に収まることz-index-management - z-indexスケールを定義（10, 20, 30, 50）
5. タイポグラフィ＆カラー（中）
line-height - 本文テキストに1.5〜1.75を使用line-length - 1行あたり65〜75文字に制限font-pairing - 見出しと本文のフォントの個性を合わせる
6. アニメーション（中）
duration-timing - マイクロインタラクションに150〜300msを使用transform-performance - width/heightではなくtransform/opacityを使用loading-states - スケルトンスクリーンまたはスピナー
7. スタイル選定（中）
style-match - プロダクトタイプに合ったスタイルを選ぶconsistency - 全ページで同じスタイルを使用no-emoji-icons - 絵文字ではなくSVGアイコンを使用
8. チャート＆データ（低）
chart-type - データタイプに合ったチャートを選ぶcolor-guidance - アクセシブルなカラーパレットを使用data-table - アクセシビリティのためにテーブル代替を提供
使い方
以下のCLIツールを使って特定のドメインを検索する。
前提条件
Pythonがインストールされているか確認:
python3 --version || python --version
インストールされていない場合、OSに応じてインストール:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
このスキルの使い方
ユーザーがUI/UX関連の作業（design、build、create、implement、review、fix、improve）を依頼した場合、以下のワークフローに従う:
Step 0: スコーピング（実行前確認）
以下を確認し、該当しない場合は中断して適切なスキルを提案する:
Step 1: ユーザー要件を分析する
ユーザーのリクエストからキー情報を抽出:
- プロダクトタイプ: SaaS、EC、ポートフォリオ、ダッシュボード、ランディングページなど
- スタイルキーワード: ミニマル、ポップ、プロフェッショナル、エレガント、ダークモードなど
- 業界: ヘルスケア、フィンテック、ゲーム、教育など
- スタック: React、Vue、Next.jsなど、指定がなければ
html-tailwind をデフォルト
Step 2: デザインシステムを生成する（必須）
まず --design-system で包括的な推奨を取得:
python3 skills/ui-designer/scripts/search.py "<プロダクトタイプ> <業界> <キーワード>" --design-system [-p "プロジェクト名"]
このコマンドは:
- 5つのドメインを並列検索（product、style、color、landing、typography）
ui-reasoning.csv のルールを適用して最適なマッチを選定- 完全なデザインシステムを返却: パターン、スタイル、カラー、タイポグラフィ、エフェクト
- アンチパターンも含む
例:
python3 skills/ui-designer/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Step 2b: デザインシステムの永続化（マスター＋オーバーライドパターン）
デザインシステムをセッション横断で階層的に参照するために --persist を追加:
python3 skills/ui-designer/scripts/search.py "<クエリ>" --design-system --persist -p "プロジェクト名"
作成されるファイル:
design-system/MASTER.md — グローバルなデザインルールの真のソースdesign-system/pages/ — ページ固有のオーバーライド用フォルダ
ページ固有のオーバーライド付き:
python3 skills/ui-designer/scripts/search.py "<クエリ>" --design-system --persist -p "プロジェクト名" --page "dashboard"
追加で作成:
design-system/pages/dashboard.md — マスターからの逸脱ルール
階層的参照の仕組み:
- 特定ページ（例: 「Checkout」）構築時、まず
design-system/pages/checkout.md を確認
- ページファイルが存在すればマスターファイルをオーバーライド
- 存在しなければ
design-system/MASTER.md のみを使用
コンテキスト対応の参照プロンプト:
[ページ名] ページを構築中です。design-system/MASTER.md を読んでください。
また design-system/pages/[page-name].md が存在するか確認してください。
ページファイルが存在すれば、そのルールを優先してください。
存在しなければ、マスタールールのみを使用してください。
では、コードを生成してください...
Step 3: 詳細検索で補完する（必要に応じて）
デザインシステム取得後、ドメイン検索で詳細を補完:
python3 skills/ui-designer/scripts/search.py "<キーワード>" --domain <ドメイン> [-n <最大結果数>]
詳細検索が必要な場面:
| ニーズ | ドメイン | 例 |
|---|
| スタイルの追加候補 | 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" |
Step 4: スタック別ガイドライン（デフォルト: html-tailwind）
スタック固有のベストプラクティスを取得。ユーザーが指定しない場合は html-tailwind をデフォルトに:
python3 skills/ui-designer/scripts/search.py "<キーワード>" --stack html-tailwind
利用可能なスタック: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
検索リファレンス
利用可能なドメイン
| ドメイン | 用途 | キーワード例 |
|---|
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 | Webインターフェースガイドライン | aria, focus, keyboard, semantic, virtualize |
prompt | AIプロンプト、CSSキーワード | （スタイル名） |
利用可能なスタック
| スタック | フォーカス |
|---|
html-tailwind | Tailwindユーティリティ、レスポンシブ、a11y（デフォルト） |
react | State、hooks、パフォーマンス、パターン |
nextjs | SSR、ルーティング、画像、APIルート |
vue | Composition API、Pinia、Vue Router |
svelte | Runes、stores、SvelteKit |
swiftui | Views、State、Navigation、Animation |
react-native | Components、Navigation、Lists |
flutter | Widgets、State、Layout、Theming |
shadcn | shadcn/uiコンポーネント、テーマ、フォーム、パターン |
jetpack-compose | Composables、Modifiers、State Hoisting、Recomposition |
ワークフロー例
ユーザーリクエスト: 「美容サロンのランディングページを作って」
Step 1: 要件分析
- プロダクトタイプ: 美容/スパサービス
- スタイルキーワード: エレガント、プロフェッショナル、ソフト
- 業界: 美容/ウェルネス
- スタック: html-tailwind（デフォルト）
Step 2: デザインシステム生成（必須）
python3 skills/ui-designer/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
出力: パターン、スタイル、カラー、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。
Step 3: 詳細検索で補完（必要に応じて）
python3 skills/ui-designer/scripts/search.py "animation accessibility" --domain ux
python3 skills/ui-designer/scripts/search.py "elegant luxury serif" --domain typography
Step 4: スタック別ガイドライン
python3 skills/ui-designer/scripts/search.py "layout responsive form" --stack html-tailwind
その後: デザインシステム + 詳細検索結果を統合してデザインを実装する。
出力フォーマット
--design-system フラグは2つの出力形式をサポート:
python3 skills/ui-designer/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-designer/scripts/search.py "fintech crypto" --design-system -f markdown
検索のコツ
- キーワードは具体的に — 「app」より「healthcare SaaS dashboard」
- 複数回検索 — 異なるキーワードで異なるインサイトが得られる
- ドメインを組み合わせる — Style + Typography + Color = 完全なデザインシステム
- 常にUXを確認 — 「animation」「z-index」「accessibility」で頻出問題をチェック
- stackフラグを使う — スタック固有のベストプラクティスを取得
- 反復する — 最初の検索がマッチしなければ別のキーワードを試す
プロフェッショナルUIのための共通ルール
UIがアマチュアに見える原因となる、見落としがちな問題:
アイコン＆ビジュアル要素
| ルール | やるべき | やってはいけない |
|---|
| 絵文字アイコン禁止 | SVGアイコンを使用（Heroicons、Lucide、Simple Icons） | UIアイコンとして絵文字を使用 |
| 安定したホバー状態 | hover時にcolor/opacityトランジション | レイアウトがずれるscaleトランスフォーム |
| 正確なブランドロゴ | Simple Iconsから公式SVGを調査 | ロゴパスを推測したり不正確なものを使用 |
| 一貫したアイコンサイズ | viewBox(24x24)固定でw-6 h-6を使用 | アイコンサイズをランダムに混在 |
インタラクション＆カーソル
| ルール | やるべき | やってはいけない |
|---|
| カーソルポインター | クリック/ホバー可能なカードに cursor-pointer 追加 | インタラクティブ要素でデフォルトカーソルのまま |
| ホバーフィードバック | ビジュアルフィードバック（色、影、ボーダー）を提供 | 要素がインタラクティブだと分からない状態 |
| スムーズなトランジション | transition-colors duration-200 を使用 | 即時切り替えや500ms超の遅すぎるトランジション |
ライト/ダークモードのコントラスト
| ルール | やるべき | やってはいけない |
|---|
| ライトモードのglassカード | 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コードを納品する前に以下を確認:
ビジュアル品質
インタラクション
ライト/ダークモード
レイアウト
アクセシビリティ
