johnson7543/design

Gravar Demonstração do Produto

Transforme a descrição do produto e das ações do usuário em um cenário de gravação versionado, execute-o na aplicação real e aplique os ativos gerados para a prévia solicitada.

Escolha o fluxo de trabalho

• Para a primeira demonstração de um produto, leia references/new-product-workflow.md e references/scenario-schema.md.
• Para um cenário existente, leia references/scenario-schema.md, atualize apenas o comportamento solicitado e regrave nos mesmos caminhos aplicados, a menos que o usuário solicite o contrário.

Fluxo de trabalho

1. Localize a rota do produto, os seletores de interação estáveis e o componente que consome sua prévia. Preserve o conteúdo, a ordem, o enquadramento, a duração e o local de saída solicitados.

2. Crie ou atualize scripts/demo-video-scenarios/<slug-do-produto>.json. Para a primeira demonstração, inicialize-o com npm run init:demo -- --product "<nome>" --route <rota> --consumer <arquivo>, depois substitua a ação inicial pela sequência solicitada. Mantenha o comportamento específico do produto no cenário, em vez de codificá-lo no gravador.

3. Use ações reais do navegador. Adicione pausas deliberadas quando o visualizador precisar ver uma atualização com debounce, uma animação concluída ou um estado intermediário. Mantenha o tempo total das ações abaixo da duração da gravação; o tempo não utilizado se torna a espera final. Para animação contínua, orce sua execução completa mais pausas legíveis e adicione uma janela quality.motionChecks.

4. Coloque a mídia gerada em public/previews/, a menos que o produto existente use outro local de ativo público. Defina application.consumerFiles e os caminhos públicos para que o executor verifique se os ativos foram aplicados. Corrija o consumidor primeiro ao adicionar uma nova prévia; sobrescrever uma saída já referenciada conta como aplicação de uma atualização.

5. Execute:

   npm run record:demo -- --scenario scripts/demo-video-scenarios/<slug-do-produto>.json
   

6. Verifique o resultado, não apenas a saída do comando:

   • O gravador executa verify:demo e deve passar na verificação exata de duração, dimensões, pixels quadrados, taxa de quadros média, contagem de quadros, codificação H.264 e nas verificações de movimento contínuo configuradas.
   • Abra cada folha de contato impressa (geral e de movimento) com view_image. Confirme valores digitados, alterações intermediárias do produto, movimento uniformemente distribuído, ambas as extremidades das transições e o estado final.
   • Execute npm run lint; execute as verificações exigidas por AGENTS.md para quaisquer alterações na IU da aplicação feitas ao aplicar a prévia.

Contrato de movimento suave

• Prefira 60 fps genuínos para demonstrações de animação. Respeite o limite máximo de taxa de quadros relatado pela captura de origem; nunca anuncie uma saída mais suave duplicando quadros ou interpolando movimento WebGL.
• Dê a uma transição importante tempo de cenário suficiente para ser lida claramente. Use a duração pretendida do produto; quando não houver nenhuma e a suavidade for central, comece com cerca de 2 a 3 segundos por direção e estenda o vídeo geral em vez de apressar as ações posteriores.
• Marque cada intervalo que deve se mover continuamente em quality.motionChecks. A porta padrão não permite quadros duplicados consecutivos idênticos. Afrouxe-a apenas quando o produto intencionalmente mantiver um estado dentro desse intervalo e documente o motivo na descrição do cenário.
• Julgue o ritmo visualmente a partir da folha de contato de movimento densa. Uma contagem de quadros válida não consegue detectar uma curva de easing abrupta ou com carga frontal.
• Se a animação real do produto for instável e o usuário solicitar melhorar a suavidade, corrija o ritmo dos quadros ou o easing e execute as verificações relevantes da IU antes de gravar novamente. Caso contrário, preserve o comportamento do produto e explique a limitação, em vez de mascará-la na pós-produção.

Invariantes de captura

• Grave a aplicação Vite real através do fluxo de compositor de guia nativo do Chrome. O Puppeteer pode fornecer o teclado, o ponteiro e o tempo, mas o produto deve realizar suas próprias atualizações de estado e renderização.
• Não substitua a captura de guia nativa por amostragem de captura de tela do DevTools para movimento WebGL; isso pode omitir quadros intermediários e produzir uma transição falsa.
• Não codifique acima da taxa de captura real nem use interpolação de movimento para atender a uma solicitação de suavidade.
• Nunca capture a área de trabalho completa do usuário ou uma tela existente. A extensão local pode capturar apenas a guia do produto localhost selecionada.
• Use recordingCss apenas para enquadrar a demonstração. Não altere a IU real do produto apenas para facilitar a gravação, a menos que o usuário também tenha solicitado essa alteração de IU.
• Não adicione ações arbitrárias de avaliação de JavaScript aos cenários. Adicione uma ação de entrada real, com nome restrito, ao executor quando uma interação não for genuinamente suportada.
• Se a captura de guia nativa não puder ser executada, relate o pré-requisito concreto em vez de gerar silenciosamente um vídeo simulado.

Interpretando solicitações

Infira rotas, seletores e consumidores de ativos existentes a partir do repositório. Pergunte apenas quando vários produtos ou posicionamentos de saída materialmente diferentes permanecerem plausíveis após inspeção.

Quando o usuário disser "criar/iniciar e aplicar uma demonstração para <produto>" sem detalhes técnicos, infira a rota implementada, o consumidor do catálogo, os seletores e as convenções de prévia existentes. Padrão para 8 segundos, 60 fps e enquadramento retrato apenas quando o repositório e a solicitação não fornecerem uma convenção melhor. Uma solicitação de demonstração não autoriza a implementação de um produto ausente.

Uma solicitação adequada pode ser tão simples quanto:

Use $record-product-demo para Design QR: digite a URL em duas partes, pause para a atualização da árvore, transforme 3D para 2D e vice-versa, depois aplique ao cartão do catálogo.

Exemplos de inicialização e prompts voltados ao usuário estão documentados em o fluxo de trabalho de vídeo de demonstração.