UI Game AI: Jangan Edit Prefab YAML—Gunakan Canvas untuk Ekspor Unity / Godot / Cocos

Minta Cursor untuk “menyusun HUD ini di Unity,” dan ia sering membaca teks .prefab serta mengedit ribuan baris YAML—lambat, biaya Token tinggi, dan berisiko terhadap referensi GUID dan .meta.

Pola yang lebih aman: AI tidak pernah mengedit file Prefab secara langsung; ia bekerja pada middle layer; exporter tetap yang membangun Prefab.

Postingan ini membahas kebutuhan umum: UI yang disusun AI, Cursor mengedit Prefab, ekspor UI Prefab Unity / Godot / Cocos, dan Figma / PSD ke engine tanpa membangun Canvas secara manual. Berikut: pemisahan middle-layer, lalu jalur game canvas VberAI Studio (AI Studio, ≠ Google AI Studio)—desain atau UI full-screen dari AI → pemisahan canvas → ekspor Prefab deterministik → Engine MCP untuk logika.

---

Mengapa AI tidak boleh menyusun Prefab secara langsung

Masalah	Yang Anda lihat
Volume teks	Prefab satu layar seringkali 10.000+ baris—mahal untuk dibaca/ditulis
Waktu	Satu proses generate/edit bisa memakan 10–20 menit, sulit untuk iterasi
Risiko aset	Edit YAML pada referensi dan fileID dapat merusak GUID dan tautan
Review	Diff sebagian besar berupa field terserialisasi—risiko merge tinggi
Iterasi	Setiap perubahan UI berarti meregenerasi seluruh Prefab—biaya pemeliharaan tinggi

AI cocok untuk tata letak, pemilihan kontrol, dan pengisian field; bukan peran sebagai editor Prefab.

---

Pemisahan yang benar: middle layer + ekspor deterministik

Dua tahap:

AI: pahami desain → representasi tengah (bukan teks Prefab)
Alat tetap: baca middle layer → instansiasi kontrol → atur RectTransform → simpan Prefab

Middle layer bisa berupa format proyek kustom atau hierarki canvas VberAI Studio. Persyaratannya:

• Struktur yang jelas dan ringkas—dapat diedit oleh AI atau manusia
• Pembangunan Prefab tanpa LLM—input sama, output sama
• Pemeriksaan pra-ekspor: batas, field wajib, nama bind

Skrip gameplay dibuat setelah impor Prefab melalui MCP; struktur UI tetap terpisah dari logika gameplay.

---

Canvas AI Studio: pratinjau, pemisahan, ekspor multi-engine

Format tengah kustom biasanya memerlukan pemindaian pustaka kontrol, dokumen spesifikasi, alat Editor, serta pipeline slice/reskin.
VberAI Studio memproduktifkan middle layer dan exporter:

Kemampuan	Peran
Game canvas	Pratinjau UI full-screen; sesuaikan jarak dan hierarki sebelum ekspor
Pemisahan in-place	Pisahkan tombol dan panel pada posisi aslinya—tanpa pergeseran global di engine (panduan pemisahan)
Berbagai input	PSD / Figma, seni yang dihasilkan AI, PNG full-screen
Ekspor multi-engine	Unity UGUI, Godot Control, Cocos UI alur yang sama
Reskin / locale	Reskin, terjemahkan, lalu ekspor ulang seluruh pohon
Prefab deterministik	Ekspor tanpa LLM; YAML tidak diedit oleh AI

Dibandingkan spesifikasi UI teks murni, canvas juga mencakup persetujuan visual, pemisahan, 9-slice, skin event—semuanya dengan cepat membengkakkan spesifikasi kustom.

---

Alur yang disarankan: Figma / PSD → Prefab → MCP

Langkah	Tugas	Penanggung jawab
1	Susun layer dan beri nama desain (atau AI Studio menghasilkan UI full-screen)	Desain / produser
2	Impor VberAI Studio; periksa hierarki dan area klik pada canvas	Desain + engineering pemeriksaan spot
3	Pemisahan in-place → pilih Unity / Godot / Cocos → ekspor Prefab	AI Studio (deterministik)
4	Prefab di proyek; sesuaikan tata letak sesuai checklist impor engine + MCP	Engineering
5	Cursor + Engine MCP mengikat Btn_*, health, popup (contoh HUD)	Engineering
6	Sebelum rilis: checklist UI pra-rilis	Engineering + QA

Aturan penyerahan: checklist handoff desain. Jalur alat yang lebih luas: kombinasi alat AI pengembangan game.

Stack yang disarankan: VberAI Studio + engine target MCP + Cursor atau Claude Code. Panduan: video UI 3 menit.

---

Pilih jalur sesuai yang Anda miliki

Yang Anda miliki	Jalur yang disarankan
PSD / Figma berlapis	Impor → pemisahan → ekspor (Figma ke Unity)
PNG konsep full-screen	Canvas → pemisahan in-place → ekspor (slice in-place)
Tanpa aset, butuh demo	AI Studio menghasilkan UI → pemisahan → ekspor → MCP mengikat logika

Outputnya selalu Prefab / hierarki UI yang dapat dipasang di engine—bukan AI yang menulis ulang teks Prefab di disk lagi.

---

FAQ

Bisakah AI menghasilkan Unity Prefab secara langsung?
LLM dapat menghasilkan Prefab YAML, tetapi tidak disarankan: teks besar, proses lambat, risiko GUID, review buruk. Lebih aman: AI pada middle layer (canvas atau spesifikasi kustom), exporter tetap untuk Prefab.

Apa bedanya penyusunan UI Cursor dengan canvas AI Studio?
Cursor + MCP unggul setelah impor—skrip, node, validasi Play. Ini tidak ideal untuk membangun struktur Prefab UI full-screen secara aman. AI Studio menangani UI ke engine; bersama-sama: ekspor canvas → MCP untuk logika.

Bagaimana Figma / PSD mencapai Unity UI tanpa membangun Canvas manual?
Impor file berlapis ke AI Studio → pemisahan in-place → ekspor Unity UGUI Prefab. Alur yang sama untuk Godot dan Cocos. Lihat Figma ke Unity dan PSD ke UGUI.

Apa bedanya ini dengan Google AI Studio?
Google menargetkan Web umum dan prototipe; ekspor Prefab game adalah pekerjaan yang berbeda. Lihat Google AI Studio vs VberAI.

Kami menggunakan framework UI kustom—apakah canvas masih berguna?
Ekspor adalah pohon UI engine standar. Bungkus dengan template Anda setelah impor jika perlu—tetap lebih aman daripada AI mengedit YAML.

Apakah reskin event perlu dibangun ulang dari awal?
Tidak. Reskin pada canvas, ekspor ulang Prefab; logika sedikit berubah jika nama bind tetap stabil.