Vibe Coding

Vibe Coding ist eine Methode, um interaktive Funktionen und Logik mithilfe natürlicher Sprache und vorgefertigter Templates zu erstellen – ohne klassischen Code schreiben zu müssen.

TL;DR

• Öffne Vibes über das Aktions-Untermenü oder das Side Panel.
• Wähle ein Template (Templates, Community oder Yours) und füge es deinem Space hinzu.
• Beschreibe im Vibe Prompt UI, was du erstellen willst, und generiere das Verhalten per natürlicher Sprache.
• Passe die erzeugten Parameter an und speichere mit als Save as New oder Save to Parent.
• Veröffentliche fertige Templates aus Yours in der Community.

Vibe-Menü öffnen

Um das neue Vibe UI zu öffnen oder ein neues Vibe hinzuzufügen, hast du zwei Optionen:

1. Aktions-Untermenü 1 → Vibe 2
2. Side Panel → Vibes 3

In beiden Fällen öffnet sich das Side Panel automatisch, sodass du deine Vibes erstellen oder verwalten kannst.

Überblick über das Vibe-Menü

Oben im Panel findest du eine Suchleiste. Damit kannst du innerhalb der Vibes des aktuell aktiven Tabs suchen. Gefiltert wird nach Titel. 1

Das Vibe-Template-Menü ist aktuell in drei Kategorien unterteilt 2:

1. Templates
   Vordefinierte Funktionen vom Arrival.Space-Team.
2. Community
   Von anderen Creator:innen erstellte und geteilte Funktionen.
3. Yours
   Deine eigenen gespeicherten und angepassten Funktionen.

Du kannst jedes dieser Templates 3 zu deinen Spaces hinzufügen, um eine bestimmte Funktion zu nutzen, bestehende Logik zu erweitern oder eine eigene Logik darauf aufzubauen.

Vibe UI bearbeiten

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

tipp

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

Prompt Vibe > 2
Das Prompt Vibe UI öffnet das Vibe Prompt UI. Dort kannst du in natürlicher Sprache beschreiben, welche Funktionalität du erstellen möchtest. Ein Klick auf das -Icon öffnet dieselbe Oberfläche.

Mit dem -Icon kannst du dein Vibe als Template speichern.

Parameter 3
Die Parameter jedes Vibes unterscheiden sich je nach Funktionalität. Sie werden auf Basis des jeweiligen Verhaltens hinzugefügt.

Du kannst explizit festlegen, welche Parameter angezeigt, ersetzt oder geändert werden sollen, indem du dies im Vibe Prompt UI angibst. Zusätzlich können Parameter auch automatisch anhand der beschriebenen Funktion generiert werden.

Eingabeoption	Wann verwenden	Typischer Begriff in „Vibe Coding“
Input Field	Für kurze einzeilige Eingaben (z. B. Name, Titel, URL, Zahlenwert)	Text Input / Single-Line Input
Textarea	Für längere Texte (z. B. Beschreibung, Notizen)	Multiline Input
Toggle	Für Ein/Aus-Optionen oder boolesche Einstellungen	Toggle / Switch
Upload Field	Wenn Nutzer Dateien hochladen sollen (z. B. Bild, Mesh-Modell)	File Upload / Media Upload
Drop-down Menu	Wenn Nutzer aus vordefinierten Optionen wählen sollen	Select / Dropdown
Color Picker	Wenn Nutzer eine Farbe festlegen sollen (z. B. Objektfarbe)	Color Picker
Slider (with Number Input)	Für einstellbare 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. Du kannst schnell zwischen ihnen wechseln und mehrere Vibe-Codings parallel ausführen. Wenn der Punkt neben einem Tab-Namen grün ist, verarbeitet die KI diese Sitzung gerade.

Usage 2

Hier kannst du deinen Nutzungsprozentsatz verfolgen. Er startet bei 100 % und sinkt bis 0 %. Es gibt stündliche und wöchentliche Token-Limits.

Prompt history 3
Die Prompt-Historie speichert deine Unterhaltung mit der KI, damit du frühere Nachrichten nachvollziehen kannst.

Prompt input field 4
Nutze das Eingabefeld, um die Funktionalität zu beschreiben, die die KI erzeugen soll.

Attach File 5

Wenn du ein Bild oder ein 3D-Modell .glb anhängen möchtest – zum Beispiel, um der KI zu sagen, dass sie eine Box durch dein hochgeladenes Modell ersetzt – kannst du es hier hochladen.

= Resize 6
Mit der Leiste unten kannst du die Größe des Vibe Prompt UI ändern. Das funktioniert auch auf mobilen Geräten.

tipp

Du kannst das Vibe Prompt UI im Browserfenster frei verschieben, indem du den oberen Bereich neben den Vibe Tabs anklickst und ziehst.

Send Message 5

Mit diesem Button sendest du deinen Prompt oder du drückst ↲ Enter.

Deine Vibes verwalten

Vibes hinzufügen

Um ein Vibe hinzuzufügen, öffne das Vibe-Menü. Klicke dann entweder auf New Vibe 1 oder einmal auf ein vorhandenes Template 2. Der Eintrag in der Content List öffnet sich automatisch.

Du kannst Vibes mehrfach hinzufügen – es gibt kein Limit, wie viele in einem Space verwendet werden können. Sobald du eines hinzugefügt hast, ändert sich der Button zu Add Another. Zusätzlich erscheint ein Remove-Button, um das Template als Entity zu entfernen.

Vibes bearbeiten

Um bereits hinzugefügte Vibes zu bearbeiten, öffne dein Space Edit UI und nutze entweder die schwebenden Buttons oder wechsle zum Content-Tab und öffne den entsprechenden Eintrag.

Danach kannst du das Vibe entweder über natürliche Sprache (siehe Vibe Prompt UI) oder durch direkte Bearbeitung des Source Codes (siehe Vibe UI bearbeiten) anpassen.

Vibes speichern

Damit deine Vibes in deiner Template-Liste verfügbar sind und in anderen Spaces wiederverwendet werden können, musst du sie speichern.

Verwende dafür das -Icon. Beim Klicken öffnet sich ein Untermenü 1:

• Save as New: erstellt und speichert ein neues Template
• Save to Parent: aktualisiert das bestehende Template

Wenn du Save as New wählst, öffnet sich die rechts gezeigte UI. Dort kannst du den Template-Namen festlegen und eine Beschreibung hinzufügen. Aktuell werden in der Vorschau nur zwei Zeilen angezeigt.

In der Community veröffentlichen

Sobald du dein Vibe als Template gespeichert hast, erscheint es im Vibe-Menü im Tab Yours. Oben rechts auf der Template-Karte findest du den -Button, der ein Untermenü öffnet.

Remove from Space

Diese Option funktioniert wie „Delete“ innerhalb der Entity. Das Vibe wird als Entity entfernt, das Template bleibt jedoch in der Liste.

Capture Screenshot

Du kannst Screenshots für deine Templates erstellen. Positioniere zuerst deine Kamera – idealerweise mit Free Cam F – und klicke dann auf diese Option. Du kannst den Screenshot jederzeit aktualisieren.

Upload Screenshot

Wenn du einen eigenen Screenshot erstellt hast, kannst du ihn stattdessen hochladen. Danach kannst du weiterhin den bevorzugten Zuschnitt festlegen.

Select

Mit „Select“ kannst du mehrere Templates gleichzeitig löschen. Nach der Auswahl erscheint eine Checkbox.

Delete

Mit dieser Option löschst du dein Template aus den gespeicherten Templates. Nach dem Löschen erscheint automatisch die Option, auch die Entity direkt zu löschen, falls sie im Space existiert. Wird das Template anderswo genutzt, bleiben diese Entities erhalten.

Publish to Community

Über diese Option kannst du dein Template mit der Community teilen. Dabei öffnet sich das Vibe UI, in dem du Titel und Beschreibung erneut bearbeiten kannst. Anschließend wird das Template von uns geprüft und – sofern keine unzulässigen Inhalte enthalten sind – freigegeben.

Best Practices

Die folgenden Best Practices helfen dir, saubere Strukturen, wiederverwendbare Templates und stabile Systeme in einer Echtzeit-3D-Umgebung zu erstellen. Sie fokussieren Klarheit, Flexibilität und Performance, damit deine Vibes mit wachsenden Projekten skalierbar bleiben.

In wiederverwendbaren Mustern / Komponenten denken
Baue Templates und Komponenten modular auf, damit Vibes mitwachsen und sich weiterentwickeln können.

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

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

Expose inputs wie:

• Boxen pro Ebene
• Boxgröße
• Farbe / Material
• Abgerundete Kanten
• Abstand

Jede Pyramide wird dynamisch auf Basis dieser Eigenschaften generiert.

So kannst du:

• Mehrere Pyramiden überall im 3D-Raum platzieren
• Jeder Pyramide unterschiedliche Materialien oder Proportionen geben
• Die Struktur-Logik einmal verbessern und automatisch auf alle Pyramiden anwenden

Prinzip:
Konstruiere Geometrie nicht immer wieder manuell.
Baue stattdessen eine konfigurierbare 3D-Generator-Komponente.

Aufgaben in kleine Schritte aufteilen
Starte einfach, dann iteriere.

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

Anstatt sofort ein komplexes Skript mit Animation, Materialien, Licht und Physik zu erstellen:

1. Erzeuge zuerst gestapelte Boxen.
2. Füge dann Abstandssteuerungen hinzu.
3. Füge danach Material-Anpassung hinzu.
4. Füge anschließend Animation hinzu.

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

Prinzip:
Stabile kleine Systeme lassen sich leichter erweitern als instabile komplexe.

Nur sinnvolle Inputs freigeben
Jede Einstellung sollte einen klaren Zweck haben.

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

Gib stattdessen frei:

• Radius
• Glow-Intensität
• Farbe
• Puls an/aus

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

In Systemen statt Objekten denken
Baue Generatoren, keine statischen Szenen.

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

Inputs:

• Flächengröße
• Steindichte
• Zufälliger Skalierungsbereich
• Zufällige Rotation

Das System verteilt Steine automatisch im 3D-Raum.

Prinzip:
Entwickle Logik, die automatisch Variationen erzeugt, statt jedes Mesh von Hand zu platzieren.