v0
Einen Screenshot oder eine Skizze mit v0 in einen React-Oberflächen-Prototyp verwandeln
Der KI-Agent von Vercel, der Weboberflächen aus Prompts, Screenshots oder Entwürfen erzeugt. Am besten für erste Entwürfe von Bildschirmen, die ein Entwickler anschließend prüft.
Verfasst anhand der offiziellen Seiten des Tools, die am Ende dieser Anleitung unter „Offizielle Quellen“ aufgeführt sind. Prüfen Sie dort aktuelle Funktionen, Grenzen und Bedingungen.
Ausprobieren (öffnet in einem neuen Tab)Schritte zum Ausprobieren
- Wählen Sie einen Bildschirm, etwa eine Preisseite oder ein Dashboard, und schreiben Sie auf, was ein Besucher dort tun können muss.
- Beschreiben Sie diesen Bildschirm in einem Prompt oder hängen Sie einen Screenshot oder eine Figma-Datei an, wie die Dokumentation es beschreibt. Nennen Sie das gewünschte Framework und den Komponentenstil und verwenden Sie erfundene Beispielinhalte.
- Prüfen Sie die Vorschau und bitten Sie dann jeweils um eine Änderung. Nutzen Sie den dokumentierten Code-Viewer, um zu lesen, was erzeugt wurde.
- Wenn es stimmt, verbinden Sie es wie in der Dokumentation beschrieben mit einem GitHub-Repository und öffnen Sie einen Pull Request, statt direkt in die Produktion zu deployen.
- Prüfen Sie den Code wie den eines Teamkollegen: Barrierefreiheit, Abhängigkeiten, fest eingebaute Inhalte und Fehlerzustände. Führen Sie Ihre eigenen Tests und den Build aus.
- Erst dann mergen und über Ihren normalen Prozess deployen.
Einschränkungen
Generierter Code kann Fehler, veraltete Muster oder Lücken bei der Barrierefreiheit enthalten. Eine gut aussehende Vorschau ist kein getestetes Produkt. Anbindungen an Backend, Datenbank und Authentifizierung brauchen eigenes Design und eine eigene Sicherheitsprüfung.
Preise
Die Dokumentation beschreibt kostenlosen und kostenpflichtigen Zugang mit Nutzungslimits sowie Team-Tarife. Prüfen Sie auf der offiziellen Preisseite, was Ihr Tarif umfasst; diese Anleitung nennt keine Preise.
Datenschutz und Daten
Prompts, Screenshots und verbundene Repositories oder Datenquellen werden vom Dienst verarbeitet. Verwenden Sie zunächst Mock-Designs und synthetische Daten, fügen Sie niemals Geheimnisse oder API-Schlüssel in einen Prompt ein und prüfen Sie die Datenschutz- und KI-Richtlinienseiten des Anbieters, bevor Sie echte Systeme verbinden.
Zu den Quellen
Basiert auf der veröffentlichten Dokumentation des Anbieters, nicht auf praktischen Tests. Der generierte Code wurde nicht getestet.
Alternativen
Lovable und Replit zielen auf ähnliche Arbeit vom Prompt zur App; ein Coding-Assistent im eigenen Editor eignet sich für Menschen, die alles in einem lokalen Repository behalten möchten.
Offizielle Quellen
Die offiziellen Seiten, anhand derer diese Anleitung geschrieben wurde. Lesen Sie sie für aktuelle Funktionen, Grenzen und Bedingungen.