design-builder

Design Builder

あらゆるデジタル製品に対応する、ゼロからのデザインパイプラインです。要件を把握し、コンテンツを抽出し、DESIGN.md を作成して、レイアウトや画面遷移を定義し、プレビューして改善します。

ワークフロー

discovery --> copy --> inputs --> structure --> preview --> assets --> final
                                                  ^__|  (tune / comment / apply-across loop)

各ステップは独立しています。単独で実行することも、連続して実行することもできます（すべての操作の前に discovery.md が読み込まれます）。アセットは任意です。プレビューの承認後に自動で呼び出すか、直接実行できます。design-builder はゼロからの作成を優先します。inputs.md 内でコードベースのパスを指定するのは、再設計や移行のための代替手段であり、基本のワークフローではありません。最終的なデザインは HTML として提供するか、対応する MCP が利用可能な場合は外部デザインツールに送信するか、実装フェーズに引き渡すことができます。

トリガー

• コピーの抽出（「コピーを抽出」「URL からコピー」「Web キャプチャ」「Web サイトからコンテンツを取得」「ブリーフ文書」）→ copy.md
• ビジュアルアイデンティティ（DESIGN.md の作成）（「デザイントークンを抽出」「DESIGN.md を作成」「デザイントークンを更新」「画像／コードベース／デザインツールからデザインを抽出」）→ inputs.md
• レイアウト／画面遷移（「ワイヤーフレームを作成」「ページをレイアウト」「コンテンツを構成」「画面遷移」「このワイヤーフレームを検証」）→ structure.md
• プレビュー／バリエーション（「デザインをプレビュー」「ビジュアルモックアップ」「デザインを調整」「クリエイティブなバリエーション」「デザインの方向性を変える」「複数のバリエーションに適用」「デザインツールに送信」）→ preview.md
• 検証（「DESIGN.md を検証」「DESIGN.md を確認」「デザイントークンを監査」「デザインシステムを lint」）→ validate.md
• 再設計（「このアプリを再設計」「このインターフェースを刷新」「ブランドを刷新」「雰囲気を変える」）→ redesign.md
• アセット生成（「ヒーローバナーを生成」「製品画像を作成」「OG カードを生成」「画像プロンプト」）→ assets.md

discovery.md はすべての操作の前に自動で読み込まれます。省略しないでください。

aesthetics.md と web-standards.md は preview.md によって自動で読み込まれます。

validate.md は直接呼び出せるほか、完了を宣言する前のゲートとして、inputs.md のステップ 5 からも自動で読み込まれます。

assets.md は直接呼び出せるほか、バリエーションの承認後に preview.md から任意のサブフェーズとして自動で呼び出されます。

ガイドライン

• ユーザーからコンテキストを集めるときは、一度に一つの質問をしてください
• .agents/design/DESIGN.md をビジュアルアイデンティティの信頼できる情報源として扱ってください
• 各フェーズで他のフェーズの作業が保持されるよう、DESIGN.md はセクションごとに変更してください
• プリセットと判断項目は、プロジェクトの種類（landing-page、website、web-app、mobile-app）に応じて振り分けてください
• プレビューを実行するたびに aesthetics.md と web-standards.md を自動で読み込んでください
• 外部デザインツールのファイルはユーザーが所有するものとして扱ってください。ユーザーから依頼があり、対応する MCP が利用可能な場合にのみ読み込みや送信を行ってください

アンチパターン：セクション編集時にファイル全体を書き換える

## Layout または ## Components だけが変更されたときに DESIGN.md 全体を書き換えると、他のフェーズが担当するセクションまで上書きしてしまいます。セクションごとに変更してください。inputs.md はフロントマターと大部分の文章を、structure.md は ## Layout と ## Screen Flow を、copy.md はコンテンツのペイロード（copy.yaml 内）を担当します。

アンチパターン：外部ツールのファイルを作成する

外部デザインツール（Pencil、Paper、Figma）のファイルはユーザーが所有するものです。このスキルがファイルを作成することはありません。ファイルがすでに存在し、対応する MCP が利用可能な場合は取り込み、ユーザーから明示的な依頼があった場合は送信します。他人のツールにファイルを作成すると、ユーザーを困惑させ、名前の衝突を招くおそれがあります。

アンチパターン：要件把握を省略する

ユーザーから画像、ブリーフ、コードベースが渡された場合でも、すべての操作の前に要件を把握します。これを省略すると、スキルが誤った経路に振り分けてしまいます。たとえば、モバイルアプリにランディングページのプリセットを適用したり、ユーザーがそのままにしておきたいコードベースからトークンを抽出したりします。要件把握にかかる 30 秒で、ワークフロー全体をやり直す手間を省けます。