9ステップワークフロー全体像
create-design スキルは、プロジェクト要件から DESIGN.md を生成するまでを 9つのステップ で進行します。各ステップはClaudeとの対話で完結し、特別なツールのインストールは不要です。
ワークフロー図
mermaid
flowchart TD
A["Step 1: ヒアリング"] --> B["Step 2: テンプレート選択"]
B --> C["Step 3: カラーパレット定義"]
C --> D["Step 4: タイポグラフィ設計"]
D --> E["Step 5: コンポーネント定義"]
E --> F["Step 6: レイアウト・レスポンシブ"]
F --> G["Step 7: DESIGN.md 生成"]
G --> H["Step 8: Stitch 投入ガイド"]
H --> I["Step 9: レビュー・反復"]
style A fill:#7C3AED,color:#fff
style G fill:#10B981,color:#fff
style I fill:#F59E0B,color:#000各ステップ概要
| Step | 内容 | ツール | 出力 |
|---|---|---|---|
| 1 | ヒアリング | Claude | プロジェクト要件の明確化（種別・ブランド・ムード・ターゲット） |
| 2 | テンプレート選択 | Claude | ベースプリセット決定（DARK_THEME / GAMING_APP / カスタム） |
| 3 | カラーパレット定義 | Claude | セマンティックトークン一覧（背景・テキスト・アクセント・ボーダー） |
| 4 | タイポグラフィ設計 | Claude / Web検索 | フォント階層表（ファミリー・サイズ・ウェイト・行間） |
| 5 | コンポーネント定義 | Claude | 状態別スタイル仕様（ボタン・カード・入力・ナビ等） |
| 6 | レイアウト・レスポンシブ | Claude | スペーシングスケール・ブレークポイント・グリッド設計 |
| 7 | DESIGN.md 生成 | Claude | 9セクション構成の完成ファイル |
| 8 | Stitch 投入ガイド | Claude | Google Stitch / Claude / Cursor への投入手順・プロンプト例 |
| 9 | レビュー・反復 | Claude | ユーザーフィードバック反映・改善版 |
所要時間の目安
| パターン | 所要時間 | 説明 |
|---|---|---|
| 新規プロジェクト | 15-30分 | ヒアリングから生成まで全ステップを実行 |
| 既存プロンプト変換 | 10-15分 | 既存のデザイン指示書を DESIGN.md 形式に変換 |
| ブランドガイドライン基準 | 10-20分 | 既存ブランド仕様をベースに DESIGN.md を生成 |
時短のコツ
Step 1 のヒアリングで要件を具体的に伝えるほど、後続ステップが高速化します。ブランドカラー・参考サービス・モード（ダーク/ライト）を最初に明示しましょう。
入力パターン
パターン A: 新規作成
ゼロからデザインシステムを構築するケース。Step 1 のヒアリングからスタートします。
「次のプロジェクトの DESIGN.md を生成してください:
- SaaSダッシュボード
- ダークモードメイン
- ブランドカラー: #7C3AED
- 参考: Linear」パターン B: 既存プロンプト変換
既に自由記述のデザイン指示書がある場合、9セクション構成の DESIGN.md に変換します。
「この既存のデザインプロンプトを DESIGN.md 形式に変換してください:
[既存ファイルのパス]」パターン C: ブランドガイドライン基準
企業のブランドガイドラインをベースに DESIGN.md を生成します。
「以下のブランドガイドラインに基づいて DESIGN.md を生成してください:
- ブランドカラー: #1E40AF（メイン）、#F59E0B（アクセント）
- フォント: Noto Sans JP
- トーン: プロフェッショナル、信頼感」DESIGN.md の9セクション構成
生成される DESIGN.md は以下の9セクションで構成されます。
| # | セクション名 | 内容 |
|---|---|---|
| 1 | Visual Theme & Atmosphere | デザイン哲学・視覚的印象・参照デザインシステム |
| 2 | Color Palette & Roles | 背景・テキスト・アクセント・セマンティック・ボーダーの全色定義 |
| 3 | Typography Rules | フォントファミリー・サイズ階層・ウェイトルール |
| 4 | Component Stylings | ボタン・カード・入力・ナビ等の状態別仕様 |
| 5 | Layout Principles | スペーシングスケール・グリッド・余白の哲学 |
| 6 | Depth & Elevation | シャドウシステム・深度表現の方針 |
| 7 | Do's and Don'ts | デザインルールの明文化（やること・やらないこと） |
| 8 | Responsive Behavior | ブレークポイント・折りたたみ戦略・パフォーマンス制約 |
| 9 | Agent Prompt Guide | AIエージェント向けのクイックリファレンス・プロンプト例 |
なぜ9セクション構成か
Google Stitch が提唱したこのフォーマットは、LLMが最も効率的に読み取れる構造です。Markdownで記述されたセマンティックトークンと視覚ガイドラインにより、AIコーディングエージェントがデザイン意図を正確に解釈できます。
次のステップ
各ステップの詳細な手順・プロンプト例・ベストプラクティスについては ステップ別詳細ガイド を参照してください。