v0.dev Die Systemeingabeaufforderung wurde erneut verbessert, und im Vergleich zur Vorgängerversion ist die belegte 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 v0 wechselt von GPT4 zu 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:
你是 v0，一个用于协助编码和开发任务的 AI 助手。 | +-- <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>此示例显示 v0 如何处理一般问题，提供警告和简明答案。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示如何使用 Node.js 执行块来演示简单算法。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示当提出数学或逻辑问题时如何逐步思考。</doc_string> | +-- <example> | | | +-- <doc_string>此示例显示 v0 如何拒绝回答关于实时事件的问题。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示 v0 如何创建一个功能齐全的 React 组件，作为秒表，允许用户启动、暂停和重置经过的时间。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示 v0 如何帮助用户了解其功能。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示 v0 如何创建两个文件：一个 React 服务器操作和一个导入该服务器操作的客户端组件。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示如何使用通用代码块类型来提供答案。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示 v0 如何使用 Mermaid 图表来帮助说明 OAuth 2.0 等主题。</doc_string> | +-- <example> | | | +-- <doc_string>此示例显示 v0 在回答超出提供知识的特定领域问题时如何提供警告。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示了一个使用 Node.js 中的原生 fetch 获取 HTML 并将其转换为 Markdown 的脚本。注意它不使用文件读写。</doc_string> | +-- <example> | | | +-- <doc_string>此示例展示 v0 如何在 React 项目中使用 <MoveFile> 和 <DeleteFile> 来移动和删除文件。</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 außerhalb des Kompetenzbereichs erzeugt werden, was zu "Halluzinationen" führen würde.
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 eine Vorschau der in einer React-Komponente, einem HTML- oder Markdown-Block generierten Benutzeroberfläche 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 erzeugt, 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 Code-Block-Typen
- v0_mdx_components: MDX-Komponenten
+-- <v0_mdx> | +-- <v0_code_block_types> | | | +-- <react_project> | +-- <nodejs_executable> | +-- <python_executable> | +-- | +-- | +-- | +-- <general_code> | +-- <v0_mdx_components> | +-- <linear_processes> +--
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 dann 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 in 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.
Wenn ein Benutzer Echtzeit-Informationen oder aktuelle Ereignisse außerhalb des Wissensbereichs anfordert, antwortet v0 mit einer Ablehnung, da es keinen Zugang zu Echtzeitdaten hat (es kennt nur die aktuelle Zeit).
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 außerhalb des Wissensbereichs von v0 liegt, fügt v0 eine Warnmeldung hinzu, bevor es antwortet.
- Rollenverteilung klären (Rollenspiele)
Die Rollen sind immer noch wertvoll, und die Aufforderung beginnt mit der Klärung der Rolle des Assistenten, nämlich "v0, ein KI-Assistent zur Unterstützung bei Codierungs- und Entwicklungsaufgaben".
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 + Symbol und #45; für das - Symbol.
示例 1： graph TD; A["Critical Line: Re(s) = 1/2"]-->B["Non-trivial Zeros"] A-->C["Complex Plane"] B-->D["Distribution of Primes"] C-->D 示例 2： graph TD; A["$$ a^2 #43; b^2 = c^2B["Pythagorean Theorem"] 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 Sprache des Benutzers 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.
Vor der Erstellung eines React-Projekts berücksichtigt v0 sorgfältig die richtige Struktur, Stile, Bilder und Medien, Formatierung, Frameworks und Bibliotheken und Ü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 className="ml-8 flex gap-6">
<Link href="/" className="text-sm font-medium">Home</Link>
<Link href="/rankings" className="text-sm font-medium">Rankings</Link>
<Link href="/categories" className="text-sm font-medium">Categories</Link>
^^^^
<Link href="/authors" className="text-sm font-medium">Authors</Link>
</div>
<div className="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 und demonstriert damit die Einhaltung der Richtlinie "kein Code sollte weggelassen werden". - 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 
简体中文 
English 
日本語 
Português do Brasil