ui-mockup

反復的なデザインと実装の足場作りを通じて、オーディオプラグイン用の WebView UI モックアップを作成します。

<quick_start>

1. 美的デザインのライブラリを確認します（フェーズ 0）
2. 段階的な質問を通じて要件を収集します（フェーズ 1～3）
3. モックアップ生成のために ui-design-agent を呼び出します
4. ユーザーが承認するまで反復します
5. 実装ファイルを生成します </quick_start>

迅速な反復のためにデザインファイルを 2 つ生成します - `v[N]-ui.yaml` - 機械可読なデザイン仕様 - `v[N]-ui-test.html` - ブラウザーでテスト可能なモックアップ フェーズ 5.5 の決定メニューでユーザーがデザインを承認するまで、フェーズ B に進んではいけません フェーズ A の承認後に限り、実装ファイルを 5 つ生成します - `v[N]-ui.html` - 本番用 HTML - `v[N]-PluginEditor.h` - C++ ヘッダーのボイラープレート - `v[N]-PluginEditor.cpp` - C++ 実装のボイラープレート - `v[N]-CMakeLists.txt` - WebView ビルド設定 - `v[N]-integration-checklist.md` - 実装手順 plugins/[PluginName]/.ideas/mockups/

<context_detection> <standalone_mode>

• .continue-here.md ファイルが存在しません
• 独立してモックアップを生成します
• 状態の更新をスキップします </standalone_mode>

<workflow_mode>

• current_stage フィールドを含む plugins/[PluginName]/.continue-here.md ファイルが存在します
• 各フェーズの後にワークフローの状態を更新します </workflow_mode>

.continue-here.md の有無を確認してモードを判定します。ファイルが存在する場合は状態ファイルを更新します。存在しない場合は状態の更新をスキップします。 </context_detection>

`.claude/aesthetics/manifest.json` が存在するか確認します。見つかった場合は jq を使って美的デザインの数を数えます。 ライブラリに保存済みの美的デザインが {N} 件あります。

UI デザインをどのように始めますか？

1. 美的デザインのテンプレートから始める - 保存済みのビジュアルシステムを適用する
2. 最初から始める - カスタムデザインを作成する
3. 美的デザインをすべて一覧表示する - 決定する前にライブラリを確認する

選択してください（1～3）： _

- オプション 1：メタデータ（名前、雰囲気、色、ソース）とともに、manifest の美的デザインを表示します。「apply」操作で ui-template-library スキルを呼び出します。生成したモックアップでフェーズ 4 に進みます。 - オプション 2：フェーズ 1（コンテキストの読み込み）に進みます。 - オプション 3：「list」操作で ui-template-library スキルを呼び出し、プレビューを表示してメニューに戻ります。 - 美的デザインがない場合：フェーズ 1 に直接進みます。

完全な統合方法については、references/aesthetic-integration.md を参照してください。

クリエイティブブリーフからコンテキストを読み込み、要件を抽出します。 抽出手順については、`references/phase-details.md` を参照してください。 例については、`references/context-extraction.md#example-extracting-from-creative-brief` を参照してください。 クリエイティブブリーフの内容（UI 詳細が豊富、最小限、または皆無）に応じて、初期プロンプトを調整します。 プロンプトのテンプレートについては、`references/phase-details.md` を参照してください。 Tier 1（必須）、Tier 2（ビジュアル）、Tier 3（仕上げ）の要件における不足を分析します。 各 Tier の定義については、`references/phase-details.md` を参照してください。 質問のテンプレートについては、`references/design-questions.md` を参照してください。 ユーザーに尋ねる前に、推奨するウィンドウサイズを計算します。 計算手順については、`references/phase-details.md` を参照してください。 計算式については、`references/layout-validation.md` のセクション 2 を参照してください。 特定した不足に基づいて、AskUserQuestion を使用し、質問をちょうど 4 つ作成します。 ルールと質問の形式については、`references/phase-details.md` を参照してください。 テンプレートについては、`references/design-questions.md#example-question-batches` を参照してください。 AskUserQuestion を使用して決定ゲートを提示し、確定するか、質問を追加するか、コンテキストを追加するかを尋ねます。 フェーズ 4、フェーズ 2、または自由記述の収集に進みます。 メニューの形式と振り分けについては、`references/phase-details.md` を参照してください。 Task ツール経由で ui-design-agent を呼び出し、YAML とテスト用 HTML を生成します。

呼び出しプロンプトに以下を含めます：

• 収集したすべての要件（レイアウト、コントロール、色など）
• 品質への期待：「商用の50～200ドルのオーディオプラグインのようなデザインにすること。意図的に設計し、デフォルトのままにしないこと」

呼び出しの概要については references/phase-details.md を参照してください。 プロトコルの全文については references/delegation-protocols.md を参照してください。

重要：フェーズ6～10を実行するのは、ユーザーがオプション2（確定）を選択した場合のみです モックアップ v[N] のデザインを作成しました（2ファイル）

生成されたファイル：

• v[N]-ui.yaml（デザイン仕様）
• v[N]-ui-test.html（ブラウザーでテスト可能なモックアップ）

次に何をしますか？

1. 反復する - デザインを調整し、レイアウトを変更する
2. 確定する - 配置を検証し、モックアップを完成させる
3. テンプレートとして保存する - 再利用できるよう、デザインライブラリに追加する
4. その他

選択してください（1～4）：_

- オプション1（反復する）：調整内容を収集し、新しいバージョン（v2、v3 など）でフェーズ2に戻り、新しい ui-design-agent インスタンス（新しいコンテキスト）を呼び出します。 - オプション2（確定する）：フェーズ5.6（ブリーフの自動更新）に進みます。UI セクションの正本となるのはモックアップです。ユーザーの操作は不要です。ブリーフの同期後、フェーズ6～10に進みます。 - オプション3（テンプレートとして保存する）：ui-template-library スキルを「save」操作で呼び出し、保存後にフェーズ5.5のメニューに戻ります。 - オプション4（その他）：カスタムリクエストに対応します（ブラウザーでのテスト、制約の検証など）。

<iteration_guidance> オプション1（反復する）のフィードバックを収集する場合：

ユーザーが具体的な変更を提示した場合（「縦型にして」「メーターを追加して」「色を青に変更して」など）：

• これらを明示的な要件として新しい ui-design-agent インスタンスに渡します

ユーザーが曖昧な改善リクエストを提示した場合（「もっと良くして」「改善して」「洗練させて」など）：

• 詳細を尋ねます：「どの点を重点的に改善しますか？（レイアウト、色、間隔、コントロール）」
• ユーザーが「すべて」または「全体的な品質」と答えた場合、新しい要素を追加するのではなく、既存の要素（間隔、色の調和、コントロールのスタイル）を調整するよう指示を渡します </iteration_guidance>

詳細なルーティングについては references/decision-menus.md#phase-5-5-design-decision-menu を参照してください。

確定したモックアップに基づいて、クリエイティブブリーフを自動更新します。 フェーズ5.5で「確定する」が選択されると実行されます。 ユーザーの操作は不要です。 プロトコルについては `references/phase-details.md` を参照してください。 - ユーザーがフェーズ5.5でデザインを確定している（オプション2「確定する」を選択） - フェーズAのファイル（`v[N]-ui.yaml`、`v[N]-ui-test.html`）が存在する - YAML に確定マーカーがある

ガードの実装については references/phase-b-enforcement.md を参照してください。

Task ツール経由で ui-finalization-agent を呼び出し、実装ファイルを5つ生成します。 呼び出しの概要については `references/phase-details.md` を参照してください。 プロトコルの全文については `references/delegation-protocols.md` を参照してください。 ui-finalization-agent が正常に完了した後、完了メニューを表示します。 形式とルーティングについては `references/decision-menus.md#completion-menu` を参照してください。

<orchestration_protocol> <delegation_rules> このスキルがモックアップファイルを直接生成することはありません。すべてのファイル生成はサブエージェントに委任されます。

1. オーケストレーター：要件を収集します（フェーズ0～3.5） 2. オーケストレーター：Task ツール経由で ui-design-agent を呼び出します 3. ui-design-agent：YAML とテスト用 HTML を生成し、コミットして JSON を返します 4. オーケストレーター：JSON を解析し、フェーズ5.5のメニューを表示します 5. 反復する場合：オーケストレーターが新しい ui-design-agent を呼び出します 6. 確定する場合：オーケストレーターがブリーフを更新します（フェーズ5.6） 7. オーケストレーター：Task ツール経由で ui-finalization-agent を呼び出します 8. ui-finalization-agent：ファイルを5つ生成し、コミットして JSON を返します 9. オーケストレーター：JSON を解析し、完了メニューを表示します

適用の詳細については references/delegation-protocols.md を参照してください。 </delegation_rules> </orchestration_protocol> <state_management> サブエージェントは、各フェーズの結果で .continue-here.md を更新します。オーケストレーターは、JSON レポート内の stateUpdated フラグを確認します。

サブエージェントから stateUpdated: true が返されたら、実際の状態の内容が期待値と一致することを確認してください（ブール値のフラグを確認するだけでは不十分です）。

.continue-here.md を読み込み、YAML を解析して、特定のフィールドが JSON レポートの値と一致するか確認します。一致しない場合は、状態復旧メニューを表示します。

完全な状態スキーマと検証プロトコルについては、references/state-tracking.md を参照してください。 </state_management>

<iteration_protocol> 各イテレーションは、新しいエージェントコンテキストで実行されます。ユーザーが「Iterate」を選択すると、オーケストレーターはフィードバックを収集し、バージョンをインクリメントして新しい ui-design-agent を呼び出します。コンテキストを新しくすることで、反復的なデザイン中にコンテキストウィンドウが肥大化するのを防ぎます。 </iteration_protocol>

<error_handling>

• エージェントの失敗：エラーメニューを表示します（再試行／手動修正／デバッグ／キャンセル）。
• 検証の失敗：エージェントから validationPassed: false が返された場合、エラーメニューを表示します。
• 状態更新の失敗：エージェントから stateUpdated: false が返された場合、状態復旧メニューを表示します（検証／手動更新／そのまま続行）。 </error_handling> </orchestration_protocol>

<versioning_strategy> パターン：v1、v2、v3... 各バージョンは個別に保存します。

目的：作業内容を失わずにレイアウトを試し、デザインの A/B テストを行い、ロールバック用の履歴を保持します。

ファイル名：7 個すべてのファイルにバージョンを接頭辞として付けます（例：v2-ui.html、v2-PluginEditor.h）。

実装：ユーザーが別のバージョンを指定しない限り、Stage 3（GUI）では最新バージョンを使用します。

ファイル管理の詳細については、references/versioning.md を参照してください。 </versioning_strategy>

<success_criteria> <design_phase>

• ユーザーの要件に沿った YAML 仕様が生成されている
• ブラウザテスト用 HTML が動作する（インタラクティブなコントロール、パラメーターのメッセージ）
• ビジュアル品質が商用水準を満たしている（意図的にデザインされており、デフォルトのままではない）
• デザインファイルが git にコミットされている
• .continue-here.md がバージョンで更新されている（ワークフローモードの場合）
• Phase 5.5 の選択メニューがユーザーに表示されている
• デザインが承認されている、またはユーザーが改善点を加えて反復している </design_phase>

<implementation_phase>

• 7 個すべてのファイルが生成され、.ideas/mockups/ に保存されている
• 製品版 HTML が完成している（プレースホルダーなし）
• C++ のボイラープレートが YAML の構造と一致している（パラメーターのバインディングが正しい）
• parameter-spec.md が生成され、ロックされている（v1 のみ）
• 実装ファイルが git にコミットされている
• .continue-here.md が最終確定のステータスで更新されている（ワークフローモードの場合） </implementation_phase> </success_criteria>

<integration_points> <invoked_by>

• /dream コマンド - クリエイティブブリーフの後、実装の前
• plugin-workflow スキル - Stage 0（UI デザインフェーズ）中
• plugin-improve スキル - 既存のプラグイン UI を再デザインする場合
• 自然言語：「[PluginName] の UI をデザイン」「コンプレッサーのモックアップを作成」 </invoked_by>

<always_invokes>

• ui-design-agent サブエージェント（Phase 4-5.45）- デザインの反復に必須
• ui-finalization-agent サブエージェント（Phase 6-10.5）- 実装ファイルの作成に必須 </always_invokes>

<also_invokes>

• ui-template-library スキル（ユーザーが美的スタイルを保存する場合） </also_invokes>

- `plugins/[Name]/.ideas/mockups/v[N]-*.{yaml,html,h,cpp,txt,md}`（7 ファイル） - `plugins/[Name]/.ideas/parameter-spec.md`（v1 で、まだ存在しない場合） - `PLUGINS.md` - UI のデザイン完了を記録（ワークフローの場合） - `.continue-here.md` - ワークフローの状態を更新（ワークフローの場合） - Stage 1（Foundation）- parameter-spec.md がないと進められません - Stage 3（GUI）- 承認済みの UI モックアップがないと実装できません

<reference_documentation> 段階的開示 - 該当するフェーズに到達したら、参照資料を読み込みます。

• フェーズ 0: references/aesthetic-integration.md - 美的ライブラリの統合
• フェーズ 1: references/context-extraction.md - クリエイティブブリーフの抽出
• フェーズ 2-3: references/design-questions.md - 質問テンプレートと段階分け
• フェーズ 2.5: references/layout-validation.md - 寸法計算式
• フェーズ 4-5.45: references/delegation-protocols.md - サブエージェントの呼び出し
• フェーズ 5.5: references/decision-menus.md - メニュー形式とルーティング
• フェーズ 5.6: references/state-tracking.md - ブリーフ同期プロトコル
• フェーズ 6-10: references/phase-b-enforcement.md - フェーズ B のガード
• アンチパターン: references/common-pitfalls.md - 避けるべきこと

技術的な詳細：

• references/html-generation.md - 本番用 HTML のルール
• references/browser-testing.md - ブラウザーテストのワークフロー
• references/cmake-configuration.md - WebView のビルド設定
• references/cpp-boilerplate-generation.md - C++ テンプレートの生成
• references/ui-design-rules.md - デザイン上の制約とパターン
• references/versioning.md - ファイル管理 </reference_documentation>

<template_assets>

• assets/ui-yaml-template.yaml - YAML 構造
• assets/webview-boilerplate.md - C++ 統合テンプレート
• assets/integration-checklist-template.md - 統合ガイド
• assets/parameter-spec-template.md - パラメーター仕様の形式 </template_assets>