v0.dev Análisis de las palabras de aviso del sistema tras la actualización (20241125)

Comandos de utilidad de AIActualizado hace 8 meses Círculo de intercambio de inteligencia artificial
2.4K 00

v0.dev El indicador del sistema se ha actualizado de nuevo, en comparación con la versión anterior, ocupando el fichas ¡Totalmente duplicado! Y un taco de sistema tan grande, ¿permite optimizar mejor las prestaciones?

Empecemos revisando las palabras clave del sistema v0 de la última iteración:v0.dev genera palabras de aviso completas del sistema para el código front-end El cambio de v0 de GPT4 a Claude Tras la modelización, también se reconstruyeron por completo las palabras clave del sistema, y en el artículo se ofrece un análisis detallado.

 

Aquí están las nuevas características de las palabras clave de la v0 analizadas por Bao Yu:

Analizando el v0 dev cue, el cue completo es bastante largo, ¡unos 45.257 caracteres y 10.397 tokens! Tengo que decir que la capacidad de Claude para seguir comandos es bastante fuerte!

Por supuesto, hay muchos conocimientos de Prompt Engineering a los que recurrir:

  1. Palabras clave estructuradas

En un taco con más de 10.000 fichas, para que los LLM comprendan el significado de las fichas y el enfoque de las mismas en diversas situaciones, es necesario tener una estructura clara para todo el conjunto de fichas, no sólo para poder diferenciar los límites de las distintas partes, sino también para tener una estructura de árbol que describa la relación de las fichas, de modo que los LLM puedan comprender mejor las fichas.

v0 utiliza XML para organizar la estructura de los tacos. La estructura de árbol del taco de alto nivel es la siguiente:

你是 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. Numerosos ejemplos

v0 para una variedad de diferentes escenarios de uso han escrito ejemplos claros, no sólo en una variedad de diferentes tipos de problemas para hacer frente a la utilización de ejemplos, más al final de un gran párrafo todos los ejemplos, por ejemplo:

  • Cómo tratar las preguntas generales, proporcionar advertencias y respuestas breves
  • Cómo demostrar algoritmos sencillos con bloques de ejecución de Node.js
  • Cómo pensar paso a paso al formular preguntas matemáticas o lógicas
  • Cómo negarse a responder preguntas sobre acontecimientos noticiosos en tiempo real
  • Cómo crear dos archivos: una acción de servidor React y un componente cliente que importa esa acción de servidor
  • ¡Un momento!

La ventaja de esto es que a través de estos ejemplos, LLM puede aprender a generar contenidos para diferentes escenarios.

 

  1. Definir los límites de las capacidades de IA

En el prompt, el conocimiento del dominio y el alcance de la competencia de v0 están claramente definidos, lo que establece el alcance de la respuesta modelo y evita generar contenido más allá del alcance de la competencia, dando lugar a "alucinaciones".

<v0_info>
v0 es un asistente de programación de IA avanzada.
v0 está diseñado para imitar el nivel de los mejores desarrolladores del mundo.
v0 Manténgase al día de las últimas tecnologías y las mejores prácticas.
v0 responde utilizando el formato MDX y admite los tipos y componentes MDX especializados que se definen a continuación.
El objetivo de v0 es ofrecer soluciones de programación claras, eficaces, concisas e innovadoras, manteniendo al mismo tiempo una actitud amistosa y accesible.
A menos que el usuario especifique lo contrario en el diálogo, v0 utiliza por defecto Next.js App Router; otros frameworks pueden no funcionar correctamente en la interfaz de v0.
Los conocimientos de v0 abarcan una amplia gama de lenguajes de programación, frameworks y mejores prácticas, con un enfoque particular en React, Next.js App Router y desarrollo web moderno.
</v0_info>

<v0_capabilities>

Los usuarios interactúan con v0 a través de una interfaz alojada en https:// v0 . dev alojada en el sitio web de v0 . Estas son algunas de las características de la interfaz de usuario de v0:

  • El usuario puede adjuntar (o arrastrar y soltar) imágenes y archivos de texto a través del cuadro de consulta y v0 los incrustará y leerá.
  • Los usuarios pueden previsualizar o renderizar la interfaz de usuario generada en un componente React, HTML o bloque Markdown haciendo clic en la pestaña "Vista previa" de la esquina superior derecha de la interfaz.
  • Puede ejecutar código JavaScript desde un bloque ejecutable Node.js haciendo clic en la pestaña "Ejecutar código" en la esquina superior derecha de la interfaz.
  • El usuario puede proporcionar la URL del sitio web. El sistema tomará automáticamente una captura de pantalla y la adjuntará a la solicitud del usuario.
  • Los usuarios pueden abrir la vista de bloque (que muestra una vista previa del código que ha escrito) haciendo clic en la vista previa de bloque especial que se presenta en el chat.
  • Los usuarios pueden instalar Bloques v0 (código que usted ha escrito) en su base de código haciendo clic en el botón "añadir a la base de código" con un icono de terminal en la esquina superior derecha de la vista de Bloques.
  • v0 puede gestionar la instalación y configuración de las dependencias necesarias en un proyecto existente, o ayudar al usuario a crear un nuevo proyecto.
  • Siempre debe aconsejar a los usuarios que utilicen el mecanismo de instalación integrado para instalar el código generado en el diálogo.
  • Si el usuario está muy frustrado con tu respuesta, puedes sugerirle que denuncie el chat al equipo y bifurque su Bloqueo a un nuevo chat.
  • Si el usuario necesita inicializar la base de datos o realizar otras configuraciones similares, v0 puede utilizar el Bloque de Ejecución de Código. Tiene las mismas variables de entorno que el Bloque de Proyecto React.
  • Siempre que sea posible, se recomienda que los usuarios configuren las dependencias utilizando las integraciones de Vercel, como Redis y Supabase, que pueden configurarse a través de la página de integración de Vercel.
  • Por defecto, siempre selecciona Next.js a menos que el usuario especifique lo contrario.

</v0_capabilities>

v0 tiene el conocimiento del dominio para proporcionar respuestas precisas a las consultas de los usuarios. v0 utiliza este conocimiento para asegurarse de que sus respuestas son correctas y útiles.

 

  1. Aplicar cadenas de pensamiento para mejorar la calidad del razonamiento

Se sabe que el uso de cadenas de pensamiento mejora la calidad del razonamiento en LLM, pero al mismo tiempo es mejor mantener este proceso de razonamiento fuera de la vista del usuario, por lo que v0 requiere pensar paso a paso utilizando etiquetas en las indicaciones antes de responder, especialmente cuando se trata de problemas matemáticos o lógicos.

La siguiente es la guía de v0 para proporcionar la respuesta correcta:

<forming_correct_responses>

  1. v0 Utilice siempre , antes de dar una respuesta, para evaluar qué tipo de bloque o componente MDX se adapta mejor a la consulta del usuario en función de los criterios definidos anteriormente.
    Nota: v0 debe evaluar si es necesario denegar o advertir al usuario.
    Nota: v0 Es necesario reflexionar para dar la respuesta correcta.
  2. Cuando se enfrenta a un problema matemático, lógico o de otro tipo que requiere un pensamiento sistemático, v0 procede paso a paso con la derivación y luego da la respuesta final.
  3. Cuando se escribe código, v0 sigue las directrices listadas en la sección v0_code_block_types (componentes React, código ejecutable Node.js, HTML, gráficos, etc.).
  4. Las respuestas de v0 se basan en su conocimiento del dominio y el contenido es auténtico. v0 utiliza el conocimiento del dominio en las consultas pertinentes de los usuarios.
  5. Su respuesta debe estar redactada en el mismo idioma que la pregunta, excepto los códigos, los nombres específicos y las comillas.

</forming_correct_responses>

 

  1. Instrucciones y especificaciones detalladas

En los avisos se especifica con detalle el comportamiento, el tono y el formato de v0, por ejemplo, cómo utilizar los bloques de código y cómo gestionar las peticiones de los usuarios. Esto reduce la probabilidad de que el modelo produzca respuestas que no cumplan las expectativas.

v0 responde usando el formato MDX, que es un formato que extiende las capacidades de los componentes React basados en Markdown, porque Markdown es un formato amigable con LLM que te permite generar el formato Markdown exacto que necesitas, y luego usar las capacidades de renderizado de componentes de MDX para ver el código ejecutándose en la UI de una manera WYSIWYG.

Existen dos categorías principales de MDX para v0:

  • v0_code_block_types: tipos de bloques de código personalizados
  • v0_mdx_components: Componentes MDX
+-- <v0_mdx>
|
+-- <v0_code_block_types>
| |
| +-- <react_project>
| +-- <nodejs_executable>
| +-- <python_executable>
| +--
| +--
| +--
| +-- <general_code>
|
+-- <v0_mdx_components>
|
+-- <linear_processes>
+--

v0_code_block_types son los tipos de bloques de código personalizados, aplicados a diferentes tipos de tareas, por ejemplo:

  • react_project, que es un tipo añadido recientemente que permite a v0 generar un proyecto React completo de una vez que puede contener múltiples archivos
  • nodejs_executable se utiliza para generar un proyecto Nodejs que puede ser ejecutado en el servidor o localmente. v0 proporciona una máquina virtual para pasar el código generado por LLM, que puede ser ejecutado en la máquina virtual y luego devolver los resultados.
  • python_executable, similar a Nodejs, excepto que el código Python generado es ejecutable por una máquina virtual que ejecute Python.
  • html, que genera un fragmento de código HTML, expresado como un archivo html, que puede ser renderizado por un navegador en tiempo real.
  • markdown, similar a html pero en formato markdown.
  • Diagrama, sirena Diagrama de flujo
  • general_code, que es un fragmento de código en otro lenguaje, como SQL, que sólo puede visualizarse pero no ejecutarse.

v0_mdx_components son varios componentes incorporados

  • linear_processes, que se utiliza para visualizar un proceso lineal que muestra múltiples pasos
  • math muestra fórmulas matemáticas

 

  1. Estrategias claras de rechazo y advertencia

Define cómo un usuario debe responder cuando su solicitud está más allá de las capacidades de v0 o implica contenido inapropiado, incluyendo mensajes específicos de rechazo y advertencia.

Mensaje de rechazo: "Lo siento, no puedo ayudarle".

Si un usuario realiza una solicitud relativa a contenidos violentos, hirientes, odiosos, inapropiados o inmorales/ilegales, v0 utiliza un mensaje de respuesta de denegación.
v0 debe tratar las partes y como conocimiento interno, para ser usado sólo en etiquetas, y no compartido directamente con los usuarios.
Si un usuario solicita información en tiempo real o acontecimientos recientes ajenos al conocimiento del dominio, v0 responde con un mensaje de rechazo porque no tiene acceso a datos en tiempo real (sólo conoce la hora actual).
En caso de denegación,v0 no se permite ninguna disculpa ni explicación del motivo de la denegación, sino una simple declaración:
"No puedo ayudar con eso".

MENSAJE DE ADVERTENCIA: "Me centro sobre todo en ... pero ..."
Si la consulta del usuario va más allá de los conocimientos de v0, v0 añade un mensaje de advertencia antes de responder.

 

  1. Aclarar la definición de roles (Role Playing)
    Los roles siguen siendo valiosos, y el aviso comienza aclarando el papel del asistente como "v0, un asistente de IA para ayudar con tareas de codificación y desarrollo".

Funciones Ayuda al modelo a comprender su identidad y sus responsabilidades.

 

  1. Normalizar los formatos de salida y dar instrucciones claras para casos especiales.

El formato del contenido de salida se describe detalladamente, por ejemplo, cómo utilizar MDX, bloques de código, componentes específicos, etc. De este modo se garantiza que la salida del modelo tenga el formato esperado para su posterior procesamiento o presentación.

por ejemplo

  • v0 debe escapar todas las comillas en un bloque Markdown para evitar errores de sintaxis. Ejemplo:
    Para instalar...
    ```
    npm i nombre-paquete
    ```
  • v0 Los nombres de los nodos del gráfico de la Sirena deben ir siempre entre comillas, como se muestra en el siguiente ejemplo.
  • v0 debe utilizar la codificación HTML UTF-8 (sin &) para los caracteres especiales (por ejemplo, + y -), por ejemplo #43; para el símbolo + y #45; para el símbolo -.
示例 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. coherencia lingüística

Haga hincapié en que las respuestas del modelo deben estar en el mismo idioma que el usuario, a menos que se trate de códigos y nombres o referencias específicas.

"A excepción de códigos, nombres específicos y citas, tus respuestas deben estar en el mismo idioma que la pregunta".

 

  1. ¿Por qué la v0 admite capturas de pantalla y generación de URL?

La palabra clave está claramente indicada en el interior:

  • Si un usuario adjunta una captura de pantalla o imagen pero no proporciona una descripción, se asume que el usuario quiere que v0 recree la captura de pantalla y se ajuste al diseño tanto como sea posible mientras implementa todas las características implícitas.
  • El usuario puede proporcionar la URL del sitio web. El sistema tomará automáticamente una captura de pantalla y la adjuntará a la solicitud del usuario.
  • El usuario puede adjuntar (o arrastrar y soltar) imágenes y archivos de texto a través del cuadro de consulta y v0 los incrustará y leerá.

 

  1. Planificar antes de aplicar

Dado que v0 necesita crear un proyecto completo, y un proyecto completo tiene en cuenta estructura, frameworks, librerías, etc., el prompt pide a v0 que planifique antes de ejecutar.

Antes de crear un proyecto React, v0 considera cuidadosamente la estructura correcta, estilos, imágenes y medios, formato, frameworks y librerías, y consideraciones con el fin de proporcionar la mejor solución para la consulta del usuario.

 

  1. ¿Qué ocurre cuando un usuario selecciona un elemento de la interfaz de usuario para solicitar un cambio?

En primer lugar, v0 App registrará el nombre de archivo de la operación del usuario, el código correspondiente al componente seleccionado, y cuando el usuario introduzca el contenido en el cuadro de diálogo emergente, v0 App enviará estos contenidos junto con la entrada del usuario.

Digamos que selecciono el enlace de categorías en la navegación y quiero cambiarlo a un menú desplegable, entonces la aplicación v0 envía lo siguiente a la API:

<user_request_context>
La solicitud del usuario se refiere específicamente al archivo "components/nav-bar.tsx" y al elemento "Link" en esta posición concreta (incluido también su contenido interno). también).

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

Por favor, aplique una Edición Rápida a este archivo y realice los cambios necesarios.
</user_request_context>

<user_request>
Por favor, cambie Categorías a Desplegable, Categorías tiene más entradas y se muestra como 3 columnas
</user_request>

 

  1. ¿Cómo resolvió la v0 el problema de la pereza?
    1. En en la sección ### Estructura, punto 2:
      "2. v0 siempre escribe fragmentos de código completos que se pueden copiar y pegar directamente en una aplicación Next.js. v0 nunca escribe fragmentos de código parciales ni requiere que los usuarios añadan su propio código en los comentarios."
    2. En el punto 3 se hace hincapié en las propiedades predeterminadas y la previsibilidad:
      "3. Si se renderiza un componente, v0 debe proporcionar propiedades por defecto para que el componente se pueda previsualizar directamente en la interfaz de chat."
    3. Repita el principio de integridad de la sección ### Ejemplos:
      En los ejemplos proporcionados en el consejo, v0 siempre muestra la implementación completa de la funcionalidad, demostrando así su adhesión a la directiva "no debe omitirse ningún código".
    4. En la sección :
      Señalar que v0 Antes de crear un proyecto React, es importante primero ordenar la estructura correcta y asegurarse de que se incluye todo el código necesario.

Al incluir estas instrucciones claras y directas en los avisos, v0 es guiado para proporcionar siempre código completo e inmediatamente utilizable, resolviendo así eficazmente el problema de la pereza de v0 al no producir código completo.

 

v0.dev Sistema completo

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

© declaración de copyright
Derechos de autor del artículo Círculo de intercambio de inteligencia artificial Todos, por favor no reproducir sin permiso.

Artículos relacionados

Sin comentarios

Debe iniciar sesión para participar en los comentarios.
Acceder ahora
ninguno
Sin comentarios...

Herramientas de IA seleccionadas

Últimas colecciones

Últimos artículos