dennisyjlee/prototype-reel

Prototype reel (Demonstração em protótipo)

Prototipe como se fosse real, depois conte a história com vídeo.

Um mock estático mostra a aparência de uma tela. Não consegue mostrar como o produto se sente: o que carrega primeiro, onde seu polegar pousa, o que acontece quando algo falha. Esta skill constrói protótipos que se comportam como a coisa que está sendo construída, coloca-os na frente de pessoas para feedback e, em seguida, percorre o mesmo protótipo quadro a quadro para renderizar um vídeo de demonstração. Não há gravação de tela; uma alteração no design significa uma re-renderização, não uma nova gravação.

As regras aqui vieram de rodadas de revisão reais. Cada uma começou como uma observação de um revisor e se tornou um padrão para que a observação nunca precisasse ser repetida.

Quando usar (e quando não usar)

• Prototipe quando a ideia depende de comportamento: temporização, carregamento, transições, gestos, casos extremos ou um fluxo de várias etapas. Também quando os revisores continuam reagindo a imagens em vez da experiência.
• Faça um vídeo quando o público não pode clicar: um slide em loop, um tile de site, uma atualização assíncrona, um estudo de caso. O vídeo é como o protótipo é compartilhado em escala.
• Pule para questões de layout ou visuais que um quadro estático responde, e para ideias muito iniciais onde um wireframe é mais barato. Prototipe quando a direção estiver escolhida.

Fluxo de trabalho

Faça nesta ordem. Não pule para a renderização.

1. Carregue o contexto. Obtenha os designs reais (arquivo de design, capturas de tela, tokens de design), o fluxo e o objetivo. Pergunte o que o público deve entender depois de assistir ou clicar. Leia references/fidelity.md.
2. Liste estados e comportamentos primeiro. Antes do código, escreva cada tela, estado e transição: carregamento, vazio, erro, sucesso, voltar, o toast, o caso extremo. Uma linha cada. Confirme a lista com a pessoa.
3. Construa HTML vivo. Comece com kit/shell.html. Reconstrua telas como DOM real com alvos de toque reais, nunca capturas de tela com hotspots. Leia references/behavior.md.
4. Teste você mesmo. Execute cada caminho tanto em desktop quanto em celular com um navegador headless. Capture cada estado. Zero erros no console. Corrija antes de compartilhar.
5. Compartilhe para feedback. Publique um link com legendas e dicas de toque ativadas (references/sharing.md). Registre cada observação no formato references/feedback-log.md: a observação, a regra que ela se torna.
6. Escreva a lista de cenas. Uma linha por batida: tempo | na tela | ação | cena | ponto da história. Nomeie cada batida como uma cena (estabelecendo, inserção, corte em ação, corte combinado, recompensa; veja references/pacing.md, Gramática do filme). Uma ideia por batida. Obtenha aprovação antes de construir o vídeo.
7. Visualize, depois renderize. Conduza o protótipo em um relógio pausado e capture quadros. Envie uma prévia de baixa resolução primeiro (15fps, metade do tamanho). Renderize em qualidade total somente após a temporização ser aprovada. Leia references/pacing.md e references/motion-tokens.md.
8. Faça QA, depois entregue. Execute cada verificação em references/qa.md e diga o que verificou na mensagem de entrega. Uma correção altera apenas o que foi sinalizado.

Inegociáveis

• DOM vivo, não imagens com hotspots. Imagens apenas para fotos, logotipos e mídia.
• Texto usa os tokens do design (família, tamanho, altura da linha, tracking), nunca valores definidos manualmente. Confirme que as fontes estão instaladas onde você renderiza.
• Toasts e sobreposições ficam acima do conteúdo. Eles nunca empurram a página.
• Uma família de easing por peça. Ease-out para entradas, nunca ease-in na interface, nunca escala de 0. Sem bounce na interface, exceto no momento de recompensa (veja motion-tokens.md, Play é para a recompensa).
• Segure após aterrissar em uma nova tela antes de qualquer movimento: cerca de 0,9s para uma tela leve, 1,4s por padrão, cerca de 2,4s para telas com muito texto.
• Enquadre o toque com seu contexto: empurre na linha ou grupo, não no botão sozinho.
• A linguagem do filme nunca substitui como a interface se comporta. Cada elemento anima em sua própria camada.
• Marcador de toque apenas em toques. Sem dedo em rolagens.
• Loops de slide permanecem em 20s ou menos, a menos que a história precise de mais e a pessoa concorde. Clipes explicativos fazem loop apenas no momento que ensinam.
• Prévia de baixa resolução antes de qualquer renderização completa.
• Nenhuma entrega sem a verificação de QA.
• Quando um revisor der uma observação, transforme-a em uma regra e anote-a.

Arquivos

• references/behavior.md: fazendo o protótipo se comportar como o produto real
• references/fidelity.md: combinando exatamente com o design de origem
• references/sharing.md: configurando para feedback
• references/pacing.md: ritmo de apresentação para vídeos de demonstração
• references/motion-tokens.md: easing, durações e padrões de movimento
• references/qa.md: as verificações que toda entrega passa
• references/feedback-log.md: como observações se tornam regras, com exemplos reais
• kit/shell.html: shell de protótipo neutro (barra de ferramentas, desktop/móvel, moldura do dispositivo, legendas, dicas de toque)
• kit/proto.css, kit/proto.js: transições, folhas, toasts, skeletons, cursor