메뉴
プロダクショングレードのUI/UXを作成するための統合スキル。 ダッシュボード、管理画面、LP、Webアプリケーション等のUI構築・デザイン改善・ コンポーネント/ページ新規作成時に使用（frontend-designプラグインではなく本スキルを優先する）。 Linear, Notion, Stripe, Vercel等のデザイン品質を再現し、 AIっぽい平凡なデザインを避け、独自性のある洗練されたインターフェースを生成する。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
コードベース包括的レビュー。6観点（perf/sec/test/arch/cq/docs）を並列サブエージェントで実行し、優先度付きissueファイルをメモリディレクトリに生成。使用タイミング: コードベース全体の監査・定期レビュー・リリース前品質確認の依頼時、/codebase-review実行時。境界: PR単位のレビュー→pr-review、自ブランチの提出前確認→self-review、ローカル未コミット変更→/code-review、ドキュメントのレビュー→doc-review。
既存設定と整合したスキルを新規作成。「スキルを作って」「この手順をスキル化して」等の依頼時、/create-skill実行時に使用。~/.claude/AGENTS.md（CLAUDE.mdは互換symlink）、context/*.md、既存スキルを自動参照し、重複・競合を避けたスキルを生成。境界: 既存スキル・指示ファイルの修正→update-inst、指示ファイル全体の監査→instructions-audit。
抽象的な要件・Biz 要求から要求を深掘りし、コードベース SSoT で既存実装整合性を確認した上で「実装マスタ（01_requirements_skeleton.md）」と「システム要件書（02_system_requirements.md）」を作成する。使用タイミング (1)「○○って機能を作りたい」「このBiz要求を満たす機能を設計して」等の抽象要件提示時、(2) 既存機能の拡張・Phase 分割等の要件定義開始時、(3) `/design-feature ...` 実行時。
Agent Teamsによる多角的ドキュメントレビュー。設計書・仕様書・計画書等のドキュメントを6 Agent（通常4 + Devil's Advocate + agent CLI）で並列レビュー。使用タイミング: (1) /doc-review 明示実行時、(2) 「チームでレビューして」「多角的にレビューして」等の明示依頼時（Agent Teams発動条件(c)相当）。通常の「レビューして」だけの依頼では発火しない（単独レビューまたはagent CLIで対応し、必要なら本スキルを提案する）。
既存の計画・設計・アイデアを徹底的に尋問し、共有理解に至るまでストレステストする対話スキル。使用タイミング: (1) 「グリルして」「grillして」「この計画を詰めて」「計画の穴を突いて」「ストレステストして」等の依頼時、(2) 実装着手前に計画・設計の前提や未決定事項を洗い出したい時。境界: ゼロからの要件定義・要件書作成→design-feature、完成した文書の多角的レビュー→doc-review。本スキルは既に存在する計画・アイデアの対話的な検証を行う。要件書等の成果物は生成せず、確定した重要決定のみADRとして.local/docs/に記録する。
現在のセッション内容を、別セッションのエージェントが引き継げるハンドオフ文書に圧縮し、メモリディレクトリに書き出す。セッションを切り替えたい時・作業を中断して後日再開したい時に /handoff で実行。
| name | ui-ux-design |
| description | プロダクショングレードのUI/UXを作成するための統合スキル。 ダッシュボード、管理画面、LP、Webアプリケーション等のUI構築・デザイン改善・ コンポーネント/ページ新規作成時に使用（frontend-designプラグインではなく本スキルを優先する）。 Linear, Notion, Stripe, Vercel等のデザイン品質を再現し、 AIっぽい平凡なデザインを避け、独自性のある洗練されたインターフェースを生成する。 |
このスキルは、エンタープライズソフトウェア、SaaSダッシュボード、管理画面、Webアプリケーション向けの精密で洗練されたデザインを生成する。
コードを書く前に、必ずデザイン方向性を決定する。 デフォルトに頼らない。このプロダクトが何を感じさせるべきかを考える。
以下の質問に答えてからデザインを開始する：
エンタープライズ/SaaS UIには想像以上の幅がある。以下の方向性から選択：
| 方向性 | 美学 | 適用先 |
|---|---|---|
| Precision & Density | タイトな間隔、モノクロ、情報優先 | 開発者ツール、パワーユーザーアプリ（Linear, Raycast） |
| Warmth & Approachability | 広い余白、柔らかい影、フレンドリーな色 | コラボレーションツール、コンシューマーSaaS（Notion, Coda） |
| Sophistication & Trust | クールな色調、レイヤード深度、金融的重厚感 | フィンテック、エンタープライズB2B（Stripe, Mercury） |
| Boldness & Clarity | 高コントラスト、大胆な余白、自信のあるタイポグラフィ | モダンダッシュボード、マーケティング（Vercel） |
| Utility & Function | ミュートなパレット、機能的密度、明確な階層 | GitHubスタイルのツール、開発者ツール |
| Data & Analysis | チャート最適化、技術的だがアクセシブル、数字第一 | アナリティクス、BI、メトリクスダッシュボード |
1つを選ぶか、2つをブレンドする。しかし、プロダクトに合った方向性にコミットする。
以下の極端なスタイルから選択またはインスパイアを得る：
デフォルトで暖色系に逃げない。 プロダクトを考慮：
| タイプ | 特徴 | 用途 |
|---|---|---|
| Warm foundations | クリーム、ウォームグレー | 親しみやすい、人間的 |
| Cool foundations | スレート、ブルーグレー | プロフェッショナル、信頼性 |
| Pure neutrals | トゥルーグレー、黒/白 | ミニマル、大胆、技術的 |
| Tinted foundations | 微妙なカラーキャスト | 独自性、ブランド |
業界（SaaS / Fintech / Healthcare / E-commerce / Creative / Developer）ごとの Primary / Accent の具体値は references/css-patterns.md「カラー > 業界別パレット」を参照する。
アクセントカラー — 意味を持つ1つを選ぶ：
デザイン方向性に関係なく適用される品質の床。変数定義・具体値は references/css-patterns.md「ファウンデーション」を参照する。
すべてのスペーシングは4pxベースグリッド（4 / 8 / 12 / 16 / 24 / 32 / 48px）を使用する。
TLBRは一致させる。 トップパディングが16pxなら、左/下/右も16px。水平にだけ余分なスペースが必要な場合のみ padding: 12px 16px のように2値にする。理由のない非対称パディングは避ける。
Sharp（技術的）/ Soft（フレンドリー）/ Minimal のいずれか1システムを選び、混在させない。一貫性が統一感を生む。
1つのアプローチを選び、コミットする。
| Option | 手法 | 印象 / 代表例 |
|---|---|---|
| A | Borders-only（フラット） | クリーン・技術的・密度重視（Linear, Raycast） |
| B | Single Shadow | ソフトリフト・親しみやすい |
| C | Layered Shadows | プレミアム・立体感（Stripe, Mercury） |
| D | Surface Color Shifts | 背景の色相で階層を作り、影なしで立体感 |
各Optionの変数定義は references/css-patterns.md「ファウンデーション > 深度 & エレベーション」を参照する。
| タイプ | フォント | トーン |
|---|---|---|
| System | -apple-system, BlinkMacSystemFont | 速い、ネイティブ、透明 |
| Geometric Sans | Geist, Inter, Satoshi | モダン、クリーン、技術的 |
| Humanist Sans | SF Pro, Plus Jakarta Sans | 暖かい、親しみやすい |
| Mono Influence | JetBrains Mono, Fira Code | 技術、開発者向け |
| Editorial | Playfair Display, Fraunces | 出版物、ラグジュアリー |
Modern SaaS / Premium Product / Developer Tool / Editorial のフォントペアリング、タイポスケール（11〜48px）、ウェイト・letter-spacing・データ用モノスペース（tabular-nums）の定義は references/css-patterns.md「タイポグラフィ」を参照する。
判断の要点:
tabular-nums を使い、桁を揃えるletter-spacing: -0.02em）、label は開き気味（0.02em + uppercase）代表的なUIスタイル（Glassmorphism, Neumorphism, Claymorphism, Bento Grid, Dark Mode Premium）のCSSパターン: references/css-patterns.md
単調なカードレイアウトは怠慢なデザイン。
各カードの内部構造は内容に合わせて設計し、表面処理（境界線の太さ、影の深さ、角丸、パディング、タイポグラフィ）は一貫させる。
日付ピッカー、フィルター、ドロップダウンは、ページ上の洗練されたオブジェクトとして感じられるべき。ネイティブフォーム要素をスタイル付きUIに使用しない。カスタムコンポーネントを構築する。 実装（.control-container）は references/css-patterns.md「コンポーネント > 隔離コントロール」を参照する。
4レベルシステム（primary / secondary / muted / faint）を構築し、一貫して使用する。変数定義は references/css-patterns.md「カラー > コントラスト階層」を参照する。
グレーで構造を構築。色はステータス、アクション、エラー、成功を伝えるときのみ使用する。装飾的な色はノイズ。セマンティックカラー（success / warning / error / info）の定義は references/css-patterns.md「カラー > セマンティックカラー」を参照する。
詳細なCSSパターンとガイドライン: references/css-patterns.md
スクリーンには接地が必要。データテーブルが空間に浮いているとコンポーネントデモのように見える。
メインコンテンツと同じ背景を使用し、微妙なボーダーで分離する（Supabase, Linear, Vercelスタイル）。実装（.sidebar）は references/css-patterns.md「コンポーネント > サイドバー」を参照する。
box-shadow: 0 25px 50px...）すべてのインターフェースは、1ピクセルの違いにこだわるチームがデザインしたように見えるべき。 剥ぎ取られたのではなく — 洗練された。そして、特定のコンテキストのためにデザインされた。
開発者ツールは精度と密度を求める。コラボレーションプロダクトは暖かさとスペースを求める。金融プロダクトは信頼と洗練を求める。プロダクトコンテキストが美学をガイドする。
目標: 適切なパーソナリティを持つ複雑なミニマリズム。同じ品質基準、コンテキスト駆動の実行。
Remember: Claude is capable of extraordinary creative work.
このスキルは以下の3つの優れたスキルをマージ・統合して作成された：
| スキル名 | 作者 | リポジトリ | ライセンス |
|---|---|---|---|
| frontend-design | Anthropic | https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design | - |
| claude-design-skill | Dammyjay93 | https://github.com/Dammyjay93/claude-design-skill | MIT |
| ui-ux-pro-max-skill | nextlevelbuilder | https://github.com/nextlevelbuilder/ui-ux-pro-max-skill | MIT |