Vibe Coding mit Claude: Claude Chat, Claude Code und Bauen aus Claude

Vibe Coding mit Claude funktioniert auf drei Wegen. Der Claude-Chat baut kleine Apps auf einer Seite direkt in der Unterhaltung. Claude Code ist ein Agent, der ein echtes Projekt auf deinem Rechner oder in der Cloud bearbeitet, für Leute, die mit einer Codebasis vertraut sind. Und Claude plus ein App-Builder über MCP lässt dich eine Full-Stack-App mit Datenbank bauen, in der Vorschau ansehen und veröffentlichen, ohne die Claude-Unterhaltung zu verlassen. Was passt, hängt davon ab, was du baust und wie viel der Einrichtung du selbst tragen willst.

Dieser Guide behandelt alle drei, mit Prompts und den Grenzen jedes Wegs. Zur Idee dahinter siehe Was ist Vibe Coding.

Option 1: Claude-Chat für kleine Tools

In der normalen Claude-App kannst du um etwas Interaktives bitten, und Claude schreibt es als Code, der direkt neben der Unterhaltung läuft: ein Rechner, ein Karteikarten-Training, ein kleines Spiel, ein Diagramm aus eingefügten Daten. Du änderst es durch Antworten.

Ein guter Prompt ist hier in sich geschlossen:

Mach ein interaktives Tool, in das ich eine Liste von Ausgaben einfüge (eine pro Zeile, „Betrag, Kategorie“) und das ein Kreisdiagramm nach Kategorie und eine Summe zeigt. Füge eine Beispielliste bei, damit es sofort funktioniert.

Wofür es sich hervorragend eignet: schnelle Tools auf einer Seite, die du selbst nutzt oder als Link teilst, und zum Lernen, weil du Claude jeden Teil erklären lassen kannst.

Wo es endet: Diese laufen in der Umgebung von Claude. Es gibt keine eigene dauerhafte Datenbank, keine Nutzerkonten, keine eigene Domain und keinen Ort, an dem ein Server laufen könnte. Wenn eine Idee eine Seite sprengt, brauchst du eine der nächsten zwei Optionen.

Option 2: Claude Code für eine echte Codebasis

Claude Code ist der Coding-Agent von Anthropic. Er arbeitet im Terminal, in Editoren wie VS Code und JetBrains, in einer Desktop-App und im Web. Du gibst ihm eine Aufgabe in normaler Sprache, und er liest dein Projekt, bearbeitet Dateien, führt Befehle und Tests aus und zeigt dir, was sich geändert hat. Zum Zeitpunkt des Schreibens ist er in den Bezahlplänen von Claude enthalten und über die API verfügbar; aktuelle Pläne findest du auf der Website von Anthropic.

Eine typische Vibe-Coding-Sitzung sieht so aus:

Füge eine Seite /bookings hinzu, die die Buchungen des aktuellen Nutzers auflistet, die neuesten zuerst, mit einem Stornieren-Button, der weniger als zwei Stunden vor dem Kurs deaktiviert ist. Nutze den vorhandenen Auth-Helper. Führe am Ende die Tests aus.

Wofür er sich hervorragend eignet: Entwickler und technische Gründer, die schon ein Projekt haben, volle Kontrolle über den Stack wollen und es gern selbst ausführen und deployen. Er ist stark bei Änderungen über mehrere Dateien und beim Einhalten der Konventionen, die in einer Codebasis schon gelten.

Wo er mehr Arbeit bedeutet: Du brauchst ein Entwicklungs-Setup, und Claude Code hostet nichts. Datenbanken, Secrets, Deployment und Domains organisierst du selbst. Einen Vergleich mit anderen Entwickler-Tools findest du unter Cursor vs. Windsurf vs. Claude Code.

Gewohnheiten, die mit Claude Code gut funktionieren

• Bitte vor großen Änderungen um einen Plan. „Skizziere die Schritte und die Dateien, die du anfasst, und warte dann.“
• Führe eine Projekt-Notizdatei. Claude Code liest eine Projekt-Gedächtnisdatei (CLAUDE.md) für Konventionen, sodass du sie nicht wiederholen musst.
• Prüfe den Diff. Auch beim Vibe Coding solltest du in sensiblen Bereichen überfliegen, was sich geändert hat: Authentifizierung, Zahlungen, alles mit Nutzerdaten.
• Committe oft. Kleine Commits machen es leicht, einen schlechten Schritt rückgängig zu machen.

Option 3: Aus Claude mit Mythex bauen und veröffentlichen

Wenn du gern in Claude arbeitest, am Ende aber eine echte App willst – Datenbank, Logins, Dateispeicher, eine öffentliche URL –, kannst du Claude über MCP mit einem KI-App-Builder verbinden, dem Protokoll, mit dem Claude anderswo gehostete Tools nutzen kann. (Was MCP ist erklärt es in einfachen Worten.)

Mythex betreibt einen MCP-Server. Sobald er verbunden ist, kann Claude ein Mythex-Projekt anlegen, den Code in einer privaten Cloud-Sandbox schreiben, eine Live-Vorschau starten, eine Datenbank und Dateispeicher anhängen und die App veröffentlichen. Jedes Ergebnis enthält einen Link, über den du das Projekt live in Mythex verfolgen kannst.

So verbindest du

1. Öffne in Mythex die Kontoeinstellungen und kopiere die MCP-URL: https://mcp.mythex.ai/mcp.
2. Gehe in Claude zu Einstellungen → Connectors → Benutzerdefinierten Connector hinzufügen, füge die URL ein und klicke auf Verbinden.
3. Eine Mythex-Seite öffnet sich. Melde dich bei Bedarf an und wähle Zugriff erlauben. Es gibt keinen API-Schlüssel zum Kopieren.
4. Bitte in Claude um das, was du willst.

Jeder kann mit jedem Plan verbinden; die Sandbox-Tools brauchen Mythex Pro ($25 im Monat). Die Claude-Nutzung bleibt in deinem Claude-Plan, und Sandbox-Zeit, Vorschauen und Hosting kommen aus deinen Mythex-Credits. Die vollständige Anleitung steht unter Mythex-Apps aus Claude, Cursor oder Codex bauen.

Ein erster Prompt zum Ausprobieren

Lege mit Mythex ein neues Projekt an: ein einfaches CRM für mein kleines Designstudio. Kontakte mit Name, Firma, E-Mail, Telefon, Phase (Lead, aktiv, ehemalig) und Notizen. Eine Board-Ansicht nach Phase, in der ich Kontakte zwischen Spalten ziehen kann, und ein Suchfeld. Füge eine Datenbank hinzu, damit die Daten erhalten bleiben, und ein Login, damit nur ich sie sehe. Starte die Vorschau und schick mir den Link, wenn sie läuft.

Dann iteriere in derselben Unterhaltung, eine Änderung nach der anderen:

Füge im Mythex-Projekt den Kontakten ein Datum „nächste Nachfassaktion“ hinzu und auf dem Startbildschirm eine Liste der diese Woche fälligen Nachfassaktionen. Prüfe es in der Vorschau.

Veröffentliche das CRM und gib mir die Live-URL.

Wofür es sich hervorragend eignet: Leute, die in Claude am besten denken und das Ergebnis gehostet und mit Datenbank haben wollen, ohne Server aufzusetzen. Du kannst auch wechseln: in Claude anfangen und im Mythex-Chat weitermachen oder umgekehrt, denn es ist dasselbe Projekt.

Welchen Weg solltest du nehmen?

Prompt-Tipps, die mit Claude wichtiger sind

Claude befolgt detaillierte Anweisungen genau, und das gilt in beide Richtungen.

• Sag, was nicht geändert werden soll. „Behalte Layout und Farben; ändere nur die Formularvalidierung.“
• Gib eine Definition von „fertig“. „Fertig heißt: Ein neuer Kontakt wird gespeichert, erscheint im Board und übersteht ein Neuladen.“
• Lass es seine Arbeit prüfen. In Claude Code heißt das, Tests auszuführen; mit Mythex heißt es, die Live-Vorschau zu prüfen oder einen Browser-Test laufen zu lassen.
• Bitte um Erklärungen in normalen Worten, wenn du eine Änderung nicht verstehst. Das ist der schnellste Weg zu lernen, was deine App tut.

Unser Spickzettel mit Vibe-Coding-Prompts enthält 30 Prompts, die in allen drei Setups funktionieren.

Sicherheitshinweise für alle drei

• Füge keine echten API-Schlüssel oder Passwörter in eine Claude-Unterhaltung ein. Mit Mythex kommen Secrets in die Secret-Einstellungen des Projekts, und Claude sieht deren Namen, aber nicht die Werte.
• Prüfe vor dem Veröffentlichen, wer was sehen kann. „Kann ein angemeldeter Nutzer die Datensätze eines anderen Nutzers öffnen?“ ist die erste Frage.
• Prüfe sensiblen Code. Claude ist ein fähiger Programmierer, aber Vibe Coding heißt, dass du nicht jede Zeile liest, also such die Zeilen aus, auf die es ankommt. Siehe Ist Vibe Coding sicher?.

Wenn du auch ChatGPT nutzt, behandelt der passende Guide Vibe Coding mit ChatGPT und Codex. Und wenn du die Einrichtung ganz überspringen willst, öffne den KI-App-Builder und beschreibe dort deine App.

Fragen