Instalación de plugins: Antes de los comandos de configuración o actualización, siga las reglas de instalación de plugins cuando este skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.
Primero, mantenga este skill actualizado — confirme con el usuario antes de ejecutar:
npx hyperframes skills update product-launch-video. Una operación rápida sin cambios cuando todo está actualizado; de lo contrario, actualiza este skill y los skills del dominio central de los que depende antes de utilizarlos.
media-use: Antes de obtener audio/imágenes/logos, llame a
/media-usepara resolver música de fondo/efectos de sonido/imágenes del catálogo de HeyGen y logotipos de marca de sus fuentes oficiales. Ejecute--adoptprimero para registrar los activos existentes. Consulte el skill/media-use.
fuente figma: Si la fuente es una URL de figma.com, ejecute
/figmaprimero — exportación de activos, tokens de marca y reconstrucción de componentes/storyboard si es necesario — luego construya este flujo de trabajo a partir de su salida. No maneje Figma directamente con herramientas MCP sin procesar: eso omite la sanitización SVG, la procedencia de.media/manifest.jsonly la vinculaciónvar()de los tokens de marca, por lo que un cambio posterior de marca no puede propagarse sin una reimportación completa.
Lanzamiento de Producto a HyperFrames
Utilice este skill para capturar un producto, comprender su marca, planificar un video de lanzamiento y construirlo cuadro por cuadro en HyperFrames.
La puerta de entrada es
/hyperframes. Usted es el orquestador. Ejecute cada paso, verifique su compuerta y solo entonces continúe al siguiente paso. Este skill es para un producto que se comercializa, lanza, promociona o revela, incluyendo solicitudes como "promo para nuestro sitio" cuando el propósito es promocional. Una solicitud de recorrido por el sitio / presentación permanece aquí:BRIEF.mdlleva la intención de mostrarlo tal cual, y las capturas de pantalla se convierten en los activos que presenta el video. Cualquier otra intención, un simple "haz un video" o cualquier incertidumbre → lea/hyperframesprimero — la capa de intención posee cada decisión de ruta, y una creación nueva que llegue aquí sinBRIEF.mdpasa por ella de todos modos (regla de apertura de Configuración).
Usted es el orquestador. Trabaje en videos/<proyecto>/. Ejecute los pasos en orden y pase cada compuerta antes de continuar. Los pasos con compuerta de usuario son el Paso 0, el Paso 3 y el Paso 6. Lea ../hyperframes/references/brief-contract.md antes del Paso 0 — define los tipos de compuerta y cómo el flujo/storyboard de BRIEF.md derivan el modo que gobierna las compuertas de los Pasos 3/4/6. Haga todos los pasos usted mismo excepto el Paso 5, donde despacha un sub-agente por cuadro. No coloque reglas de diseño o movimiento aquí; esas residen en el sub-agente trabajador de cuadros, en ../hyperframes-animation/rules/ local de este skill + ../hyperframes-animation/blueprints/ y hyperframes-creative.
Flujo de trabajo: Paso 0 configuración -> hyperframes.json; Paso 1 captura -> capture/; Paso 2 sistema de diseño -> frame.md; Paso 3 storyboard/guion -> STORYBOARD.md y SCRIPT.md; Paso 3.1 audio -> audio_meta.json; Paso 4 diseño visual -> STORYBOARD.md enriquecido; Paso 5 cuadros -> compositions/frames/NN-*.html e index.html; Paso 6 renderizado final -> renders/video.mp4.
Paso 0: Configuración
Objetivo: Entrar con un resumen confirmado, crear el proyecto HyperFrames y hacer que el resumen sea duradero.
El resumen es confirmado por la capa de intención, no por preguntas hechas aquí. Regla de apertura, en orden: (1) BRIEF.md existe → léalo y no pregunte nada — el resumen está resuelto, y su flujo/storyboard derivan el modo (contrato de resumen § 1). (2) No hay BRIEF.md pero el proyecto existe (hyperframes.json / STORYBOARD.md en disco) → reanude desde el frontmatter del storyboard y las preferencias registradas; nunca vuelva a interrogar un proyecto a medio construir. (3) Ninguno de los dos — una solicitud de creación nueva que llegó aquí directamente → lea /hyperframes y ejecute su capa de intención (references/intent-interview.md): verifica recetas y valores predeterminados recordados, realiza las preguntas de esta ruta (../hyperframes/references/routes/product-launch-video.md) y devuelve el resumen bloqueado. Las solicitudes de edición omiten todo esto — vaya a hacer la edición.
Inicialice solo si falta hyperframes.json. Nombre <proyecto> a partir de la marca o dominio en kebab-case, por ejemplo acme-promo; nunca use el nombre del espacio de trabajo o una marca de tiempo.
npx hyperframes init "videos/<proyecto>" --non-interactive --example=blank --skill=product-launch-video — init verifica los skills instalados contra los últimos en GitHub y actualiza el conjunto global si alguno está desactualizado.
Después de init, deje que <RAIZ_PROYECTO> sea videos/<proyecto> y ejecute cada comando de ruta relativa subsiguiente con ese directorio como su directorio de trabajo. En los comandos a continuación, . significa <RAIZ_PROYECTO>; nunca escriba .media, capture o archivos de salida en el directorio de la persona que llama.
Escriba BRIEF.md inmediatamente después de init (nunca antes — init rechaza un directorio no vacío): el resumen bloqueado de la capa de intención, con el formato según ../hyperframes/references/brief-format.md. Resuelva <DIR_MEDIA> como el directorio del skill /media-use instalado. Luego registre cada respuesta respaldada por preferencia con node <DIR_MEDIA>/scripts/prefs.mjs record --hyperframes . (brief-format.md nombra el subconjunto). Si la capa de intención adoptó una receta, ejecute node <DIR_MEDIA>/scripts/recipe.mjs use --hyperframes . --name <nombre>; copia su frame.md en el proyecto (el Paso 2 se omite entonces) y devuelve los esqueletos desde los que el Paso 3 redacta. Una receta completa respuestas, no aprobaciones; las compuertas de revisión aún se ejecutan.
Muestre el estado de inicio de sesión antes de continuar más allá de la Configuración — ejecute npx hyperframes auth status y transmita su salida textualmente. Informa si la voz/música de fondo usará motores HeyGen o locales y, cuando no haya iniciado sesión, cómo hacerlo. Observe el contrato de código de salida: auth status sale con 1 cuando no ha iniciado sesión (y cuando la credencial almacenada es rechazada) — esa salida no cero es el estado normal de no haber iniciado sesión, no un fallo del comando, así que no lo trate como un error, no lo reintente y no lo encadene con &&/set -e de una manera que abortaría el flujo de trabajo. Aplique una rama:
- Colaborativo: espere a que el usuario inicie sesión o elija explícitamente
offline/go. - Autónomo: indique el estado y continúe a través de los motores locales disponibles.
No omita silenciosamente una capacidad requerida cuando no exista un proveedor fuera de línea; señale el bloqueador. No pliegue esta decisión en otra pregunta ni escriba claves en un .env por repositorio. Propiedad de autenticación y alternativas fuera de línea: /media-use references/setup-providers.md § Proveedores.
Compuerta: hyperframes.json y BRIEF.md existen; las respuestas respaldadas por preferencias fueron registradas (contrato de resumen § 2); se mostró el estado de inicio de sesión (iniciado sesión, o continuando fuera de línea).
Paso 1: Capturar activos
Objetivo: Recopilar el material fuente, las señales de marca y los activos utilizables para el video.
Clasifique la entrada y elija la ruta. URL explícita -> captúrela y use el sitio para la narración y los activos. Guion/resumen pegado -> guárdelo textualmente como user_script.txt; VO_MODE (textual o reestructurado) proviene de BRIEF.md — la capa de intención lo pregunta cuando llega un guion (pregunte una vez aquí solo si el resumen carece de él). Luego resuelva el objetivo de captura: URL en el texto -> úsela; solo nombre de marca -> WebSearch, confirme la URL en una línea, luego rastree; sin URL/sitio (o el resumen dice que no se rasque) -> ruta sin captura.
Ejecute la captura con: npx hyperframes capture "<URL>" -o ./capture --json. Mantenga el presupuesto de navegación posterior predeterminado a menos que la persona que llama tenga un plazo más pequeño; luego pase un --capture-budget <milisegundos> positivo que deje tiempo para el trabajo posterior. --timeout controla solo la navegación de la página. Use --skip-vision solo cuando el subtitulado opcional de imágenes esté intencionalmente deshabilitado.
Inspeccione el resultado del comando y el directorio de salida inmediatamente. Una salida no cero, JSON ok: false o capture/BLOCKED.md es una parada dura para la ruta de captura: informe la razón registrada y no consuma capturas de pantalla parciales, DOM, tokens o activos. No fabrique una alternativa sintética sin captura después de una captura de URL fallida. Continúe a través de la ruta sin captura solo cuando el resumen original proporcionó el material fuente, o cuando el usuario cambie explícitamente a una captura de pantalla o resumen proporcionado después del fallo.
Advertencias como "muy poco contenido de texto" junto con un catálogo de activos vacío no son prueba de una página utilizable. Para un recorrido por el sitio o un resumen de mostrarlo tal cual, requiere una estructura capturada confiable o una captura de pantalla proporcionada; si ninguno existe, deténgase. No invente ni reconstruya la página simplemente porque la captura no es utilizable.
Para un recorrido por el sitio o un resumen de mostrarlo tal cual, la página capturada es la fuente de verdad visual. Use la captura de pantalla real en lugar de reconstruir el sitio web completo en HTML. Si la toma necesita movimiento interno, mantenga la captura de pantalla como base y superponga activos capturados reales en posiciones medidas, o reconstruya solo el componente que se mueve. Para una toma de desplazamiento, anime la ventana gráfica sobre capture/screenshots/full-page.png — la placa 1x de todo el documento, con precisión de píxeles para una ventana gráfica de 1920 de ancho que viaja hacia abajo. Está ausente cuando la página era demasiado alta para capturarla en una sola pieza; recurra a las tomas de posición de desplazamiento superpuestas en el mismo directorio. Acercarse más allá de 1:1 requiere su propia captura 2x de esa región, ya que la placa no tiene margen por encima de 1x. Recrear toda la página solo cuando el usuario lo solicite explícitamente para una interpretación estilizada; una captura no utilizable por sí sola no es autorización.
Si GEMINI_API_KEY, GOOGLE_API_KEY o una clave de OpenRouter existe, la captura subtitula automáticamente los activos en capture/extracted/asset-descriptions.md. Esto no es una compuerta de revisión. Sin una clave de visión, use el contexto DOM y continúe.
Ruta sin captura: cree capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md y capture/assets/ manualmente. tokens.json debe ser { "title": "", "description": "", "colors": [], "fonts": [] }; complete título/descripción del resumen cuando sea posible. visible-text.txt contiene el resumen o guion completo. asset-descriptions.md debe decir que no se capturaron activos a menos que el usuario haya dado notas de activos.
Compuerta: la captura JSON informó ok: true; capture/BLOCKED.md no existe; capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md y capture/assets/ existen; y puede indicar la marca en una oración clara. Trate asset-descriptions.md como el inventario principal de activos. Si falta después de una captura real, deténgase e informe que la captura está incompleta. Las advertencias sobre una fase opcional degradada son aceptables solo cuando esta compuerta estructural aún pasa.
Paso 2: Sistema de Diseño
Objetivo: Elegir un preset de cuadro enviado; un script lo convierte en frame.md + skin de subtítulos de este video.
Cuando BRIEF.md nombra un style_preset — el usuario lo eligió visualmente de las exhibiciones en la capa de intención — úselo; la decisión es suya solo cuando el resumen está en silencio. Luego toma la única decisión — qué preset: lea ../hyperframes-creative/references/design-spec.md y elija el preset cuyo aspecto se adapte mejor a la marca y al resumen. Luego ejecute:
node <DIR_SKILL>/scripts/build-frame.mjs --preset <nombre> --hyperframes .
El script hace el resto de manera determinista: copia el FRAME.md del preset → frame.md y lo remezcla sobre los tokens de marca en capture/extracted/tokens.json (colores de marca mapeados a las claves de color del preset por función — tinta, lienzo, acentos — manteniendo claves/estructura/componentes; las fuentes de visualización + cuerpo del preset intercambiadas por las de la marca), copia el skin de subtítulos del preset a .hyperframes/caption-skin.html y se autovalida (sale con 1 en un mapeo roto). Proceda al siguiente paso tan pronto como salga con 0 — sin edición manual de la especificación.
tokens.json sin colores/fuentes de marca (por ejemplo, sin captura) → el script mantiene la paleta propia del preset, un diseño completo y enviable. Si el resumen nombra colores/fuentes de marca que la captura omitió, agréguelos a capture/extracted/tokens.json antes de ejecutar (o use el design.md del usuario para poblarlo); solo ajuste frame.md manualmente después si un mapeo realmente lo necesita.
Compuerta: build-frame.mjs salió con 0 — frame.md existe de un preset nombrado, y (cuando el preset envía uno) .hyperframes/caption-skin.html existe como fuente del skin de subtítulos; el preset elegido fue registrado como una preferencia (--key style_preset --workflow <este flujo de trabajo>, contrato de resumen § 2).
Paso 3: Storyboard y Guion
Objetivo: Convertir el resumen y el material capturado en un plan de historia cuadro por cuadro aprobado.
Lea ../hyperframes-creative/references/story-spine.md (lenguaje de gancho, valor antes de evidencia, storyboard como propuesta, visuales trazables a la fuente), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md y ../hyperframes/references/script-format.md. Úselos para escribir STORYBOARD.md y, cuando se necesite narración, SCRIPT.md. Establezca el duration: del frontmatter a partir del length del resumen — una expectativa aproximada; el ensamblaje informa dónde cae el corte en relación con ella.
Use story-design.md para el plano de la historia, gancho, lógica de persuasión, tiempos, VO_MODE y elecciones de activos. Como guía suave, consulte el menú rol→plano en ../hyperframes-animation/blueprints-index.md: para cada tiempo, anote un id de plano candidato cuando uno encaje. La verdad de la historia aún decide qué tiempos existen — nunca fuerce un tiempo para que encaje en un plano, y nunca invente un tiempo solo porque una forma probada está disponible. Elija los asset_candidates de cada cuadro visual de capture/extracted/asset-descriptions.md (el inventario canónico) — no navegue por capture/assets/ sin procesar. No pida al usuario que elija activos a menos que ese inventario falte o no sea utilizable. Use los campos exactos requeridos de las referencias de storyboard y guion.
Después de redactar, ejecute la pasada de plan del bucle de revisión — ../hyperframes/references/review-loop.md § 1: presente el plan como una propuesta y haga las dos preguntas — aprobar o cambiar, y bocetos primero (recomendado) o saltar. La retroalimentación llega como respuesta de chat; repita hasta que se apruebe. Esta es una compuerta de punto de control (contrato de resumen § 1): en modo autónomo, pase la compuerta después de que se apruebe el plan; en modo colaborativo, espere la confirmación del usuario.