Mosin112/build-prototype

Passo 4 · Protótipo Clicável

O protótipo permite que as partes interessadas sintam as árvores de comportamento antes da engenharia começar. É uma demonstração do contrato, não uma especificação de design: deve mostrar todos os ramos, incluindo erros e casos de borda, não apenas o caminho feliz.

Leia primeiro: as árvores aprovadas em work/<item>/03-trees/, o conceito, context/product.md e context/writing-style.md. Use ../../examples/price-alerts/04-prototype/index.html (relativo a este skill) como a implementação de referência da estrutura abaixo.

Requisitos

1. Um arquivo auto-contido: work/<item>/04-prototype/index.html. Inline todos os CSS e JS. Sem etapa de build, sem requisições externas, exceto fontes web opcionais, para que possa ser aberto a partir do disco, anexado a um ticket ou publicado como link.

2. Telas: cada estado distinto é um elemento com data-screen="<id>". Apenas um fica visível por vez. A navegação ocorre através dos botões do próprio protótipo, como no produto real.

3. Controles de cenário: um painel lateral, claramente separado da interface do produto, com alternadores para cada estado while e condição if das árvores (verificado/não verificado, limite atingido, notificações desligadas, simular movimentação de preço…). Alterar um alternador deve mudar o que a interface do produto faz, de modo que todos os ramos sejam alcançáveis.

4. Mapa de cobertura: um bloco <script type="application/json" id="tree-coverage"> que mapeia cada linha then e and de cada árvore para a tela que a demonstra:

   {
     "trees": {
       "functional/price-alert-creation": [
         { "line": "então o alerta é salvo como ativo", "screen": "alerts" },
         { "line": "e a direção do alerta é definida como acima ou abaixo do preço atual", "screen": "alerts" }
       ],
       "functional/price-alert-trigger": [
         { "line": "então nenhuma notificação adicional é enviada", "screen": null, "reason": "Não visível: ausência de notificação" }
       ]
     }
   }
   

   screen: null é permitido apenas com uma reason (resultados exclusivos de backend ou "nada acontece").

5. Painel de cobertura visível: renderize o mapa de cobertura no painel lateral como uma lista de verificação das linhas da árvore; clicar em uma linha salta para sua tela com o cenário correto definido. Isso é o que transforma o protótipo em uma ferramenta de revisão.

6. Texto realista: use as mensagens exatas das árvores. Marque dados de amostra como tal.

7. Marca: siga todos os tokens de design em context/product.md; caso contrário, use um estilo neutro e acessível. Funciona em largura de telefone. Foco visível no teclado.

Verificação

Execute python3 .pm-harness/pm_check.py prototype work/<item>/03-trees work/<item>/04-prototype/index.html. Ele falha se alguma linha da árvore estiver faltando no mapa de cobertura ou apontar para uma tela que não existe. Corrija até passar.

Portão

Mostre ao PM a árvore Journey no protótipo e, em seguida, qualquer ramo que ele escolher. Colete feedback. Se o feedback mudar o comportamento, atualize as árvores primeiro, execute novamente a verificação das árvores e, depois, atualize o protótipo. Quando o PM aprovar, defina stage: prototype em 01-idea.md e ofereça /pm-harness:create-eng-tickets. Se a equipe do PM usar Figma para o design final, informe quais telas um designer deve levar adiante.