Vibe Coding

In-App Navigation

Vibe Coding ist ein Weg, interaktive Funktionen und Logik mithilfe von natürlichen Sprachbefehlen und fertigen Vorlagen zu erstellen, ohne klassischen Code zu schreiben.

TL;DR

• Öffne Vibes über das Aktionsmenü oder das Seitenpanel.
• Wähle eine Vorlage (Templates, Community oder Yours) aus und füge sie deinem Space hinzu.
• Beschreibe in der Vibe Prompt UI, was du möchtest, und generiere das Verhalten mit natürlicher Sprache.
• Passe die generierten Parameter an und speichere sie anschließend mit als Save as New oder Save to Parent.
• Veröffentliche fertige Vorlagen aus Yours in die Community, sobald du bereit bist.

Vibe-Menü öffnen

Um die neue Vibe-Oberfläche zu öffnen oder ein neues Vibe hinzuzufügen, gibt es zwei Möglichkeiten:

1. Aktionsmenü 1 → Vibe 2
2. Seitenpanel → Vibes 3

In beiden Fällen öffnet sich automatisch das Seitenpanel, damit du Vibes erstellen oder verwalten kannst.

Überblick über das Vibe-Menü

Am oberen Rand des Panels findest du eine Suchleiste. Sie ermöglicht die Suche innerhalb der Vibes des aktuell aktiven Tabs. Die Suchfunktion filtert die Ergebnisse anhand des Titels. 1

Das Vibe-Vorlagenmenü ist derzeit in drei Kategorien unterteilt 2:

1. Templates
   Vordefinierte Funktionen, die vom Arrival.Space-Team erstellt wurden.
2. Community
   Funktionen, die von anderen Erstellern erstellt und geteilt wurden.
3. Yours
   Deine eigenen gespeicherten und angepassten Funktionen.

Du kannst jede dieser Vorlagen 3 zu deinen Spaces hinzufügen, um eine bestimmte Funktion zu verwenden, ihre bestehende Logik zu erweitern oder sie als Grundlage für dein eigenes benutzerdefiniertes Verhalten zu nutzen.

Edit Vibe UI

Source Code 1
Der Source Code enthält die Kernfunktionalität des Vibe.
Er kann bearbeitet , heruntergeladen , oder ersetzt werden.

tipp

Es wird empfohlen, den Source Code direkt nur dann zu bearbeiten, wenn du mit JavaScript vertraut bist. Andernfalls können Änderungen leicht zu Fehlern führen.

Prompt Vibe > 2
Die Prompt-Vibe-Oberfläche öffnet die Vibe Prompt UI. Dort kannst du in natürlicher Sprache beschreiben, welche Funktionalität du erstellen möchtest. Wenn du auf das -Symbol klickst, öffnet sich dieselbe Oberfläche.

Mit dem -Symbol kannst du dein Vibe als Vorlage speichern.

Parameters 3
Die Parameter jedes Vibe unterscheiden sich je nach Funktionalität. Sie werden auf Basis des jeweiligen Verhaltens hinzugefügt, das das Vibe bereitstellt.

Du kannst explizit festlegen, welche Parameter sichtbar, ersetzt oder angepasst werden sollen, indem du dies in der Vibe Prompt UI angibst. Zusätzlich können Parameter auch automatisch auf Basis der beschriebenen Funktionalität generiert werden.

Eingabeoption	Wann du sie verwendest	Typischer Begriff im „Vibe Coding“
Input Field	Für kurze, einzeilige Eingaben (z. B. Name, Titel, URL, numerischer Wert)	Text Input / Single-Line Input
Textarea	Für längere Textinhalte (z. B. Beschreibung, Notizen)	Multiline Input
Toggle	Für Ein/Aus-Optionen oder boolesche Einstellungen	Toggle / Switch
Upload Field	Wenn Nutzer Dateien hochladen müssen (z. B. Bild, Mesh-Modell)	File Upload / Media Upload
Drop-down Menu	Wenn Nutzer aus vordefinierten Optionen wählen müssen	Select / Dropdown
Color Picker	Wenn Nutzer eine Farbe festlegen müssen (z. B. Objektfarbe)	Color Picker
Slider (with Number Input)	Für anpassbare Wertebereiche (z. B. Größe, Intensität, Radius)	Range Slider / Value Control

Vibe Prompt UI

Vibe Tabs 1
Die Vibe-Tabs zeigen deine aktuellen Prompt-/Chat-Sitzungen mit der KI an. Du kannst schnell zwischen ihnen wechseln und mehrere Vibe-Codings gleichzeitig ausführen. Wenn der Punkt neben einem Tab-Namen grün ist, verarbeitet die KI gerade diese Sitzung.

Usage 2

Hier kannst du deinen Nutzungsanteil überwachen. Er startet bei 100 % und sinkt bis 0 %. Wir unterscheiden zwischen stündlichen und wöchentlichen Token-Limits.

Prompt-Verlauf 3
Der Prompt-Verlauf speichert deine Unterhaltung mit der KI und ermöglicht es dir, frühere Nachrichten zu prüfen.

Prompt-Eingabefeld 4
Verwende das Eingabefeld, um die Funktionalität zu beschreiben, die die KI generieren soll.

Attach File 5

Wenn du ein Bild oder ein 3D-Modell im Format .glb anhängen möchtest – zum Beispiel, um die KI anzuweisen, eine Box durch dein hochgeladenes Modell zu ersetzen – kannst du es hier hochladen.

= Resize 6
Verwende die Leiste unten, um die Vibe Prompt UI zu vergrößern oder zu verkleinern. Das funktioniert auch auf Mobilgeräten.

tipp

Du kannst die Vibe Prompt UI frei innerhalb des Browserfensters verschieben, indem du den oberen Bereich neben den Vibe-Tabs anklickst und ziehst.

Send Message 8

Verwende diese Schaltfläche, um deinen Prompt zu senden, oder drücke ↲ Enter.

Deine Vibes verwalten

Vibes hinzufügen

Um ein Vibe hinzuzufügen, öffne das Vibe-Menü. Klicke anschließend entweder auf New Vibe 1 oder einfach auf eine vorhandene Vorlage 3. Der Eintrag in der Inhaltsliste wird automatisch geöffnet. Du kannst Vibes mehrfach hinzufügen – es gibt keine Begrenzung dafür, wie oft du sie in einem Space nutzen kannst.

Wenn du auf den unteren Bereich 2 klickst, öffnet sich die Vibe-Details-Oberfläche mit einer Vorschau des Vibe, Informationen zum Ersteller, der Möglichkeit, das Vibe zu liken, einer Beschreibung und einer Liste aller öffentlichen Spaces, in denen das Vibe verwendet wurde.

Vibes bearbeiten

Um Vibes zu bearbeiten, die bereits hinzugefügt wurden, öffne deine Space-Edit-Oberfläche und nutze entweder die schwebenden Schaltflächen oder wechsle zur Registerkarte Inhalte und öffne den entsprechenden Eintrag.

Du kannst das Vibe anschließend entweder über natürliche Sprache bearbeiten (siehe Abschnitt Vibe Prompt UI) oder direkt über den Quellcode (siehe Abschnitt Edit Vibe UI).

Vibes speichern

Damit deine Vibes in deiner Vorlagenliste verfügbar sind und du sie in anderen Spaces wiederverwenden kannst, musst du sie speichern.

Verwende das -Symbol 1, um dein Vibe zu speichern.

Bevor du dein Vibe speicherst, gib ihm einen aussagekräftigen Titel und füge eine Beschreibung hinzu 2.

Die folgenden Speichermöglichkeiten sind verfügbar:

• Save as New: Erstellt eine neue Vorlage. Verwende diese Option immer dann, wenn du keine bestehende Vorlage aktualisieren möchtest. Dies ist die Standardoption beim ersten Speichern eines Vibe.
• Public: Speichert die Vorlage in Your Vibes und veröffentlicht sie zusätzlich im Bereich Community.
• Update copies already placed: Aktualisiert bestehende Instanzen dieses Vibe, die bereits in Spaces platziert wurden.

Beim Speichern des Vibe wird automatisch ein Screenshot aus dem aktuellen Space erfasst und hinzugefügt. Du kannst dieses Bild später ersetzen.

Vibe-Details bearbeiten

Die Vibe-Details helfen Nutzern zu verstehen, wie ein Vibe verwendet werden sollte, und sollten relevante Informationen zu seiner Funktionalität enthalten. Das ist besonders nützlich bei Parametern, deren Zweck nicht sofort aus ihren Namen hervorgeht.

Öffne das Seitenpanel → Vibes und wechsle zu Your Vibes. Bewege den Mauszeiger über den gewünschten Eintrag. Das -Symbol erscheint oben rechts und öffnet ein Untermenü. Wähle Edit Details 1, um die Oberfläche zu öffnen.

Oben kannst du den Screenshot aktualisieren 2. Klicke auf das Kamerasymbol, um einen Screenshot aus deiner aktuellen Position im Space aufzunehmen.

3 ermöglicht dir, Titel und Beschreibung zu aktualisieren.

Schließlich kannst du dein Vibe zur Community-Vorlagenliste hinzufügen, indem du den Public-Toggle 4 aktivierst.

In die Community veröffentlichen

Sobald du dein Vibe als Vorlage gespeichert hast, erscheint es im Vibe-Menü im Tab Yours. In der oberen rechten Ecke der Vorlagenkarte findest du die -Schaltfläche, die ein Untermenü öffnet.

Edit Details

Öffnet die Oberfläche zum Bearbeiten der Vibe-Details, in der du Titel, Beschreibung und Bild aktualisieren kannst.

Capture Screenshot

Du kannst Screenshots für deine Vorlagen erstellen. Positioniere zuerst deine Kamera – idealerweise im Free-Cam-Modus F – und klicke anschließend auf diese Option. Du kannst den Screenshot jederzeit aktualisieren.

Upload Screenshot

Wenn du deinen eigenen Screenshot erstellt hast, kannst du ihn stattdessen verwenden. Nach dem Hochladen kannst du dennoch den bevorzugten Zuschnitt festlegen.

Select

Die Option Select ermöglicht es dir, mehrere Vorlagen gleichzeitig zu löschen. Nach der Auswahl erscheint ein Hakenfeld.

Delete

Mit dieser Option löschst du deine Vorlage aus den gespeicherten Vorlagen. Nach dem Löschen erscheint automatisch eine Option, mit der du auch direkt die Entität löschen kannst, sofern sie im Space vorhanden ist. Wenn die Vorlage an anderer Stelle verwendet wird, bleiben die Entitäten erhalten und werden nicht entfernt.

Publish to Community

Du kannst deine Vorlagen mit der Community teilen, indem du diese Option verwendest. Sie öffnet die Vibe-Oberfläche, in der du Titel und Beschreibung erneut bearbeiten kannst. Die Vorlage wird dann von uns geprüft und, sofern keine verbotenen Inhalte gefunden werden, genehmigt.

Best Practice

Die folgenden Best Practices helfen dir dabei, saubere Strukturen, wiederverwendbare Vorlagen und stabile Systeme in einer Echtzeit-3D-Umgebung zu erstellen. Sie konzentrieren sich auf Klarheit, Flexibilität und Performance – damit deine Vibes auch dann anpassbar bleiben, wenn Projekte wachsen.

Denke in wiederverwendbaren Mustern / Komponenten
Baue Vorlagen und Komponenten modular auf, damit Vibes skalieren und sich weiterentwickeln lassen.

Beispiel (PlayCanvas / 3D):
Du möchtest mehrere Pyramiden aus Boxen erstellen.

Statt eine große feste Struktur zu bauen, bei der jede einzelne Box manuell platziert wird, erstelle eine Pyramid-Komponente.

Expose inputs like:

• Boxes per level
• Box size
• Color / Material
• Rounded edges
• Spacing

Jede Pyramide wird dynamisch auf Basis dieser Eigenschaften erzeugt.

Jetzt kannst du:

• Mehrere Pyramiden an beliebigen Stellen im 3D-Raum platzieren
• Jede Pyramide mit verschiedenen Materialien oder Proportionen versehen
• Die Strukturlogik einmal verbessern und alle Pyramiden automatisch aktualisieren

Prinzip:
Erstelle Geometrie nicht mehrfach von Hand.
Baue einen konfigurierbaren 3D-Generator.

Teile Aufgaben in kleine Schritte
Starte einfach und iteriere dann schrittweise.

Beispiel (PlayCanvas / 3D):
Du möchtest einen prozeduralen Turm bauen.

Statt ein komplexes Skript mit Animation, Materialien, Licht und Physik auf einmal zu erstellen:

1. Erzeuge zuerst gestapelte Boxen.
2. Füge dann Abstandssteuerungen hinzu.
3. Füge danach Materialanpassungen hinzu.
4. Füge anschließend Animationen hinzu.

Jeder Schritt sollte unabhängig funktionieren, bevor du weitergehst.

Prinzip:
Stabile kleine Systeme sind einfacher zu erweitern als instabile komplexe Systeme.

Expose nur sinnvolle Inputs
Jede Einstellung sollte einen klaren Zweck haben.

Beispiel (PlayCanvas / 3D):
Wenn du eine „Glowing Orb“-Komponente baust, vermeide es, 15 zufällige Parameter freizugeben.

Stattdessen solltest du diese freigeben:

• Radius
• Glow intensity
• Color
• Pulse on/off

Gib keine interne Shader-Komplexität oder unnötige Debug-Werte frei.

Denke in Systemen, nicht in Objekten
Baue Generatoren statt statischer Szenen.

Beispiel (PlayCanvas / 3D):
Statt 50 Steine manuell zu platzieren, erstelle ein Rock Scatter System.

Inputs:

• Area size
• Rock density
• Random scale range
• Random rotation

Das System verteilt Steine automatisch im 3D-Raum.

Prinzip:
Entwickle Logik, die Variation automatisch erzeugt, statt jedes Mesh manuell zu platzieren.