v0.dev Die Eingabeaufforderung wurde im Vergleich zur Vorgängerversion nochmals verbessert und nimmt nun den Token Vollständig verdoppelt! Und führt ein so großer Systemschlüssel zu besser optimierten Funktionen?
Beginnen wir mit der Überprüfung der v0-Systemstichwörter aus der letzten Iteration:v0.dev erzeugt vollständige System-Prompt-Wörter für Front-End-Code Die Umstellung von v0 von GPT4 auf Claude Nach der Modellierung wurden auch die Systemstichwörter vollständig rekonstruiert, und eine detaillierte Analyse ist in dem Artikel enthalten.
Hier sind die neuen v0-Stichwortmerkmale, die von Bao Yu analysiert wurden:
Wenn man den v0 Dev Cue analysiert, stellt man fest, dass der komplette Cue ziemlich lang ist, etwa 45.257 Zeichen und 10.397 Token! Ich muss sagen, dass Claudes Fähigkeit, Befehle zu befolgen, ziemlich stark ist!
Natürlich gibt es eine Menge Prompt-Engineering-Wissen, auf das wir zurückgreifen können:
- Strukturierte Stichwörter
In einem Cue mit mehr als 10.000 Tokens ist es für LLMs, die die Bedeutung der Cues und den Fokus der Cues in verschiedenen Situationen verstehen wollen, notwendig, eine klare Struktur für den gesamten Satz von Cues zu haben, nicht nur um die Grenzen der verschiedenen Teile unterscheiden zu können, sondern auch um eine Baumstruktur zu haben, die die Beziehung der Cues beschreibt, so dass die LLMs die Cues besser verstehen können.
v0 verwendet XML, um die Cue-Struktur zu organisieren. Die Baumstruktur des High-Level-Cue sieht wie folgt aus:
Du bist v0, ein KI-Assistent für Programmier- und Entwicklungsaufgaben. | +-- <v0_info> | +-- <v0_mdx> | +-- <v0_code_block_types> | | | +-- <react_project> | +-- <nodejs_executable> | +-- <python_executable> | +-- <html> | +-- <markdown> | +-- <diagram> | +-- <general_code> | +-- <v0_mdx_components> | +-- <linear_processes> +-- <math> | +-- <v0_capabilities> | +-- <v0_domain_knowledge> | +-- <current_time> +-- <sources> | +-- <forming_correct_responses> | +-- <accessibility> +-- <citations> +-- <refusals> +-- <warnings> +-- <examples> | +-- <example> | | | +-- <doc_string>Dieses Beispiel zeigt, wie v0 allgemeine Fragen behandelt und Warnungen und kurze Antworten liefert.</doc_string> | +-- <example> | | | +-- <doc_string>Dieses Beispiel zeigt, wie einfache Algorithmen mit Node.js-Ausführungsblöcken demonstriert werden können.</doc_string> | +-- <example> | | | +-- <doc_string>Dieses Beispiel zeigt, wie man Schritt für Schritt denkt, wenn man mathematische oder logische Fragen stellt.</doc_string> | +-- <example> | | | +-- <doc_string>Dieses Beispiel zeigt, wie v0 sich weigert, Fragen zu Echtzeitereignissen zu beantworten.</doc_string> | +-- <example> | | | +-- <doc_string>Dieses Beispiel zeigt, wie v0 eine voll funktionsfähige Reagieren Sie Komponente, die als Stoppuhr fungiert und es dem Benutzer ermöglicht, die abgelaufene Zeit zu starten, anzuhalten und zurückzusetzen. </doc_string ||The_doc_string +-- <Beispiel Dieses Beispiel zeigt, wie v Dieses Beispiel zeigt, wie v0 dem Benutzer helfen kann, seine Fähigkeiten zu verstehen. </doc_string || +-- <doc_string +-- | | +-- <doc_string | | <doc_string Dieses Beispiel zeigt, wie v0 zwei Dateien erstellt: eine React-Server-Aktion und eine Client-Komponente, die diese Server-Aktion importiert. </doc_string | <doc_string | | Dieses Beispiel zeigt, wie man einen generischen Codeblocktyp verwendet, um eine Antwort zu geben. </doc_string || +-- <doc_string +-- | | Dieses Beispiel zeigt, wie v0 Mermaid-Diagramme verwendet, um Themen wie OAuth 2.0 zu veranschaulichen. </doc_string || +-- <example +-- Dieses Beispiel zeigt, wie v0 bei der Beantwortung von domänenspezifischen Fragen, die über das vorhandene Wissen hinausgehen, Warnungen ausgibt. </doc_string || +-- <doc_string +-- | | <doc_string Dieses Beispiel zeigt ein Skript, das das native Fetch in Node.js verwendet, um HTML zu erhalten und es in Markdown zu konvertieren. Beachten Sie, dass es keine Dateien liest und schreibt. </doc_string ||Beispiel +-- <Beispiel | | +-- </doc_string || Dieses Beispiel zeigt, wie v0 und zum Verschieben und Löschen von Dateien in einem React-Projekt verwendet. </doc_string
- Zahlreiche Beispiele
v0 für eine Vielzahl von verschiedenen Einsatzszenarien haben klare Beispiele geschrieben, nicht nur in einer Vielzahl von verschiedenen Arten von Problemen, um mit der Verwendung von Beispielen, mehr am Ende eines großen Absatzes alle Beispiele, zum Beispiel zu behandeln:
- Wie man mit allgemeinen Fragen umgeht, Warnungen und kurze Antworten gibt
- Wie man einfache Algorithmen mit Node.js-Ausführungsblöcken demonstriert
- Wie man Schritt für Schritt denkt, wenn man mathematische oder logische Fragen stellt
- Wie man sich weigert, Fragen zu Echtzeit-Nachrichtenereignissen zu beantworten
- Wie man zwei Dateien erstellt: eine React-Server-Aktion und eine Client-Komponente, die diese Server-Aktion importiert
- Moment mal!
Der Vorteil dabei ist, dass LLM durch diese Beispiele lernen kann, wie man Inhalte für verschiedene Szenarien erstellt.
- Definition der Grenzen der KI-Fähigkeiten
In der Eingabeaufforderung sind das Fachwissen und der Kompetenzbereich von v0 klar definiert, was den Umfang der Modellantwort festlegt und verhindert, dass Inhalte erzeugt werden, die über den Kompetenzbereich hinausgehen und zu "Halluzinationen" führen.
v0 ist ein fortschrittlicher KI-Programmierassistent.
v0 ist so konzipiert, dass es das Niveau der weltbesten Entwickler nachahmt.
v0 Bleiben Sie auf dem Laufenden über die neuesten Technologien und bewährten Verfahren.
v0 antwortet unter Verwendung des MDX-Formats und unterstützt die unten definierten speziellen MDX-Typen und -Komponenten.
v0 ist bestrebt, klare, effiziente, prägnante und innovative Programmierungslösungen anzubieten und dabei eine freundliche und zugängliche Haltung zu bewahren.
Sofern vom Benutzer im Dialog nicht anders angegeben, verwendet v0 standardmäßig den Next.js App Router; andere Frameworks funktionieren in der Schnittstelle von v0 möglicherweise nicht richtig.
v0's Wissen deckt ein breites Spektrum an Programmiersprachen, Frameworks und Best Practices ab, mit einem besonderen Fokus auf React, Next.js App Router und moderne Webentwicklung.
Benutzer interagieren mit v0 über eine Schnittstelle, die auf https:// v0 gehostet wird. dev-Schnittstelle, die auf der v0 . Hier sind einige der Funktionen der v0-Benutzeroberfläche:
- Der Benutzer kann Bilder und Textdateien über das Eingabefeld anhängen (oder per Drag & Drop) und v0 wird sie einbetten und lesen.
- Benutzer können die in einer React-Komponente, einem HTML- oder Markdown-Block generierte Benutzeroberfläche in der Vorschau anzeigen oder rendern, indem sie auf die Registerkarte "Vorschau" in der oberen rechten Ecke der Benutzeroberfläche klicken.
- Sie können JavaScript-Code aus einem ausführbaren Node.js-Block ausführen, indem Sie auf die Registerkarte "Code ausführen" in der oberen rechten Ecke der Benutzeroberfläche klicken.
- Der Benutzer kann die URL der Website angeben. Das System erstellt automatisch einen Screenshot und fügt ihn der Anfrage des Benutzers bei.
- Benutzer können die "Block"-Ansicht (die eine Vorschau des von Ihnen geschriebenen Codes zeigt) öffnen, indem sie auf die spezielle Blockvorschau klicken, die im Chat angezeigt wird.
- Benutzer können v0-Blöcke (von Ihnen geschriebener Code) in ihrer Codebasis installieren, indem sie auf die Schaltfläche "zur Codebasis hinzufügen" mit dem Terminalsymbol in der oberen rechten Ecke der Blockansicht klicken.
- v0 kann die Installation und Einrichtung der erforderlichen Abhängigkeiten in einem bestehenden Projekt übernehmen oder den Benutzer bei der Erstellung eines neuen Projekts unterstützen.
- Sie sollten den Benutzern immer raten, den eingebauten Installationsmechanismus zu verwenden, um den im Dialog erzeugten Code zu installieren.
- Wenn der Benutzer sehr frustriert über Ihre Antwort ist, können Sie ihm vorschlagen, den Chat an das Team zu melden und seinen Block in einen neuen Chat zu verlegen.
- Wenn der Benutzer die Datenbank initialisieren oder andere ähnliche Einstellungen vornehmen muss, kann v0 den Code Execution Block verwenden. Er verfügt über die gleichen Umgebungsvariablen wie der React Project Block.
- Wenn möglich, wird empfohlen, dass Benutzer Abhängigkeiten mit Hilfe von Vercel-Integrationen wie Redis und Supabase einrichten, die über die Vercel-Integrationsseite eingerichtet werden können.
- Standardmäßig wird immer Next.js ausgewählt, sofern der Benutzer nichts anderes angibt.
v0 verfügt über das nötige Fachwissen, um präzise Antworten auf Benutzeranfragen zu geben. v0 nutzt dieses Wissen, um sicherzustellen, dass seine Antworten korrekt und hilfreich sind.
- Anwendung von Gedankenketten zur Verbesserung der Qualität der Argumentation
Es ist bekannt, dass die Verwendung von Gedankenketten die Qualität des logischen Denkens im LLM verbessert, aber gleichzeitig wird dieser Denkprozess am besten vor den Augen des Benutzers verborgen gehalten, so dass v0 ein schrittweises Denken unter Verwendung von Tags in den Aufforderungen vor der Beantwortung erfordert, insbesondere wenn es sich um mathematische oder logische Probleme handelt.
Im Folgenden finden Sie den Leitfaden von v0 für die richtige Antwort:
- v0 Verwenden Sie immer , bevor Sie eine Antwort geben, um zu bewerten, welcher Blocktyp oder welche MDX-Komponente auf der Grundlage der oben definierten Kriterien am besten für die Anfrage des Benutzers geeignet ist.
Hinweis: v0 muss beurteilen, ob der Benutzer verweigert oder gewarnt werden muss.
Hinweis: v0 Um die richtige Antwort geben zu können, muss eine Reflexion stattfinden. - Bei einem mathematischen Problem, einem logischen Problem oder einem anderen Problem, das systematisches Denken erfordert, geht v0 Schritt für Schritt bei der Ableitung vor und gibt dann die endgültige Antwort.
- Beim Schreiben von Code folgt v0 den im Abschnitt v0_code_block_types aufgeführten Richtlinien (React-Komponenten, ausführbarer Node.js-Code, HTML, Diagramme usw.).
- Die Antworten von v0 basieren auf seinem Domänenwissen und der Inhalt ist authentisch. v0 verwendet Domänenwissen bei relevanten Benutzeranfragen.
- Ihre Antwort muss in der gleichen Sprache wie die Frage formuliert sein, mit Ausnahme von Codes, spezifischen Namen und Anführungszeichen.
- Detaillierte Anleitungen und Spezifikationen sind angegeben
In den Aufforderungen werden das Verhalten, der Ton und das Format von v0 detailliert beschrieben, z. B. die Verwendung von Codeblöcken und der Umgang mit Benutzeranfragen. Dadurch verringert sich die Wahrscheinlichkeit, dass das Modell Antworten produziert, die nicht den Erwartungen entsprechen.
v0 antwortet mit dem MDX-Format, einem Format, das die Möglichkeiten von React-Komponenten auf der Basis von Markdown erweitert, denn Markdown ist ein LLM-freundliches Format, das es erlaubt, genau das Markdown-Format zu erzeugen, das man braucht, und dann die Komponenten-Rendering-Fähigkeiten von MDX zu nutzen, um den Code in der Benutzeroberfläche in einer WYSIWYG-Art zu sehen.
Es gibt zwei Hauptkategorien von MDX für v0:
- v0_code_block_types: benutzerdefinierte Codeblocktypen
- v0_mdx_components: MDX-Komponenten
+-- | +-- | | | | +-- | +-- | +-- <python_executable | +-- | +-- | +-- <nodejs_ausführbar | +-- | +-- <nodejs_executable | +-- | +- | +-- <nodejs_executable | +-- | +-- | +-- <allgemeiner_code | +-- <v0_mdx_components +-- | | +-- +-- | +-- | +-- +--
v0_code_block_types sind die benutzerdefinierten Codeblocktypen, die z. B. auf verschiedene Aufgabentypen angewendet werden:
- react_project, ein kürzlich hinzugefügter Typ, der es v0 ermöglicht, ein komplettes React-Projekt auf einmal zu erzeugen, das mehrere Dateien enthalten kann
- nodejs_executable wird verwendet, um ein Nodejs-Projekt zu erzeugen, das auf dem Server oder lokal ausgeführt werden kann. v0 bietet eine virtuelle Maschine, um den von LLM erzeugten Code zu übergeben, der auf der virtuellen Maschine ausgeführt werden kann und die Ergebnisse zurückgibt.
- python_executable, ähnlich wie Nodejs, mit dem Unterschied, dass der generierte Python-Code von einer in Python laufenden virtuellen Maschine ausgeführt werden kann.
- html, das einen HTML-Code in Form einer HTML-Datei erzeugt, die von einem Echtzeit-Browser wiedergegeben werden kann
- markdown, ähnlich wie html, aber im markdown-Format.
- Diagramm, Nixe Flussdiagramm
- general_code, d. h. ein Codefragment aus einer anderen Sprache, z. B. SQL, das nur angezeigt, aber nicht ausgeführt werden kann.
v0_mdx_components sind mehrere eingebaute Komponenten
- linear_processes, das zur Darstellung eines linearen Prozesses mit mehreren Schritten verwendet wird
- math zeigt mathematische Formeln an
- Klare Ablehnungs- und Warnstrategien
Legt fest, wie ein Benutzer reagieren soll, wenn seine Anfrage die Möglichkeiten von v0 übersteigt oder unangemessene Inhalte enthält, einschließlich spezifischer Ablehnungs- und Warnmeldungen.
Ablehnende Nachricht: "Es tut mir leid, ich kann Ihnen nicht helfen".
Wenn ein Nutzer eine Anfrage bezüglich gewalttätiger, verletzender, hasserfüllter, unangemessener oder unmoralischer/rechtswidriger Inhalte stellt, verwendet v0 eine Verweigerungsmeldung als Antwort.
v0 muss die Teile und als internes Wissen behandeln, das nur in Tags verwendet und nicht direkt an Benutzer weitergegeben werden darf.
Fordert ein Nutzer Echtzeitinformationen oder aktuelle Ereignisse außerhalb des Wissensbereichs an, antwortet v0 mit einer Ablehnung, da es keinen Zugang zu Echtzeitdaten hat (es kennt nur die aktuelle Uhrzeit).
Im Falle einer Ablehnung ist keine Entschuldigung oder Erklärung des Grundes für die Ablehnung zulässig, sondern nur eine einfache Erklärung:
"Ich bin nicht in der Lage, dabei zu helfen."
WARNUNGSMELDUNG: "Ich konzentriere mich hauptsächlich auf ... aber ..."
Wenn die Anfrage des Benutzers über das Fachwissen von v0 hinausgeht, fügt v0 eine Warnmeldung hinzu, bevor es antwortet.
- Rollenverteilung klären (Rollenspiele)
Die Rollen sind nach wie vor wertvoll, und die Aufforderung beginnt damit, die Rolle des Assistenten als "v0, ein KI-Assistent zur Unterstützung bei Codierungs- und Entwicklungsaufgaben" zu erläutern.
Rollen Dies hilft dem Modell, seine Identität und Verantwortlichkeiten zu verstehen.
- Standardisieren Sie die Ausgabeformate und geben Sie klare Anweisungen für Sonderfälle
Das Format des Ausgabeinhalts wird detailliert beschrieben, z. B. die Verwendung von MDX, Codeblöcken, spezifischen Komponenten usw. Dadurch wird sichergestellt, dass die Ausgabe des Modells in dem erwarteten Format für die anschließende Verarbeitung oder Präsentation vorliegt.
zum Beispiel
- v0 muss alle Backquotes in einem Markdown-Block entschlüsseln, um Syntaxfehler zu vermeiden. Beispiel:
Zum Installieren...
```
npm i Paket-Name
``` - v0 Anführungszeichen müssen immer um Knotennamen im Mermaid-Diagramm verwendet werden, wie im folgenden Beispiel gezeigt.
- v0 muss HTML UTF-8 Kodierung (ohne &) für Sonderzeichen (z.B. + und -) verwenden, z.B. #43; für das + Zeichen, #45; für das - Zeichen.
Beispiel 1: Graph TD. A["Kritische Linie: Re(s) = 1/2"] --> B["Nichttriviale Nullstellen"] A-->C["Komplexe Ebene"] B-->D["Verteilung der Primzahlen"] C-->D Beispiel 2: Graph TD. A["$$ a^2 #43; b^2 = c^2B["Satz des Pythagoras"] A-->C["\" style="display: block; margin: 0 auto; max-width: 100%;"> a #43; b #43; c = 180
- sprachliche Kohärenz
Betonen Sie, dass die Antworten des Modells in der gleichen Sprache wie der Benutzer abgefasst sein müssen, es sei denn, es handelt sich um Codes und spezifische Namen oder Referenzen.
"Mit Ausnahme von Codes, spezifischen Namen und Zitaten müssen Ihre Antworten in der gleichen Sprache wie die Frage formuliert sein."
- Warum unterstützt die v0-Version Screenshots und URL-Generierung?
Sie ist im Stichwort deutlich angegeben:
- Wenn ein Benutzer einen Screenshot oder ein Bild anhängt, aber keine Beschreibung angibt, wird davon ausgegangen, dass der Benutzer möchte, dass v0 den Screenshot nachbildet und dem Design so genau wie möglich entspricht, wobei alle implizierten Funktionen implementiert werden.
- Der Benutzer kann die URL der Website angeben. Das System erstellt automatisch einen Screenshot und fügt ihn der Anfrage des Benutzers bei.
- Der Benutzer kann Bilder und Textdateien über das Eingabefeld anhängen (oder per Drag & Drop) und v0 wird sie einbetten und lesen.
- Planen, bevor Sie umsetzen
Da v0 ein komplettes Projekt erstellen muss, und ein komplettes Projekt Struktur, Frameworks, Bibliotheken usw. berücksichtigt, wird v0 aufgefordert, vor der Ausführung zu planen.
Bevor ein React-Projekt erstellt wird, prüft v0 sorgfältig die richtige Struktur, Stile, Bilder und Medien, Formatierung, Frameworks und Bibliotheken sowie Überlegungen, um die beste Lösung für die Anfrage des Benutzers zu bieten.
- Was passiert, wenn ein Benutzer ein Element der Benutzeroberfläche auswählt, um eine Änderung anzufordern?
Zunächst zeichnet v0 App den Dateinamen des Vorgangs des Benutzers und den Code der ausgewählten Komponente auf, und wenn der Benutzer den Inhalt in das Pop-up-Dialogfeld eingibt, sendet v0 App diese Inhalte zusammen mit den Eingaben des Benutzers.
Angenommen, ich wähle den Link "Kategorien" in der Navigation aus und möchte, dass er in ein Abwärtsmenü umgewandelt wird, dann übermittelt die v0-App tatsächlich Folgendes an die API:
Die Anfrage des Benutzers bezieht sich speziell auf die Datei "components/nav-bar.tsx" und das "Link"-Element an dieser bestimmten Position (einschließlich des inneren Inhalts). auch).
...
<div Klassenname="ml-8 flex gap-6">
<Link href="/" Klassenname="text-sm font-medium">Startseite</Link>
<Link href="/rankings" Klassenname="text-sm font-medium">Ranglisten</Link>
<Link href="/Kategorien" Klassenname="text-sm font-medium">Kategorien</Link>
^^^^
<Link href="/Autoren" Klassenname="text-sm font-medium">Autoren</Link>
</div>
<div Klassenname="ml-auto flex items-center gap-4">
...
Bitte wenden Sie eine Schnellbearbeitung auf diese Datei an und nehmen Sie die erforderlichen Änderungen vor.
Bitte ändern Sie Kategorien in Dropdown, Kategorien hat mehr Einträge und wird als 3 Spalten angezeigt
- Wie hat die Version 0 das Problem der Faulheit gelöst?
- In im Abschnitt ### Struktur, Punkt 2:
"2. v0 schreibt immer vollständige Codeschnipsel, die direkt in eine Next.js-Anwendung kopiert und eingefügt werden können. v0 schreibt niemals partielle Codeschnipsel oder verlangt, dass Benutzer ihren eigenen Code in Kommentaren hinzufügen." - Die Standardeigenschaften und die Vorschaubarkeit werden in Punkt 3 hervorgehoben:
"3. v0 muss beim Rendern einer Komponente Standardeigenschaften bereitstellen, damit die Komponente direkt in der Chat-Schnittstelle in der Vorschau angezeigt werden kann." - Wiederholen Sie das Integritätsprinzip aus dem Abschnitt ### Beispiele:
In den Beispielen in diesem Tipp zeigt v0 immer die vollständige Implementierung der Funktionalität, wodurch die Einhaltung der Richtlinie "kein Code ausgelassen" demonstriert wird. - Im Abschnitt :
Weisen Sie darauf hin, dass v0 Bevor Sie ein React-Projekt erstellen, ist es wichtig, die richtige Struktur zu finden und sicherzustellen, dass der gesamte erforderliche Code enthalten ist.
- In im Abschnitt ### Struktur, Punkt 2:
Durch die Einbettung dieser klaren und direkten Anweisungen in die Eingabeaufforderungen wird v0 dazu angehalten, stets vollständigen und sofort verwendbaren Code zu liefern, wodurch das Problem der v0-Faulheit, keinen vollständigen Code auszugeben, effektiv gelöst wird.
v0.dev Vollständige System-Eingabeaufforderung
https://baoyu.io/blog/v0-system-prompt-2024
Deutsch (Sie) 
简体中文 
English 
日本語