> ## Documentation Index
> Fetch the complete documentation index at: https://docs.growtify.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Telas e aprovação

> Mapeie a experiência real, aprove o protótipo e comprove a aplicação nativa.

<Note>
  Inventário pendente. A primeira tela será o login; as demais entrarão na fila a partir da navegação no Growtify real.
</Note>

## Processo por tela

<Steps>
  <Step title="Observar">
    Registrar rota, objetivo, perfil, ações e estados em [app.growtify.me](https://app.growtify.me/). Anonimizar capturas antes de incluí-las nesta documentação.
  </Step>

  <Step title="Reproduzir">
    Criar a tela no protótipo com dados fictícios e componentes compartilhados. Incluir os estados necessários à compreensão do fluxo.
  </Step>

  <Step title="Revisar">
    Conferir desktop, tablet e mobile, nos dois temas. Testar navegação, modais, formulários, teclado e toque aplicáveis.
  </Step>

  <Step title="Aprovar">
    Entregar o link a Marcelo com as mudanças e limitações. Registrar aprovação ou ajustes; o silêncio não vale como aprovação.
  </Step>

  <Step title="Adaptar e testar">
    Aplicar a solução pelo mecanismo validado, testar funções nativas e registrar evidências. A liberação segue o guia de publicação.
  </Step>
</Steps>

## Ficha de uma tela

Cada tela terá **uma página própria** quando for mapeada, agrupada pelo módulo real do sistema. Não criar dezenas de páginas vazias antecipadamente.

| Bloco         | O que registrar                                |
| ------------- | ---------------------------------------------- |
| Identificação | Nome, rota, módulo, perfil e objetivo          |
| Referência    | Captura anonimizada e estados observados       |
| Proposta      | Link do protótipo e mudanças de UX             |
| Componentes   | Links para as definições do Design System      |
| Validação     | Desktop/tablet/mobile e dark/light             |
| Restrições    | Diferenças entre proposta e aplicação possível |
| Aprovação     | Decisão, data e ajustes de Marcelo             |
| Implementação | Versão da skin, testes e limitações            |

## Evidência visual que ajuda

Use comparações **atual × proposta**, com legendas curtas apontando a mudança. Mostre detalhes ampliados de componentes quando a tela inteira ficar ilegível.

Não use imagens decorativas como prova de implementação. Não publicar nomes, mensagens ou dados de clientes nas capturas.

## Status da fila

| Status            | Significado                          |
| ----------------- | ------------------------------------ |
| Mapeada           | Referência real registrada           |
| Em protótipo      | Redesenho em andamento               |
| Em revisão        | Link pronto para avaliação           |
| Aprovada          | Decisão visual registrada            |
| Aplicada em teste | Skin adaptada, ainda sem liberação   |
| Publicada         | Funcionamento verificado no GHL real |

## Vídeo de demonstração

O protótipo pode antecipar a gravação de uma jornada navegável com dados fictícios, deixando claro que é demonstração. Para mostrar funcionamento real, usar o GHL depois da implementação e validação. Conteúdo do snapshot continua fora desta tarefa.

[Ver critérios de publicação e reversão](/servidor).