Instalación del plugin: Antes de los comandos de configuración o actualización, sigue las reglas de ejecución del plugin cuando esta habilidad esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.
Primero, mantén esta habilidad actualizada — confirma con el usuario antes de ejecutar:
npx hyperframes skills update faceless-explainer. Es una operación rápida y sin efecto cuando todo está al día; de lo contrario, actualiza esta habilidad y las habilidades del dominio central de las que depende antes de que confíes en ellas.
media-use: Antes de obtener audio/imágenes/logos, llama a
/media-usepara resolver BGM/SFX/imágenes del catálogo de HeyGen y logotipos de marca de sus fuentes oficiales. Primero ejecuta--adoptpara registrar los activos existentes. Consulta la habilidad/media-use.
Explicador Sin Rostro a HyperFrames
Usa esta habilidad para convertir un cuerpo de texto en un video explicativo: elige un sistema de diseño, planifica una historia didáctica y constrúyela fotograma a fotograma en HyperFrames. Sin rostro significa que cada imagen se inventa aguas abajo — no hay paso de captura ni inventario de activos reales.
La puerta de entrada es
/hyperframes. Tú eres el orquestador. Ejecuta cada paso, verifica su compuerta y solo entonces continúa. Esta habilidad es para explicar un tema a partir de texto, sin producto ni sitio web que capturar. Cualquier otra intención, un simple "haz un video" o cualquier incertidumbre → lee primero/hyperframes— 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 inicial de Configuración).
Eres el orquestador. Trabaja en videos/<proyecto>/. Ejecuta los pasos en orden y pasa cada compuerta antes de continuar. Los pasos con compuerta de usuario son el Paso 0, el Paso 3 y el Paso 6. Lee ../hyperframes/references/brief-contract.md antes del Paso 0 — define los tipos de compuerta y cómo BRIEF.md's flow/storyboard derivan el modo que gobierna las compuertas de los Pasos 3/4/6. Haz cada paso tú mismo excepto el Paso 5, donde despachas un sub-agente por fotograma. No pongas reglas de diseño o movimiento aquí; esas viven en el sub-agente worker de fotogramas, las reglas locales de esta habilidad ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/, y hyperframes-creative.
Flujo de trabajo: Paso 0 configuración → hyperframes.json; Paso 1 resumen → capture/extracted/; Paso 2 sistema de diseño → frame.md; Paso 3 guion gráfico/guion → STORYBOARD.md y SCRIPT.md; Paso 3.1 audio → audio_meta.json; Paso 4 diseño visual → STORYBOARD.md enriquecido; Paso 5 fotogramas → compositions/frames/NN-*.html and 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 inicial, en orden: (1) BRIEF.md existe → léelo y no preguntes nada — el resumen está resuelto, y su flow/storyboard derivan el modo (contrato de resumen § 1). (2) No hay BRIEF.md pero el proyecto existe (hyperframes.json / STORYBOARD.md en disco) → reanuda desde el frontmatter del guion gráfico y las preferencias registradas; nunca vuelvas a interrogar un proyecto a medio construir. (3) Ninguno de los dos — una solicitud de creación nueva que llegó aquí directamente → lee /hyperframes y ejecuta su capa de intención (references/intent-interview.md): verifica recetas y valores predeterminados recordados, realiza las preguntas de esta ruta (../hyperframes/references/routes/faceless-explainer.md), y devuelve el resumen bloqueado. Las solicitudes de edición omiten todo esto — ve a hacer la edición.
Inicializa solo si falta hyperframes.json. Nombra <proyecto> a partir del tema en kebab-case, por ejemplo compound-interest-explained; nunca uses el nombre del espacio de trabajo o una marca de tiempo.
npx hyperframes init "videos/<proyecto>" --non-interactive --example=blank --skill=faceless-explainer — init verifica las habilidades instaladas con las últimas en GitHub y actualiza el conjunto global si alguna está desactualizada.
Después de init, establece <RAÍZ_DEL_PROYECTO> como videos/<proyecto> y ejecuta cada comando de ruta relativa posterior con ese directorio como su directorio de trabajo. En los comandos a continuación, . significa <RAÍZ_DEL_PROYECTO>; nunca escribas .media, capture o archivos de salida en el directorio del llamante.
Escribe 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 la forma según ../hyperframes/references/brief-format.md. Resuelve <DIR_MEDIA> como el directorio de la habilidad /media-use instalada. Luego registra cada respuesta respaldada por preferencias con node <DIR_MEDIA>/scripts/prefs.mjs record --hyperframes . (brief-format.md nombra el subconjunto). Si la capa de intención adoptó una receta, ejecuta 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 a partir de los cuales se redacta el Paso 3. Una receta completa respuestas, no aprobaciones; las compuertas de revisión aún se ejecutan.
Muestra el estado de inicio de sesión antes de continuar después de la Configuración — ejecuta npx hyperframes auth status y transmite su salida textualmente. Informa si la voz/BGM usará motores de HeyGen o locales y, cuando no haya sesión iniciada, cómo iniciarla. Aplica una rama:
- Colaborativo: espera a que el usuario inicie sesión o elija explícitamente
offline/go. - Autónomo: indica el estado y continúa con los motores locales disponibles.
No omitas silenciosamente una capacidad requerida cuando no exista un proveedor offline; muestra el bloqueo. No incluyas esta decisión en otra pregunta ni escribas claves en un .env por repositorio. Propiedad de autenticación y alternativas offline: /media-use references/setup-providers.md § Proveedores.
Compuerta: existen hyperframes.json y BRIEF.md; las respuestas respaldadas por preferencias fueron registradas (contrato de resumen § 2); se mostró el estado de inicio de sesión (sesión iniciada, o continuando sin conexión).
Paso 1: Resumen (sin captura)
Objetivo: Incorporar el texto del usuario en el proyecto como fuente de información. No hay captura de sitio web ni activos reales — esto es un explicador sin rostro.
Guarda la entrada completa del usuario textualmente, luego crea el paquete de captura sintético manualmente:
capture/extracted/visible-text.txt— el artículo / notas / tema / resumen completo, textualmente. Esta es la fuente de información, no una plantilla de historia (el Paso 3 la reestructura).capture/extracted/tokens.json—{ "title": "", "description": "", "colors": [], "fonts": [] }. Completatitle/descriptiona partir del resumen. Dejacolors/fontsvacíos a menos que el usuario haya proporcionado explícitamente colores o fuentes de marca — en ese caso, agrégalos (el preset de diseño proporciona una paleta completa independientemente).
Si el usuario pegó un guion o quiere que se mantengan sus palabras, guárdalo 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. Pregunta una vez aquí solo si el resumen carece de ello, y almacena la respuesta para el Paso 3.
No ejecutes npx hyperframes capture (no hay URL). No crees asset-descriptions.md ni poblar capture/assets/ — las imágenes sin rostro se inventan en los Pasos 4-5, no se capturan. La única excepción: si el usuario proporcionó una imagen real, colócala en public/<nombre_base> y anótala para el Paso 3.
Compuerta: existen capture/extracted/visible-text.txt y capture/extracted/tokens.json; puedes indicar el tema y la audiencia del explicador en una frase clara.
Paso 2: Sistema de Diseño
Objetivo: Elegir un preset de fotograma incluido; un script lo convierte en el frame.md + máscara de subtítulos de este video.
Cuando BRIEF.md nombra un style_preset — el usuario lo eligió visualmente entre las muestras en la capa de intención — úsalo; la decisión es tuya solo cuando el resumen está en silencio. Luego tomas la única decisión — qué preset: lee ../hyperframes-creative/references/design-spec.md y explora ../hyperframes-creative/frame-presets/; elige el preset cuyo aspecto se adapte mejor al tema, tono y audiencia. Luego ejecuta:
node <DIR_HABILIDAD>/scripts/build-frame.mjs --preset <nombre> --hyperframes .
El script hace el resto de forma determinista: copia el FRAME.md del preset → frame.md y lo remezcla con cualquier token de marca en capture/extracted/tokens.json (los colores de marca se asignan a las claves de color del preset por función; las fuentes de visualización y cuerpo del preset se intercambian por las de la marca), copia la máscara de subtítulos del preset a .hyperframes/caption-skin.html, y se autovalida (termina con 1 en un mapeo roto). Procede tan pronto como termine con 0 — sin ediciones manuales de la especificación.
Un explicador sin rostro generalmente no tiene colores/fuentes de marca (tokens.json colores/fuentes vacíos) → el script mantiene la paleta propia del preset, un diseño completo y listo para usar. Solo cuando el usuario nombró colores/fuentes de marca, agrégalos a tokens.json antes de ejecutar, y solo ajusta frame.md manualmente después si un mapeo realmente lo necesita.
Compuerta: build-frame.mjs terminó con 0 — frame.md existe a partir de un preset nombrado, y (cuando el preset incluye una) .hyperframes/caption-skin.html existe como fuente de la máscara de subtítulos; el preset elegido fue registrado como preferencia (--key style_preset --workflow <este flujo de trabajo>, contrato de resumen § 2).
Paso 3: Guion Gráfico y Guion
Objetivo: Convertir el texto en un plan de enseñanza aprobado, fotograma por fotograma.
Lee ../hyperframes-creative/references/story-spine.md (lenguaje de gancho, valor antes de evidencia, guion gráfico como propuesta, imágenes trazables hasta la fuente), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md, y ../hyperframes/references/script-format.md. Úsalos para escribir STORYBOARD.md y, cuando sea necesaria una narración, SCRIPT.md. Establece 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.
Usa story-design.md para la estructura del explicador (concepto / cómo se hace / lista / historia), estrategia de gancho, técnicas de claridad, ritmos emocionales, el mapeo de enumeración de tipos y VO_MODE. La secuencia del video proviene del diseño narrativo, no del orden de los párrafos del texto de entrada — reordena, fusiona, omite, comprime. Como guía suave, consulta el menú rol→modelo en ../hyperframes-animation/blueprints-index.md: para cada ritmo, escribe la voz en off en la forma que implica su modelo candidato y etiqueta ese candidato con la blueprint: id cuando encaje. La verdad de la enseñanza aún decide qué ritmos existen — nunca fuerces un ritmo para que encaje en un modelo, ni inventes un ritmo solo porque una forma probada está disponible. Las imágenes sin rostro se inventan aguas abajo, por lo que los fotogramas no llevan un inventario de activos: deja asset_candidates vacío a menos que el usuario haya proporcionado una imagen real public/<nombre_base>. Usa los campos exactos requeridos de las referencias del guion gráfico y el guion.
Después de redactar, ejecuta la pasada de plan del bucle de revisión — ../hyperframes/references/review-loop.md § 1: presenta el plan como una propuesta y haz las dos preguntas — aprobar o cambiar, y bocetos primero (recomendado) o saltar. La retroalimentación llega como una respuesta de chat; repite el bucle hasta que se apruebe. Esta es una compuerta de punto de control (contrato de resumen § 1): en modo autónomo no hay nada que preguntar — publica el mismo resumen como aviso y continúa; los bocetos se fusionan en la compilación, y la única pregunta de vista previa llega en el Paso 6.
Compuerta: existe STORYBOARD.md, cada fotograma tiene los campos narrativos requeridos, existe SCRIPT.md cuando se necesita narración, y el usuario aprobó el plan fotograma por fotograma (autónomo: el resumen se publicó como aviso).
Paso 3.1: Audio
Objetivo: Generar narración, sincronización de palabras, música y metadatos de audio a partir del guion aprobado.
Inicia el audio después de la aprobación del Paso 3. Ejecútalo en segundo plano, luego continúa al Paso 4. (El estado de inicio de sesión ya se mostró en el Paso 0; el motor retrocede automáticamente).
Elige la voz de narración de la solicitud del usuario antes de invocarlo. Si la solicitud nombró una voz, género o tono, elige un ID de voz coincidente y pásalo con --voice <id>. El valor predeterminado de la tubería es de otro modo Marcia (femenina) en HeyGen / am_michael en Kokoro — por lo que una solicitud como "una voz masculina" se ignora silenciosamente a menos que pases la bandera. Los IDs de voz son específicos del proveedor; resuélvelos según el proveedor que el estado de inicio de sesión del Paso 0 seleccionó: HeyGen (sesión iniciada) a través de node <DIR_MEDIA>/audio/scripts/heygen-tts.mjs --list (o GET /v3/voices?engine=starfish); Kokoro (sin conexión) a través de la tabla de voces en <DIR_MEDIA>/audio/references/tts.md (prefijos am_/bm_ masculino, af_/bf_ femenino). Cuando el usuario no expresó ninguna preferencia, recurre a la voz recordada (contrato de resumen § 2) antes del valor predeterminado de la tubería, y di cuál usaste; omite --voice solo cuando ninguno la nombra. Cuando el usuario eligió explícitamente una voz en esta ejecución, regístrala (prefs.mjs record --key voice).
node <DIR_HABILIDAD>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &
El script de audio maneja la narración, la sincronización de palabras, la búsqueda de BGM de la biblioteca de música de HeyGen y los metadatos de sincronización. El estado de ánimo de BGM proviene del campo music: del guion gráfico. Esto usa la API de Audio de HeyGen para la recuperación, no para la generación, y la misma credencial ~/.heygen que TTS. Para obtener detalles del proveedor, lee ../media-use/audio/references/tts.md.
Si no hay narración y no hay SCRIPT.md, omite la generación de voz. BGM aún puede ejecutarse si el guion gráfico tiene un estado de ánimo musical.
El marcador canónico de completamente silencioso (compartido entre los flujos de trabajo que reutilizan este modelo de audio): music: none en el bloque YAML superior de STORYBOARD.md y ningún SCRIPT.md. Esa combinación marca el proyecto como silencioso — sin narración, sin BGM, sin SFX. audio.mjs lo reconoce y no genera nada (elimina cualquier audio_meta.json antiguo; un audio_meta.json ausente es lo que el ensamblaje trata como silencioso), por lo que este paso es una omisión limpia. music: none con narración mantiene TTS y desactiva solo BGM. Usa exactamente esta ortografía — no improvises otros marcadores.
Compuerta: el trabajo de audio ha comenzado, o el proyecto está marcado como silencioso (music: none + sin SCRIPT.md).
Paso 4: Diseño Visual de Fotogramas
Objetivo: Agregar la dirección visual, la intención de diseño y las opciones de movimiento a cada fotograma del guion gráfico.
Dibuja primero la hoja del guion gráfico (colaborativo: espera la aprobación; autónomo: publica un aviso y continúa). Luego enriquece STORYBOARD.md con los campos layout_intent, motion_notes y visual_style para cada fotograma. El diseño debe ser coherente con el sistema de diseño elegido en el Paso 2 y con las capacidades del motor de animación.
Lee ../hyperframes-animation/rules/ y ../hyperframes-animation/blueprints/ para comprender las limitaciones y posibilidades del motor de animación. No te excedas en la especificación: cuanto más detallado, mejor, pero sin contradicciones con las reglas.
Compuerta: STORYBOARD.md existe con los campos visuales añadidos; el usuario (o el aviso autónomo) ha aprobado el diseño visual.
Paso 5: Fotogramas (Construcción)
Objetivo: Generar los archivos HTML individuales para cada fotograma.
Este paso lo ejecutan sub-agentes worker de fotogramas. Despacha un sub-agente por fotograma. El sub-agente lee el fotograma correspondiente de STORYBOARD.md, la especificación de diseño frame.md, el archivo de audio audio_meta.json (si existe), y las reglas de animación. Cada sub-agente genera:
compositions/frames/NN-*.html— donde NN es el número de fotograma con dos dígitos.- Si el fotograma tiene elementos interactivos o de datos, también
compositions/frames/NN-*.js.
Los sub-agentes worker de fotogramas se ejecutan en paralelo para mayor eficiencia. No interfieras en su trabajo a menos que fallen.
Compuerta: Todos los archivos de fotogramas HTML existen en compositions/frames/;
Consideraciones importantes:
- Los nombres de archivos deben seguir el patrón
NN-<nombre-corto>.html. - Cada fotograma debe ser autocontenido (CSS, JS inline).
- Los fotogramas deben ser responsivos y funcionar en el navegador.
Paso 6: Renderizado Final
Objetivo: Ensamblar todos los fotogramas en un video final con audio y transiciones.
Paso con compuerta de usuario. Antes de renderizar, muestra una vista previa de la línea de tiempo: npx hyperframes preview ./STORYBOARD.md ./compositions/index.html. Pregunta al usuario: "¿Aprobar para renderizar?" (los cambios se manejan con ediciones directas). En modo autónomo, publica el aviso y continúa.
Luego ejecuta el renderizado:
npx hyperframes render ./compositions/index.html --out ./renders/video.mp4
El comando de renderizado toma los fotogramas HTML, los convierte en imágenes de video, les aplica las transiciones definidas en frame.md y sincroniza con el audio en audio_meta.json (si existe). El resultado es renders/video.mp4.
Compuerta: renders/video.mp4 existe, el usuario ha aprobado el resultado final (o el aviso autónomo se ha enviado).
Referencias
- Contrato de Resumen
- Formato de Resumen
- Columna Vertebral de la Historia
- Diseño de Historia
- Índice de Modelos
- Formato de Guion Gráfico
- Formato de Guion
- Reglas del Motor de Animación
- Modelos del Motor de Animación
- Especificación de Diseño
- Instalación del Plugin
- Habilidad Media-Use
- Bucle de Revisión
- Sintaxis de Fotogramas
- Estándar de Codificación