AI でゲーム UI を組む：Prefab YAML を直接編集せず、キャンバスから Unity / Godot / Cocos へ

Cursor に「この HUD を Unity に組んで」と頼むと、.prefab テキストを読み、数千行の YAML を編集しがちです——時間がかかり Token コストも高く、GUID や .meta 参照を壊すリスクがあります。

より安全な型：AI は Prefab を直接触らない。中間レイヤーのみ。Prefab は固定エクスポーターが生成する。

本記事は AI で UI 組み立て、Cursor で Prefab 編集、Unity / Godot / Cocos 向け Prefab エクスポート、Figma / PSD を Canvas 手組みなしでエンジンへ といったニーズを扱います。中間レイヤーの分担のあと、VberAI Studio（AI Studio、≠ Google AI Studio）ゲームキャンバス経路——設計稿または AI 全画面 UI → キャンバス分割 → 確定的 Prefab エクスポート → Engine MCP でロジック接続——を説明します。

---

AI に Prefab を直接組ませない理由

課題	実際の症状
テキスト量	1 画面の Prefab が 1 万行超——読み書きの Token コストが高い
時間	1 回の生成・修正に 10〜20 分、反復が困難
リソース	YAML の参照・fileID 変更で GUID 欠落・リンク断
レビュー	diff がシリアライズ中心で マージリスク大
改稿	UI 変更のたび Prefab 全体再生成——保守コスト高

AI はレイアウト理解・コントロール選択・フィールド入力向き；Prefab エディタ役には不向き。

---

正しい分担：中間レイヤー + 確定的エクスポート

2 段階に分けます：

AI：デザイン理解 → 中間表現（Prefab テキストではない）
固定ツール：中間レイヤー読込 → コントロール生成 → RectTransform 設定 → Prefab 保存

中間レイヤーは自前形式でも VberAI Studio キャンバス階層 でも可。共通要件：

• 構造が明確で体量が小さく、AI または人が編集可能
• Prefab 生成に LLM 不参加——同入力同出力
• エクスポート前チェック：はみ出し、必須フィールド、バインド名

ゲームプレイ脚本は Prefab 取り込み後に MCP で記述；UI 構造とロジックを分離。

---

AI Studio キャンバス：プレビュー、切り出し、マルチエンジン

自前中間形式はコントロールライブラリのスキャン、仕様書、Editor ツール、切り出し／リスキン管線が必要になりがちです。
VberAI Studio は中間レイヤーとエクスポートを製品化：

機能	役割
ゲームキャンバス	全画面 UI をプレビュー、間隔・階層調整後にエクスポート
原位分割	ボタン・パネルを元位置で分割——エンジンで全体ずれなし（分割ガイド）
複数入力	PSD / Figma、AI 生成、全画面 PNG
マルチエンジン	Unity UGUI、Godot Control、Cocos UI 同一フロー
リスキン / 多言語	リスキン、翻訳 後にツリー全体再エクスポート
確定的 Prefab	エクスポートに LLM なし；YAML を AI が直接編集しない

テキストだけの UI 仕様と比べ、キャンバスは 視覚確認、切り出し、9-slice、イベントスキン もカバー——自前 spec に全部書くと急速に膨らみます。

---

推奨フロー：Figma / PSD → Prefab → MCP

手順	内容	担当
1	設計稿のレイヤー化・命名（または AI Studio で全画面 UI 生成）	デザイン / 企画
2	VberAI Studio へインポート、キャンバスで階層・クリック領域確認	デザイン + エンジニア spot check
3	原位分割 → Unity / Godot / Cocos 選択 → Prefab エクスポート	AI Studio（確定的）
4	工程へ Prefab 投入、エンジン取り込み + MCP チェックリスト でレイアウト検収	エンジニア
5	Cursor + Engine MCP で Btn_*、HP、ポップアップ接続（HUD 例）	エンジニア
6	出荷前 リリース前 UI チェック	エンジニア + QA

納品規範：設計引き継ぎチェックリスト。ツール経路の比較：ゲーム開発 AI ツール。

推奨構成： VberAI Studio + 対象エンジン MCP + Cursor または Claude Code。デモ：3 分 UI 動画。

---

素材別の経路

手持ち素材	推奨経路
PSD / Figma レイヤー稿	インポート → 分割 → エクスポート（Figma → Unity）
全画面コンセプト PNG	キャンバス → 原位分割 → エクスポート（原位切り出し）
素材なし、Demo 必要	AI Studio で UI 生成 → 分割 → エクスポート → MCP でロジック

成果物は常にエンジン内でマウント可能な Prefab / UI 階層——ディスク上の Prefab テキストを AI が再編集する形ではありません。

---

よくある質問

AI は Unity Prefab を直接生成できる？
LLM は Prefab YAML を出力できますが非推奨：テキスト量大、時間がかかり、GUID リスク、レビュー困難。安全策は AI が中間レイヤー（キャンバス等）を扱い、固定ツールが Prefab を出力すること。

Cursor で UI 組みと AI Studio キャンバスの違いは？
Cursor + MCP は 取り込み後の脚本・ノード・Play 検証向き。全画面 UI Prefab 構造の安全な生成には不向き。AI Studio が UI のエンジン投入を担当。組み合わせ：キャンバス export → MCP でロジック。

Figma / PSD を Canvas 手組みなしで Unity UI に？
レイヤー稿を AI Studio にインポート → 原位分割 → Unity UGUI Prefab エクスポート。Godot / Cocos も同フロー。Figma → Unity、PSD → UGUI を参照。

Google AI Studio との違いは？
Google は汎用 Web・プロトタイプ向け。ゲーム Prefab エクスポートは別問題。比較記事。

自社 UI フレームワークがある場合は？
標準エンジン UI ツリーとしてエクスポート。取り込み後にテンプレートでラップ可能——YAML を AI が直編集するより安全。

イベントリスキンで最初から組み直す？
不要。リスキン 後 Prefab 再エクスポート；バインド名が安定していればロジック変更は最小。