UI/UX デザイン支援スキル。67 のスタイル、96 のカラーパレット、57 のフォントペアリング、25 のチャート、13 のスタック（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）を収録。対応アクション: plan、build、create、design、implement、review、fix、improve、optimize、enhance、refactor、UI/UX コードのチェック。対象プロジェクト: website、landing page、dashboard、admin panel、e-commerce、SaaS、portfolio、blog、mobile app、.html、.tsx、.vue、.svelte。要素: button、modal、navbar、sidebar、card、table、form、chart。スタイル: glassmorphism、claymorphism、minimalism、brutalism、neumorphism、bento grid、dark mode、responsive、skeuomorphism、flat design。トピック: color palette、accessibility、animation、layout、typography、font pairing、spacing、hover、shadow、gradient。連携: コンポーネント検索と実装例のための shadcn/ui MCP。
Web アプリとモバイルアプリ向けの包括的なデザインガイド。67 のスタイル、96 のカラーパレット、57 のフォントペアリング、99 の UX ガイドライン、25 のチャートタイプを 13 の技術スタックにわたって収録しています。優先度ベースで推奨を返す検索可能なデータベースです。
次のような場面で、このガイドラインを参照します。
| 優先度 | カテゴリ | 影響度 | ドメイン |
|---|---|---|---|
| 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 |
color-contrast - 通常テキストは最低 4.5:1 のコントラスト比focus-states - インタラクティブ要素に視認できるフォーカスリングを付けるalt-text - 意味のある画像には説明的な alt テキストを付けるaria-labels - アイコンのみのボタンには aria-label を付けるkeyboard-nav - Tab 順序を見た目の順序と一致させるform-labels - for 属性付きの label を使うtouch-target-size - タップ領域は最低 44x44pxhover-vs-tap - 主要な操作は hover ではなく click/tap で成立させるloading-buttons - 非同期処理中はボタンを無効化するerror-feedback - 問題箇所の近くに明確なエラーメッセージを表示するcursor-pointer - クリック可能な要素には cursor-pointer を付けるimage-optimization - WebP、srcset、遅延読み込みを使うreduced-motion - prefers-reduced-motion を考慮するcontent-jumping - 非同期コンテンツ用の表示領域を先に確保するviewport-meta - width=device-width initial-scale=1 を設定するreadable-font-size - モバイルの本文サイズは最低 16pxhorizontal-scroll - コンテンツがビューポート幅に収まるようにするz-index-management - z-index のスケールを定義する（10、20、30、50）line-height - 本文の行間は 1.5〜1.75 を使うline-length - 1 行あたり 65〜75 文字を目安にするfont-pairing - 見出し用と本文用のフォントの性格を揃えるduration-timing - マイクロインタラクションは 150〜300ms を使うtransform-performance - width / height ではなく transform / opacity を使うloading-states - スケルトンスクリーンまたはスピナーを用意するstyle-match - プロダクトの種類に合うスタイルを選ぶconsistency - 全ページで同じスタイル言語を使うno-emoji-icons - 絵文字ではなく SVG アイコンを使う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 作業（design、build、create、implement、review、fix、improve）を依頼した場合は、次のワークフローに従います。
ユーザー依頼から次の情報を抽出します。
html-tailwind推論付きの包括的な提案を得るため、必ず --design-system から開始します。
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
このコマンドでは次を行います。
ui-reasoning.csv の推論ルールを適用して最適な候補を選ぶ例:
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
セッションをまたいで階層的に参照できるよう、デザインシステムを保存するには --persist を追加します。
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
これにより次が作成されます。
design-system/MASTER.md — すべてのデザインルールを持つグローバルな Source of Truthdesign-system/pages/ — ページごとの上書きルールを置くフォルダページ固有の override を付ける場合:
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
この場合はさらに次も作成されます。
design-system/pages/dashboard.md — Master からのページ固有差分階層参照の動作:
Checkout）を作るときは、まず design-system/pages/checkout.md を確認するdesign-system/MASTER.md のみを使うデザインシステム取得後、必要に応じてドメイン検索で追加の詳細を取得します。
python3 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" |
| LP の構成を詰めたい | landing | --domain landing "hero social-proof" |
実装スタック固有のベストプラクティスを取得します。ユーザーがスタックを指定しない場合は、html-tailwind をデフォルトにします。
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
利用可能なスタック: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
| Domain | 用途 | キーワード例 |
|---|---|---|
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 キーワード | (style name) |
| Stack | 主な対象 |
|---|---|
html-tailwind | Tailwind utilities、responsive、a11y（DEFAULT） |
react | State、hooks、performance、patterns |
nextjs | SSR、routing、images、API routes |
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 components、theming、forms、patterns |
jetpack-compose | Composables、Modifiers、State Hoisting、Recomposition |
ユーザー依頼: 「プロ向けスキンケアサービスのランディングページを作って」
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
出力: pattern、style、colors、typography、effects、anti-patterns を含む完全なデザインシステム。
# animation と accessibility の UX ガイドラインを取得
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# 必要なら別の typography 候補も取得
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
その後: デザインシステムと詳細検索結果を統合し、実装に落とし込みます。
--design-system フラグは 2 種類の出力形式に対応しています。
# ASCII box（default）- ターミナル表示向け
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - ドキュメント化向け
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
"healthcare SaaS dashboard" のほうが "app" より有効"animation"、"z-index"、"accessibility" は定番の確認項目以下は見落とされやすく、UI を素人っぽく見せる原因になりやすい項目です。
| ルール | 推奨 | 非推奨 |
|---|---|---|
| 絵文字アイコンを使わない | SVG アイコン（Heroicons、Lucide、Simple Icons）を使う | 🎨 🚀 ⚙️ のような絵文字を UI アイコンとして使う |
| 安定した hover 状態 | hover では color / opacity の変化を使う | レイアウトが揺れる scale transform を使う |
| 正しいブランドロゴ | Simple Icons で公式 SVG を確認する | 推測でロゴやパスを使う |
| 一貫したアイコンサイズ | 固定 viewBox（24x24）と w-6 h-6 を使う | 異なるサイズのアイコンを無秩序に混在させる |
| ルール | 推奨 | 非推奨 |
|---|---|---|
| カーソルポインター | クリック可能 / hover 対象のカードすべてに cursor-pointer を付ける | インタラクティブ要素のカーソルを初期値のままにする |
| Hover フィードバック | 色、影、ボーダーなどの視覚フィードバックを与える | 操作可能だと分からないままにする |
| 滑らかな遷移 | 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 を使う（見えない） |
| ルール | 推奨 | 非推奨 |
|---|---|---|
| フローティング navbar | top-4 left-4 right-4 の余白を取る | top-0 left-0 right-0 に張り付ける |
| コンテンツの padding | fixed navbar の高さを見込んで余白を取る | fixed 要素の裏にコンテンツを隠してしまう |
| 一貫した max-width | max-w-6xl か max-w-7xl を統一して使う | 異なるコンテナ幅を混在させる |
UI コードを納品する前に、次の項目を確認します。
var() ではなく bg-primary のように直接使うcursor-pointer が付いているprefers-reduced-motion に対応している