So baust du 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: Tipp eine spezifische Beschreibung der App – Layout, Seiten, Features, Datenform, Farben – in VULK. Der Prompt geht an eines von 24 KI-Modellen (Claude Sonnet 5.5 ist der Default; du kannst 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. Du iterierst mit Folge-Prompts und klickst dann auf Deploy für eine Live-URL unter ihr-projektname.vulk.space.

„Schnell" musst du 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 du diese 4 Nachrichten zählen lässt.

Was passiert tatsächlich, wenn du einen Prompt tippst?

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

Du tippst eine Beschreibung der gewünschten App. VULK sendet sie an eines von 24 KI-Modellen (du wählst 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 deinen 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. Du kannst jeden visuellen Aspekt mit einem Folge-Prompt ändern.

Saubere Projektstruktur. VULK kippt nicht alles in App.tsx. Du bekommst src/pages/ für Routen-Komponenten, src/components/ für wiederverwendbare UI, src/data/ für Mock-Daten und eine tailwind.config.js mit deinem 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 deines 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. Du bekommst 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). Decke Layout, Features, Daten und Stil ab – dann Schluss.

Wie sieht der Generierungsprozess aus?

Wenn du deinen Prompt absendest, siehst du 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. Du kannst 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 deinen Farbwünschen
• package.json – Abhängigkeiten

Wie funktioniert die Live-Vorschau?

Während die Dateien generiert werden, aktualisiert sich das Vorschau-Panel automatisch. Du musst 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. Klicke Buttons, navigiere zwischen Seiten, fülle Formulare aus, teste das responsive Verhalten. Nutze sie, um zu erkennen, was geändert werden muss, bevor du den nächsten Prompt schreibst.

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 sendest du 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 – du regenerierst nicht bei jeder Nachricht das gesamte Projekt.

Du kannst 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).

Kannst du den Code direkt bearbeiten?

Die linke Sidebar zeigt jede Datei deines Projekts. Klicke 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 du willst.

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

Wie deployt man in die Produktion?

Sobald deine App passt, braucht das Deployment einen Klick. Drück den Deploy-Button in der Toolbar. VULK baut deine App via Vite, veröffentlicht den statischen Output im Netzwerk von Cloudflare und gibt dir eine Live-URL.

Die deployte App läuft im globalen Netzwerk von Cloudflare. Das URL-Format ist ihr-projektname.vulk.space, und du kannst auf jedem Plan ab Builder eine eigene Domain anbinden.

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

Welche Prompt-Muster funktionieren konsistent?

Nach Tausenden beobachteter Generierungen produzieren bestimmte Muster immer bessere Ergebnisse:

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

Benenne deine Seiten explizit. „Drei Seiten: Home, Produkte und Warenkorb" wird zu Routen-Definitionen und Navigationselementen.

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

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

Nenne das Farbschema. „Dunkles Theme mit Cyan-Akzenten" verhindert die Standard-Blau-Themes, die du sowieso ändern wollen würdest.

Und Backend und Datenbank?

Wenn deine App ein echtes Backend mit Datenbank braucht, kannst du den Backend Mode aktivieren, der eine PostgreSQL-gestützte API neben deinem 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. Die Authentifizierung nutzt VULKs eingebautes Auth-System, und auf Pro+ kannst du dich über das Integrationssystem für dein eigenes Supabase entscheiden.