[Feature] HTMLアートボード形式のスライド制作フロー

Gitea issue: agent-bot/gitea-agent-orchestrator#1202

現状の問題

現在 MAESTRO がスライド（.pptx）を生成する流れは以下の通り：

ユーザーが「スライドを作って」と依頼
エージェントが pptxgenjs（SetTheme / AddSlide / BuildPptx）で直接 .pptx を生成
結果がそのままユーザーに渡される

この流れの課題：

中間の「見た目確認」ができない：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/ を標準ワークスペースアプリとして登録
各アートボードが <div data-artboard="slide-N"> 形式で独立管理
プロパティパネルで編集→localStorage に保存→「エクスポート」で JSON を取得
エージェントは JSON（または編集後の HTML）を受け取って pptx 化

（c）チャット連携

[[embed:artboard:slide-N]] 形式のマーカーで各ページをチャットにサムネイル表示
クリックすると Design Canvas にジャンプ、そのページにフォーカス

4. 優先度

中〜高。現在の pptxgenjs 直接生成は「作れる」が「検討できる」ではない。デザイン重視の依頼（経営会議スライド、提案書等）ではこの中間確認レイヤーが価値を大きく増す。

5. 既存資産

apps/design-canvas/（このワークスペースで作成済みのプロトタイプ）
output/design-canvas.html（独立 HTML、外部依存ゼロ）— リポジトリに添付済み
output/design-canvas-artifact.html（base64 埋め込み型、チャット用）— リポジトリに添付済み
Claude Code /design skill の参考記事：https://dev.classmethod.jp/articles/20260818-cc-updates-v2-1-234/

6. 関連 issue

#1035「Genofficeを参考に、各種オフィスツールの統合」— 上位項目
#1067「オフィス編集の積み残し（PR #1037 レビューで先送りしたもの）」

5.4 KiB Raw Blame History Unescape Escape