---
id: generate-ai-frontend-prompt
agent: ux-design-expert
title: Gerar prompt para ferramentas de UI por IA
inputs: [wireframes, front-end spec, design tokens disponíveis]
outputs: [prompt estruturado para v0/Lovable/similar]
elicit: false
modes: [interactive, yolo]
---

# Gerar prompt para ferramentas de UI por IA

**Objetivo:** traduzir wireframes e spec de frontend num prompt estruturado e rastreável que uma
ferramenta de geração de UI por IA (v0, Lovable, etc.) consiga executar fielmente — sem inventar
requisito fora da spec.

**Pré-condições:**
- Existem wireframes (`ux-create-wireframe`) e/ou uma front-end spec que descrevem as telas e o
  comportamento. Sem fonte, **pare** — o prompt não pode inventar a UI.
- Os design tokens (cor, espaçamento, tipografia, raio) estão disponíveis ou referenciáveis. Sem
  tokens, sinalizo que o output virá com valores genéricos a corrigir depois.

## Passos

1. **Reúna os insumos:** wireframes, spec de frontend, design tokens e os ACs da story. O prompt só
   pode afirmar o que esses insumos sustentam.
2. **Estruture o prompt em blocos claros:** (a) contexto e objetivo da tela; (b) layout e hierarquia;
   (c) componentes e estados (vazio/carregando/erro/sucesso); (d) tokens a usar (não hex solto);
   (e) requisitos de acessibilidade (foco visível, semântica, contraste WCAG AA); (f) stack/framework
   alvo da ferramenta.
3. **Ancore cada requisito do prompt** a um wireframe, item da spec ou AC. Frase do prompt que não
   rastreia a um insumo é invenção — corto.
4. **Inclua as restrições de acessibilidade como obrigatórias**, não como "se possível": contraste
   AA, navegação por teclado, alt text, ordem de foco. O output gerado nasce com a11y ou volta.
5. **Adicione as guardas de tokens:** instruo a ferramenta a consumir os design tokens nomeados em
   vez de valores hardcoded, para o resultado já nascer consistente com o design system.
6. **Registre o prompt** em `docs/stories/{epic}/ai-prompts/` (ou na seção de UX da story) com a
   indicação da ferramenta-alvo e dos insumos que o originaram.
7. **Marque o output como rascunho a auditar:** o que a IA gerar passa pela minha auditoria de a11y e
   de tokens antes de virar componente de produção — não entra direto.

## Critério de pronto (DoD)

- [ ] Prompt estruturado em blocos (contexto, layout, componentes/estados, tokens, a11y, stack)
- [ ] Cada requisito do prompt rastreia a um wireframe, spec ou AC
- [ ] Acessibilidade WCAG AA escrita como obrigatória no prompt
- [ ] Guarda de tokens presente (sem hardcoded no output esperado)
- [ ] Prompt registrado com ferramenta-alvo e insumos de origem

## Falha / recuperação

- **Faltam wireframes ou spec** → não escrevo prompt no escuro; volto para `ux-create-wireframe` ou
  `create-front-end-spec` primeiro.
- **Não há design tokens** → gero o prompt com aviso explícito de que o output exigirá tokenização
  posterior (`extract-tokens`) antes de produção.
- **O output da IA viola a11y ou usa hardcoded** → reprovo na auditoria e refino o prompt; não
  promovo a componente de produção.