Introdução
O que é vibe-coding no ME, os princípios e o fluxo de trabalho.
O Prompt Builder é o kit para usar IA (Claude, Cursor, v0…) e gerar telas e protótipos rápidos do E-PROC, partindo dos padrões já estabelecidos do ME — não da página em branco. Faz a saída da IA sair consistente com o nosso produto: modelos de prompt, gabaritos de tela, o Compositor e o glossário que padroniza o vocabulário.
O objetivo não é substituir design ou engenharia — é dar a qualquer pessoa um caminho para materializar uma ideia já alinhada, encurtando a distância entre conversa e protótipo.
Escopo: o foco é prototipar o E-PROC seguindo os padrões do ME. O alvo padrão é EletroDS + Nuxt UI — a mesma dinâmica de componentes do produto; no Compositor dá para trocar o alvo para shadcn/React (prototipagem). A anatomia, as convenções e a voz do ME são as mesmas em qualquer alvo — muda só a camada de componentes.
Para quem é: dev, design e produto aceleram o que já fazem; e founder, CEO e demais stakeholders sem background de tecnologia ou design saem de uma ideia para um protótipo no padrão ME — sem precisar saber de código. Você não escreve a tela; descreve o que quer e o kit traduz para a língua do nosso produto.
Comece aqui — o que instalar (por perfil)
A maioria não instala nada. Ache o seu caso:
1 · Só quero um protótipo (founder, stakeholder, produto). Não instala nada: abra o Compositor, monte a tela, clique Copiar e cole no Claude.ai ou ChatGPT.
2 · Vibe-codo no editor (Claude Code / Cursor). Instale (em Downloads — passos no README de cada um): a suite me-foundations (nuxt + shadcn — tokens/foundations por stack, com enforcement) e o bundle E-PROC (as skills do guide + os MDs de contexto). Opcional: o MCP EletroDS (props reais dos componentes). As skills já vêm no bundle — não instale uma a uma.
3 · Uso ChatGPT / outra IA (sem plugin). Não instala nada: baixe os MDs de contexto (Guia de implementação · Padrões · Componentes · Glossário) e o Prompt pack em Downloads e cole como contexto na conversa.
O que NÃO instalar: as skills com a badge "Construção do guide" (em Downloads) são do time que mantém o guide — não do stakeholder. E as skills avulsas já vêm no bundle E-PROC; baixe individual só se precisar de uma específica.
Princípios
- Parta do padrão, não do zero. Escolha o gabarito da tela antes de pedir qualquer coisa à IA. A estrutura (zonas, ordem) não se reinventa.
- Dê o contexto certo. Aponte a IA para este guia — Padrões, Componentes e Foundations. Saída boa vem de contexto bom.
- Respeite a hierarquia de componentes. Primeiro os blocks prontos do EletroDS (Header, Subheader, Layout, TableView/CardView/ListView, Preview), depois os componentes EletroDS (
Me*— MeForehead, MeButtonBar, MeFilterBar, MeCriterionInput…), então Nuxt UI e só por último Vue puro. Nunca recriar do zero o que já existe. - Tokens, nunca valores crus. Cores, espaçamentos e raios vêm dos tokens
--ui-*— sem HEX ou pixel arbitrário. - Valide antes do handoff. Passe a saída pelo glossário e pelo checklist: a tela fala a língua do ME?
Fluxo de trabalho
- Escolher o gabarito da tela (index, documento, formulário…) — no Compositor ou nos Gabaritos.
- Preencher a entidade e os detalhes (no Compositor) ou os
{placeholders}do modelo de prompt. - Gerar — copie o prompt e cole na sua IA. Num chat (Claude.ai / ChatGPT): cole e envie. Num editor com agente (Claude Code / Cursor): com os plugins de Downloads o contexto do guide já entra sozinho; sem eles, cole junto os MDs de contexto.
- Revisar contra glossário + checklist (labeling, hierarquia, tokens).
- Handoff para design/engenharia continuar — o protótipo é ponto de partida, não entrega final.
Os materiais para levar o padrão do E-PROC para fora do guide (Skills, Plugins, MDs de contexto) ficam em Downloads.