So bauen Sie eine React-App aus einem einzigen Prompt

Aktualisiert am 17. Juli 2026 — aufgefrischt mit verifizierten Plattformdaten und dem aktuellen Modell-Lineup.

Wie baut man eine React-App aus einem einzigen Prompt?

Die vollständige Antwort: Tippen Sie eine spezifische Beschreibung der App — Layout, Seiten, Features, Datenform, Farben — in VULK. Der Prompt geht an eines von 16+ KI-Modellen (Claude Sonnet 5 ist der Default; Sie können wechseln), eingebettet in einen engineerten System-Prompt, der eine saubere React-Projektstruktur erzwingt. Das Modell streamt einen Plan und generiert dann die Dateien eine nach der anderen: ein Vite + React + TypeScript + Tailwind-Projekt mit Routing, Komponenten, State und realistischen Mock-Daten. Die App kompiliert serverseitig und rendert in einer Live-Hot-Reload-Vorschau innerhalb von 30–90 Sekunden. Sie iterieren mit Folge-Prompts und klicken dann auf Deploy für eine Live-URL auf Cloudflare Pages.

„Schnell" müssen Sie nicht glauben: Über 11.355 generierte Projekte hinweg beträgt die mediane Zeit von der Registrierung zur ersten funktionierenden App 47 Sekunden, der mediane Prompt hat nur 364 Zeichen (etwa 60 Wörter) und die mediane Build-Konversation 4 Nachrichten (VULK-Plattformdaten, Juli 2026). React + Vite ist das, womit 80,5% aller Apps auf der Plattform ausgeliefert werden. Dieser Guide behandelt, wie Sie diese 4 Nachrichten zählen lassen.

Was passiert tatsächlich, wenn Sie einen Prompt tippen?

Wenn Sie noch nie einen KI-Code-Builder benutzt haben, kann sich das Ganze wie Magie oder Unsinn anfühlen, je nach Erwartung. Also lassen Sie es mich entmystifizieren.

Sie tippen eine Beschreibung der gewünschten App. VULK sendet sie an eines von 16+ KI-Modellen (Sie wählen welches), eingebettet in einen sorgfältig engineerten System-Prompt, der dem Modell beibringt, wie man ein sauberes React-Projekt strukturiert. Das Modell streamt einen Plan zurück und generiert dann Dateien eine nach der anderen. VULK kompiliert diese Dateien auf einem Remote-Server und rendert die laufende App in einem Vorschau-Iframe. Der ganze Prozess dauert 30 bis 90 Sekunden, je nach Komplexität.

Das Ergebnis ist kein Scaffolding. Es ist kein Boilerplate. Es ist ein vollständiges Projekt mit Routing, Komponenten, State Management, Tailwind-CSS-Styling und realistischen Mock-Daten — bereit für Vorschau, Iteration und Deployment.

Was macht VULKs React-Output anders?

Bevor wir zu den Prompts kommen, will ich die technischen Entscheidungen erklären, die ich für VULKs React-Generierung getroffen habe — denn sie zählen.

Vite, nicht Create React App. CRA ist faktisch aufgegeben. Vite ist der moderne Standard — schnellere Builds, besseres Tree-Shaking, natives ESM und ein Produktions-Build, der Ihren Code wirklich optimiert. Jedes VULK-generierte React-Projekt nutzt Vite als Build-System.

TypeScript standardmäßig. Zwei Drittel von allem, was auf der Plattform generiert wird, ist typisiert: 65% aller 124.755 generierten Code-Dateien sind TypeScript/TSX (VULK-Plattformdaten, Juli 2026). Typisierter Output fängt eine ganze Klasse von KI-Generierungsfehlern zur Kompilierzeit statt zur Laufzeit ab.

Tailwind CSS standardmäßig. Utility-first CSS bedeutet, dass der generierte Code portabel und anpassbar ist und nicht vom Design-System einer Komponentenbibliothek abhängt. Sie können jeden visuellen Aspekt mit einem Folge-Prompt ändern.

Saubere Projektstruktur. VULK kippt nicht alles in App.tsx. Sie bekommen src/pages/ für Routen-Komponenten, src/components/ für wiederverwendbare UI, src/data/ für Mock-Daten und eine tailwind.config.js mit Ihrem gewünschten Farbschema. Das durchschnittliche generierte Projekt hat 20,7 Dateien und rund 1.500 Zeilen Code — viele kleine, fokussierte Dateien, kein Monolith (VULK-Plattformdaten, Juli 2026).

Produktionsreife Abhängigkeiten. React Router fürs Routing, Recharts für Diagramme, Lucide React für Icons. Das sind keine Spielzeugbibliotheken. Das ist, was professionelle React-Entwickler tatsächlich nutzen.

Wie schreibt man einen Prompt, der funktioniert?

Die Qualität Ihres Prompts bestimmt direkt die Qualität des Outputs. Ich habe inzwischen Tausende generierter Projekte gesehen, und das Muster ist klar: Spezifische Prompts produzieren gute Apps, vage Prompts produzieren generische.

Schlechter Prompt:

Bau mir einen Task-Manager.

Das gibt dem Modell fast nichts zum Arbeiten. Sie bekommen eine generische To-do-Liste mit Standardfarben.

Guter Prompt:

Baue eine Aufgabenmanagement-App mit dunkler Seitennavigation, einer Kanban-Board-Ansicht mit Drag-and-Drop-Spalten (Zu erledigen, In Arbeit, Fertig), Aufgabenkarten mit Titel, Avatar des Zuständigen, Prioritäts-Badge und Fälligkeitsdatum. Nutze ein dunkles Theme mit violetten Akzentfarben. Füge eine Suchleiste oben und ein „Neue Aufgabe"-Modal hinzu.

Das spezifiziert Layout (Sidebar + Hauptinhalt), das Kernfeature (Kanban-Board), die Datenform (Titel, Zuständiger, Priorität, Fälligkeitsdatum), Interaktionsmuster (Drag-and-Drop, Modal) und den visuellen Stil (dunkles Theme, Violett).

Fortgeschrittener Prompt:

Baue einen persönlichen Finanztracker mit drei Seiten: Dashboard, Transaktionen und Einstellungen. Das Dashboard zeigt den Gesamtsaldo, ein Balkendiagramm Einnahmen vs. Ausgaben (nutze Recharts) und aktuelle Transaktionen. Die Transaktionsseite hat eine filterbare Datentabelle mit Spalten für Datum, Beschreibung, Kategorie, Betrag und Typ. Füge ein „Transaktion hinzufügen"-Modal hinzu. Die Einstellungen haben ein Profilformular und Kategorienverwaltung. Weißes Theme mit Grün für Einnahmen und Rot für Ausgaben. Seitennavigation mit Icons.

Das definiert Seitenstruktur, Diagrammbibliothek, Datenschema und Farbsemantik. VULK generiert eine mehrseitige React-Router-App mit allem verdrahtet.

Eine nützliche Kalibrierung: Der mediane erfolgreiche Prompt auf der Plattform hat ~60 Wörter — ein kurzer, spezifischer Absatz, kein Spezifikationsdokument (VULK-Plattformdaten, Juli 2026). Decken Sie Layout, Features, Daten und Stil ab — dann Schluss.

Wie sieht der Generierungsprozess aus?

Wenn Sie Ihren Prompt absenden, sehen Sie Folgendes:

Zuerst erscheint ein Plan — eine nummerierte Liste der Schritte, die die KI ausführen wird. Das ist nicht nur Show. Der Plan hält die Generierung organisiert und verhindert, dass das Modell mittendrin den Überblick über die Architektur verliert.

Dann beginnen die Dateien, eine nach der anderen zu entstehen. Sie können sie in Echtzeit im Dateibaum links im Editor erscheinen sehen.

Ein typisches Projekt umfasst:

• index.html — Einstiegspunkt mit Meta-Tags und Font-Imports
• src/main.tsx — React-Root mit StrictMode und BrowserRouter
• src/App.tsx — Top-Level-Komponente mit Routen-Definitionen
• src/pages/ — Eine Komponente pro Seite
• src/components/ — Wiederverwendbare UI-Komponenten
• src/data/ — Mock-Daten mit realistischem Inhalt
• tailwind.config.js — Eigenes Theme passend zu Ihren Farbwünschen
• package.json — Abhängigkeiten

Wie funktioniert die Live-Vorschau?

Während die Dateien generiert werden, aktualisiert sich das Vorschau-Panel automatisch. Sie müssen nicht warten, bis die Generierung fertig ist. Die Vorschau läuft serverseitig in einer isolierten Micro-VM — es ist die tatsächlich kompilierte Anwendung mit Hot Reload, kein Screenshot oder Mockup. Weil die Kompilierung auf dem Server passiert, funktioniert es auf jedem Browser und Gerät, inklusive Safari und Mobile.

Die Vorschau ist voll interaktiv. Klicken Sie Buttons, navigieren Sie zwischen Seiten, füllen Sie Formulare aus, testen Sie das responsive Verhalten. Nutzen Sie sie, um zu erkennen, was geändert werden muss, bevor Sie den nächsten Prompt schreiben.

Wie iteriert man mit Folge-Prompts?

Die erste Generierung ist selten perfekt — und das ist Absicht. VULK ist für iterative Verfeinerung gebaut. Nach dem Prüfen der Vorschau senden Sie gezielte Folgenachrichten:

Füge der Einstellungsseite einen Dark-Mode-Toggle hinzu. Speichere die Präferenz in localStorage.

Ersetze das Balkendiagramm auf dem Dashboard durch ein Liniendiagramm. Füge einen Datumsbereich-Selektor mit Optionen für 7, 30 und 90 Tage hinzu.

Die Sidebar soll auf Bildschirmen unter 768px auf Icons-only kollabieren. Füge einen Hamburger-Menü-Button hinzu.

Jeder Folge-Prompt generiert nur die Dateien, die sich ändern müssen. VULK führt chirurgische Eingriffe durch und bewahrt alles andere. Das ist wichtig — Sie regenerieren nicht bei jeder Nachricht das gesamte Projekt.

Sie können auch Bugs fixen:

Das Modal schließt nicht, wenn ich außerhalb klicke. Füge einen Overlay-Klick-Handler hinzu.

Oder neue Features anfordern:

Füge der Transaktionsseite einen CSV-Export hinzu. Lade alle sichtbaren Zeilen als .csv-Datei herunter.

Die Hälfte aller Apps auf der Plattform ist im Grunde „ein Schuss plus ein Tweak" (Median 4 Nachrichten), aber die Projekte, in die Menschen investieren, überschreiten 25 Nachrichten — die Iterationsschleife ist da, wo gute Apps entstehen (VULK-Plattformdaten, Juli 2026).

Können Sie den Code direkt bearbeiten?

Die linke Sidebar zeigt jede Datei Ihres Projekts. Klicken Sie auf eine Datei, um ihren Quellcode direkt anzusehen und zu bearbeiten. Dieser hybride Ansatz — KI-Generierung plus manuelle Anpassungen — ist oft der schnellste Weg, genau das zu bekommen, was Sie wollen.

Ich habe VULK bewusst so gebaut. Es ist keine Blackbox. Der Code ist Standard-React, Standard-TypeScript, Standard-Tailwind. Wenn Sie React können, können Sie alles lesen, verstehen und modifizieren, was die KI produziert. Und wenn Sie React noch nicht können, ist der generierte Code eine wirklich nützliche Lernressource, weil er echten Praxis-Mustern folgt.

Wie deployt man in die Produktion?

Sobald Ihre App passt, braucht das Deployment einen Klick. Drücken Sie den Deploy-Button in der Toolbar. VULK baut Ihre App via Vite, lädt den statischen Output zu Cloudflare Pages hoch und gibt Ihnen eine Live-URL.

Die deployte App läuft auf Cloudflares globalem CDN — über 300 Edge-Standorte. Das URL-Format ist ihr-projektname.pages.dev, und Sie können später eine eigene Domain anbinden (Pro+).

Redeployment funktioniert genauso. Änderungen machen, auf Deploy klicken, die neue Version ist in Sekunden live.

Eine ehrliche plattformweite Statistik: Nur 3,7% der generierten Apps werden auf eine öffentliche URL deployt (VULK-Plattformdaten, Juli 2026). Generieren ist nicht mehr der schwere Teil — fertig werden ist es. Wenn Ihre App in der Vorschau funktioniert, klicken Sie auf Deploy; allein damit gehören Sie zu den obersten paar Prozent der Builder.

Welche Prompt-Muster funktionieren konsistent?

Nach Tausenden beobachteter Generierungen produzieren bestimmte Muster immer bessere Ergebnisse:

Spezifizieren Sie die Layoutstruktur. „Seitennavigation links, Hauptinhalt rechts" gibt dem Modell einen klaren Rahmen.

Benennen Sie Ihre Seiten explizit. „Drei Seiten: Home, Produkte und Warenkorb" wird zu Routen-Definitionen und Navigationselementen.

Beschreiben Sie die Datenform. „Jedes Produkt hat Name, Preis, Bild-URL, Kategorie und Lagerbestand" sagt dem Modell exakt, welche Felder in Komponenten und Formulare gehören.

Referenzieren Sie konkrete Bibliotheken. „Nutze Recharts für Diagramme" oder „Nutze Framer Motion für Seitenübergänge" steuert die Abhängigkeitswahl.

Nennen Sie das Farbschema. „Dunkles Theme mit Cyan-Akzenten" verhindert die Standard-Blau-Themes, die Sie sowieso ändern wollen würden.

Was können Sie (noch) nicht?

Wenn Ihre App ein echtes Backend mit Datenbank braucht, können Sie den Backend Mode aktivieren, der eine PostgreSQL-gestützte API neben Ihrem Frontend generiert — 62% aller generierten Apps enthalten ein SQL-Schema, und 27% betreiben ein provisioniertes Backend (VULK-Plattformdaten, Juli 2026). Das Backend läuft auf VULKs Infrastruktur — auf Ihren eigenen Server deployen können Sie es noch nicht. Die Authentifizierung nutzt VULKs eingebautes Auth-System. Externe Auth-Provider (Firebase, Auth0, Supabase) werden standardmäßig nicht generiert — auf Pro+ können Sie sich aber über das Integrationssystem für Ihr eigenes Supabase entscheiden.

Das sind echte Einschränkungen, und ich will offen damit umgehen. Wir arbeiten an selbst gehostetem Backend-Deployment, aber es ist nicht fertig.