¿Qué hace Diagrama de Flujo Animado?
Crea un video explicativo animado de 20 a 30 segundos de un proceso. Dos cosas importan más, en este orden:
- Cada tema tiene su propio diseño. El layout, las formas de los nodos, los conectores, el "respondedor", las lecturas, la paleta y el movimiento se eligen según el tema. Dos videos nunca deben parecer la misma plantilla con etiquetas nuevas — el usuario rechazó exactamente eso ("每一份流程看起來都會一模一樣"). Antes de construir, escribe un breve resumen de diseño de un párrafo y verifícalo contra los videos anteriores en esta conversación (y los dos ejemplos aquí); cambia al menos cuatro de los ejes de variación en
references/design-directions.md. - Profesional y técnico por defecto. El registro base es un aspecto técnico/producto pulido (consolas, diagramas de arquitectura, paneles de control, planos, interfaz de producto limpia). Aspectos cálidos, ilustrados o divertidos solo cuando el tema es claramente casual (una receta, un plan familiar) o el usuario lo pide.
Lo que se mantiene constante entre videos es la gramática de animación, no la apariencia: control de velocidad (saltos rápidos, un cuello de botella lento, verificaciones posteriores más rápidas que la primera), datos que van y vienen (pregunta → respondedor trabaja → respuesta), un bucle de retroalimentación, cosas escritas visiblemente en algún lugar, y una pausa final con una línea de resumen. Sin página de papel, sin párrafos de cuerpo debajo del diagrama.
Flujo de trabajo
1. Modelar el proceso (en silencio; preguntar solo si falta algo esencial)
Clasificar cada paso: trabajo (alguien/algo hace una tarea; permanencia ∝ esfuerzo real), cuello de botella (el trabajo más lento), verificación (espacio de respuesta pequeño: puntuación / sí-no / elegir uno), respondedor (quien decide las verificaciones: motor de reglas, archivo de políticas, revisor, modelo, chef), almacenes (dónde se escriben los resultados), actores (quién hace cada paso). Encontrar un bucle de retroalimentación y el estado final. Usar los propios términos del usuario. Los números no proporcionados por el usuario se etiquetan como 示意 / ilustrativos en pantalla; los números reales de su material (umbrales, recuentos, códigos de salida) son las mejores lecturas.
2. Escribir el resumen de diseño
Leer references/design-directions.md. Elegir una dirección que se ajuste al tema y la audiencia, luego decidir cada eje: gramática del layout, formas de las estaciones, estilo de los conectores, cómo se ve y se ilumina el respondedor, formas de los paquetes/tokens, paneles de lectura, paleta (4 colores), tipo, tratamiento del fondo, firma de movimiento. Decir el resumen en una línea en el chat ("主控台風：深藍格線、直角匯流排、右側規則面板…") y continuar — no esperar aprobación.
3. Diseñar el layout y verificar colisiones
Usar references/design-rules.md (geometría, comprobaciones de colisiones, temporización, fases de ida y vuelta, lecturas). Por defecto 16:9 1920×1080 a 30 fps; 9:16 cuando el usuario quiera Reels/Shorts.
4. Construir
Si la herramienta Artifact lista un tipo Motion (animación/video) — preferido (reproduce, desplaza, exporta MP4/GIF): seguir las instrucciones de ese tipo para sus archivos y orden de escritura. Una escena continua. Poner el modelo, la ruta y el marcado en shared.js, el movimiento en scene-<id>.js, y una partitura que refleje la ruta en score.js. Hay dos videos terminados en references/ — tomar prestados mecanismos (línea de tiempo de ruta, posAt, ayudantes de polilínea/bezier, estelas de paquetes, desplazamiento de terminal, medidores), nunca su composición o paleta.
Escribir el texto en pantalla como caracteres literales (no escapes \uXXXX) para que el usuario pueda reescribir las etiquetas en el reproductor.
De lo contrario, escribir los mismos archivos en una carpeta y ejecutar python scripts/build_player.py <folder> <out.html> --title "<title>" para obtener una sola página HTML autónoma con reproducción/pausa/desplazamiento; publicar o presentar. Probar con jsdom si Node está disponible (ver references/example-kitchen/README.md).
5. Entregar
Enlace + una línea sobre el sonido (comienza silenciado) + exportaciones: Exportar de Motion guarda MP4 o GIF (GIF es silencioso y grande a 1080p; ofrecer un corte más corto). Si inventaste un compás para mostrar un mecanismo (por ejemplo, un bucle de reintento que la fuente no describe), decirlo en una oración y ofrecer eliminarlo.
Archivos
references/design-directions.md— direcciones, ejes de variación, paletas, la comprobación "no repetir". Leer primero.references/design-rules.md— geometría, comprobaciones de colisiones, coreografía/temporización, ida y vuelta, lecturas.references/example-ops-console/— dirección técnica: consola oscura, tarjetas de servicio + compuertas hexagonales, buses ortogonales, cilindros de almacenamiento, panel de políticas con filas de reglas, registro de terminal, medidores de umbral (un pipeline de base de conocimiento).references/example-kitchen/— dirección casual: papel cálido, carriles en zigzag, anillo de luces central (una receta). Su README mapea cada archivo a qué cambiar y contiene la prueba de humo.assets/player.html,scripts/build_player.py— reproductor alternativo autónomo.