johnson7543/design

Grabar Demo de Producto

Convierte la descripción del producto y las acciones del usuario en un escenario de grabación registrado, ejecútalo contra la aplicación real y aplica los activos generados a la vista previa solicitada.

Elegir el flujo de trabajo

• Para el primer demo de un producto, lee references/new-product-workflow.md y references/scenario-schema.md.
• Para un escenario existente, lee references/scenario-schema.md, actualiza solo el comportamiento solicitado y vuelve a grabar en las mismas rutas aplicadas a menos que el usuario indique lo contrario.

Flujo de trabajo

1. Localiza la ruta del producto, los selectores de interacción estables y el componente que consume su vista previa. Preserva el contenido solicitado, el orden, el encuadre, la duración y la ubicación de salida.

2. Crea o actualiza scripts/demo-video-scenarios/<slug-del-producto>.json. Para un primer demo, inicialízalo con npm run init:demo -- --product "<nombre>" --route <ruta> --consumer <archivo>, luego reemplaza la acción inicial con la secuencia solicitada. Mantén el comportamiento específico del producto en el escenario en lugar de codificarlo en el grabador.

3. Usa acciones reales del navegador. Añade esperas deliberadas cuando el espectador deba ver una actualización con debounce, una animación completada o un estado intermedio. Mantén el tiempo total de las acciones por debajo de la duración de la grabación; el tiempo no utilizado se convierte en la pausa final. Para animaciones continuas, presupuesta su duración completa más pausas legibles y añade una ventana quality.motionChecks.

4. Coloca el material generado en public/previews/ a menos que el producto existente use otra ubicación de activos públicos. Establece application.consumerFiles y las rutas públicas para que el ejecutor verifique que los activos se aplican. Parchea primero el consumidor cuando añadas una nueva vista previa; sobrescribir una salida ya referenciada cuenta como aplicar una actualización.

5. Ejecuta:

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

6. Verifica el resultado, no solo la salida del comando:

   • El grabador ejecuta verify:demo y debe pasar la duración exacta, dimensiones, píxeles cuadrados, tasa de fotogramas promedio, cantidad de fotogramas, codificación H.264 y las comprobaciones de movimiento continuo configuradas.
   • Abre cada hoja de contacto impresa (general y de movimiento) con view_image. Confirma los valores escritos, los cambios intermedios del producto, el movimiento distribuido uniformemente, ambos extremos de las transiciones y el estado final.
   • Ejecuta npm run lint; ejecuta las comprobaciones requeridas por AGENTS.md para cualquier cambio en la UI de la aplicación realizado al aplicar la vista previa.

Contrato de movimiento suave

• Para demos de animación, prefiere 60 fps genuinos. Respeta el límite de velocidad de fotogramas informado por la captura de origen; nunca anuncies una salida más suave duplicando fotogramas o interpolando movimiento WebGL.
• Dale a una transición importante suficiente tiempo de escenario para leerse claramente. Utiliza la duración prevista del producto; cuando no exista y la suavidad sea central, comienza con alrededor de 2-3 segundos por dirección y extiende el video general en lugar de apresurar acciones posteriores.
• Marca cada intervalo que deba moverse continuamente en quality.motionChecks. La puerta de entrada predeterminada no permite fotogramas duplicados consecutivos idénticos. Relájala solo cuando el producto mantenga intencionalmente una pausa dentro de ese intervalo, y documenta el motivo en la descripción del escenario.
• Juzga el ritmo visualmente a partir de la hoja de contacto de movimiento denso. Un recuento de fotogramas válido no puede detectar una curva de suavizado abrupta o concentrada al inicio.
• Si la animación real del producto es entrecortada y el usuario pidió mejorar la suavidad, corrige el ritmo de fotogramas o la curva de suavizado y ejecuta las comprobaciones de UI relevantes antes de grabar de nuevo. De lo contrario, preserva el comportamiento del producto y explica la limitación en lugar de enmascararla en la postproducción.

Invariantes de captura

• Graba la aplicación Vite real a través del stream nativo del compositor de pestañas de Chrome. Puppeteer puede proporcionar el teclado, el puntero y la sincronización, pero el producto debe realizar sus propias actualizaciones de estado y renderizado.
• No reemplaces la captura nativa de pestañas con muestreo de captura de pantalla de DevTools para movimiento WebGL; puede omitir fotogramas intermedios y producir una transición falsa.
• No codifiques por encima de la tasa de captura real ni uses interpolación de movimiento para cumplir una solicitud de suavidad.
• Nunca captures el escritorio completo del usuario ni una pantalla existente. La extensión local solo puede capturar la pestaña del producto localhost seleccionado.
• Usa recordingCss solo para encuadrar el demo. No cambies la UI real del producto solo para facilitar la grabación a menos que el usuario también haya solicitado ese cambio de UI.
• No añadas acciones de evaluación arbitraria de JavaScript a los escenarios. Añade una acción de entrada real estrechamente nombrada al ejecutor cuando una interacción no sea realmente compatible.
• Si la captura nativa de pestañas no puede ejecutarse, informa el requisito previo concreto en lugar de generar silenciosamente un video simulado.

Interpretación de solicitudes

Infiera rutas, selectores y consumidores de activos existentes a partir del repositorio. Pregunta solo cuando varios productos o ubicaciones de salida materialmente diferentes sigan siendo plausibles después de la inspección.

Cuando el usuario diga "crea/inicia y aplica un demo para <producto>" sin detalles técnicos, infiere la ruta implementada, el consumidor del catálogo, los selectores y las convenciones de vista previa existentes. Usa por defecto 8 segundos, 60 fps y encuadre vertical solo cuando el repositorio y la solicitud no proporcionen una mejor convención. Una solicitud de demo no autoriza a implementar un producto faltante.

Una solicitud adecuada puede ser tan simple como:

Usa $record-product-demo para Design QR: escribe la URL en dos partes, pausa para la actualización del árbol, transforma 3D a 2D y viceversa, luego aplícalo a la tarjeta del catálogo.

Ejemplos de inicialización y prompts orientados al usuario están documentados en el flujo de trabajo de video demo.