diff --git a/docs/issues/1202-artboard-slide-flow.md b/docs/issues/1202-artboard-slide-flow.md new file mode 100644 index 0000000..a6ec6c8 --- /dev/null +++ b/docs/issues/1202-artboard-slide-flow.md @@ -0,0 +1,89 @@ +# [Feature] HTMLアートボード形式のスライド制作フロー + +> Gitea issue: https://gitea.techswan.online/agent-bot/gitea-agent-orchestrator/issues/1202 + +## 現状の問題 + +現在 MAESTRO がスライド(.pptx)を生成する流れは以下の通り: + +1. ユーザーが「スライドを作って」と依頼 +2. エージェントが pptxgenjs(`SetTheme` / `AddSlide` / `BuildPptx`)で直接 `.pptx` を生成 +3. 結果がそのままユーザーに渡される + +この流れの課題: +- **中間の「見た目確認」ができない**:pptx が完成してから初めて見るため、レイアウト・配色・見せ方が期待とズレていたら作り直しになる +- **ユーザーが細部を調整できない**:文字の大小、色、図表の配置など、pptx 内で手動編集するには PowerPoint を開いてやる必要がある +- **提案の複数案比較ができない**:「A案とB案、どっちがいい?」という比較検討がチャットテキスト上では行いにくい +- **エージェントの「デザイン提案」が弱い**:pptxgenjs は最終生成ツールであって、デザイン案を視覚的に提示する手段ではない + +## 原因の推測 + +pptxgenjs は「スライド生成の最終出力手段」に位置づけられており、**デザイン検討フェーズの UI が存在しない**。ユーザーが「こういう見せ方にして」と伝える前に最終物が出来てしまう。 + +一方、Claude Code の `/design skill`(research preview)や Artifacts では、エージェントが「編集可能な HTML アートボード」を生成し、ユーザーがそれを直接クリック/ドラッグで調整→確定、という**非線形的なデザイン確認フロー**を可能にしている。MAESTRO にこの「デザイン確認レイヤー」がない。 + +## 提案 + +### 1. HTML アートボード形式のスライド中間表現を導入 + +スライドの各ページを **1ページ=1個の HTML アートボード(960×600 固定サイズ、pptx 16:9相当)** として表現する。各アートボードには: + +- **編集可能な要素に `data-editable` / `data-property` / `data-label` を付与** +- **Pan/Zoom**(ドラッグで移動、ホイールで拡大縮小) +- **クリックで右側プロパティパネルが開く**(色・テキスト・数値の直接編集) +- **JSON エクスポート**(編集内容を構造化データとして取得) + +既にこのワークスペースで `apps/design-canvas/` にプロトタイプ(3バリエーションのダッシュボード UI モック)を作成済み。これを**標準機能として製品に組み込む**形。 + +### 2. スライド制作フローの変更 + +``` +[現行フロー] +ユーザー依頼 → エージェントが pptxgenjs で直接 .pptx 生成 → ユーザー受け取り + +[新フロー] +ユーザー依頼 → エージェントが HTML アートボード群を生成(1枚=1ページ) + ↓ +チャットにアートボードプレビューを貼付([[embed:...]] マーカーで) + ↓ +ユーザーが「アプリ」タブから Design Canvas を開き、各ページを直接編集 + ↓ +ユーザーが「これでOK」→ エージェントが編集後の HTML/JSON を読み取り + ↓ +pptxgenjs(または python-pptx)で PPTX を生成 → 最終 .pptx をユーザーに渡す +``` + +### 3. 技術実装ポイント + +**(a)エージェント側** +- 新規 movement として `slide-design` を追加(`pptx` movement と並列、または `pptx` の前段) +- `AddSlide` を「アートボードHTML生成」に変形(または新しい `AddSlideArtboard`) +- `BuildPptx` の代わりに、まず `BuildArtboard`(HTML ファイルを生成しチャットに貼付)を呼ぶ +- ユーザーが確定後に、編集済み HTML を読み取り pptxgenjs で最終生成 + +**(b)UI 側(Design Canvas アプリ)** +- `apps/design-canvas/` を標準ワークスペースアプリとして登録 +- 各アートボードが `