KI-Spiel-UI: Prefab-YAML nicht bearbeiten – nutze das Canvas für den Export nach Unity / Godot / Cocos

Bittet man Cursor, „dieses HUD in Unity zusammenzubauen“, liest es oft .prefab-Text und bearbeitet Tausende Zeilen YAML – langsam, hohe Token-Kosten und riskant für GUID- und .meta-Referenzen.

Das sicherere Muster: KI bearbeitet Prefab-Dateien nie direkt; sie arbeitet auf einer Middle-Layer; ein fester Exporter baut das Prefab.

Dieser Beitrag behandelt häufige Anforderungen: KI-zusammengebaute UI, Cursor-Bearbeitung von Prefabs, Unity- / Godot- / Cocos-UI-Prefab-Export und Figma / PSD in die Engine ohne manuelles Canvas-Bauen. Unten: Middle-Layer-Aufteilung, dann der VberAI Studio (AI Studio, ≠ Google AI Studio) Game-Canvas-Pfad – Design oder KI-Vollbild-UI → Canvas-Split → deterministischer Prefab-Export → Engine MCP für Logik.

---

Warum KI Prefabs nicht direkt zusammenbauen sollte

Problem	Was du siehst
Textmenge	Ein Prefab für einen Screen hat oft 10.000+ Zeilen – teuer zu lesen/schreiben
Zeit	Ein Generate-/Edit-Durchlauf kann 10–20 Minuten dauern, schwer zu iterieren
Asset-Risiko	YAML-Bearbeitungen an Referenzen und fileIDs können GUIDs und Links brechen
Review	Diffs sind meist serialisierte Felder – hohes Merge-Risiko
Iteration	Jede UI-Änderung bedeutet, das ganze Prefab neu zu generieren – hohe Wartungskosten

KI eignet sich für Layout, Control-Auswahl und Feldbefüllung; nicht für die Rolle des Prefab-Editors.

---

Richtige Aufteilung: Middle-Layer + deterministischer Export

Zwei Stufen:

KI: Design verstehen → mittlere Repräsentation (kein Prefab-Text)
Festes Tool: Middle-Layer lesen → Controls instanziieren → RectTransform setzen → Prefab speichern

Die Middle-Layer kann ein eigenes Projektformat oder eine VberAI Studio Canvas-Hierarchie sein. Anforderungen:

• Klare, kompakte Struktur – von KI oder Menschen bearbeitbar
• Prefab-Aufbau ohne LLM – gleicher Input, gleicher Output
• Prüfungen vor dem Export: Bounds, Pflichtfelder, Bind-Namen

Gameplay-Skripte kommen nach dem Prefab-Import via MCP; UI-Struktur bleibt getrennt von Gameplay-Logik.

---

AI Studio Canvas: Vorschau, Slicing, Multi-Engine-Export

Eigene Middle-Formate erfordern meist Control-Library-Scans, Spec-Dokumente, Editor-Tools und Slice-/Reskin-Pipelines.
VberAI Studio produktisiert die Middle-Layer und den Exporter:

Fähigkeit	Rolle
Game-Canvas	Vollbild-UI in der Vorschau; Abstände und Hierarchie vor dem Export anpassen
In-Place-Split	Buttons und Panels an Originalpositionen trennen – keine globale Verschiebung in der Engine (Split-Anleitung)
Mehrere Inputs	PSD / Figma, KI-generierte Art, Vollbild-PNG
Multi-Engine-Export	Unity UGUI, Godot Control, Cocos UI gleicher Ablauf
Reskin / Locales	Reskin, übersetzen, dann Re-Export des ganzen Baums
Deterministisches Prefab	Export ohne LLM; YAML wird nicht von KI bearbeitet

Gegenüber reinen Text-UI-Specs deckt das Canvas auch visuelle Abnahme, Slicing, 9-Slice, Event-Skins ab – all das bläht eine eigene Spec schnell auf.

---

Empfohlener Ablauf: Figma / PSD → Prefab → MCP

Schritt	Aufgabe	Verantwortlich
1	Design layern und benennen (oder AI Studio generiert Vollbild-UI)	Design / Producer
2	VberAI Studio importieren; Hierarchie und Hit-Bereiche auf dem Canvas prüfen	Design + Engineering-Stichprobe
3	In-Place-Split → Unity / Godot / Cocos wählen → Prefab exportieren	AI Studio (deterministisch)
4	Prefab im Projekt; Layout-Durchlauf gemäß Engine-Import- + MCP-Checkliste	Engineering
5	Cursor + Engine MCP binden Btn_*, Health, Popups (HUD-Beispiel)	Engineering
6	Vor dem Ship: Pre-Launch-UI-Checkliste	Engineering + QA

Lieferregeln: Design-Handoff-Checkliste. Breitere Tool-Pfade: Game-Dev-KI-Tool-Kombo.

Empfohlener Stack: VberAI Studio + Ziel-Engine-MCP + Cursor oder Claude Code. Walkthrough: 3-Minuten-UI-Video.

---

Wähle einen Pfad nach dem, was du hast

Du hast	Empfohlener Pfad
Gelayerte PSD / Figma	Importieren → splitten → exportieren (Figma zu Unity)
Vollbild-Konzept-PNG	Canvas → In-Place-Split → Export (In-Place-Slice)
Keine Assets, brauchst eine Demo	AI Studio generiert UI → splitten → exportieren → MCP bindet Logik

Der Output ist immer ein mountbares Prefab / UI-Hierarchie in der Engine – nicht KI, die erneut Prefab-Text auf der Festplatte umschreibt.

---

FAQ

Kann KI direkt ein Unity-Prefab generieren?
Ein LLM kann Prefab-YAML ausgeben, aber das ist nicht empfehlenswert: riesiger Text, langsame Läufe, GUID-Risiko, schlechtes Review. Sicherer: KI auf einer Middle-Layer (Canvas oder eigene Spec), fester Exporter für das Prefab.

Wie unterscheidet sich Cursor-UI-Zusammenbau vom AI Studio Canvas?
Cursor + MCP glänzt nach dem Import – Skripte, Nodes, Play-Validierung. Es ist nicht ideal, um Vollbild-UI-Prefab-Strukturen sicher zu bauen. AI Studio übernimmt UI in die Engine; zusammen: Canvas-Export → MCP für Logik.

Wie erreichen Figma / PSD Unity-UI ohne manuelles Canvas-Bauen?
Gelayerte Dateien in AI Studio importieren → In-Place-Split → Unity-UGUI-Prefab exportieren. Gleicher Ablauf für Godot und Cocos. Siehe Figma zu Unity und PSD zu UGUI.

Wie unterscheidet sich das von Google AI Studio?
Google zielt auf allgemeines Web und Prototypen; Spiel-Prefab-Export ist eine andere Aufgabe. Siehe Google AI Studio vs VberAI.

Wir nutzen ein eigenes UI-Framework – ist das Canvas trotzdem nützlich?
Der Export sind Standard-Engine-UI-Bäume. Nach dem Import bei Bedarf in deine Templates einwickeln – immer noch sicherer als KI, die YAML bearbeitet.

Erfordern Event-Reskins einen Neuaufbau von Grund auf?
Nein. Reskin auf dem Canvas, Prefab neu exportieren; Logik ändert sich kaum, wenn Bind-Namen stabil bleiben.