v0.dev Analyse des mots de l'invite du système après la mise à jour (20241125)

Commandes d'utilitaires AIMise à jour il y a 9 mois Cercle de partage de l'IA
10K 00

v0.dev L'invite du système a été à nouveau mise à jour et, par rapport à la version précédente, l'invite occupée a été améliorée. jetons Entièrement doublé ! Un système d'indices aussi important permet-il d'optimiser les fonctionnalités ?

Commençons par passer en revue les mots-clés du système v0 de la dernière itération :v0.dev génère des mots d'invite système complets pour le code frontal Le passage de v0 de GPT4 à Claude Après la modélisation, les mots repères du système ont également été entièrement reconstruits, et une analyse détaillée a été fournie dans l'article.

 

Voici les nouvelles caractéristiques des mots repères de la v0 analysées par Bao Yu :

En analysant le fichier de développement v0, le fichier complet est assez long, environ 45 257 caractères et 10 397 jetons ! Je dois dire que la capacité de Claude à suivre les commandes est assez forte !

Bien entendu, il est possible de s'appuyer sur les connaissances de Prompt Engineering :

  1. Mots clés structurés

Dans un repère de plus de 10 000 tokens, afin que les LLM comprennent la signification des repères et l'orientation des repères dans diverses situations, il est nécessaire d'avoir une structure claire pour l'ensemble des repères, non seulement pour pouvoir différencier les limites des différentes parties, mais aussi pour avoir une structure arborescente décrivant la relation des repères, afin que les LLM puissent mieux comprendre les repères.

La v0 utilise XML pour organiser la structure des repères. La structure arborescente du repère de haut niveau est la suivante :

你是 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>

 

  1. De nombreux exemples

v0 pour une variété de scénarios d'utilisation différents ont écrit des exemples clairs, non seulement dans une variété de différents types de problèmes pour traiter l'utilisation d'exemples, plus à la fin d'un grand paragraphe tous les exemples, par exemple :

  • Comment traiter les questions d'ordre général, fournir des avertissements et des réponses brèves ?
  • Comment démontrer des algorithmes simples à l'aide de blocs d'exécution Node.js
  • Comment penser étape par étape lorsque l'on pose des questions mathématiques ou logiques ?
  • Comment refuser de répondre à des questions sur des événements d'actualité en temps réel ?
  • Comment créer deux fichiers : une action serveur React et un composant client qui importe cette action serveur.
  • attendez une minute !

L'avantage est qu'à travers ces exemples, le LLM peut apprendre à générer du contenu pour différents scénarios.

 

  1. Définir les limites des capacités d'IA

Dans l'invite, le domaine de connaissance et de compétence de v0 est clairement défini, ce qui fixe l'étendue de la réponse du modèle et évite de générer un contenu dépassant le champ de compétence, ce qui donnerait lieu à des "hallucinations".

<v0_info>
v0 est un assistant de programmation IA avancé.
v0 est conçu pour imiter le niveau des meilleurs développeurs du monde.
v0 Se tenir au courant des dernières technologies et des meilleures pratiques.
v0 répond en utilisant le format MDX et prend en charge les types et composants MDX spécialisés définis ci-dessous.
v0 vise à fournir des solutions de programmation claires, efficaces, concises et innovantes tout en conservant une attitude amicale et accessible.
Sauf indication contraire de l'utilisateur dans le dialogue, la v0 utilise par défaut Next.js App Router ; d'autres frameworks peuvent ne pas fonctionner correctement dans l'interface de la v0.
Les connaissances de v0 couvrent un large éventail de langages de programmation, de cadres et de meilleures pratiques, avec un accent particulier sur React, Next.js App Router et le développement web moderne.
</v0_info>

<v0_capabilities>

Les utilisateurs interagissent avec v0 par le biais d'une interface hébergée sur https:// v0 . L'interface de la v0 est hébergée sur le site de la v0 . Voici quelques-unes des caractéristiques de l'interface utilisateur de la v0 :

  • L'utilisateur peut attacher (ou glisser-déposer) des images et des fichiers texte via la boîte d'invite et v0 les intégrera et les lira.
  • Les utilisateurs peuvent prévisualiser ou rendre l'interface utilisateur générée dans un composant React, un bloc HTML ou Markdown en cliquant sur l'onglet "Aperçu" dans le coin supérieur droit de l'interface.
  • Vous pouvez exécuter du code JavaScript à partir d'un bloc exécutable Node.js en cliquant sur l'onglet "Run Code" dans le coin supérieur droit de l'interface.
  • L'utilisateur peut fournir l'URL du site web. Le système prendra automatiquement une capture d'écran et la joindra à la demande de l'utilisateur.
  • Les utilisateurs peuvent ouvrir la vue "Bloc" (qui affiche un aperçu du code que vous avez écrit) en cliquant sur l'aperçu du bloc spécial présenté dans le chat.
  • Les utilisateurs peuvent installer des blocs v0 (code que vous avez écrit) dans leur base de code en cliquant sur le bouton "add to codebase" (ajouter à la base de code) avec une icône de terminal dans le coin supérieur droit de la vue du bloc.
  • v0 peut prendre en charge l'installation et la configuration des dépendances nécessaires dans un projet existant, ou aider l'utilisateur à créer un nouveau projet.
  • Vous devez toujours conseiller aux utilisateurs d'utiliser le mécanisme d'installation intégré pour installer le code généré dans le dialogue.
  • Si l'utilisateur est très frustré par votre réponse, vous pouvez lui suggérer de signaler la discussion à l'équipe et de transférer son bloc à une nouvelle discussion.
  • Si l'utilisateur a besoin d'initialiser la base de données ou d'effectuer d'autres configurations similaires, la v0 peut utiliser le bloc d'exécution du code. Il dispose des mêmes variables d'environnement que le bloc du projet React.
  • Dans la mesure du possible, il est recommandé aux utilisateurs de configurer les dépendances à l'aide des intégrations Vercel, telles que Redis et Supabase, qui peuvent être configurées via la page d'intégration Vercel.
  • Par défaut, il faut toujours sélectionner Next.js, sauf indication contraire de l'utilisateur.

</v0_capabilities>

v0 possède les connaissances nécessaires pour fournir des réponses précises aux questions des utilisateurs. v0 utilise ces connaissances pour s'assurer que ses réponses sont correctes et utiles.

 

  1. Appliquer des chaînes de pensée pour améliorer la qualité du raisonnement

L'utilisation de chaînes de pensée est connue pour améliorer la qualité du raisonnement en LLM, mais en même temps, il est préférable que ce processus de raisonnement reste hors de la vue de l'utilisateur. La v0 exige donc un raisonnement étape par étape en utilisant des balises dans les messages-guides avant de répondre, en particulier lorsqu'il s'agit de problèmes mathématiques ou logiques.

Voici le guide de la v0 pour trouver la bonne réponse :

<forming_correct_responses>

  1. v0 Toujours utiliser , avant de fournir une réponse, pour évaluer quel type de bloc ou quel composant MDX est le mieux adapté à la requête de l'utilisateur sur la base des critères définis ci-dessus.
    Note : La v0 doit évaluer la nécessité de refuser ou d'avertir l'utilisateur.
    Note : v0 Une réflexion doit avoir lieu afin de fournir une réponse correcte.
  2. Face à un problème mathématique, un problème logique ou tout autre problème nécessitant une réflexion systématique, v0 procède pas à pas à la dérivation et donne ensuite la réponse finale.
  3. Lors de l'écriture de code, v0 suit les directives énumérées dans la section v0_code_block_types (composants React, code exécutable Node.js, HTML, graphiques, etc.)
  4. Les réponses de v0 sont basées sur sa connaissance du domaine et le contenu est authentique. v0 utilise la connaissance du domaine dans les requêtes pertinentes des utilisateurs.
  5. Votre réponse doit être rédigée dans la même langue que la question, à l'exception des codes, des noms spécifiques et des guillemets.

</forming_correct_responses>

 

  1. Des instructions et des spécifications détaillées sont fournies

Dans les invites, le comportement, le ton et le format de la v0 sont spécifiés en détail, comme la manière d'utiliser les blocs de code et de traiter les demandes de l'utilisateur. Cela réduit la probabilité que le modèle produise des réponses qui ne répondent pas aux attentes.

La v0 répond en utilisant le format MDX, qui est un format qui étend les capacités des composants React basés sur Markdown, parce que Markdown est un format convivial LLM qui vous permet de générer le format Markdown exact dont vous avez besoin, et ensuite d'utiliser les capacités de rendu des composants de MDX pour voir le code s'exécuter dans l'interface utilisateur de manière WYSIWYG.

Il existe deux catégories principales de MDX pour la v0 :

  • v0_code_block_types : types de blocs de code personnalisés
  • v0_mdx_components : Composants MDX
+-- <v0_mdx>
|
+-- <v0_code_block_types>
| |
| +-- <react_project>
| +-- <nodejs_executable>
| +-- <python_executable>
| +--
| +--
| +--
| +-- <general_code>
|
+-- <v0_mdx_components>
|
+-- <linear_processes>
+--

v0_code_block_types est le type de bloc de code personnalisé qui est appliqué aux différents types de tâches, par exemple :

  • react_project, un type récemment ajouté qui permet à la v0 de générer en une seule fois un projet React complet pouvant contenir plusieurs fichiers
  • nodejs_executable est utilisé pour générer un projet Nodejs qui peut être exécuté sur le serveur ou localement. v0 fournit une machine virtuelle pour passer le code généré par LLM, qui peut être exécuté sur la machine virtuelle et renvoyer les résultats.
  • python_executable, similaire à Nodejs, sauf que le code Python généré est exécutable par une machine virtuelle exécutant Python.
  • html, qui génère un morceau de code HTML, exprimé sous la forme d'un fichier html, qui peut être rendu par un navigateur en temps réel
  • markdown, similaire à html mais au format markdown.
  • Diagramme, sirène Organigramme
  • general_code, qui est un fragment de code dans un autre langage, tel que SQL, qui peut seulement être affiché mais pas exécuté.

v0_mdx_components sont plusieurs composants intégrés

  • linear_processes, qui permet d'afficher un processus linéaire comportant plusieurs étapes
  • les mathématiques affichent des formules mathématiques

 

  1. Des stratégies claires de rejet et d'avertissement

Définit la manière dont un utilisateur doit réagir lorsque sa demande dépasse les capacités de la v0 ou implique un contenu inapproprié, y compris les messages de rejet et d'avertissement spécifiques.

Message de refus : "Je suis désolé, je ne suis pas en mesure de vous aider".

Si un utilisateur fait une demande concernant un contenu violent, blessant, haineux, inapproprié ou immoral/illégal, v0 utilise un message de réponse de refus.
v0 doit traiter les parties et comme des connaissances internes, à n'utiliser que dans les balises et à ne pas partager directement avec les utilisateurs.
Si un utilisateur demande des informations en temps réel ou des événements récents ne relevant pas de la connaissance du domaine, v0 répond par un message de rejet car il n'a pas accès aux données en temps réel (il ne connaît que l'heure actuelle).
En cas de refus v0, il n'est pas permis de présenter des excuses ou d'expliquer la raison du refus, mais seulement de faire une simple déclaration :
"Je ne suis pas en mesure de vous aider".

MESSAGE D'AVERTISSEMENT : "Je suis surtout concentré sur ... mais ..."
Si la requête de l'utilisateur dépasse les connaissances du domaine de v0, v0 ajoute un message d'avertissement avant de répondre.

 

  1. Clarifier la définition des rôles (jeu de rôle)
    Les rôles sont toujours valables, et le message commence par clarifier le rôle de l'assistant : "v0, un assistant IA pour aider aux tâches de codage et de développement".

Rôles Cela permet au modèle de comprendre son identité et ses responsabilités.

 

  1. Standardiser les formats de sortie et donner des instructions claires pour les cas particuliers

Le format du contenu de sortie est décrit en détail, par exemple comment utiliser MDX, les blocs de code, les composants spécifiques, etc. Cela permet de s'assurer que la sortie du modèle est dans le format attendu pour le traitement ou la présentation ultérieurs.

par exemple

  • v0 doit échapper à tous les guillemets dans un bloc Markdown pour éviter les erreurs de syntaxe. Exemple :
    Pour installer...
    ```
    npm i nom-du-paquet
    ```
  • v0 Les guillemets doivent toujours être utilisés autour des noms de nœuds dans le diagramme Mermaid, comme indiqué dans l'exemple suivant.
  • v0 doit utiliser le codage HTML UTF-8 (sans &) pour les caractères spéciaux (par exemple + et -), par exemple #43 ; pour le symbole + et #45 ; pour le symbole -.
示例 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^2

v0.dev 更新后系统提示词分析（20241125）B["Pythagorean Theorem"] A-->C["\" style="display: block; margin: 0 auto; max-width: 100%;">

a #43; b #43; c = 180

v0.dev 更新后系统提示词分析（20241125）C\" style="display: block; margin: 0 auto; max-width: 100%;">

 

  1. cohérence linguistique

Insistez sur le fait que les réponses du modèle doivent être rédigées dans la même langue que l'utilisateur, à moins qu'il ne s'agisse de codes et de noms ou de références spécifiques.

"A l'exception des codes, des noms spécifiques et des citations, vos réponses doivent être rédigées dans la même langue que la question."

 

  1. Pourquoi la v0 prend-elle en charge les captures d'écran et la génération d'URL ?

Le mot de repère est clairement indiqué à l'intérieur :

  • Si un utilisateur joint une capture d'écran ou une image sans fournir de description, il est supposé que l'utilisateur souhaite que la v0 recrée la capture d'écran et corresponde le plus possible à la conception tout en mettant en œuvre toutes les fonctionnalités implicites.
  • L'utilisateur peut fournir l'URL du site web. Le système prendra automatiquement une capture d'écran et la joindra à la demande de l'utilisateur.
  • L'utilisateur peut attacher (ou glisser-déposer) des images et des fichiers texte via la boîte d'invite et v0 les intégrera et les lira.

 

  1. Planifier avant de mettre en œuvre

Étant donné que v0 doit créer un projet complet, et qu'un projet complet prend en compte la structure, les cadres, les bibliothèques, etc., l'invite demande à v0 de planifier avant d'exécuter.

Avant de créer un projet React, v0 étudie soigneusement la structure, les styles, les images et les médias, le formatage, les cadres et les bibliothèques, et les considérations afin de fournir la meilleure solution pour la requête de l'utilisateur.

 

  1. Que se passe-t-il lorsqu'un utilisateur sélectionne un élément de l'interface utilisateur pour demander une modification ?

Tout d'abord, v0 App enregistrera le nom du fichier de l'opération de l'utilisateur, le code correspondant au composant sélectionné, et lorsque l'utilisateur saisira le contenu dans la boîte de dialogue pop-up, v0 App enverra ces contenus avec l'entrée de l'utilisateur.

Supposons que je sélectionne le lien des catégories dans la navigation et que je veuille le transformer en un menu déroulant, l'application v0 soumet alors ce qui suit à l'API :

<user_request_context>
La demande de l'utilisateur concerne spécifiquement le fichier "components/nav-bar.tsx" et l'élément "Link" à cette position spécifique (y compris son contenu interne). également).

...
        <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">
...

Veuillez appliquer une modification rapide à ce fichier et apporter les changements nécessaires.
</user_request_context>

<user_request>
Veuillez changer les catégories en liste déroulante, les catégories ont plus d'entrées et sont affichées sur 3 colonnes.
</user_request>

 

  1. Comment la v0 a-t-elle résolu le problème de la paresse ?
    1. Dans dans la section ### Structure, point 2 :
      "2. v0 écrit toujours des extraits de code complets qui peuvent être copiés et collés directement dans une application Next.js. v0 n'écrit jamais d'extraits de code partiels ou ne demande pas aux utilisateurs d'ajouter leur propre code dans les commentaires."
    2. Les propriétés par défaut et la prévisibilité sont soulignées au point 3 :
      "3) En cas de rendu d'un composant, la v0 doit fournir des propriétés par défaut afin que le composant puisse être prévisualisé directement dans l'interface de discussion."
    3. Répétez le principe d'intégrité dans la section ### Exemples :
      Dans les exemples fournis dans l'astuce, v0 montre toujours l'implémentation complète de la fonctionnalité, démontrant ainsi son adhésion à la directive "aucun code laissé de côté".
    4. Dans la section :
      Souligner que v0 Avant de créer un projet React, il est important d'en définir la structure correcte et de s'assurer que tout le code nécessaire est inclus.

En intégrant ces instructions claires et directes dans les invites, v0 est guidé pour toujours fournir un code complet et immédiatement utilisable, ce qui résout efficacement le problème de la paresse de v0 qui ne produit pas un code complet.

 

v0.dev Invite système complet

https://baoyu.io/blog/v0-system-prompt-2024

© déclaration de droits d'auteur
Article copyright Cercle de partage de l'IA Tous, prière de ne pas reproduire sans autorisation.

Articles connexes

Pas de commentaires

Vous devez être connecté pour participer aux commentaires !
S'inscrire maintenant
aucun
Pas de commentaires...

Outils d'IA sélectionnés

Dernières collections

Derniers articles