← ← Zurück zu Gedanken AI

Von null zur Live-App in 24 Stunden: Praktische Anleitung zum Vibe Coding mit Cursor AI

Veröffentlicht Februar 2026

Veröffentlicht im TEN INVENT Blog · Februar 2026

Einführung

Du hast eine App-Idee. Vielleicht ein internes Dashboard, vielleicht ein Produktivitätstool, vielleicht ein MVP, den du mit echten Kunden testen möchtest. Normalerweise würdest du dich daran machen, die Architektur zu planen, Frameworks auszuwählen, Docker, Kubernetes, Microservices zu konfigurieren — und drei Wochen später hast du immer noch keine funktionierende Seite.

Es gibt eine Alternative. Sie heißt Vibe Coding — ein Begriff, der von Andrej Karpathy (Mitbegründer von OpenAI) populär gemacht wurde und einen Entwicklungsstil beschreibt, bei dem du beschreibst, was du willst, und die KI den Code schreibt. Du bist der Regisseur; die KI ist das Produktionsteam.

In diesem Artikel zeige ich dir einen konkreten Workflow, mit dem du von der Idee bis zur produktiv deployten App innerhalb von 24 Stunden kommst. Nicht theoretisch. Praktisch. Mit klaren Schritten, konkreten Tools und Lektionen aus direkter Erfahrung.

Stunde 0–1: Cursor installieren und konfigurieren

Was ist Cursor?

Cursor ist ein Code-Editor, der auf VS Code basiert, aber von Grund auf für die Arbeit mit KI entwickelt wurde. Es ist kein Plugin, das oben draufgepackt wird — es ist eine IDE, in der KI einen erstenklassigen Status hat. Sie kann dein gesamtes Projekt lesen, mehrere Dateien gleichzeitig bearbeiten, Befehle im Terminal ausführen und Refactoring über den gesamten Codebase durchführen.

Installation

Gehe auf cursor.com und lade die App für dein Betriebssystem herunter.
Installiere sie wie jede andere App. Wenn du VS Code verwendet hast, wirst du dich zu Hause fühlen — Erweiterungen und Einstellungen können importiert werden.

Abonnement

Cursor hat einen kostenlosen (Hobby)-Plan mit eingeschränkter Funktionalität, aber für ernsthaftes Vibe Coding brauchst du das Pro-Abonnement ($20/Monat). Was du bekommst:

Unbegrenzte Tab-Vervollständigungen — Echtzeit-Codevorschläge
Unbegrenzter Auto-Modus — die KI wählt automatisch das beste Modell für jede Aufgabe
Agentenmodus — die KI kann mehrere Dateien bearbeiten, Befehle ausführen und vollständige Features implementieren
Zugriff auf Top-Modelle — Claude, GPT, Gemini — alles, was am besten ist

Wenn du feststellst, dass $20/Monat nicht reicht (wenig wahrscheinlich zu Beginn), kannst du später auf Pro+ ($60/Monat) oder Ultra ($200/Monat) upgraden.

Tipp: Starte mit Pro. Beobachte deine Nutzung für eine Woche. Upgrade nur, wenn du ständig an Grenzen stößt.

Erste Schritte in Cursor

Nach der Installation:

Öffne Cursor und verbinde dein GitHub-Konto.
Lerne die drei Hauptmodi kennen:
- Ask Mode (Ctrl/Cmd + L) — frage die KI, erhalte Antworten und Vorschläge ohne automatische Änderungen
- Agent Mode (Ctrl/Cmd + I) — die KI implementiert autonom: erstellt Dateien, bearbeitet Code, führt Befehle aus
- Tab completions — Inline-Vorschläge beim Tippen, mit Tab akzeptieren
Konfiguriere Cursor Rules — permanente Anweisungen, die die KI in deinem Projekt befolgt. Erstelle eine .cursorrules-Datei im Projektroot.

Stunde 1–3: Wähle einen einfachen Tech-Stack (und mach es dir nicht zu kompliziert!)

Die goldene Regel: Monolith schlägt Microservices

Dies ist wahrscheinlich die wichtigste Entscheidung, die du triffst. Und der häufigste Fehler von Entwicklern (und KIs) ist es, die Architektur zu über-ingenieurieren.

Du brauchst nicht:

Docker (nicht für ein MVP)
Kubernetes (absolut nicht)
Microservices (vielleicht in 2 Jahren)
Verteilte Datenbanken
Message Queues
15 Dienste, die miteinander kommunizieren

Du brauchst:

Ein Full-Stack-Framework
Eine Datenbank
Einen einfachen Hosting-Dienst

Empfohlene Stacks für Vibe Coding

Hier ist, was am besten mit der KI funktioniert — Stacks, die die Modelle sehr gut aus den Trainingsdaten kennen:

Option 1: Next.js + Supabase (KI-freundlichste)

Next.js — React-Framework mit Server-Side Rendering, API-Routen und integriertem Routing
Supabase — PostgreSQL-Datenbank mit Authentifizierung, Speicher und automatischer API
Tailwind CSS — Utility-first Styling (KI generiert Tailwind ausgezeichnet)
Vercel — One-Click Deploy, kostenlos für persönliche Projekte

Option 2: Laravel + Inertia.js + React (ideal wenn du PHP bevorzugst)

Laravel — reifes PHP-Framework, ausgezeichnete Dokumentation
Inertia.js — Brücke zwischen Laravel-Backend und React/Vue-Frontend
SQLite oder PostgreSQL — einfache Datenbank
Laravel Forge oder Railway — einfacher Deploy

Option 3: SvelteKit + Prisma + SQLite (minimalistisch)

SvelteKit — modernes Framework, schnell, minimaler Code
Prisma — intuitives ORM für Datenbanken
SQLite — Null-Konfiguration für Entwicklung
Vercel oder Netlify — automatischer Deploy

Warum Einfachheit wichtig ist?

KI generiert besseren Code, wenn der Stack einfach ist. Je weniger Abhängigkeiten und Abstraktionsschichten du hast, desto mehr:

Macht die KI weniger Fehler
Ist das Debuggen schneller
Bleibt der Cursor-Kontext fokussiert
Kannst du schneller liefern

Praktische Regel: Wenn du deinen Stack nicht in 30 Sekunden erklären kannst, ist er zu kompliziert für Vibe Coding.

Projektinitialisierung

Öffne das Terminal in Cursor und erstelle das Projekt. Beispiel mit Next.js:

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
cd my-app

Initialisiere Git sofort:

git init
git add .
git commit -m "initial setup"

Verbinde mit einem GitHub-Repo:

gh repo create my-app --public --source=. --push

Ab diesem Moment = jedes signifikante Fortschritt = ein Commit. Du wirst diese Historie brauchen.

Stunde 3–12: Schreibe gute Prompts und teile sie strategisch

Dies ist das Herzstück des Vibe Codings. Du schreibst nicht Code — du schreibst Anweisungen. Und die Qualität deiner Anweisungen bestimmt die Qualität des generierten Codes.

Prinzip #1: Nicht alles auf einmal verlangen

Der größte Fehler:

❌ "Baue mir eine Task-Management-App mit Authentifizierung, Dashboard, vollständigem CRUD, Benachrichtigungen und PDF-Export."

Das ist "draw the rest of the owl". Die KI wird etwas generieren, aber es wird fragil, voller Abkürzungen und schwer zu debuggen sein.

Stattdessen in kleine logische Schritte aufteilen:

✅ Schritt 1: "Erstelle das Datenmodell für eine Task-Management-App. Ich brauche: User (Name, E-Mail, Passwort), Project (Name, Beschreibung, Besitzer), Task (Titel, Beschreibung, Status, Priorität, Assignee, Projekt). Verwende Prisma als ORM mit SQLite."

✅ Schritt 2: "Erstelle die Authentifizierungsseite mit Login und Register, unter Verwendung von NextAuth.js mit Credentials-Provider. Styling mit Tailwind, minimalistisches und sauberes Design."

✅ Schritt 3: "Erstelle ein Dashboard, das die Projekte des eingeloggten Benutzers anzeigt. Jedes Projekt ist eine Karte mit Name, kurzer Beschreibung und Anzahl der Tasks. Füge einen 'Neues Projekt'-Button hinzu."

Jeder Schritt muss klein genug sein, damit die KI ihn im Kontext halten kann (Kontext ist begrenzt!) und klar genug, damit es keine Ambiguität gibt.

Prinzip #2: Ask Mode für Planung, Agent Mode für Ausführung

Ein leistungsfähiger Workflow:

Ask Mode — beschreibe, was du bauen willst und frage die KI nach einem Schritt-für-Schritt-Plan
Überprüfe den Plan, passe ihn bei Bedarf an
Agent Mode — gib jeden Schritt aus dem Plan einzeln ein
Teste nach jedem Schritt
Committe nach jeder fertigen Funktion

Prinzip #3: Expliziten Kontext liefern

KI liest nicht in Gedanken. Je spezifischer du bist, desto besser das Ergebnis. Konkrete Techniken:

Referenzen mit @:

@filename — Referenz zu einer bestimmten Datei im Projekt
@codebase — die KI analysiert das gesamte Projekt
@docs — Referenz zu externer Dokumentation

Struktur eines guten Prompts:

Kontext: Ich arbeite an einer Next.js Task-Management-App.
Ich habe bereits funktionale Authentifizierung und konfigurierte Datenmodelle.

Aufgabe: Erstelle die Detailseite für ein einzelnes Projekt.

Anforderungen:
- Route: /projects/[id]
- Zeige Projektname und Beschreibung
- Liste Tasks als Kanban-Board (Spalten: To Do, In Progress, Done)
- Jeder Task ist eine dragbare Karte zwischen Spalten
- Verwende @dnd-kit für Drag and Drop
- Styling mit Tailwind, sauberes Design

Relevante Dateien: @schema.prisma @layout.tsx

Verwende keine zusätzlichen Bibliotheken ohne zu fragen.

Prinzip #4: Wenn etwas nicht funktioniert, gib den Kontext zum Fehler

Sage nicht einfach "funktioniert nicht". Mache dies:

"Ich erhalte diesen Fehler beim Versuch, /projects/1 aufzurufen: [ganzen Fehler einfügen]. Ich habe überprüft und Projekt mit ID 1 existiert in der Datenbank. Ich denke das Problem ist Server- vs Client-Komponente. Kannst du调查en?"

Wenn es ein visuelles Problem ist, mache einen Screenshot und füge ihn direkt in den Cursor-Chat ein (ja, sie versteht Bilder).

Prinzip #5: Konfiguriere Cursor Rules

Erstelle eine .cursorrules-Datei im Projektroot:

Du bist ein Senior-Entwickler spezialisiert auf Next.js 14+ mit App Router.

Regeln:
- Verwende striktes TypeScript, kein any
- Server-Komponenten standardmäßig, Client nur wenn nötig
- Tailwind für Styling, kein separates CSS
- Namenskonvention: camelCase für Variablen, PascalCase für Komponenten
- Fehlerbehandlung mit try/catch in allen async-Operationen
- Kommentare in deutscher Sprache
- Commit-Messages in englischer Sprache, conventional commits Format

Stack: Next.js 14, TypeScript, Tailwind CSS, Prisma, SQLite, NextAuth.js

Diese Regeln werden automatisch in jeden Prompt eingefügt und gewährleisten Konsistenz über das gesamte Projekt.

Prinzip #6: Teile deine Arbeitssitzungen

Der KI-Kontext verschlechtert sich mit zunehmender Gesprächslänge. Nach jedem 15-20 Nachrichten (oder wenn du die Funktionalität radikal änderst), öffne einen neuen Chat (Cmd/Ctrl + T). Cursor behält den Zugriff auf das gesamte Projekt, aber das Gespräch ist frisch.

Stunde 12–18: Iteration, Testing, Polishing

Vibe Coding Entwicklungszyklus

Dies ist der natürliche Rhythmus:

Prompt → Generierung → Testen → Feedback → Anpassung → Commit → Wiederholen

Ein paar Tipps für diese Phase:

Teste im Browser nach jeder größeren Änderung. Lass die KI nicht 5 Funktionen generieren, ohne eine zu überprüfen. Wenn es nicht funktioniert, ist das Rollback schmerzhaft.

Nutze Checkpoints. Cursor hat einen "Restore checkpoint"-Button neben jeder Chat-Nachricht. Wenn die KI etwas zerbrochen hat, kannst du mit einem Klick zum vorherigen Zustand zurückkehren.

Refaktoriere auf dem Weg. Periodisch frage die KI:

"Analysiere aktuellen Code aus @codebase. Identifiziere Duplikate, Inkonsistenzen oder Muster, die refaktorisiert werden sollten. Mach keine Änderungen, liste sie nur auf."

Dann bearbeite sie eine nach der anderen.

Ignoriere keine Warnungen. Wenn die KI Code generiert, der "funktioniert aber Warnungen hat", behebe die Warnungen jetzt. Sie werden zu Bugs später.

Stunde 18–24: Deploy mit GitHub und CI/CD

Warum GitHub + CI/CD?

Du hast den lokalen Code, er funktioniert auf deinem Rechner. Jetzt muss er online, für jeden zugänglich. Und du willst dies nicht manuell jedes Mal tun. Du willst einen Pipeline: Push zu GitHub → automatisches Testing → automatischer Deploy.

Schritt 1: Strukturiere das Repo auf GitHub

Wenn du es noch nicht getan hast, verbinde das Projekt mit GitHub:

# Wenn du das Repo noch nicht erstellt hast
gh repo create my-app --public --source=. --push

# Stelle sicher, dass du einen guten .gitignore hast
# (Next.js erstellt ihn automatisch, aber überprüfe)

Erstelle zwei Haupt-Branches:

main — Produktionscode, immer stabil
develop — Entwicklungscode

git checkout -b develop
git push -u origin develop

Workflow: du arbeitest an develop (oder Feature-Branches), machst PRs zu main, beim Merge wird automatisch deployt.

Schritt 2: Konfiguriere Deploy auf Vercel

Vercel ist die einfachste Option für Next.js (funktioniert aber auch mit React, Svelte, etc.):

Gehe auf vercel.com und erstelle ein Konto mit GitHub.
Klicke auf "Import Project" und wähle dein Repo aus.
Vercel erkennt automatisch das Framework und konfiguriert den Build.
Klicke auf "Deploy". In 60 Sekunden ist deine App live im Internet.

Von nun an deployt jeder Push zu main automatisch in die Produktion. Jeder PR erhält ein Preview-Deployment mit eindeutiger URL — perfekt zum Testen vor dem Merge.

Schritt 3: Füge GitHub Actions für CI hinzu

Auch wenn Vercel den automatischen Deploy macht, willst du eine CI-Ebene, die Code vor dem Deploy überprüft. Erstelle die .github/workflows/ci.yml-Datei:

name: CI Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  quality-check:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npm run lint

      - name: Type check
        run: npx tsc --noEmit

      - name: Build
        run: npm run build

Was dieser Workflow tut:

Bei jedem Push zu main oder develop, und bei jedem Pull Request:
- Installiert die Abhängigkeiten
- Führt den Linter aus (prüft Code-Stil)
- Überprüft TypeScript-Typen
- Versucht einen vollständigen Build

Wenn einer dieser Schritte fehlschlägt, wird der PR mit ❌ markiert und deployt nicht.

Schritt 4: Der vollständige Workflow

Hier ist, wie der Ablauf vom Commit zur Produktion aussieht:

Du schreibst Code in Cursor
       ↓
git add . && git commit -m "feat: add task board"
       ↓
git push origin develop
       ↓
GitHub Actions führt CI aus (lint, types, build)
       ↓
Erstelle Pull Request: develop → main
       ↓
Vercel erstellt Preview-Deployment (einzigartige URL zum Testen)
       ↓
Du überprüfst das Preview, merge PR
       ↓
Vercel deployt automatisch in die Produktion
       ↓
App ist live! 🚀

Bonus: Umgebungsvariablen

Wenn deine App API-Schlüssel, Datenbank-Anmeldeinformationen oder andere Geheimnisse verwendet:

Lokal: .env.local-Datei (zum .gitignore hinzugefügt, nicht auf GitHub hochgeladen)
Vercel: Settings → Environment Variables → füge jede Variable hinzu
GitHub Actions: Settings → Secrets and variables → Actions → füge die erforderlichen Geheimnisse hinzu

Wichtig: Lege niemals API-Schlüssel oder Passwörter direkt in den Code. Verwende immer Umgebungsvariablen.

Zusammenfassung: 24-Stunden-Timeline

| Intervall | Aktivität | Ergebnis | |-----------|-----------|----------| | Stunde 0–1 | Cursor installieren, Pro-Abonnement, Einarbeitung | Konfiguriertes IDE, aktives Konto | | Stunde 1–3 | Tech-Stack wählen, Projekt initialisieren, GitHub-Repo | Funktionierendes lokales Projekt, verbundenes Repo | | Stunde 3–12 | Entwicklung mit strategischen Prompts (Datenmodelle → Authentifizierung → UI → Logik) | Hauptfunktionen implementiert | | Stunde 12–18 | Iteration, Debugging, Polishing, Refactoring | Stabile und getestete lokale App | | Stunde 18–24 | CI/CD konfigurieren, Vercel deploy, Produktionstest | Live-App im Internet mit automatischem Deploy |

Endgültige Lektionen

Vibe Coding bedeutet nicht schlechten Code. Es bedeutet intelligent generierten Code, geleitet von einem Entwickler, der weiß, was er will. Die KI schreibt, du denkst, überprüfst und entscheidest.

Kleine Prompts schlagen große Prompts. Ein 3-Zeilen-Prompt, das eine klare Funktion anfordert, produziert besseren Code als ein 30-Zeilen-Prompt, das eine komplette App anfordert.

Committe oft, teste oft. Git ist deine Sicherheitsnetz. Jede funktionierende Funktion = ein Commit. Akkumuliere nicht 4 Stunden Arbeit ohne Commit.

Habe keine Bindung zum Code. Wenn die KI etwas generiert hat, das nach 2-3 Versuchen zur Reparatur nicht funktioniert, mache einen Rollback und formuliere den Prompt neu. Es ist schneller als endlos zu reparieren.

Einfacher Stack gewinnt. Ein Monolith auf Next.js mit Supabase oder SQLite schlägt eine Microservices-Architektur jeden Tag der Woche — zumindest für ein MVP. Du kannst später komplizierter werden, wenn du echte Benutzer und echte Skalierungsprobleme hast.

Die KI ist dein Assistent, nicht dein Chef. Überprüfe generierten Code. Frage nach, warum er bestimmte Entscheidungen getroffen hat. Lerne aus dem, was es generiert. Der beste Vibe-Coder ist nicht der, der blind akzeptiert, sondern der, der intelligent leitet.

Dieser Artikel ist Teil der technischen Publikationsreihe des TEN INVENT Blogs. Wenn du eine App-Idee hast und sie in die Realität umsetzen möchtest, kontaktiere uns.