Entregar e apresentar
Alterações e documento para o dev
▶ Vídeo: Validador de UX e documento do dev (1 min 4 s)
Cada pedido que muda a tela vira um item no registro de alterações. No fim, o app transforma esse registro num documento que o desenvolvedor passa para a IA dele (Claude Code) implementar no código real.
Ver as alterações
Painel da direita → Alterações: Esta página ou Todas. A lixeira tira um item do documento (a mudança continua no mockup).
Gerar o documento
Exportar → Documento para o dev (ou o botão no painel Alterações). Escolha as páginas e clique em Gerar documento. Uma janela mostra o progresso (gera os prints de antes/depois).
O documento traz:
- instruções para a IA do dev (adaptar ao framework do projeto, não copiar o HTML cru, marcar cada item como feito);
- um resumo numerado de todas as alterações;
- por página: URL original, prints antes e depois, e cada alteração com onde fica, o que muda, comportamento e o trecho de HTML de referência — com uma caixa [ ] Implementado;
- imagens destacando onde clicar:
- um print da página com cada alteração marcada por uma caixa vermelha e o número dela;
- um recorte em cada alteração, mostrando exatamente onde ela fica;
- Fluxos da página: para cada ação (as do assistente de ações e as criadas pelo Claude), um print com "Clique aqui" no elemento e outro com o resultado (o modal aberto, a mensagem, a página de destino);
- os seus fluxos marcados com No documento do dev (imagem do fluxo + lista dos passos);
- as suas anotações marcadas com No documento do dev (setas e balões mostrando onde clicar), na página de onde vieram.
Visualizador
Ao gerar, o documento abre no visualizador: formatado, com índice lateral e imagens (clique para ampliar).
| Botão | O que faz |
|---|---|
| Lista de datas | Troca entre documentos já gerados |
| Observação | Escolha onde (início, uma página ou uma alteração) e escreva. Entra como bloco 📝, que a IA do dev segue com prioridade |
| Editar | Edita o texto do documento. Clique em Salvar para voltar |
| Gerar PDF | Cria um PDF do documento, com as imagens, na mesma pasta |
| ⧉ (copiar) | Copia o caminho do arquivo .md |
| Abrir pasta | Abre a pasta no Explorer (o .md e a pasta imagens/) |
Para reabrir depois: Exportar → Documentos já gerados.
Como o dev usa
- Recebe a pasta do documento (o
.md+imagens/). - No Claude Code, dentro do projeto do sistema, pede: "implemente a página Clientes deste documento no arquivo src/pages/Clientes.tsx" (ou "implemente tudo"), anexando o
.md. - A IA implementa e marca os itens como feitos.