v0.

Von der Bildschirmskizze zur App

Eine zukünftige Oberfläche zu zeigen ist oft hilfreicher, als sie noch einmal nur zu besprechen. In v0 können Sie eine Seite beschreiben, einen Entwurf anhängen oder ein vorhandenes Projekt öffnen und dann Schaltflächen, Formulare und Übergänge ausprobieren. Das Ergebnis bleibt Code, der sich prüfen und in normale Entwicklungsabläufe übernehmen lässt.

Das AI-Produkt von Vercel ist auch unter der früheren Adresse v0.dev bekannt. Es eignet sich für Landingpages, Nutzerbereiche, Daten-Dashboards und kleine Webanwendungen. Die Dokumentation setzt vor allem auf Next.js; für Oberflächen werden Tailwind CSS und shadcn/ui beschrieben. Dass sich andere Technologien im Prompt nennen lassen, bedeutet keine gleichwertige Unterstützung.

Was sich statt einer langen Erklärung übergeben lässt

v0 nimmt Screenshots und Dateien entgegen. Für Entwürfe ist in kostenpflichtigen Tarifen eine Figma-Integration mit verbundenem Konto vorgesehen. Die visuelle Vorlage zeigt Anordnung, Farben und Bestandteile der Oberfläche. Das Verhalten sollten Sie gesondert beschreiben: Ein Bild verrät nicht, wo eine Anfrage gespeichert wird und was nach einem Klick auf „Senden“ geschieht.

Für erste Änderungen müssen Sie nicht die gesamte Aufgabe neu formulieren. In Design mode wählen Sie ein Element der Vorschau und passen Abstände, Schrift, Farbe oder Text über das Bedienfeld an. Komplexere Änderungen lassen sich beschreiben. Der Modus setzt eine aktuelle Chatversion und eine unterstützte Vorschauumgebung voraus; bei mobilen Fenstergrößen steht er nicht zur Verfügung.

Beispiel: Anmeldung zur Beratung

Angenommen, ein Dienstleister benötigt eine Seite mit Leistungsauswahl und Buchungsformular. Im ersten Prompt genügen Felder, Formularzustände und die Aktion nach dem Absenden. Zum Beispiel: „Der Besucher wählt eine Leistung und hinterlässt Namen und Kontakt. Ohne Kontakt wird keine Buchung angenommen; nach dem Absenden erscheint eine Bestätigung.“ Prüfen Sie diesen Ablauf zuerst mit Demodaten.

Sollen Anfragen gespeichert werden, ergänzen Sie als nächsten Schritt Speicher und serverseitige Verarbeitung. v0 dokumentiert Datenbank- und API-Anbindungen, darunter Integrationen mit Supabase, Neon und Upstash. Die Anbieterwahl beeinflusst Rechte und Kosten. Eine schöne Erfolgsmeldung allein beweist nicht, dass Formulardaten tatsächlich gesendet und verarbeitet werden.

Änderungen im eigenen Repository

GitHub dient nicht nur dazu, fertigen Code hochzuladen. In v0 können Sie ein bestehendes Repository importieren, von einem gewählten Branch aus weiterarbeiten und Änderungen an einen separaten Arbeitsbranch senden. Die Dokumentation beschreibt Vorschau, Prüfung der Unterschiede und Veröffentlichung über einen Pull Request. Regeln zum Schutz des Repositorys und verpflichtende Reviews bleiben dabei wichtig.

Für Teams ist das eine bequeme Möglichkeit, Änderungen an einer funktionierenden Oberfläche zu besprechen. Prüfen Sie vor dem Merge betroffene Dateien, bestandene Projektprüfungen und mögliche Auswirkungen auf benachbarte Abläufe. Zur Automatisierung bietet die offizielle v0 API programmatischen Zugriff auf Projekte, Chats und Deployments.

Was Sie vor dem Start prüfen sollten

Die generierte Anwendung erfordert eine technische Überprüfung. Versuchen Sie im Beispiel mit dem Datensatz ein leeres Formular, einen falschen Kontakt, ein erneutes Senden und einen Speicherfehler. Wenn ein persönliches Konto erscheint, überprüfen Sie die Rechte verschiedener Benutzer. Die Schlüssel der externen Dienste müssen auf dem Server bleiben; Next.js-Variablen mit dem Präfix NEXT_PUBLIC_ stehen dem Clientcode zur Verfügung.

Prüfen Sie auch die Oberfläche: Tastaturnavigation, Feldbeschriftungen, schmale Ansichten und verständliche Fehlermeldungen. Automatische v0-Korrekturen erleichtern die Weiterarbeit, beweisen aber keine Sicherheit oder Eignung zur Verarbeitung echter Daten.

Zugang und Kosten

Sie benötigen ein Konto. Es gibt begrenzten kostenlosen Zugang und kostenpflichtige Tarife; Generierungen werden über die jeweiligen Limits und Credits erfasst. Prüfen Sie vor größeren Aufgaben verfügbare Modelle, Guthaben und Abbuchungsregeln im Konto. Für Vercel-Hosting, Datenbanken und andere angebundene Ressourcen gelten eigene Bedingungen. Ein Generator-Abonnement umfasst keine unbegrenzte Infrastruktur.

Für welche Aufgaben geeignet

• Ein Oberflächenprototyp aus Beschreibung oder Entwurf
• Landingpage mit Formular und serverseitiger Verarbeitung
• Panel mit Daten und Filtern
• Verfeinerung eines bestehenden Webprojekts über GitHub