pj1433139082-hue/video-design-skills

remotion-consult — Requisitos de video → Sistema de diseño de video

Convertir "cómo se hace este video" de una idea a una especificación de ingeniería ejecutable: mediante aclaración, investigación y propuesta, se genera finalmente un DESIGN.md (documento del sistema de diseño de video, que incluye el contrato tokens.ts) para que remotion-build lo use directamente.

Clasificación de entrada (cuando aparezca "hacer un video", primero define el flujo, no preguntes directamente)

Si el usuario dice "haz un video / crea un clip" pero no especifica la categoría, primero haz una pregunta para determinar el flujo (consult/build/video-shotcraft, todos activan "hacer un video", debe haber una derivación explícita):

Intención del usuario	¿Qué flujo seguir?
Hacer/modificar cualquier video (voz en off, datos, demo de producto, motion branding, divulgación, pase de diapositivas)	Sigue este flujo uniformemente (consult → build); las animaciones se eligen de dos fuentes: la biblioteca general de animaciones + las tarjetas de plano de shotcraft
Menciona explícitamente usar la plantilla de video-shotcraft (Ink Press) / creación libre propia / co-creación	Activa video-shotcraft según su propio flujo (el usuario elige explícitamente, no es un enrutamiento automático)
Ya tiene DESIGN.md / video de referencia / rediseño claro	Este flujo, Fase 0: pre-check directo

Pregunta de clasificación: "¿Ha mencionado explícitamente usar la plantilla de video-shotcraft / creación propia / co-creación? No → Sigue el flujo uniforme consult→build, las tarjetas de plano se toman prestadas de shotcraft como biblioteca de animaciones (sin obligación de elegir tarjeta por cada frase)."

Cuándo usarlo

• Hacer/modificar un video (voz en off, visualización de datos, demo de producto, motion branding).
• Definir la dirección de diseño del video: formato, estilo de subtítulos, paleta de colores, tipografía, ritmo, transiciones, animaciones.
• Cuando se pide "sistema de diseño de video", "video design tokens", "DESIGN.md".
• Cuando los requisitos son vagos ("hazme un video") y se necesita aclarar antes de actuar.

Mentalidad central

1. Primero la dirección, luego los detalles: primero define la estética / subtítulos / sistema de ritmo, luego habla de la implementación visual.
2. No usar plantillas: el objetivo es generar "la huella rítmica única de este video", no elegir una de una biblioteca de plantillas.
3. Priorizar la ejecutabilidad: DESIGN.md debe ser lo suficientemente concreto como para escribir directamente tokens.ts y el plano de escenas, no puede quedarse en "un poco más avanzado".
4. Honestidad: no inventar datos/hechos en los subtítulos.

Flujo (ejecutar en orden)

Fase 0 — Pre-check

• Verificar si workbench/video/{slug}/ ya tiene DESIGN.md / guion de voz en off / captions.srt; si existe, usarlo como línea base, no empezar de cero.
• Verificar activos de diseño entre marcas (flujo de trabajo "primero web, luego video" del usuario): workbench/diseno-tests/{marca}/DESIGN.md (versión web) o biblioteca/herramientas-IA/biblioteca-sistemas-diseno/{marca}-DESIGN.md → si existe, su paleta de colores / tipografía / emoción son la línea base del ADN de la marca, la versión de video hereda y evoluciona sin reinventar (también es entrada para la verificación de coherencia del sistema de diseño en Fase 3).
• Verificar restricciones de marca (README del proyecto, activos visuales existentes, video de referencia).

Fase 1 — Aclaración (obligatorio, no saltar)

Usar AskUserQuestion para aclarar de una vez, cubriendo al menos 9 ítems (no más de 6 preguntas a la vez, se puede dividir en lotes). Los dos primeros son fuentes de estilo, obligatorios y no se pueden saltar (el usuario puede "elegir automáticamente" para pasar rápido, pero debe confirmar):

1. Fuente de estilo (primera pregunta obligatoria): Diseño libre / Elegir de sitios de referencia (mostrar candidatos desde video-real-library.md para que el usuario elija) / Sitio de referencia elegido automáticamente (el usuario da el tema y se elige automáticamente) / El usuario proporciona referencia (URL/captura de pantalla, máxima prioridad).
2. Selección de referencia (tres dimensiones complementarias, cuándo usar cada una):
   • DESIGN.md de marca (biblioteca de sistemas de diseño biblioteca/herramientas-IA/biblioteca-sistemas-diseno/{marca}-DESIGN.md o su propio proyecto DESIGN.md) → línea base de tokens de diseño (colores/tipografía/espaciado), se usa para continuidad/rediseño de marca, no se reinventa el sistema.
   • HTML web (sitios de referencia video-real-library / real-design-library) → ejemplos visuales de maquetación (layout/jerarquía/composición), se usa cuando se quiere cierta estructura visual.
   • Video (fuente de animaciones video-real-library / video proporcionado por el usuario) → animaciones/ritmo/estilo de subtítulos, se usa cuando se quiere cierto lenguaje de movimiento.
   • Complementariedad: DESIGN.md define el sistema → HTML da ejemplos → video da animaciones, los tres se combinan para formar la dirección completa. La referencia del usuario tiene máxima prioridad. Usar opencli (manteniendo sesión iniciada) para capturar valores reales de tipografía/color/ritmo, heredarlos fielmente en Fase 4.
3. ¿Qué es el video?: Una frase de posicionamiento + para quién es + plataforma de publicación (Douyin/Bilibili/académico/interno — determina el formato y la línea base de ritmo).
4. Anclaje de categoría: Una de las cuatro categorías de remotion-shared/categories/ (voiceover-caption/data-viz/product-demo/brand-motion), o personalizada.
5. Formato y duración: 9:16 vertical / 16:9 horizontal / 1:1; duración objetivo; si es en serie (serie = el ritmo debe ser reutilizable).
6. Emoción/estilo: Profesional contenido / Datos nítidos / Narrativa cálida / Ritmo creativo / Retro... dar 2-3 palabras direccionales comparables.
7. Forma del contenido (clave para el enrutamiento de subtítulos): Ya tiene guion de voz en off / ya tiene .srt/.vtt / tiene datos gráficos y texto / redactar desde cero — determina la ruta de origen de los subtítulos.
8. Preferencias/tabúes: Cosas que odia, estilo de subtítulos (frase por frase / resaltado de palabras / sin subtítulos), línea base de legibilidad.
9. Verificación de coherencia: ¿Ya hay ADN de marca (DESIGN.md / activos visuales / video de referencia) del pre-check de Fase 0? → Si lo hay, la dirección posterior no debe desviarse (evolución controlada); si no lo hay, diseño libre.

Si existe video-taste-profile (workbench/video/*/.taste-profile.json o perfil global), leerlo primero. Cuando la fuente de estilo es un sitio de referencia, Fase 2 debe capturar los valores reales de la referencia (chrome-devtools/vision), y Fase 4 debe heredarlos fielmente — no abstraer la referencia en palabras clave y luego improvisar.

Fase 2 — Investigación (solo con el consentimiento del usuario, se puede hacer en paralelo)

Método de investigación de tres capas, prioridad de menor a mayor:

• Capa 1 Convenciones de la industria: Cómo se filman generalmente los videos similares (línea base segura).
• Capa 2 Nuevas tendencias: Comparar con remotion-shared/video-anti-slop.md, tomar 1-2 referencias de video reales (fuentes de referencia de remotion-shared/video-real-library.md + la referencia del usuario tiene máxima prioridad), extraer puntos aprovechables de estilo de subtítulos/transiciones/ritmo.
• Capa 3 Principios fundamentales: Mente del espectador, legibilidad de subtítulos, ritmo dominado por el contenido — máxima prioridad. Cuando haya conflicto, registrar explícitamente "por qué se desvía de la convención".

La "descripción de referencia visual" en la propuesta debe poder anclarse con ejemplos de la biblioteca de referencia real (por ejemplo, "estilo de resaltado de palabras similar a xxx"), no ser vaga.

Fase 3 — Propuesta completa (entrega central)

Según references/video-proposal-format.md, generar:

• Direcciones SAFE (2-3): Línea base de la categoría, seguras.
• Direcciones RISK (2-3): Desviaciones deliberadas, cada una debe explicar "por qué vale la pena + qué se pierde".
• memorable-thing: Una frase que ancle — "un momento visual/de ritmo que se quiere que el espectador recuerde" (por ejemplo, "la transición de acercamiento en el segundo 3").
• Cada dirección: Palabras clave estéticas, tipografía de subtítulos, paleta de colores, ritmo de la línea de tiempo (palabras/segundo, frecuencia de transiciones), composición, estilo de transición, descripción de referencia visual.

Autoverificación: si las dos direcciones solo cambian colores y tipografía, significa que no hay suficiente diferenciación; rehacer.

Verificación de coherencia del sistema de diseño: Si en el pre-check de Fase 0 se detectó un sistema de diseño de marca existente (DESIGN.md / ADN de marca, como una página web o video ya hecho), las direcciones SAFE/RISK no deben desviarse del ADN de marca establecido (paleta de colores/tipografía/línea base de emoción) — las direcciones RISK solo pueden ser desviaciones controladas dentro del ADN establecido (por ejemplo, cambiar el tono del color de acento, modificar la estructura de luces y sombras, cambiar el sistema de tipografía), no se puede derribar todo ni saltar a un estilo no relacionado. La libertad de diseño solo está permitida cuando no hay un sistema existente. Antes de generar el DESIGN.md, verificar punto por punto que "paleta de colores/tipografía/emoción" sean coherentes con la línea base o una evolución razonable.

Fase 4 — Sistema de diseño (DESIGN.md)

Una vez que el usuario selecciona una dirección, escribir el DESIGN.md según references/video-design-system-template.md, siete secciones:

1. Dirección estética: Un párrafo de posicionamiento + palabras clave + tabúes.
2. Tipografía de subtítulos: Tres niveles (caption/title/body) + tamaño de fuente base según formato + modo de resaltado (word/line/none).
3. Paleta de colores: Paleta semántica (incluyendo captionActive/captionInactive) + línea base de contraste.
4. Ritmo de la línea de tiempo: fps/formato/duración total + ritmo de subtítulos + frecuencia de transiciones.
5. Composición visual: Zona segura + zona de subtítulos + zona de títulos.
6. Transiciones y animaciones: Selección de transiciones + duración + animación de entrada + easing.
7. Video Design Tokens (contrato tokens.ts, ver remotion-shared/video-tokens-spec.md) + Esquema de orquestación de animaciones (actualizado del plano de escenas, ver video-design-system-template.md §8): Lista jerárquica de materiales (bg/mid/fg, ensamblables) + por cada frase de subtítulos → animación de entrada/salida de materiales + animación tipográfica + sincronización con voz en off (combinación audiovisual).

Y generar el contrato tokens.ts (objeto constante de TypeScript, nombres semánticos) — esta es la única interfaz para remotion-build. Las animaciones se seleccionan de la biblioteca general de animaciones y se escriben en DESIGN.md (remotion-shared/categories/{categoria}/motion-list.md).

Sección 8: Anotación del núcleo de renderizado (opcional, por defecto Remotion): El DESIGN.md anota el backend de renderizado — por defecto núcleo Remotion; si el usuario lo solicita explícitamente o el estilo necesita sensación web, se anota núcleo HyperFrames (HeyGen open source HTML→MP4, ver remotion-build/references/hyperframes-guide.md). Criterio: planos complejos / proyecto Remotion existente → Remotion; solo HTML/animaciones GSAP, necesita lint integrado → HyperFrames. El núcleo de renderizado solo afecta la escritura del renderizado en build; los materiales/BGM/subtítulos/verificación/esquema §8 se reutilizan completamente.

Fase 5 — Vista previa + Puerta de aprobación de muestra de estilo (opcional, por defecto activada)

No renderizar el video completo. Generar:

• 3-5 fotogramas clave (npx remotion still <id> --frame=N, cubriendo inicio/fin de frase y fotogramas de transición) — para que el usuario confirme la composición y la posición de los subtítulos;
• o una muestra de baja resolución de 3-5 segundos (--scale=0.25) — para que el usuario vea el ritmo de movimiento real.
• Puerta de aprobación de muestra de estilo (inspirado en paper-collage-video style-proof): Una vez definida la dirección, renderizar 1-2 muestras reales de 3-5s de frases clave (baja resolución) para que el usuario confirme — si el estilo/colores/sensación de animación son correctos, solo después de la confirmación se procede a la producción completa del video con remotion-build (evitar terminar todo el video y luego descubrir que la dirección de estilo no era la correcta).

Los resultados de la vista previa se guardan en workbench/video/{slug}/preview/. El objetivo de la vista previa es que el usuario tome decisiones basadas en lo visual real, no demostrar "puedo renderizar".

Líneas rojas

• Prohibido usar valores por defecto: No dar degradados púrpura-índigo por defecto, el mismo ritmo de subtítulos durante todo el video, la misma composición centrada en cada escena.
• Prohibido copiar: No clonar videos de otros a nivel de píxel (se puede tomar prestado el estilo de subtítulos/ritmo, no copiar el video completo).
• Prohibido inventar: No inventar datos, hechos de marca.
• Línea base de contraste: Subtítulos ≥3:1 (incluso sobre fondos de video real/imagen).
• Línea base de tamaño de fuente de video (el texto en pantalla es clave): Subtítulos caption ≥64px/800, datos mono ≥44px/700, títulos ≥88px/900 — prohibido usar texto pequeño y fino para anotaciones. La única fuente de verdad para los números de hierro = remotion-build/references/video-quality-metrics.md §Umbral duro de subtítulos (línea "reglas de hierro del video"), no copiar números aquí; cambiar el umbral primero cambiando metrics.
• Primero aclarar, luego diseñar: No se puede saltar a la propuesta sin completar la Fase 1.

Archivos de referencia

📍 Orden de búsqueda en la biblioteca compartida remotion-shared: .claude/skills/remotion-shared/ en el proyecto → Codex global → Claude Code global. Tomar el primero que se encuentre.

Archivo	Cuándo leerlo
.claude/skills/remotion-shared/video-anti-slop.md	Al hacer juicios de dirección en cualquier fase (prevenir homogeneización)
.claude/skills/remotion-shared/video-real-library.md	Fase 2 investigación: capturar referencias de video reales
biblioteca/herramientas-IA/video-shotcraft/	Biblioteca de tarjetas de recetas de planos (202 tarjetas en 12 categorías: movimiento/ritmo/transiciones/tipografía/efectos), demos/{categoria}/{tarjeta} para copiar directamente, ver video-shots-spec

Posicionamiento de video-shotcraft (segunda biblioteca de animaciones / biblioteca de plantillas, no es ruta de derivación):

• shotcraft = biblioteca de componentes/animaciones completa y aprovechable (demos/{categoria}/{tarjeta}/{componente}.tsx animaciones de plano a nivel de escena + template/ proyecto plantilla + assets/ componentes y efectos de sonido). Todos los videos siguen uniformemente este consult→build, sin derivar por tipo de producto/voz en off.
• Selección de tarjetas en §8: La columna de tarjetas de plano en DESIGN §8.2 es opcional, los valores llevan marcas de intención [copy] / [tomar prestada la idea]. La única fuente de verdad para los pasos de integración = remotion-shared/video-shots-spec.md「Pasos de integración de tarjetas de plano」(build los ejecuta).
• Solo cuando el usuario menciona explícitamente usar la plantilla de shotcraft (Ink Press) / creación libre propia / co-creación, el Skill activa video-shotcraft para seguir su propio flujo (el usuario elige explícitamente, no es un enrutamiento automático). | .claude/skills/remotion-shared/video-shots-spec.md | Sistema de tarjetas de plano + técnicas autorizadas (dirección/edición/diseño/sonido, extraídas de búsqueda + plataformas) | | .claude/skills/remotion-shared/video-design-presets.md | Fase 4: elegir sistema de diseño predefinido (6 marcas validadas) | | .claude/skills/remotion-shared/video-tokens-spec.md | Fase 4: al escribir tokens | | .claude/skills/remotion-shared/categories/{categoria}/DESIGN.template.md | Fase 4: redactar según plantilla de categoría | | .claude/skills/remotion-shared/categories/{categoria}/motion-list.md | Fase 4: seleccionar combinaciones de animaciones | | .claude/skills/remotion-shared/motion-library/ | Lista de componentes de la biblioteca general de animaciones (50, usados por build) | | biblioteca/herramientas-IA/biblioteca-sistemas-diseno/ | Fase 2 investigación / Fase 3 propuesta: anclaje estético del DESIGN.md de marca | | biblioteca/herramientas-IA/biblioteca-referencias-esteticas/panorama-referencias-esteticas.md | Fase 2: tendencias de frontend/fotografía/edición + Fase 4: diseño de ritmo | | .claude/skills/remotion-shared/aesthetic-judgment/ | Fase 4: al definir dirección: juicio en seis ejes de fotografía/edición/maquetación frontend (estilo de material/ritmo/layout) | | .claude/skills/ui-ux-pro-max/SKILL.md | Motor de reglas de diseño: consultar al definir el estilo visual del video (Fase 4) | | .claude/skills/hallmark/SKILL.md | Revisión anti-AI slop (57 barreras): si la dirección es profesional/evita plantillas (Fase 2/3) | | .claude/skills/taste-skill/SKILL.md | Verificación de gusto (Pre-Flight 40+ ítems): si la dirección es lo suficientemente buena (autoverificación Fase 3) | | biblioteca/herramientas-IA/design-skills/open-design/craft/anti-ai-slop.md | Reglas anti-plantillas ("siete pecados capitales") + 151 alternativas de sistemas de diseño (Fase 2/4) | | .claude/skills/design-shared/review-panel.md | Panel de revisión: perspectiva de agency-agents + criterios de biblioteca de sistemas de diseño/biblioteca de referencias estéticas (autoverificación de dirección Fase 4 + verificación de coherencia) | | .claude/skills/design-shared/wcag-basics.md | Al definir paleta de colores/legibilidad de subtítulos (restricciones duras) | | references/video-proposal-format.md | Fase 3: al generar la propuesta | | references/video-design-system-template.md | Fase 4: al escribir el DESIGN.md | | references/video-taste-profile.md | Cuando se necesita registrar/actualizar el gusto de video del usuario |

Salida y cierre

Terminar con el resumen de entrega unificado:

STATUS: PASS | FAIL | BLOCKED
Output: Ruta de DESIGN.md + ruta de fotogramas clave/muestra de vista previa
Decisión clave: Dirección seleccionada (SAFE/RISK cuál + memorable-thing + categoría)
NEXT_OWNER: remotion-build (generar video) | user (pendiente de confirmar dirección)
Pendiente de confirmación: Asuntos pendientes

Preguntar al cierre: ¿Se ha definido la dirección? ¿Quieres generar el video? (Recomendación: delegar a remotion-build)