Stats
Actions
Tags
From design-plugin
Webアプリの個別画面・コンポーネントのデザインを体系的に行うスキル。デザインプロセス・レイアウト・コンポーネント設計・インタラクション・アクセシビリティなどWebデザインの確立された手法を適用する。デザインシステム全体の構築・運用はdesign-system-builderスキルを使用すること。Use when: 「Webアプリをデザインして」「UIを設計して」「画面をデザインして」「レスポンシブ対応して」「アクセシビリティを改善して」「コンポーネントを設計して」「カラーパレットを決めて」と言われた時。
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-plugin:web-app-designerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Webアプリのデザインを体系的に行う。依頼内容に応じて適切なデザイン手法を選択・適用し、実装可能なデザイン仕様を出力する。
Webアプリのデザインを体系的に行う。依頼内容に応じて適切なデザイン手法を選択・適用し、実装可能なデザイン仕様を出力する。
Phase 1: 要件・コンテキスト把握
→ Phase 2: デザイン手法の選択
→ Phase 3: デザイン実行
→ Phase 4: アウトプット生成
デザイン対象を正確に理解するための情報を収集する。
以下を確認する:
| 確認項目 | 質問例 |
|---|---|
| アプリ種別 | SaaS / EC / ダッシュボード / LP / 管理画面 / ポータル / SNS |
| デザインスコープ | 新規プロダクト全体 / 特定機能のUI / 既存UIの改善 / レスポンシブ対応 / アクセシビリティ改善 |
| 主要画面 | どの画面をデザインするか（一覧/詳細/フォーム/ダッシュボード等） |
| 確認項目 | 内容 |
|---|---|
| ターゲットユーザー | ペルソナ、技術リテラシー、利用頻度 |
| 対象デバイス | デスクトップ中心 / モバイルファースト / 両対応 |
| 対象ブラウザ | モダンブラウザのみ / IE対応 / 特定ブラウザ |
| パフォーマンス要件 | 初期表示速度、データ量の想定 |
| 確認項目 | 有無を確認 |
|---|---|
| デザインシステム | 既存のコンポーネントライブラリがあるか |
| ブランドガイドライン | ロゴ・カラー・フォントの規定があるか |
| UIフレームワーク | Tailwind / MUI / shadcn/ui 等の指定があるか |
| 既存コードベース | 既存UIとの整合性を取る必要があるか |
Phase 1のアウトプット: デザインブリーフ（対象・スコープ・制約の要約）
依頼内容に応じて最適なデザイン手法を選定する。
| 依頼の種類 | 主要手法 | 補助手法 | 参照 |
|---|---|---|---|
| 新規プロダクト全体 | Design Thinking | 画面設計 → インタラクション設計（DS未整備なら先にdesign-system-builderで基盤構築） | references/design-methods.md |
| 特定機能のUI | コンポーネント設計 | 状態設計 → インタラクション設計 | references/layout-system.md |
| 既存UIの改善 | ヒューリスティック評価 | ユーザビリティテスト → 改善設計 | references/design-methods.md |
| レスポンシブ対応 | モバイルファースト | ブレークポイント設計 → グリッド設計 | references/layout-system.md |
| アクセシビリティ改善 | WCAG 2.1 AA準拠 | ヒューリスティック評価 → セマンティックHTML | references/layout-system.md |
| デザインシステム構築 | → design-system-builderスキルに委譲 | DS全体の構築はdesign-system-builderを使用 | — |
| ダッシュボード・プロダクトUI | 情報アーキテクチャ + ミニマルUI | グリッドレイアウト → データビジュアライゼーション → ユーティリティコピー | references/layout-system.md, references/art-direction.md |
| フォーム設計 | ユーザビリティ原則 | バリデーション設計 → エラー状態設計 | references/layout-system.md |
| LP・マーケティング | ナラティブ構造 + ビジュアルコンポジション | ヒーロー設計 → コンテンツ戦略 → モーション設計 → CTA最適化 | references/art-direction.md, references/layout-system.md |
依頼内容が複数の種類にまたがる場合は、手法を組み合わせる。
判断基準:
選択した手法に基づきデザインを実行する。以下の要素を依頼に応じてカバーする。
コンポーネント設計の前に、ページ全体の構図と方針を定義する。詳細は references/art-direction.md を参照。
LP・マーケティングの場合、以下を言語化する:
| 項目 | 内容 | 例 |
|---|---|---|
| Visual thesis | ムード・素材・エネルギーの1文説明 | 「NYC コーヒー文化とY2K美学を融合した温かみのあるトーン」 |
| Content plan | ヒーロー → サポート → 詳細 → ソーシャルプルーフ → 最終CTA | 5セクション構成 |
| Interaction thesis | 2-3のモーションアイデア | 「ヒーロー進入アニメーション + スクロール連動パララックス」 |
プロダクトUI・ダッシュボードの場合、以下を定義する:
| 項目 | 内容 |
|---|---|
| 表面階層 | background → surface → elevated surface の控えめな階層 |
| 情報密度方針 | 濃密だが読みやすい。装飾ではなくタイポグラフィと間隔で階層を表現 |
| カード使用基準 | デフォルトはカードなし。相互作用が必要な場合のみ |
共通の制約: H1は1個、セクション最大6個、フォント2種類まで、アクセント色1色、プライマリCTA1個
グリッドシステム:
grid-template-columns: repeat(12, 1fr)）ページ構造の定義:
┌─────────────────────────────────────┐
│ Header │
├──────────┬──────────────────────────┤
│ Sidebar │ Main Content │
│ (2-3col) │ (9-10col) │
│ │ │
│ │ │
├──────────┴──────────────────────────┤
│ Footer │
└─────────────────────────────────────┘
grid-template-areas でセマンティックなエリアを定義する60-30-10ルールを適用する:
| 比率 | 用途 | 例 |
|---|---|---|
| 60% | ドミナント（背景・ベース） | 白 / ライトグレー |
| 30% | セカンダリ（補助） | カード背景 / サイドバー |
| 10% | アクセント（強調） | CTAボタン / リンク / アクティブ状態 |
セマンティックカラー体系:
| セマンティック名 | 用途 | 推奨HEX |
|---|---|---|
| Primary | CTA、リンク、選択状態 | #3B82F6 |
| Secondary | 二次アクション | #6366F1 |
| Success | 成功、完了 | #22C55E |
| Warning | 注意、警告 | #F59E0B |
| Error | エラー、破壊的アクション | #EF4444 |
| Info | 情報提供 | #06B6D4 |
| Neutral 50-950 | テキスト、ボーダー、背景 | #F9FAFB 〜 #030712 |
各カラーには明度スケール（50, 100, 200, ..., 800, 900, 950）を用意する。
コントラスト比（WCAG 2.1 AA）:
タイプスケール（Major Third 1.25倍を基本）:
| トークン名 | サイズ | 用途 |
|---|---|---|
| text-xs | 0.8rem (12.8px) | キャプション、注釈 |
| text-sm | 0.889rem (14.2px) | 補助テキスト、ラベル |
| text-base | 1rem (16px) | 本文テキスト |
| text-lg | 1.25rem (20px) | サブ見出し |
| text-xl | 1.563rem (25px) | セクション見出し |
| text-2xl | 1.953rem (31.25px) | ページ見出し |
| text-3xl | 2.441rem (39.06px) | ヒーロー見出し |
行間・字間:
line-height: 1.6, letter-spacing: 0.01emline-height: 1.15, letter-spacing: -0.02emline-height: 1.5, letter-spacing: 0.03em5階層で設計する:
| 階層 | 定義 | 具体例 |
|---|---|---|
| Atoms | 最小UI要素 | Button, Input, Icon, Badge, Label |
| Molecules | Atomsの組み合わせ | SearchBar, FormField, NavItem, MenuItem |
| Organisms | Moleculesの組み合わせ | Header, Sidebar, DataTable, CardList, Footer |
| Templates | ページ構造のワイヤーフレーム | DashboardLayout, AuthLayout, SettingsLayout |
| Pages | 実コンテンツを含む最終形 | DashboardPage, SettingsPage, LoginPage |
コンポーネント仕様の記述項目:
基本6状態:
| 状態 | 視覚表現 | 実装指針 |
|---|---|---|
| Idle | デフォルトの見た目 | 基本スタイル |
| Hover | 背景色変化、カーソル変更 | :hover 擬似クラス |
| Active/Pressed | 押し込み表現（scale, shadow変化） | :active 擬似クラス |
| Focused | アウトライン表示 | :focus-visible, outline: 3px solid #0066CC; outline-offset: 2px |
| Disabled | グレーアウト | opacity: 0.5, pointer-events: none |
| Loading | スピナー / スケルトン | アニメーション付き |
追加状態: Error（赤枠 + メッセージ）、Success（緑チェック）、Skeleton（プレースホルダ表示）
アニメーション指針:
ease-in-out（メイン）、ease-out（表示）、ease-in（非表示）モバイルファーストで設計する。ベースをモバイルとし、min-width で段階的にスタイルを追加する。
ブレークポイント:
| 名前 | min-width | 対象デバイス |
|---|---|---|
| base | 0px | モバイル（ポートレート） |
| sm | 640px | スマートフォン（ランドスケープ） |
| md | 768px | タブレット |
| lg | 1024px | デスクトップ |
| xl | 1280px | 大画面デスクトップ |
| 2xl | 1536px | ワイドスクリーン |
レスポンシブパターン:
WCAG 2.1 AAに準拠する。以下を確認する:
| カテゴリ | チェック項目 |
|---|---|
| コントラスト | テキスト 4.5:1以上、大テキスト 3:1以上、UI要素 3:1以上 |
| キーボード | 全機能がキーボード操作可能、フォーカス順序が論理的、フォーカスインジケーター 3:1以上 |
| セマンティクス | <nav>, <main>, <aside> 等のランドマーク使用、見出し階層が正しい |
| ARIA | 可視テキストがない要素に aria-label、補足説明に aria-describedby |
| フォーム | <label> と <input> の明示的関連付け、具体的なエラーメッセージ |
| 画像 | 意味のある画像に alt テキスト、装飾画像は alt="" |
| 動き | prefers-reduced-motion の尊重 |
デザイン完了時に以下を確認する。すべてYesであること。詳細は references/art-direction.md を参照。
| # | チェック項目 |
|---|---|
| 1 | ブランド/製品は最初の画面で誤認識不可能か？ |
| 2 | 強いビジュアルアンカーが1つ以上あるか？ |
| 3 | 見出しのスキャンのみでページの主張が理解できるか？ |
| 4 | 各セクションに1つの仕事しかないか？ |
| 5 | カードは本当に必要か？ |
| 6 | モーションは視覚的階層や雰囲気を向上させているか？ |
| 7 | 装飾シャドウをすべて削除してもプレミアムに見えるか？ |
依頼に応じて以下の形式で出力する。
ASCIIアートまたはHTML構造記述で画面構成を表現する。
例: ダッシュボード画面
┌─────────────────────────────────────────────┐
│ [Logo] Dashboard Search... [Avatar ▼] │
├───────┬─────────────────────────────────────┤
│ ≡ Nav │ Welcome, User │
│ │ │
│ Home │ ┌──────┐ ┌──────┐ ┌──────┐ │
│ Tasks │ │ KPI │ │ KPI │ │ KPI │ │
│ Users │ │ Card │ │ Card │ │ Card │ │
│ ... │ └──────┘ └──────┘ └──────┘ │
│ │ │
│ │ ┌────────────────────────────┐ │
│ │ │ Chart / Table │ │
│ │ │ │ │
│ │ └────────────────────────────┘ │
├───────┴─────────────────────────────────────┤
│ Footer │
└─────────────────────────────────────────────┘
各コンポーネントを以下のフォーマットで記述する:
### ComponentName
**説明**: 1文の説明
**Props**:
| Prop | 型 | デフォルト | 必須 | 説明 |
|------|----|-----------|------|------|
| variant | 'primary' \| 'secondary' \| 'ghost' | 'primary' | No | ボタンの見た目 |
| size | 'sm' \| 'md' \| 'lg' | 'md' | No | サイズ |
| disabled | boolean | false | No | 無効状態 |
| loading | boolean | false | No | ローディング状態 |
**状態**: Idle / Hover / Active / Focused / Disabled / Loading
**使用例**:
- プライマリCTA: `<Button variant="primary" size="lg">送信</Button>`
- 二次アクション: `<Button variant="secondary">キャンセル</Button>`
## カラーパレット
### プライマリ
| スケール | HEX | 用途 |
|----------|-----|------|
| 50 | #EFF6FF | 背景ハイライト |
| 100 | #DBEAFE | ホバー背景 |
| 500 | #3B82F6 | メインカラー |
| 700 | #1D4ED8 | ホバー状態 |
| 900 | #1E3A8A | テキストアクセント |
（Success, Warning, Error, Neutral も同様に定義）
:root {
--font-family-sans: 'Inter', system-ui, sans-serif;
--font-family-mono: 'JetBrains Mono', monospace;
--text-xs: 0.8rem;
--text-sm: 0.889rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--leading-tight: 1.15;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
}
各インタラクションを以下で記述する:
### [コンポーネント名] のインタラクション
| トリガー | アクション | フィードバック | デュレーション |
|----------|-----------|---------------|---------------|
| クリック | 送信処理開始 | ボタンがloading状態に | 即時 |
| 送信完了 | 成功通知表示 | トースト表示 + ボタンsuccess状態 | 200ms |
| エラー | エラー通知表示 | トースト + ボタンidle復帰 | 200ms |
| スキル | 連携タイミング |
|---|---|
| design-system-builder | デザインシステム全体の構築・運用が必要な場合。本スキルはDS成果物（原則・トークン・コンポーネント仕様）を入力として個別画面を設計する |
| app-idea-workshop | アイデア段階からの場合、先にワークショップでアイデアを具体化する |
| spec-gen | デザイン完了後、実装仕様書を生成する |
| architecture-reviewer | デザインシステムのアーキテクチャをレビューする |
| critical-code-review | デザイン実装後のコードレビュー |
npx claudepluginhub caphtech/claude-marketplace --plugin design-pluginGenerates distinctive, production-grade frontend code for web components, pages, and apps with bold, creative UX designs in styles like brutalist or retro-futuristic, avoiding generic AI aesthetics.
Guides visual direction, interface hierarchy, layout, typography, color, and prototyping for Web and mini program UIs before implementation.
Creates production-grade frontend interfaces emphasizing product design, UX discipline, and visual polish for web components, pages, or applications.