design-flow

このスキルは、各スキルを順番に実行することで、デザイナーの全体的なワークフローをオーケストレーションします。あなたは各フェーズをデザイナーに案内するガイドです。急ぐことなく、各フェーズを完了して確認してから次に進んでください。

使用例

• 「フルデザインフローを実行してください」
• 「新しいプロジェクトの完全なプロセスをガイドしてください」
• 「ゼロから始めて、すべてを案内してください」
• 「ダッシュボードアプリのデザインフロー」

シーケンス

1. Grill Me          → 考えを明確にする
2. Design Brief      → 意図を文書化する
3. Info Architecture  → 構造を定義する
4. Design Tokens     → ビジュアルシステムを確立する
5. Brief to Tasks    → ビルドを計画する
6. Frontend Design   → ビルドする
—
7. Design Review     → 準備ができたら個別に実行する

ルール

1. 開始時に、デザイナーに全体のシーケンス（フェーズ 1-6、レビューは別途利用可能）を説明し、スキップしたいフェーズがあるか尋ねます。一般的なスキップパターン：

   • すでに明確なアイデアがある → grill-me をスキップ
   • 単一コンポーネント、フルページではない → information-architecture をスキップ
   • トークンがある既存プロジェクト → design-tokens をスキップ

2. 各フェーズの前に、どのフェーズに入るのか、何が生成されるのかを発表します。例：「フェーズ 2: Design Brief。プロジェクトについてインタビューして DESIGN_BRIEF.md ファイルを生成します。準備できていますか？」

3. 各フェーズ中に、対応する SKILL.md ファイルを読んで、その完全な指示に従います。スキルを要約したり省略したりしないでください。適切に実行してください。

4. 各フェーズの後に、生成されたもの（ファイル名、主要な決定事項、未解決の質問）を要約し、「次のフェーズに進む準備はできていますか？」と尋ねます。確認を待ちます。

5. フェーズ間で、前のフェーズからの出力が次のフェーズについて何か変わったかを確認します。たとえば、ブリーフで哲学が名前付けされている場合、トークンフェーズでそれが使用されることを言及します。

6. デザイナーは任意の時点で停止できます。 「今のところはこれで十分」と言った場合、シーケンス内での現在位置と、戻ってきたときの次のフェーズが何かを要約します。

フェーズの詳細

フェーズ 1: Grill Me

grill-me スキル (grill-me/SKILL.md) を読んで、その指示に従います。 生成物: プロジェクトの共有理解。ファイル出力なし。 遷移: 「主要な決定事項が解決しました。これをデザインブリーフとして記録する準備はできていますか？」

フェーズ 2: Design Brief

design-brief スキル (design-brief/SKILL.md) を読んで、その指示に従います。 生成物: .design/<feature-slug>/DESIGN_BRIEF.md。 遷移: 「ブリーフが保存されました。次は情報アーキテクチャで、ページ構造とナビゲーションを定義します。単一コンポーネントを構築している場合はこれをスキップしてください。続けますか？」

フェーズ 3: Information Architecture

information-architecture スキル (information-architecture/SKILL.md) を読んで、その指示に従います。 生成物: .design/<feature-slug>/INFORMATION_ARCHITECTURE.md。 遷移: 「IA が定義されました。次は、ブリーフの哲学に基づいてデザイントークン（色、スペース、タイポグラフィ）を生成します。続けますか？」

フェーズ 4: Design Tokens

design-tokens スキル (design-tokens/SKILL.md) を読んで、その指示に従います。 生成物: トークンファイル（スタックに応じて CSS 変数、Tailwind 設定、またはテーマファイル）。 遷移: 「トークンが設定されました。次は、ブリーフをタスクリストに分割して、順序立ててビルドできるようにします。続けますか？」

フェーズ 5: Brief to Tasks

brief-to-tasks スキル (brief-to-tasks/SKILL.md) を読んで、その指示に従います。 生成物: .design/<feature-slug>/TASKS.md。 遷移: 「タスクの準備ができました。これからビルドします。リストの最初のタスクから始めます。続けますか？」

フェーズ 6: Frontend Design

frontend-design スキル (frontend-design/SKILL.md) を読んで、その指示に従います。 TASKS.md のタスクを順番に進めます。各タスクを完了したら、チェックを入れてデザイナーに確認してから次のタスクに進みます。 生成物: ビルトコンポーネントとページ。 遷移: 「フローが完了しました。ブリーフ、IA、トークン、タスクはすべてプロジェクトの .design/ フォルダに保存されています。デザインレビューの準備ができたら /design-review を実行し、ビルドをブリーフに照らして批評します。」

フローはここで終了します。 フェーズ 7 は自動実行されません。

フェーズ 7: Design Review（リクエスト時のみ）

このフェーズは自動実行されません。以下の場合にのみ実行されます：

• デザイナーがフロー中に明確にレビューを要求する
• デザイナーがビルド後に /design-review を個別に実行する

レビューには検査するビルトコードが必要です。コンポーネントやページがまだ構築されていない場合、このフェーズを実行しないでください。代わりに、デザイナーに次を思い出させます：「何かがビルトされたら /design-review を実行してください。出力をブリーフに照らしてチェックします。」

トリガーされたら、design-review スキル (design-review/SKILL.md) を読んで、その指示に従います。レビューは、Playwright MCP（推奨）、Cursor IDE ブラウザ（フォールバック）、またはブラウザツールが利用できない場合はユーザーに手動で提供してもらうことを使用して、実行中のアプリケーションのスクリーンショットをキャプチャします。

生成物: .design/<feature-slug>/DESIGN_REVIEW.md + .design/<feature-slug>/screenshots/ に保存されたスクリーンショット。 遷移: 「レビューが完了しました。スクリーンショットは .design/<feature-slug>/screenshots/ に保存されています。修正が必須の項目がある場合、今すぐ対応できます。」

プロジェクトファイル構造

すべてのデザインフロー成果物は .design/<feature-slug>/ に保存されます。<feature-slug> は、設計中の機能から派生した、短い、小文字、ハイフン区切りの名前です。これにより、複数の機能を独立して設計でき、互いに上書きされません。

.design/
└── <feature-slug>/
    ├── DESIGN_BRIEF.md              ← フェーズ 2: プロジェクトの意図、目標、美的方向性
    ├── INFORMATION_ARCHITECTURE.md  ← フェーズ 3: ナビゲーション、ページ構造、ユーザーフロー
    ├── DESIGN_TOKENS.*              ← フェーズ 4: 色、スペース、タイポグラフィ、シャドウ (CSS/Tailwind/theme)
    ├── TASKS.md                     ← フェーズ 5: ブリーフから順序立てたビルドチェックリスト
    ├── DESIGN_REVIEW.md             ← フェーズ 7: ブリーフに対する優先順位付き批評
    └── screenshots/                 ← フェーズ 7: 実行中アプリからの視覚的証拠
        ├── review-[page]-desktop-1280.png
        ├── review-[page]-tablet-768.png
        ├── review-[page]-mobile-375.png
        ├── review-[page]-dark-mode-*.png
        └── review-[component]-[state].png

screenshots/ サブフォルダはデザインレビューフェーズ中に作成されます。レビューのすべての視覚的証拠（レスポンシブブレークポイント、インタラクティブ状態、ダークモード）は、DESIGN_REVIEW.md の検出結果が追跡可能なように、説明的なファイル名で保存されます。

デザイナーがフロー途中で戻る場合

.design/ フォルダで既存の機能サブフォルダをチェックします。機能フォルダ内に前のフェーズのファイル（DESIGN_BRIEF.md、INFORMATION_ARCHITECTURE.md、TASKS.md）が存在する場合、それらを読んで、デザイナーがどこで止まったかを理解します。複数のフォルダが存在する場合、どの機能を再開するか尋ねます。次の未完了フェーズから再開します。