01 / 17
oder Space zum Navigieren
Glossar • Die wichtigsten Begriffe

Vibe Coding
Glossar

Die wichtigsten Begriffe — erklärt beim Bauen einer echten App

Plattformunabhängig: Lovable, vibecode.dev, Replit, Claude Code & mehr

Was ist ein PRD?

1

PRD = Product Requirements Document — beschreibt, was gebaut werden soll

2

Enthält Ziele, Features, Zielgruppe, Design-Vorgaben und technische Anforderungen

3

Wird dem KI-Agenten als initialer Blueprint übergeben

4

Je detaillierter das PRD, desto besser das Ergebnis beim ersten Prompt

Ein gutes PRD spart dutzende Follow-up-Prompts — investiere Zeit in die Planung.

Frontend — Was der Nutzer sieht

Alles, was der Nutzer sieht und womit er interagiert

Buttons, Text, Bilder, Formulare, Layouts

Läuft im Browser des Nutzers

Kann durch Screenshots + Prompts iteriert werden

💻
Browser
🎨
Frontend
👤
Nutzer

Backend — Hinter den Kulissen

Serverseitige Logik, unsichtbar für Nutzer

Datenverarbeitung, API-Aufrufe, Authentifizierung

API-Keys werden sicher im Backend gespeichert

Der KI-Coding-Agent richtet das Backend automatisch ein

💻
web-app/
Frontend-Code (was der Nutzer sieht)
backend/
Server-Logik (unsichtbar, aber essenziell)

Im Code-Editor sieht man zwei Ordner: Frontend und Backend — diese Trennung ist beim Deployment wichtig.

Authentifizierung & Datenbank

Authentifizierung

Wer bist du? Login, Sign-up, Passwort-Reset — verifiziert die Identität eines Nutzers.

Datenbank

Wo alle Daten gespeichert werden — Tasks, Nachrichten, Nutzerprofile.

👤
Nutzer
🔑
Authentifizierung
💾
Datenbank
📄
Personalisierte Daten

Beides hängt zusammen: Wer eingeloggt ist, bestimmt, auf welche Daten zugegriffen wird.

APIs — Schnittstellen zu externen Diensten

API = Schnittstelle, über die Apps mit externen Diensten kommunizieren

Beispiele: GPT 5.2 API, Gemini 3 Pro API, Anthropic API

API-Routen liegen sicher im Backend

Mehrere APIs können per Prompt hinzugefügt werden

🤖
OpenAI
GPT 5.2 API
🔮
Google
Gemini 3 Pro API
🧠
Anthropic
Claude API

Assets — Dateien für dein Projekt

Assets = externe Dateien, die ins Projekt eingebunden werden

Bilder: Logos, Icons, Fotos — können auch KI-generiert sein

Videos: Erklärvideos, Hintergrundvideos, Animationen

Sound: Benachrichtigungstöne, Hintergrundmusik, UI-Feedback

Werden meist im Frontend eingebunden und angezeigt

🎨
Bilder
PNG, SVG, JPG, WebP
🎥
Videos
MP4, WebM
🎵
Sound
MP3, WAV, OGG

Kontext — Das Wissen des Agenten

1

Kontext = alles, was der Agent über das Projekt weiß

2

Wege, Kontext zu liefern: File Upload, MCP Server anbinden, URLs teilen

3

Beispiele: Dokumentationen, Design- & Brandrichtlinien, Web-URLs

Context Clear = Kontext zurücksetzen bei neuem Feature

Best Practice: Kontext löschen, wenn man an etwas komplett Neuem arbeitet — der Agent bekommt einen frischen Start.

Je mehr relevanten Kontext der Agent hat, desto bessere Ergebnisse liefert er.

Agent Skills — Erweiterbare Fähigkeiten

Skills = zusätzliche Fähigkeiten, die der Agent per Slash-Command aktiviert

Coding-Beispiele: /systematic-debugging, /frontend-design, /simplify, /commit

Skills können per Prompt erstellt werden (Skill-Creator-Skill)

Skill-Datenbanken: skillsmp.com und skills.sh zum Entdecken & Installieren

Skills erweitern den Agent gezielt — wie Plugins für spezialisierte Aufgaben.

Error & Bug

Error

Fehler, der den Code am Laufen hindert

Fix: Fehlermeldung kopieren → in Prompt einfügen → „Please fix“

Bug

Fehler, der nicht als Fehler erkannt wird

App läuft, aber etwas stimmt nicht

Fix: „Wenn ich X mache, passiert Y. Ich möchte Z.“

Je mehr Kontext man liefert, desto besser kann die KI das Problem lösen.

Logs — Das Notizbuch deiner App

Nachrichten, die die App beim Laufen ausgibt

Zeigen, was hinter den Kulissen passiert

Per Prompt aktivierbar: „Bitte erstelle detaillierte Logs“

Hilfreich für Debugging: Log-Zeilen kopieren → in Prompt einfügen

Zeitstempel Event Status
14:22:01 AI Stream gestartet
14:22:03 Websuche ausgeführt
14:22:08 Antwort generiert

Schema & Tabellen

Schema = Struktur, die definiert, wie Daten organisiert sind

Tabelle = Sammlung zusammengehöriger Daten (wie ein Spreadsheet)

Jede Zeile = ein Datensatz mit eindeutiger ID

ID Titel User-ID Erstellt
1 Task Alpha usr_42 2026-03-01
2 Task Beta usr_42 2026-03-02
3 Task Gamma usr_17 2026-03-03

Datenbank-Verständnis ist eine der unterschätztesten Skills im Vibe Coding.

Dummy Data — Prototyping mit Fake-Daten

1

Dummy Data = künstliche Testdaten zum Testen und Prototyping

2

Ideal für Designer: Design zuerst, echte Daten später

3

Prompt: „Prototype a finance dashboard, use dummy data“

💾
Dummy Data
🎨
Design iterieren
📄
Echte Daten

Perfekt für Prototyping — man muss nicht erst echte Daten sammeln.

Environment Variables & Third-Party APIs

Environment Variables

Geheime Werte (API-Keys, Passwörter) außerhalb des Codes

Werden sicher im Backend gespeichert

Beispiel: ANTHROPIC_API_KEY

Third-Party API

Externer Dienst wie Stripe, Twilio, OpenAI

API-Key holen → als ENV Variable speichern

Docs an Agent geben → Integration implementieren

API-Keys niemals direkt im Code speichern — immer als Environment Variable!

Webhooks — Trigger zwischen Apps

Webhook = URL, an die externe Dienste Daten senden können

Funktionieren wie Trigger (vergleichbar mit Zapier/N8N)

Echtzeit-Updates zwischen Apps möglich

💻
App A
🏹
Webhook
💻
App B
Zapier
No-Code Automation
🔄
N8N
Open-Source Workflows
💬
Slack
Messaging Integration

Deployment, Hosting & Domain

💻
Code
🚀
Deploy
📺
Server
🌐
Domain
👤
Nutzer
🚀
Deployment
App auf einen Server pushen → live im Internet
🏠
Hosting
Dienst, der die App online hält (Vercel, AWS)
🌐
Domain
Die Internetadresse (z.B. meineapp.com)

Optional: Passwortschutz aktivieren für interne Tools.

SaaS & der richtige Einstieg

Too many people try to make their first app into some sort of SaaS tool and it just doesn’t end up working. It’s like trying to be a content creator and expect to make money on your first video.
👤
Persönliches Tool
👥
Team-Tool
💰
SaaS

Nicht mit der ersten App versuchen, Geld zu verdienen!

Erst ein Tool für sich selbst bauen, ein konkretes Problem lösen, testen — dann monetarisieren.