Engenharia de Prompts no Editor: Contexto, Arquivos e Instruções de Sistema

Engenharia de Prompts no Editor: Contexto, Arquivos e Instruções de Sistema — aula do módulo OpenCode & Assistentes no Editor, na trilha Provedores e Modelos…

Leitura de aproximadamente 4 minutos.

Módulo: OpenCode & Assistentes no Editor · Curso: Provedores e Modelos Gratuitos com OpenRouter & OpenCode · Formação: Formação Nível Zero: Ferramentas Essenciais e Gratuitas de IA e Código

Engenharia de Prompts no Editor: Contexto, Arquivos e Instruções de Sistema

O que você vai aprender

1. Do Chat Web à Engenharia de Contexto no Editor

Muitos profissionais acostumados a usar ferramentas como ChatGPT ou Claude na web tentam reproduzir a mesma abordagem dentro do editor de código: eles abrem o chat da extensão e escrevem pedidos vagos, como: "Crie um formulário de login para o meu sistema".

O resultado quase sempre é frustrante:

Isso acontece porque um modelo de linguagem não é um adivinho: ele só consegue gerar respostas precisas se receber o contexto correto.

No editor de código, a engenharia de prompts deixa de ser apenas a escolha de "palavras mágicas" e passa a ser a gestão cirúrgica de contexto: entregar ao modelo exatamente os arquivos, regras e restrições necessários para ele executar a tarefa com perfeição.


+-------------------------------------------------------------------------------+
|                       ANATOMIA DO PROMPT PERFEITO NO EDITOR                   |
+-------------------------------------------------------------------------------+
|                                                                               |
|   ┌───────────────────────────────────────────────────────────────────────┐   |
|   │ 1. REGRAS GERAIS (System Instructions / AGENTS.md)                    │   |
|   │    "Use apenas JavaScript puro e CSS Vanilla. Sem frameworks."        │   |
|   ├───────────────────────────────────────────────────────────────────────┤   |
|   │ 2. CONTEXTO VINCULADO (@arquivo, @pasta)                              │   |
|   │    @index.html  @estilos.css                                          │   |
|   ├───────────────────────────────────────────────────────────────────────┤   |
|   │ 3. OBJETIVO CIRÚRGICO                                                 │   |
|   │    "Adicione uma seção de contato com 2 campos: Nome e E-mail."       │   |
|   ├───────────────────────────────────────────────────────────────────────┤   |
|   │ 4. RESTRIÇÃO DE SAÍDA                                                 │   |
|   │    "Mantenha o cabeçalho existente e mostre apenas o bloco adicionado"│   |
|   └───────────────────────────────────────────────────────────────────────┘   |
|                                                                               |
+-------------------------------------------------------------------------------+

2. Referenciando Arquivos com a Sintaxe @

Os assistentes modernos integrados ao editor (como Cline, OpenCode e Antigravity) possuem recursos de autocompletar de contexto através do caractere arroba (@):

Exemplo Prático: Comparando Abordagens

| Abordagem Fraca (Chat Web Genérico) | Abordagem Cirúrgica no Editor | |---|---| | "Meu botão não está funcionando, o que pode ser?" | "Analise @index.html e @app.js. O botão com id btn-salvar não está disparando o alerta ao ser clicado. Aponte a causa e a correção." | | "Estilize a minha página para ficar bonita." | "Consulte @estilos.css e aplique as mesmas variáveis de cor (--cor-primaria) aos novos botões da tabela em @tabela.html." |

3. Instruções de Sistema e Regras de Governança

Para evitar ter que repetir as mesmas preferências em toda mensagem (como "responda em português", "não use bibliotecas externas", "escreva código simples"), os editores permitem configurar Instruções de Sistema (System Instructions ou arquivos como AGENTS.md).

Quando uma regra de sistema é definida, ela é injetada silenciosamente em todas as interações com a IA.

Exemplo de regras fundamentais para quem está aprendendo: 1. Linguagem Pura: Prefira sempre HTML5, CSS3 e JavaScript nativos sem frameworks adicionais. 2. Edição Não-Destrutiva: Ao sugerir alterações, preserve a estrutura existente e altere apenas o bloco necessário. 3. Explicação Didática: Explique o motivo de cada alteração em 1 ou 2 frases antes de exibir o código.

4. Dicas e Cuidados Operacionais

[!TIP]
Economia de Contexto e Foco: Não anexe todos os arquivos do projeto de uma vez só com dezenas de arrobas (@). Quanto maior a quantidade de arquivos enviados desnecessariamente, maior é o risco de a IA se perder em detalhes irrelevantes e gerar alucinações. Anexe apenas os 1 ou 2 arquivos diretamente ligados àquela alteração específica.

Exercício Prático

Vamos praticar a engenharia de prompts com contexto no seu editor:

1. Crie um arquivo HTML básico: Crie um arquivo chamado teste.html com a estrutura inicial:


   <!DOCTYPE html>
   <html lang="pt-BR">
   <head>
       <meta charset="UTF-8">
       <title>Página de Demonstração</title>
   </head>
   <body>
       <h1>Minha Empresa</h1>
   </body>
   </html>

2. Abra o chat do assistente: Na barra lateral, inicie uma nova conversa.

3. Envie um prompt com contexto referenciado: Digite exatamente:


   Observe o arquivo @teste.html. Adicione um parágrafo institucional abaixo do título h1 e um botão de contato. Preserve toda a estrutura existente do arquivo.

4. Inspecione a resposta: Observe como o assistente leu o arquivo teste.html, entendeu a estrutura existente e propôs apenas as adições solicitadas sem desconfigurar o documento.

Outras aulas do módulo