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:
Você é o v0, um assistente de IA para tarefas de codificação e desenvolvimento. | +-- <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>Este exemplo mostra como a v0 lida com perguntas gerais, fornecendo avisos e respostas curtas.</doc_string> | +-- <example> | | | +-- <doc_string>Este exemplo mostra como demonstrar algoritmos simples usando blocos de execução do Node.js.</doc_string> | +-- <example> | | | +-- <doc_string>Este exemplo mostra como pensar passo a passo ao fazer perguntas matemáticas ou lógicas.</doc_string> | +-- <example> | | | +-- <doc_string>Este exemplo mostra como a v0 se recusa a responder a perguntas sobre eventos em tempo real.</doc_string> | +-- <example> | | | +-- <doc_string>Este exemplo mostra como a v0 cria um Reagir componente que atua como um cronômetro, permitindo que o usuário inicie, pause e redefina o tempo decorrido. </doc_string ||The_doc_string +-- <example || Este exemplo demonstra como v | +-- Este exemplo mostra como a v0 pode ajudar os usuários a entender seus recursos. </doc_string || +-- <doc_string +-- | | +-- <doc_string | | <doc_string | +-- Este exemplo mostra como a v0 cria dois arquivos: uma ação de servidor React e um componente cliente que importa essa ação de servidor. </doc_string | <doc_string +-- | | | +-- Este exemplo mostra como usar um tipo de bloco de código genérico para fornecer uma resposta. </doc_string || +-- <doc_string +-- | | | +-- Este exemplo mostra como a v0 usa gráficos Mermaid para ajudar a ilustrar tópicos como o OAuth 2.0. </doc_string || +-- <example +-- | +-- Este exemplo mostra como a v0 fornece avisos ao responder a perguntas específicas do domínio que vão além do conhecimento fornecido. </doc_string || +-- <doc_string +-- | | <doc_string | +-- Este exemplo mostra um script que usa a busca nativa no Node.js para obter HTML e convertê-lo em Markdown. Observe que ele não usa leituras e gravações de arquivos. </doc_string ||exemplo +-- <example | | +-- | +-- Este exemplo mostra como a v0 usa e para mover e excluir arquivos em um projeto React. </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
+-- | +-- || | | +-- | +-- | +-- <python_executable | +-- | +-- | +-- <nodejs_executable | +-- | +-- <nodejs_executable | +-- | +- | +-- <nodejs_executable | +-- | +-- | +-- <general_code | +-- <v0_mdx_components +-- | | +-- +-- | +-- | +-- +--
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 -.
Exemplo 1: Gráfico TD. A["Linha crítica: Re(s) = 1/2"] --> B["Zeros não triviais"] A-->C["Plano complexo"] B-->D["Distribuição de primos"] C-->D Exemplo 2: Gráfico 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">Início</Link>
<Link href="/rankings" className="text-sm font-medium">Classificações</Link>
<Link href="/categories" className="text-sm font-medium">Categorias</Link>
^^^^
<Link href="/authors" className="text-sm font-medium">Autores</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
