利用例一覧
create-design スキルを使って DESIGN.md を生成した実例を紹介します。プロジェクトの種類ごとに、入力要件・選択テンプレート・生成結果の抜粋を掲載しています。
一覧
| プロジェクト | 種別 | テーマ | テンプレート | 詳細 |
|---|---|---|---|---|
| MTGDeckTool | カードゲーム管理アプリ | ダーク + ゲーミング | DARK_THEME + GAMING_APP ハイブリッド | 詳細ページ |
| SaaSダッシュボード | 管理画面 | ダーク | DARK_THEME | 本ページ内 |
| ECサイト | 商品一覧 | ライト | DESIGN_TEMPLATE（カスタム） | 本ページ内 |
| ポートフォリオ | 個人サイト | カスタム | DESIGN_TEMPLATE（カスタム） | 本ページ内 |
MTGDeckTool
カードゲーム管理アプリ向けの最も詳細な事例です。ダークモードネイティブ + MTG 5色の統合 + 6画面構成という複雑な要件をカバーしています。
TIP
完全な解説は MTGDeckTool 詳細ページ を参照してください。
SaaSダッシュボード
入力（要件）
プロジェクト: プロジェクト管理ツール（Jira/Linear風）
モード: ダークモード
ブランドカラー: #3B82F6（ブルー）
ターゲット: 開発者・PMチーム
データ密度: 高（かんばんボード・テーブル・チャート）
参考: Linear選択テンプレート
DARK_THEME.md をそのままベースに使用。Linear のミニマリストダークUIと相性が良いため、大幅なカスタマイズなしで適用可能。
生成される DESIGN.md 抜粋
Color Palette（抜粋）
markdown
### Background Surfaces
| Token | Value | Role |
|-------|-------|------|
| bg-deepest | #080808 | 入力フィールド内部 |
| bg-base | #0F0F0F | メインページ背景 |
| bg-panel | #141414 | サイドバー・パネル |
| bg-surface | #1C1C1C | カード・ドロップダウン |
| bg-hover | rgba(255,255,255,0.04) | ホバー状態 |
### Brand & Accent
| Token | Value | Role |
|-------|-------|------|
| accent-primary | #3B82F6 | メインCTA・アクティブタブ |
| accent-hover | #60A5FA | ホバー状態 |
| accent-active | #2563EB | アクティブ状態 |
| accent-muted | rgba(59,130,246,0.15) | 背景使用（選択状態） |Do's and Don'ts（抜粋）
markdown
### Do
- かんばんカラムの背景は bg-panel で統一
- ステータスバッジはセマンティックカラーで色分け
- テーブルヘッダーは text-muted + weight 510
### Don't
- カラム間に明示的なボーダーを引かない（輝度差で表現）
- 3色以上のステータスカラーを同一行に表示しないECサイト
入力（要件）
プロジェクト: アパレルECサイト
モード: ライトモード
ブランドカラー: #1E293B（ダークネイビー）+ #F59E0B（アクセント）
ターゲット: 20-30代女性
データ密度: 中（商品グリッド・フィルター）
参考: Shopify のストアフロント選択テンプレート
DESIGN_TEMPLATE.md（カスタム）を使用。ライトモードのベースプリセットは用意されていないため、空テンプレートからライトモード用のカラーパレットを構築。
生成される DESIGN.md 抜粋
Color Palette（抜粋）
markdown
### Background Surfaces
| Token | Value | Role |
|-------|-------|------|
| bg-base | #FFFFFF | メインページ背景 |
| bg-subtle | #F8FAFC | セクション背景・交互行 |
| bg-panel | #F1F5F9 | サイドバー・フィルターパネル |
| bg-surface | #FFFFFF | 商品カード・浮上面 |
| bg-hover | rgba(0,0,0,0.02) | ホバー状態 |
### Brand & Accent
| Token | Value | Role |
|-------|-------|------|
| accent-primary | #1E293B | ヘッダー・CTA・テキスト強調 |
| accent-secondary | #F59E0B | セール・注目商品・バッジ |
| accent-hover | #334155 | プライマリのホバー |
| accent-secondary-hover | #D97706 | セカンダリのホバー |
### Text & Content
| Token | Value | Role |
|-------|-------|------|
| text-primary | #0F172A | 商品名・見出し |
| text-secondary | #475569 | 説明文・本文 |
| text-muted | #94A3B8 | 補助テキスト |
| text-price | #0F172A | 価格表示（tnum有効） |
| text-sale | #DC2626 | セール価格 |ライトモードのポイント
ライトモードでは影（box-shadow）が深度表現の主役になります。ダークモードの「輝度ステップ」アプローチとは異なり、微妙なシャドウの段階で階層を表現します。
ポートフォリオ
入力（要件）
プロジェクト: エンジニア個人ポートフォリオ
モード: ダーク/ライト両対応
ブランドカラー: #10B981（エメラルドグリーン）
ターゲット: 採用担当者・エンジニア仲間
データ密度: 低（テキスト・画像中心）
参考: Vercel のドキュメントサイト選択テンプレート
DESIGN_TEMPLATE.md（カスタム）を使用。ダーク/ライト両対応のため、両モードのカラートークンを定義する必要がある。
生成される DESIGN.md 抜粋
Color Palette（抜粋）
markdown
### Background Surfaces
| Token | Dark Value | Light Value | Role |
|-------|-----------|-------------|------|
| bg-base | #0A0A0A | #FFFFFF | メインページ背景 |
| bg-surface | #171717 | #F5F5F5 | カード・セクション |
| bg-panel | #1A1A1A | #FAFAFA | ナビゲーション |
| bg-hover | rgba(255,255,255,0.05) | rgba(0,0,0,0.03) | ホバー状態 |
### Brand & Accent
| Token | Value | Role |
|-------|-------|------|
| accent-primary | #10B981 | リンク・CTA・スキルバッジ |
| accent-hover | #34D399 | ホバー状態 |
| accent-muted | rgba(16,185,129,0.15) | 背景使用 |両対応のコツ
ダーク/ライト両対応の場合、Background と Text のトークンは2つの値を持ちます。Brand & Accent やSemantic カラーは通常どちらのモードでも同じ値を使用できます。CSS変数（var(--bg-base)）での実装を前提とした設計にすると、実装時のモード切り替えが容易になります。
次のステップ
- MTGDeckTool 詳細ページ で最も複雑な事例の完全解説を確認
- ワークフロー詳細ガイド で各ステップの具体的な進め方を確認