Die richtigen Tools waehlen

Das Tool das du waehlst praegt dein gesamtes Vibe-Coding-Erlebnis. Waehle falsch und du kaempfst mehr mit dem Tool als dass du baust. Waehle richtig und Bauen fuehlt sich an wie ein Gespraech.

Diese Lektion ordnet jedes grosse Tool dem richtigen Anwendungsfall zu — damit du sofort loslegen kannst.

Die Entscheidungsmatrix

KI-App-Builder (kein Code noetig)

Lovable

Am besten fuer: Non-Technical-Gruender die MVPs bauen.

Lovable nimmt eine natuerlichsprachliche Beschreibung und generiert eine komplette Web-Anwendung — Frontend, Backend, Datenbank und Hosting. Du interagierst komplett ueber Gespraech.

So startest du:

1. Geh auf lovable.dev und erstelle ein Konto
2. Beschreibe deine App im Chat: “Baue eine Aufgabenverwaltung in der Nutzer Projekte erstellen, Aufgaben mit Deadlines hinzufuegen und sie als erledigt markieren koennen”
3. Lovable generiert die komplette App und zeigt eine Live-Vorschau
4. Iteriere: “Fueg einen Dark-Mode-Toggle hinzu” oder “Aendere das Layout zu einem Kanban-Board”

Bolt.new

Am besten fuer: Schnelles Prototyping direkt im Browser.

Bolt.new laeuft komplett im Browser — kein Download, kein Setup. Beschreibung tippen, laufende App bekommen.

So startest du:

1. Geh auf bolt.new
2. Tippe deine App-Beschreibung ein
3. Sieh zu wie sie in Echtzeit gebaut wird
4. Code herunterladen oder direkt deployen

Replit Agent

Am besten fuer: Programmieren lernen waehrend du baust.

Replit kombiniert einen KI-Agenten mit einer vollstaendigen Entwicklungsumgebung. Es baut die App, zeigt dir aber den Code und erklaert was es getan hat.

✅ Quick Check: Dein Freund will eine Landing Page fuer sein kleines Unternehmen bauen, hat aber noch nie Code geschrieben. Welches Tool wuerdest du empfehlen? (Antwort: Lovable oder Bolt.new — beide bauen komplette Apps aus natuerlicher Sprache ohne Coding-Kenntnisse. Fuer eine einfache Landing Page ist Bolt.new vielleicht sogar schneller weil es komplett im Browser laeuft ohne Account.)

KI-Code-Editoren (Entwickler-Tools)

Cursor

Am besten fuer: Entwickler die KI in ihren Editor integriert haben wollen.

Cursor ist ein Fork von VS Code mit eingebauter KI. Es versteht deine gesamte Codebase und kann Multi-Datei-Aenderungen per Gespraech vornehmen.

Kern-Features:

• Composer-Modus: Beschreibe ein Feature, Cursor editiert mehrere Dateien gleichzeitig
• Tab-Completion: KI schlaegt Code vor waehrend du tippst
• Chat: Stelle Fragen ueber deine Codebase
• Rules-Dateien: .cursorrules teilt der KI deine Projektkonventionen mit

Claude Code

Am besten fuer: Terminal-native Entwickler die KI mit direktem Dateizugriff wollen.

Claude Code laeuft in deinem Terminal. Es kann Dateien lesen, schreiben und ausfuehren — plus Befehle wie git, npm und Tests starten.

So startest du:

1. Installiere: npm install -g @anthropic-ai/claude-code
2. Navigiere zu deinem Projektverzeichnis
3. Starte mit claude
4. Beschreibe was du bauen oder aendern willst

Rules-Dateien einrichten

Rules-Dateien sorgen dafuer dass die KI dein Projekt automatisch versteht:

Fuer Cursor (.cursorrules im Projekt-Root):

Dies ist ein Next.js 14 Projekt mit TypeScript und Tailwind CSS.
Verwende das App-Router-Pattern.
Komponenten in /components, Seiten in /app.
Nutze Zod fuer Formular-Validierung.
Immer Error Handling und Loading States hinzufuegen.

Fuer Claude Code (.claude/rules-Dateien):

Tech-Stack: React + TypeScript + Tailwind CSS
Datenbank: Supabase mit Row Level Security
API: Next.js API Routes
Tests: Vitest fuer Unit, Playwright fuer E2E
Immer TypeScript, nie JavaScript.

✅ Quick Check: Warum solltest du eine Rules-Datei einrichten bevor du ein Vibe-Coding-Projekt startest? (Antwort: Die Rules-Datei wird bei jeder KI-Interaktion automatisch einbezogen. Ohne sie muesstest du in jedem Prompt “benutze TypeScript” und “folge Tailwind-Konventionen” wiederholen. Mit ihr kennt die KI schon deinen Stack und deine Konventionen — jeder Prompt produziert Code der zu deinem Projekt passt.)

Dein erster Build: Hello World

Egal welches Tool du gewaehlt hast, probier das jetzt:

Fuer Lovable/Bolt.new:

“Baue eine persoenliche Portfolio-Seite mit meinem Namen oben, einer kurzen Bio, einem Bereich fuer 3 Projekte mit Titeln und Beschreibungen, und einem Kontakt-Bereich mit E-Mail und LinkedIn-Links.”

Fuer Cursor/Claude Code:

“Erstelle eine einfache Next.js-Seite mit einer Hero-Section die meinen Namen und Titel enthaelt, einem Projekt-Grid mit 3 Platzhalter-Karten und einem Footer mit Kontakt-Links. Nutze Tailwind CSS fuers Styling.”

Starte es. Sieh das Ergebnis. Dann aendere etwas: “Mach den Hintergrund dunkel” oder “Fueg einen Farbverlauf zur Hero-Section hinzu.”

Dieses Hin und Her — beschreiben, Ergebnis sehen, iterieren — ist der Kern-Loop von Vibe Coding. Jede Lektion baut darauf auf.

Uebung

1. Waehle ein Tool aus der Matrix basierend auf deinem Erfahrungslevel
2. Richte es ein (Konto erstellen oder installieren)
3. Baue die “Hello World” Portfolio-Seite von oben
4. Mache 3 Aenderungen per Gespraech (Farbe, Layout, Inhalt)
5. Falls du Cursor oder Claude Code nutzt: Erstelle eine Rules-Datei fuer dein Projekt

Key Takeaways

• KI-App-Builder (Lovable, Bolt.new, Replit) brauchen null Coding-Erfahrung
• KI-Code-Editoren (Cursor, Claude Code, Windsurf) geben Entwicklern mehr Kontrolle
• Rules-Dateien teilen der KI deine Projektkonventionen mit — richte sie zuerst ein
• Der Kern-Loop ist: beschreiben → Ergebnis sehen → iterieren
• Starte mit dem Tool das zu deinem Erfahrungslevel passt, upgrade spaeter

Up Next

In der naechsten Lektion lernst du die Prompting-Techniken die den Unterschied machen zwischen “es geht staendig kaputt” und “es funktioniert beim ersten Versuch.”