テンプレート一覧・選び方
create-design スキルは、Google Stitch 対応の DESIGN.md を効率的に作成するためのテンプレートを提供します。プロジェクトの特性に合ったテンプレートを選ぶことで、デザイン仕様の策定時間を大幅に短縮できます。
テンプレートとは
テンプレートは、DESIGN.md の雛形です。カラーパレット、タイポグラフィ、コンポーネントスタイル、レイアウト原則など、Stitch がデザインを生成するために必要な全9セクションがあらかじめ構造化されています。
各テンプレートは以下の構造を持ちます:
- Visual Theme & Atmosphere -- デザイン哲学・雰囲気
- Color Palette & Roles -- セマンティックカラートークン
- Typography Rules -- フォント・サイズ階層
- Component Stylings -- ボタン・カード・入力欄等
- Layout Principles -- スペーシング・グリッド
- Depth & Elevation -- 影・深度表現
- Do's and Don'ts -- デザインガードレール
- Responsive Behavior -- ブレークポイント・折りたたみ戦略
- Agent Prompt Guide -- AI向けクイックリファレンス
テンプレート一覧
| テンプレート | 用途 | ベースデザイン | 詳細 |
|---|---|---|---|
DESIGN_TEMPLATE.md | 空テンプレート（全プロジェクト対応） | なし（プレースホルダー） | カスタム作成ガイド |
DARK_THEME.md | ダークモードネイティブアプリ | Linear / Supabase | ダークテーマ解説 |
GAMING_APP.md | ゲーミング・エンタメアプリ | Sentry / Spotify | ゲーミングアプリ解説 |
選び方フローチャート
プロジェクトの特性に応じて、以下の基準で選択してください。
プロジェクトの種類は?
│
├── ダークモードがメイン
│ ├── SaaS / 開発者ツール / ダッシュボード
│ │ └── → DARK_THEME.md
│ ├── ゲーム / エンタメ / メディア
│ │ └── → GAMING_APP.md
│ └── その他のダークモード
│ └── → DESIGN_TEMPLATE.md をベースにカスタム
│
├── ライトモードがメイン
│ └── → DESIGN_TEMPLATE.md をベースにカスタム
│
└── 既存デザインシステムがある
└── → DESIGN_TEMPLATE.md に既存の値を移植迷ったら
まずは DARK_THEME.md か GAMING_APP.md を試してください。プリセットの値を上書きする方が、ゼロから書くより速いです。
判断基準の詳細
| 条件 | 推奨テンプレート | 理由 |
|---|---|---|
| 情報密度が高く、精密さが重要 | DARK_THEME | Linear風の輝度ステップ設計が最適 |
| ビジュアルインパクトが重要 | GAMING_APP | グロウ・フロステッドガラス等のエフェクトが充実 |
| ブランドカラーが既に決まっている | DESIGN_TEMPLATE | プレースホルダーから自由に構築 |
| ライトモードが必要 | DESIGN_TEMPLATE | ダーク系プリセットは暗色前提のため |
テンプレートの使い方
1. テンプレートのコピー
bash
# プリセットを使う場合
cp templates/DARK_THEME.md ./DESIGN.md
# 空テンプレートを使う場合
cp templates/DESIGN_TEMPLATE.md ./DESIGN.md2. ブランドカラーの差し替え
各プリセットの accent-primary をプロジェクトのブランドカラーに変更します。
md
<!-- 変更前（DARK_THEME のデフォルト） -->
| accent-primary | #5e6ad2 | メインCTA・アクティブ状態・リンク |
<!-- 変更後（プロジェクトのブランドカラー） -->
| accent-primary | #7C3AED | メインCTA・アクティブ状態・リンク |3. プロジェクト固有セクションの追加
- ゲーム固有色（マナカラー等）
- プロジェクト固有のコンポーネント
- Do's and Don'ts にプロジェクト固有の制約を追記
4. Stitch への投入
この DESIGN.md に従って [画面名] を作成してくださいテンプレートはあくまで出発点
テンプレートの値をそのまま使うのではなく、必ずプロジェクトに合わせてカスタマイズしてください。特にカラーパレットとタイポグラフィはブランドアイデンティティに直結します。
次のステップ
- ダークテーマプリセット -- 各トークンの詳細解説
- ゲーミングアプリプリセット -- エフェクトとカラーの詳細解説
- カスタムテンプレート作成ガイド -- ゼロからの作成手順