Modelos de prompt
As peças e os tipos de prompt do ME — zonas, blocos e genéricos para montar ou ajustar partes de tela. As telas inteiras ficam nos Gabaritos.
Um bom prompt não descreve só o que você quer — ele dá o contexto e as restrições que mantêm a saída no padrão. Os modelos abaixo são para copiar, preencher os {placeholders} e colar. Se preferir escrever com suas palavras, use o Compositor E-PROC.
Anatomia
A anatomia de um prompt são as suas seções, nesta ordem — não confunda com a anatomia da tela (as zonas: Header, Subheader…, no Glossário). Um prompt do ME separa o que é o produto (contexto/padrão) de como ele é implementado (o alvo/stack). As partes são fixas — e duas condicionais, conforme a tarefa:
- Contexto — o papel + o modelo ME. "Você é um(a) engenheiro(a) de front-end do ME. Você trabalha no ME (E-PROC), seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia), os componentes do design system e a voz em PT-BR (Glossário do ME)."
- Alvo (stack) — a stack de implementação e suas características (hierarquia de componentes, tokens, artefato de saída). É o que separa um alvo do outro; o padrão e a UX são os mesmos, só muda a camada de implementação (a stack). "ALVO — EletroDS + Nuxt: Nuxt 3 + Vue 3 + Nuxt UI; hierarquia blocks EletroDS → componentes Me → Nuxt UI → Vue puro; tokens --ui-* (sem HEX); saída: componente Vue."*
- Entrada (só quando age sobre uma tela que já existe) — cole a tela atual (ou a tela-modelo, na Referência). Sem ela, "mudar", "corrigir" ou "criticar" não têm sobre o que agir — a IA não conhece a sua tela. "TELA ATUAL: {cole o código Vue ou a descrição}".
- Tarefa — o que fazer, referenciando a Entrada e o Padrão. "Gere a tela de {entidade} do zero" · "Na TELA ATUAL, aplique estas mudanças…".
- Padrão ME — a anatomia, os componentes e as regras do gabarito (a mesma estrutura que o preview desenha) + as convenções transversais do ME (labeling/voz, hierarquia de ações, status semântico, ações em massa, feedback, mobile) que valem em qualquer tela. Para gerar, é o que construir; para os demais, é o critério a seguir/checar. A IA não tem o gabarito decorado — descreva-o (o Compositor e os Gabaritos já preenchem essa parte).
- Diretrizes — como executar: tela completa (não esqueleto) com dados realistas em PT-BR, estados (vazio/carregando/erro/selecionado), responsividade e acessibilidade.
- Restrições — o que não pode mudar. "Respeite o alvo (hierarquia de componentes e tokens), não recrie o que já existe, labeling PT-BR do glossário."
- Pronto quando — critérios de aceite objetivos (Definition of Done) específicos da tela.
- Saída esperada — o que você recebe de fato. Em gerar/mudar/corrigir/referência: a tela pronta para rodar e visualizar, com dados realistas e estados tratados (+ resumo do que entrega/mudou). Em revisar: um parecer de achados; em QA: um plano de testes. "A tela completa e funcional, pronta para visualizar."
{placeholder}, melhor a saída. "colunas: nome, status, data" gera melhor que "as colunas da entidade". E nos modos que partem de uma tela, cole a tela — é o erro nº 1 pedir "mude o CTA desta index" sem a index estar no prompt.Tipos de prompt
Cada tarefa pede um tipo de prompt diferente: gerar do zero não é o mesmo que mudar uma coisa, e criticar (a IA só aponta) não é o mesmo que corrigir (a IA aplica). Comece pelo tipo certo — cada um tem seu exemplo abaixo.
| Tipo | Para quê | Exemplo |
|---|---|---|
| Estruturado | Gerar uma tela nova do zero (anatomia completa, na ordem) | Ver · Compositor |
| Mudar | Ajuste pontual numa tela que já existe | Ver |
| Corrigir | Adequar ao padrão — a IA aplica as correções | Ver |
| Criticar | Diagnosticar — a IA aponta o que está fora do padrão, sem alterar | Ver |
| QA | Validar contra critérios de aceite | Ver |
| Referência | Imitar uma tela-modelo (few-shot) | Ver |
| Avançado | Tarefas longas com papel + seções/tags (Claude, Cursor) | Ver |
Estruturado
O default para gerar uma tela nova: as seções da Anatomia na ordem. É o que o Compositor monta; os modelos por peça abaixo seguem o mesmo formato.
CONTEXTO
Você é engenheiro(a) de front-end do ME, no E-PROC, seguindo o EletroDS Design Guide: foundations (tokens, espaçamento, tipografia), componentes do design system e voz em PT-BR (Glossário do ME).
ALVO (STACK) — EletroDS + Nuxt
- Nuxt 3 + Vue 3 (Composition API) + Nuxt UI, sobre o EletroDS.
- Hierarquia (não recrie o que já existe): blocks/componentes EletroDS → Nuxt UI (U*) → Vue puro.
- Foundations: classes Tailwind + var(--ui-*) — sem HEX nem pixel cru; dark pelos tokens.
- Saída: um componente Vue (Composition API).
TAREFA
Gere a tela de {entidade} do zero, seguindo o PADRÃO ME abaixo.
PADRÃO ME — {gabarito}
Anatomia, nesta ordem: {zonas na ordem}. Componentes: {componentes}. Status como UBadge semântico.
DIRETRIZES
- Tela completa e funcional (não esqueleto), com dados realistas em PT-BR.
- Trate os estados: vazio, carregando, erro, selecionado.
- Responsividade desktop/tablet/mobile + acessibilidade (foco, rótulos, contraste, teclado).
RESTRIÇÕES
Respeite o alvo (hierarquia de componentes + tokens), não recrie componentes existentes, labeling PT-BR do glossário.
SAÍDA ESPERADA
A TELA completa e funcional, pronta para rodar e visualizar (componente Vue, Composition API), com dados de exemplo realistas em PT-BR e os estados tratados. Feche com um resumo de 1–2 linhas do que a tela entrega.
Mudar
Uma única mudança numa tela que já existe — cole a tela e descreva só o ajuste, sem repetir o scaffold inteiro. Cole o código do seu projeto; se não o tem à mão, descreva a tela em texto (a IA aceita a descrição no lugar do código).
TELA ATUAL:
{cole o código Vue da index — a IA não a conhece}
Na TELA ATUAL, troque o CTA para "Novo fornecedor" e mova-o para a direita do subheader.
Preserve todo o resto. Mantenha tokens --ui-* e o labeling do glossário.
Corrigir
A saída desviou do padrão e você quer que a IA aplique as correções e diga o que mudou.
TELA ATUAL:
{cole o código Vue a corrigir}
Corrija a TELA ATUAL para aderir ao EletroDS Design Guide: troque HEX cru por tokens --ui-*, substitua
componentes recriados pelos do EDS/Nuxt UI, ajuste o labeling ao glossário e a estrutura ao gabarito de
{tela}. Aplique as mudanças e liste o que alterou e por quê.
Criticar
Antes de aceitar uma tela, peça um diagnóstico — a IA aponta os problemas, sem mexer no código.
TELA ATUAL:
{cole o código Vue a revisar}
Avalie a TELA ATUAL contra o EletroDS Design Guide e diga o que está fora do padrão — NÃO altere o código.
Verifique: HEX cru em vez de tokens, componentes recriados, labeling fora do glossário, zonas fora do
gabarito de {tela}, hierarquia de ações e acessibilidade.
Liste por severidade (alta/média/baixa), com o trecho e a correção sugerida.
QA
Critérios objetivos de aceite — serve para gerar e validar: a IA cumpre e reporta o que atendeu.
Gere (ou revise) uma index de {entidade} que cumpra TODOS os critérios:
- [ ] Subheader com CTA primário "{Novo X}"
- [ ] Filter bar com {filtros}
- [ ] Status como badge semântico
- [ ] Ações por linha em menu de mais ações
- [ ] Tokens --ui-* (sem HEX) e labeling PT-BR do glossário
Ao final, liste quais critérios atendeu e onde ficou em dúvida.
Referência
Há uma tela-modelo: dê o exemplo e peça para repetir a anatomia, trocando só o conteúdo.
Use esta tela como referência de anatomia, componentes e espaçamento:
{cole o código do template de Index ou descreva suas zonas}.
Gere a mesma tela para {entidade}, trocando apenas o conteúdo (colunas, filtros, CTA).
Não invente zonas novas nem componentes — replique o gabarito.
Avançado
Define o papel e separa o prompt em seções/tags — ajuda ferramentas como Claude e Cursor a não misturar contexto, tarefa e restrição.
Você é um engenheiro front-end do ME. Siga o EletroDS Design Guide.
<contexto>Nuxt 3 + Nuxt UI; hierarquia: blocks EletroDS → componentes EletroDS → Nuxt UI → Vue puro; tokens --ui-*.</contexto>
<tarefa>Gere a index de {entidade} no gabarito de Estrutura de Index.</tarefa>
<restricoes>Sem HEX; não recriar componentes existentes; labeling do glossário.</restricoes>
<saida>Componente Vue (Composition API) + lista dos componentes usados.</saida>
Telas inteiras
As telas completas — Index, Documento, Dashboard, Formulário e Wizard — têm prompt próprio, pronto para copiar, nos Gabaritos: lá cada tela vem com o template visual ao lado e a busca para achar a sua. Esta página cobre as peças que compõem essas telas (zonas e blocos) e os genéricos de interação — use-as para montar ou ajustar uma parte específica.
Fluxo (várias telas)
Quando o que você quer é um fluxo — uma sequência de telas que compartilham contexto, não uma tela só — ligue "Habilitar fluxo" no Compositor. Surge uma tira de telas: cada uma é configurada normalmente (com seu preview ao lado) e a ordem da tira é o fluxo. Adicione telas (+ adicionar tela), arraste para reordenar, remova; entre dois cards, o conector (o botão de clique entre eles) define o gatilho que abre a próxima (ex.: clicar em "Novo documento", abrir um registro). O fluxo é todo de um alvo só — o stack é fixado na primeira tela.
Cada tela mantém seu "Copiar" (o prompt inteiro dela). Já o "Copiar fluxo" monta um roteiro único, pensado para não diluir o contexto: um BRIEF com o que é comum a todas as telas (contrato + mapa de navegação) uma vez só, e depois um bloco enxuto por tela com apenas o que muda + de onde entra e para onde sai. O mesmo texto serve para chat e para agente:
=== FLUXO ===
COMO USAR — num chat: cole o BRIEF; quando a IA confirmar, cole cada TELA na ordem (1→N). Num agente (Claude Code/Cursor): trate cada TELA como uma subtarefa, com o BRIEF + a spec de UMA tela.
===== BRIEF DO FLUXO =====
Fluxo de 3 telas (mesma entidade/contexto). Gere um componente por tela + a navegação/rotas entre elas.
Navegação: 1. Index (fornecedores) —[clicar em "Novo fornecedor"]→ 2. Formulário (fornecedor) —[Salvar]→ 3. Documento (fornecedor)
CONTRATO COMPARTILHADO (vale para todas as telas):
<CONTEXTO + ALVO (STACK) + CONVENÇÕES DO ME + RESTRIÇÕES — uma vez>
===== TELA 1 de 3: Index — fornecedores =====
<só o que diverge: a TAREFA e o PADRÃO ME desta tela>
Saída: ao clicar em "Novo fornecedor", navega para a Tela 2 (Formulário — fornecedor).
A ordem e as transições vêm de você (a tira + os gatilhos do conector) — o kit não as inventa. Para um fluxo guiado dentro de uma tela (passos com Voltar/Avançar), use o modelo Wizard.
Zonas e blocos
Subheader (cabeçalho da tela)
Gere o Subheader de uma tela de {entidade} no padrão do ME: título à esquerda, CTA primário
"{Novo X}" e ações de suporte (outline) à direita; alternador de view quando houver mais de um modo.
"Novo X" = cadastrar entidade; "Adicionar X" = item existente numa lista (siga o glossário).
Filter bar e filtros
Gere a filter bar de uma index de {entidade}: LeadingSlot com visões salvas + critérios de filtro
({campo: tipo de filtro, …}) que refletem na hora, sem recarregar. Critério ativo usa o MeCriterionInput.
Restrições: tokens --ui-*, não recriar o componente de filtro. Saída: componente Vue.
Forehead (cabeçalho de registro)
Gere um Forehead para o documento {entidade} (eletro.design/components/forehead):
DocumentBadge (tipo + número) · título + badges de classificação · metadados (datas, responsável, contato)
· valor + status (badge semântico) + barra de ações. Restrições: tokens --ui-*, status sempre como badge.
Tabela configurável
Gere uma tabela de {entidade} no padrão do ME: colunas configuráveis (exibir/ocultar, reordenar),
status como badge semântico, ações por linha em menu de mais ações, seleção por checkbox.
Colunas padrão: {col1, col2, status, valor}. Restrições: tokens --ui-*, usar o block TableView do EletroDS (não remontar).
Ações em massa
Ao selecionar linhas, a filter bar mostra "{N} selecionados" e habilita as ações em lote (badge-toggle):
salvar como lista / limpar seleção. As ações de massa operam sobre a seleção; ficam desabilitadas sem seleção.
Confirmações em lote mostram a contagem ("3 itens aprovados"). Siga o padrão de Ações em massa.
Interação e feedback
Modal de confirmação (ação destrutiva)
Gere um modal de confirmação para a ação destrutiva "{ação}" sobre {entidade}: título claro,
descrição do impacto e irreversibilidade, botão primário destrutivo "{Excluir}" + "Cancelar".
Ação irreversível sempre passa por modal; reversível usa toast com Desfazer. Tokens --ui-*.
Empty state
Gere o empty state de {contexto} (sem resultados / lista vazia / sem permissão): ícone, mensagem
contextual (ex.: o termo buscado) e uma saída clara (ex.: "Limpar filtros" ou CTA primário).
Tom do glossário. Tokens --ui-*.
Feedback (toast / undo)
Para a ação "{ação}" sobre {entidade}, gere o feedback no padrão do ME: ação reversível → toast com
"Desfazer" (5–8s + barra de progresso), sem bloquear; ação em lote → toast com a contagem do resultado.
IA / Genius
Painel do Genius (assistente)
Gere o painel do ME Genius no padrão do guide (Padrões › Genius): área de conversa, input com "@"
para contextualizar entidades do ME e chips de ação por tipo de entidade. Tokens --ui-*, labeling do glossário.
Bom × ruim
| ❌ Evite | ✅ Prefira |
|---|---|
| "Faça uma tela de usuários bonita" | "Index de usuários no gabarito de Index, view em lista, colunas nome/perfil/status" |
| "Use uma cor azul de destaque" | "Use o token de cor primária (--ui-primary)" |
| "Coloça um botão de adicionar" | "CTA primário 'Novo usuário' no Subheader (labeling do glossário)" |
| "Crie um componente de tabela" | "Use a tabela do EletroDS/Nuxt UI — não recrie" |