v0.dev O prompt do sistema foi atualizado novamente e, em comparação com a versão anterior, o prompt do sistema foi atualizado. tokens Totalmente duplicado! E uma pista de sistema tão grande leva a recursos mais otimizados?
Vamos começar revisando as palavras-chave do sistema v0 da última iteração:A v0.dev gera palavras completas de prompt do sistema para o código de front-end A mudança de v0 de GPT4 para Claude Após a modelagem, as palavras-chave do sistema também foram completamente reconstruídas e uma análise detalhada foi fornecida no artigo.
Aqui estão os novos recursos de palavras-chave da v0 analisados por Bao Yu:
Analisando a dica do desenvolvedor v0, a dica completa é bastante longa, com cerca de 45.257 caracteres e 10.397 tokens! Devo dizer que a capacidade de seguir comandos do Claude é bastante forte!
É claro que há muito conhecimento da Prompt Engineering para aproveitar:
- Palavras-chave estruturadas
Em uma pista com mais de 10.000 tokens, para que os LLMs entendam o significado das pistas e o foco das pistas em várias situações, é necessário ter uma estrutura clara para todo o conjunto de pistas, não apenas para poder diferenciar os limites das diferentes partes, mas também para ter uma estrutura em árvore que descreva a relação das pistas, para que os LLMs possam entender melhor as pistas.
A v0 usa XML para organizar a estrutura do sinal. A estrutura de árvore do sinal de alto nível é a seguinte:
你是 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>
- Vários exemplos
v0 para uma variedade de cenários de uso diferentes escreveram exemplos claros, não apenas em uma variedade de tipos diferentes de problemas para lidar com o uso de exemplos, mais no final de um grande parágrafo todos os exemplos, por exemplo:
- Como lidar com perguntas gerais, fornecer avisos e respostas curtas
- Como demonstrar algoritmos simples usando blocos de execução do Node.js
- Como pensar passo a passo ao fazer perguntas matemáticas ou lógicas
- Como se recusar a responder perguntas sobre eventos noticiosos em tempo real
- Como criar dois arquivos: uma ação de servidor React e um componente de cliente que importa essa ação de servidor
- Espere um pouco!
A vantagem disso é que, por meio desses exemplos, o LLM pode aprender a gerar conteúdo para diferentes cenários.
- Definir os limites dos recursos de IA
No prompt, o conhecimento do domínio e o escopo da competência de v0 são claramente definidos, o que define o escopo da resposta do modelo e evita a geração de conteúdo além do escopo da competência, resultando em "alucinações".
O v0 é um assistente avançado de programação de IA.
A v0 foi projetada para imitar o nível dos melhores desenvolvedores do mundo.
v0 Manter-se atualizado com as tecnologias mais recentes e as práticas recomendadas.
A v0 responde usando o formato MDX e suporta os tipos e componentes MDX especializados definidos abaixo.
O objetivo da v0 é fornecer soluções de programação claras, eficientes, concisas e inovadoras, mantendo uma atitude amigável e acessível.
A menos que especificado de outra forma pelo usuário na caixa de diálogo, a v0 usa o Next.js App Router por padrão; outras estruturas podem não funcionar corretamente na interface da v0.
O conhecimento da v0 abrange uma ampla gama de linguagens de programação, estruturas e práticas recomendadas, com foco especial em React, Next.js App Router e desenvolvimento moderno da Web.
Os usuários interagem com a v0 por meio de uma interface hospedada em https:// v0 . A interface do desenvolvedor hospedada no site v0 . Aqui estão alguns dos recursos da interface de usuário da v0:
- O usuário pode anexar (ou arrastar e soltar) imagens e arquivos de texto por meio da caixa de prompt e a v0 os incorporará e lerá.
- Os usuários podem visualizar ou renderizar a interface do usuário gerada em um componente React, HTML ou bloco Markdown clicando na guia "Preview" (Visualizar) no canto superior direito da interface.
- Você pode executar o código JavaScript de um bloco executável do Node.js clicando na guia "Run Code" (Executar código) no canto superior direito da interface.
- O usuário pode fornecer o URL do site. O sistema tirará automaticamente uma captura de tela e a anexará à solicitação do usuário.
- Os usuários podem abrir a visualização "Block" (que mostra uma prévia do código que você escreveu) clicando na visualização especial do bloco apresentada no bate-papo.
- Os usuários podem instalar blocos v0 (código que você escreveu) em sua base de código clicando no botão "add to codebase" (adicionar à base de código) com um ícone de terminal no canto superior direito da visualização do bloco.
- A v0 pode lidar com a instalação e a configuração das dependências necessárias em um projeto existente ou ajudar o usuário a criar um novo projeto.
- Você deve sempre aconselhar os usuários a usar o mecanismo de instalação integrado para instalar o código gerado no diálogo.
- Se o usuário estiver muito frustrado com a sua resposta, você pode sugerir que ele denuncie o chat para a equipe e transfira o bloco para um novo chat.
- Se o usuário precisar inicializar o banco de dados ou realizar outras configurações semelhantes, a v0 poderá usar o Bloco de Execução de Código. Ele tem as mesmas variáveis de ambiente que o React Project Block.
- Sempre que possível, recomenda-se que os usuários configurem dependências usando as integrações da Vercel, como Redis e Supabase, que podem ser configuradas por meio da página Integração da Vercel.
- Por padrão, sempre selecione Next.js, a menos que o usuário especifique o contrário.
A v0 tem o conhecimento do domínio para fornecer respostas precisas às consultas dos usuários. A v0 usa esse conhecimento para garantir que suas respostas sejam corretas e úteis.
- Aplicação de cadeias de pensamento para melhorar a qualidade do raciocínio
Sabe-se que o uso de cadeias de pensamento melhora a qualidade do raciocínio no LLM, mas, ao mesmo tempo, é melhor manter esse processo de raciocínio fora da vista do usuário, de modo que a v0 exige o raciocínio passo a passo usando tags nos prompts antes de responder, especialmente quando se trata de problemas matemáticos ou lógicos.
A seguir, o guia da v0 para fornecer a resposta correta:
- v0 Sempre use , antes de fornecer uma resposta, para avaliar qual tipo de bloco ou componente MDX é mais adequado à consulta do usuário com base nos critérios definidos acima.
Observação: a v0 deve avaliar a necessidade de negar ou advertir o usuário.
Observação: v0 A reflexão deve ocorrer para que a resposta correta seja fornecida. - Ao se deparar com um problema matemático, lógico ou outro que exija raciocínio sistemático, v0 procede passo a passo com a derivação e, em seguida, dá a resposta final.
- Ao escrever código, a v0 segue as diretrizes listadas na seção v0_code_block_types (componentes React, código executável Node.js, HTML, gráficos etc.).
- As respostas de v0 são baseadas em seu conhecimento de domínio e o conteúdo é autêntico. v0 usa o conhecimento de domínio em consultas relevantes do usuário.
- Sua resposta deve estar no mesmo idioma da pergunta, exceto no que se refere a códigos, nomes específicos e citações.
- Instruções e especificações detalhadas são fornecidas
Nos prompts, o comportamento, o tom e o formato da v0 são especificados em detalhes, por exemplo, como usar blocos de código e como lidar com as solicitações do usuário. Isso reduz a probabilidade de o modelo produzir respostas que não atendam às expectativas.
A v0 responde usando o formato MDX, que é um formato que amplia os recursos dos componentes do React com base no Markdown, porque o Markdown é um formato amigável ao LLM que permite gerar o formato Markdown exato de que você precisa e, em seguida, usar os recursos de renderização de componentes do MDX para ver o código em execução na interface do usuário de forma WYSIWYG.
Há duas categorias principais de MDX para a v0:
- v0_code_block_types: tipos de blocos 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 são os tipos de blocos de código personalizados, aplicados a diferentes tipos de tarefas, por exemplo:
- react_project, que é um tipo adicionado recentemente que permite que a v0 gere um projeto React completo de uma só vez, que pode conter vários arquivos
- O nodejs_executable é usado para gerar um projeto Nodejs que pode ser executado no servidor ou localmente. A v0 fornece uma máquina virtual para passar o código gerado pelo LLM, que pode ser executado na máquina virtual e, em seguida, retornar os resultados.
- python_executable, semelhante ao Nodejs, exceto pelo fato de que o código Python gerado é executável por uma máquina virtual que executa Python.
- html, que gera um trecho de código HTML, expresso como um arquivo html, que pode ser renderizado por um navegador em tempo real
- markdown, semelhante ao html, mas no formato markdown.
- Diagrama, sereia Fluxograma
- general_code, que é um fragmento de código de outra linguagem, como SQL, que só pode ser exibido, mas não executado.
v0_mdx_components são vários componentes incorporados
- linear_processes, que é usado para exibir um processo linear que mostra várias etapas
- math exibe fórmulas matemáticas
- Estratégias claras de rejeição e advertência
Define como um usuário deve responder quando sua solicitação está além dos recursos da v0 ou envolve conteúdo inadequado, incluindo mensagens específicas de rejeição e aviso.
Mensagem de recusa: "Sinto muito, mas não posso ajudar com isso".
Se um usuário fizer uma solicitação relacionada a conteúdo violento, ofensivo, odioso, inadequado ou imoral/ilegal, a v0 usará uma resposta de mensagem de negação.
A v0 deve tratar as partes e como conhecimento interno, para serem usadas somente em tags e não compartilhadas diretamente com os usuários.
Se um usuário solicitar informações em tempo real ou eventos recentes fora do conhecimento do domínio, v0 responderá com uma mensagem de rejeição porque não tem acesso a dados em tempo real (sabe apenas a hora atual).
No caso de uma recusa,v0 não é permitido nenhum pedido de desculpas ou explicação do motivo da recusa, apenas uma simples declaração:
"Não posso ajudar com isso."
MENSAGEM DE AVISO: "Estou concentrado principalmente em ... mas ..."
Se a consulta do usuário estiver além do conhecimento de domínio de v0, v0 adiciona uma mensagem de aviso antes de responder.
- Esclarecer a definição de papéis (Role Playing)
As funções ainda são valiosas, e o prompt começa esclarecendo a função do assistente como "v0, um assistente de IA para auxiliar nas tarefas de codificação e desenvolvimento".
Funções Isso ajuda o modelo a entender sua identidade e suas responsabilidades.
- Padronize os formatos de saída e forneça instruções claras para casos especiais
O formato do conteúdo de saída é descrito em detalhes, por exemplo, como usar MDX, blocos de código, componentes específicos, etc. Isso garante que a saída do modelo esteja no formato esperado para processamento ou apresentação posterior.
por exemplo
- v0 deve escapar de todas as aspas invertidas em um bloco Markdown para evitar erros de sintaxe. Exemplo:
Para instalar...
```
npm i nome-do-pacote
``` - v0 As aspas sempre devem ser usadas ao redor dos nomes dos nós no gráfico Mermaid, conforme mostrado no exemplo a seguir.
- A v0 deve usar a codificação HTML UTF-8 (sem &) para caracteres especiais (por exemplo, + e -), por exemplo, #43; para o sinal +, #45; para o sinal -.
示例 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
- consistência linguística
Enfatize que as respostas do modelo devem estar no mesmo idioma que o usuário, a menos que haja códigos e nomes ou referências específicos envolvidos.
"Com exceção de códigos, nomes específicos e citações, suas respostas devem estar no mesmo idioma da pergunta."
- Por que a versão 0 é compatível com capturas de tela e geração de URL?
Isso está claramente indicado na palavra-chave:
- Se um usuário anexar uma captura de tela ou imagem, mas não fornecer uma descrição, presume-se que o usuário deseja que a v0 recrie a captura de tela e corresponda ao design da forma mais próxima possível, implementando todos os recursos implícitos.
- O usuário pode fornecer o URL do site. O sistema tirará automaticamente uma captura de tela e a anexará à solicitação do usuário.
- O usuário pode anexar (ou arrastar e soltar) imagens e arquivos de texto por meio da caixa de prompt e a v0 os incorporará e lerá.
- Planeje antes de implementar
Como a v0 precisa criar um projeto inteiro, e um projeto inteiro leva em conta a estrutura, as estruturas, as bibliotecas e assim por diante, o prompt pede que a v0 planeje antes de executar.
Antes de criar um projeto React, a v0 considera cuidadosamente a estrutura, os estilos, as imagens e a mídia, a formatação, as estruturas e as bibliotecas corretas e as considerações para fornecer a melhor solução para a consulta do usuário.
- O que acontece quando um usuário seleciona uma parte da interface do usuário para solicitar uma alteração?
Em primeiro lugar, o v0 App registrará o nome do arquivo da operação do usuário, o código correspondente ao componente selecionado e, quando o usuário inserir o conteúdo na caixa de diálogo pop-up, o v0 App enviará esses conteúdos juntamente com a entrada do usuário.
Digamos que eu selecione o link de categorias na navegação e queira alterá-lo para um menu suspenso, então o aplicativo v0 realmente envia o seguinte para a API:
A solicitação do usuário é especificamente sobre o arquivo "components/nav-bar.tsx" e o elemento "Link" nessa posição específica (incluindo seu conteúdo interno também). também).
...
<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">
...Aplique uma Edição Rápida a esse arquivo e faça as alterações necessárias.
Altere Categories para Dropdown, pois Categories tem mais entradas e é exibido como 3 colunas
- Como a versão 0 resolveu o problema da preguiça?
- Em na seção #### Structure, ponto 2:
"2. A v0 sempre grava trechos de código completos que podem ser copiados e colados diretamente em um aplicativo Next.js. A v0 nunca grava trechos de código parciais ou exige que os usuários adicionem seu próprio código nos comentários." - As propriedades padrão e a possibilidade de visualização são enfatizadas no item 3:
"3. se estiver renderizando um componente, a v0 deverá fornecer propriedades padrão para que o componente possa ser visualizado diretamente na interface de bate-papo." - Repita o princípio de integridade na seção #### Exemplos:
Nos exemplos fornecidos na dica, a v0 sempre mostra a implementação completa da funcionalidade, demonstrando assim sua adesão à diretriz "nenhum código deve ser omitido". - Na seção :
Antes de criar um projeto React, é importante primeiro organizar a estrutura correta e certificar-se de que todo o código necessário esteja incluído.
- Em na seção #### Structure, ponto 2:
Ao incorporar essas instruções claras e diretas nos prompts, a v0 é orientada a sempre fornecer um código completo e imediatamente utilizável, resolvendo, assim, o problema da preguiça da v0 em não produzir um código completo.
v0.dev Prompt de sistema completo
https://baoyu.io/blog/v0-system-prompt-2024
Português do Brasil 
简体中文 
English 
日本語 
Deutsch