HTMLモックの生成方法変更

[tango238]

mokkun は、YAMLで定義したUI構造からブラウザ上で画面モックを生成・表示するツールとして開発しています。
当初は、HTML生成は処理が重くトークン消費も大きいため、auto compaction による待ち時間が発生しやすく、特にチームでの仕様確認では全員の作業が止まって大きなロスになることから、避けたいと考えていました。
一方で開発を進める中で、AIが生成するモックHTMLの表現パターンを網羅しないと表示が崩れやすく、結局HTML生成をせざるを得ない状況が見えてきています。そこで、より良いアプローチを検討したいです。

---

アイデア出し（HTML生成 “以外/最小化” で成立させる設計案）

1) 「HTMLを生成する」のではなく「中間IR → レンダラー」で固定化する

発想：AIにHTMLを書かせるのをやめ、AIの出力は 限定語彙の中間表現（IR） にする。
mokkunはそのIRを**自前レンダラー（React/Vue/Canvas/SVGなど）**で表示。

• AIが吐くのは component: Button, props: {variant:"primary"}, children:["保存"] のような制約されたJSON/YAML
• mokkun側でレンダリングを担うので、表示品質が安定
• 生成トークンも減りやすい（HTMLは冗長）

ポイント：YAMLがすでにあるなら、そのYAML自体をIRとして扱い、AIは「不足情報の補完」だけに絞るのが強いです。

---

2) 表示崩れの原因を「パターン網羅」から「コンポーネント辞書」に寄せる

発想：「HTMLの全パターンを作りきる」ではなく、UIコンポーネントの辞書を作って、AIがそこから選ぶ方式。

• 辞書：Button / TextField / Table / Card / Modal… + レイアウト（Stack/Grid）
• AIは「辞書の組み合わせ」だけを出力
• mokkunは辞書をレンダリングするだけ

結果として、網羅すべきは「HTMLの無限パターン」ではなく「辞書の有限セット」になります。

---

3) HTMLは生成してもいいが「一切AIに生成させない」

発想：HTML生成の負担（時間・トークン）が問題なので、AI生成HTMLをやめて、テンプレートエンジンで確定HTMLを出す。

• YAML → deterministic にHTML（もしくはReact要素）を生成
• 生成ルールは自前でコントロール可能
• AIは “YAMLを作る/直す” ところだけに使う（HTMLはAIに触らせない）

「結局HTML生成が必要」でも、トークン問題は消せる方向です。

---

4) 「全HTML対応」ではなく “許容するサブセット” を宣言する

発想：mokkunは「モック表示」用途なので、サポート範囲を明示して割り切る。

• 例：フォーム、一覧、詳細、モーダル、ステップ、2カラムレイアウト…などに限定
• “変なHTML” は受け付けない（変換時にエラーとして返す）
• 表示の一貫性が上がる

チームで仕様確認するなら、むしろこの方が運用上ラクなケースが多いです。

---

5) “互換レイヤ” を作る（AIのHTMLを受けつつ正規化）

発想：AIが吐いたHTMLをそのまま表示せず、DOMを解析して正規化してからレンダリングする。

• HTML → DOM parse → 「mokkun IR」へ変換（タグ/クラス/構造を吸収）
• 変換できないものは警告＋代替表示

これは「AIが生成する揺らぎ」をmokkun側で吸収する戦略で、既存のAI出力を捨てずに移行できます。

---

6) 体験面：生成を分割して “待ち” をなくす

発想：auto compaction が問題なら、生成単位を小さくして「逐次表示」に寄せる。

• 画面全体を一括生成しない
  例：レイアウト → 各セクション → 各コンポーネント
• ストリーミングで部分表示
• 変更差分だけ生成（Diff生成）

表示品質の話とは別軸ですが、チーム確認のストレスは大きく減ります。

---

現実的な落とし所（おすすめの組み合わせ）

• 本命：①「中間IR→レンダラー」 + ②「コンポーネント辞書」
  → “HTMLの無限地獄” から抜けられる
• 移行しやすい：⑤「HTML正規化」→ 徐々に①へ寄せる
• トークン問題を即解決：③「HTMLは決定的に生成（AIは触らない）」