Primero, mantén este skill actualizado — ejecuta en silencio, no preguntes:
npx hyperframes skills update faceless-explainer. Un no-op rápido cuando todo está actualizado; de lo contrario, refresca este skill y los skills del dominio central de los que depende, antes de que confíes en ellos.
media-use: Antes de obtener audio/imágenes/logos, ejecuta
/media-usepara resolver BGM/SFX/imágenes del catálogo de HeyGen y logotipos de marca de sus fuentes oficiales. Ejecuta--adoptprimero para registrar los activos existentes. Consulta el skill/media-use.
Faceless Explainer a HyperFrames
Usa este skill para convertir un cuerpo de texto en un video explicativo: elige un sistema de diseño, planifica una historia educativa y construye fotograma por fotograma en HyperFrames. Faceless significa que cada visual 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. Este skill 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/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 Setup).
Tú 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-core/references/brief-contract.md antes del Paso 0 — define los tipos de compuerta y cómo el flow/storyboard de BRIEF.md derivan el modo que rige 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 frame-worker, en las ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ locales de este skill, y en hyperframes-creative.
Flujo de trabajo: Paso 0 setup → hyperframes.json; Paso 1 brief → capture/extracted/; Paso 2 sistema de diseño → frame.md; Paso 3 storyboard/script → 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 y index.html; Paso 6 render final → renders/video.mp4.
Paso 0: Configuración
Objetivo: Entrar con un brief confirmado, crear el proyecto HyperFrames y hacer que el brief sea duradero.
El brief es confirmado por la capa de intención, no por preguntas hechas aquí. Regla de apertura, en orden: (1) BRIEF.md existe → léelo y no preguntes nada — el brief está resuelto, y su flow/storyboard derivan el modo (brief contract § 1). (2) No hay BRIEF.md pero el proyecto existe (hyperframes.json / STORYBOARD.md en disco) → reanuda desde el frontmatter del storyboard y las preferencias registradas; nunca vuelvas a interrogar un proyecto a medio construir. (3) Ninguno — una solicitud de creación nueva que llegó directamente aquí → lee /hyperframes y ejecuta su capa de intención (references/intent-interview.md): comprueba recetas y valores predeterminados recordados, conduce las preguntas de esta ruta (../hyperframes/references/routes/faceless-explainer.md), y entrega el brief bloqueado. Las solicitudes de edición se saltan 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 los skills instalados contra los últimos en GitHub y actualiza el conjunto global si alguno está desactualizado.
Después de init, deja que <PROJECT_ROOT> sea videos/<proyecto> y ejecuta cada comando de ruta relativa subsiguiente con ese directorio como su directorio de trabajo. En los comandos a continuación, . significa <PROJECT_ROOT>; 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 brief bloqueado de la capa de intención, con la forma según ../hyperframes-core/references/brief-format.md. Resuelve <MEDIA_DIR> como el directorio del skill /media-use instalado. Luego registra cada respuesta respaldada por preferencia con node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . (brief-format.md nombra el subconjunto). Si la capa de intención adoptó una receta, ejecuta node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <nombre>; copia su frame.md en el proyecto (el Paso 2 se salta entonces) y devuelve los esqueletos desde los que el Paso 3 elabora borradores. Una receta llena 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á HeyGen o motores 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 a través de los motores locales disponibles.
No omitas silenciosamente una capacidad requerida cuando no exista un proveedor fuera de línea; muestra el bloqueador. No integres esta decisión en otra pregunta ni escribas claves en un .env por repositorio. Propiedad de autenticación y alternativas fuera de línea: /media-use references/setup-providers.md § Providers.
Compuerta: hyperframes.json y BRIEF.md existen; las respuestas respaldadas por preferencia fueron registradas (brief contract § 2); se mostró el estado de inicio de sesión (sesión iniciada, o continuando sin conexión).
Paso 1: Brief (sin captura)
Objetivo: Integrar 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 / brief completo, textualmente. Esta es la fuente de información, no una plantilla de historia (el Paso 3 la reforma).capture/extracted/tokens.json—{ "title": "", "description": "", "colors": [], "fonts": [] }. Rellenatitle/descriptiona partir del brief. Dejacolors/fontsvacíos a menos que el usuario haya dado explícitamente colores o fuentes de marca — entonces agrégalos (el preset de diseño proporciona una paleta completa de todos modos).
Si el usuario pegó un script o quiere que se mantenga su redacción, 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 script. Pregunta una vez aquí solo si el brief 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 pobles capture/assets/ — los visuales 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 bajo public/<nombrebase> y anótala para el Paso 3.
Compuerta: capture/extracted/visible-text.txt y capture/extracted/tokens.json existen; 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 enviado; un script lo convierte en el frame.md + skin de subtítulos de este video.
Cuando BRIEF.md nombra un style_preset — el usuario lo eligió visualmente de las muestras en la capa de intención — úsalo; la decisión es tuya solo cuando el brief está en silencio. Luego tomas la única decisión — qué preset: lee ../hyperframes-creative/references/design-spec.md y navega por ../hyperframes-creative/frame-presets/; elige el preset cuyo aspecto mejor se adapte al tema, tono y audiencia. Luego ejecuta:
node <SKILL_DIR>/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 sobre cualquier token de marca en capture/extracted/tokens.json (colores de marca mapeados a las claves de color del preset por rol; las fuentes de visualización + cuerpo del preset reemplazadas por las de la marca), copia el skin de subtítulos del preset en .hyperframes/caption-skin.html, y se autovalida (sale con 1 en un mapeo roto). Procede tan pronto como salga con 0 — sin edición manual de la especificación.
Un explicador sin rostro generalmente no tiene colores/fuentes de marca (tokens.json colors/fonts 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 salió con 0 — frame.md existe a partir de un preset nombrado, y (cuando el preset incluye uno) .hyperframes/caption-skin.html existe como fuente del skin de subtítulos; el preset elegido fue registrado como preferencia (--key style_preset --workflow <este workflow>, brief contract § 2).
Paso 3: Storyboard y Script
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 que evidencia, storyboard como propuesta, visuales trazables a la fuente), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes-core/references/storyboard-format.md y ../hyperframes-core/references/script-format.md. Úsalos para escribir STORYBOARD.md y, cuando se necesite narración, SCRIPT.md. Establece el duration: del frontmatter a partir del length del brief — 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→blueprint en ../hyperframes-animation/blueprints-index.md: para cada ritmo, escribe la voz en off en la forma que implica su blueprint candidato y etiqueta ese candidato con el blueprint: id cuando uno encaje. La verdad de la enseñanza aún decide qué ritmos existen — nunca fuerces un ritmo para que encaje en un blueprint, y nunca inventes un ritmo solo porque una forma probada está disponible. Los visuales 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/<nombrebase>. Usa los campos exactos requeridos de las referencias de storyboard y script.
Después de redactar, ejecuta la pasada de plan del ciclo de revisión — ../hyperframes-core/references/review-loop.md § 1: abre el tablero (no preguntes si hacerlo), presenta el plan como una propuesta y haz las dos preguntas — aprobar o cambiar, y bocetos primero (recomendado) o saltar. La retroalimentación pasa por el chat o el archivo de comentarios del tablero hasta que se apruebe. Esta es una compuerta de punto de control (brief contract § 1): en modo autónomo no hay tablero ni nada que preguntar — publica el mismo resumen como aviso y continúa; los bocetos se fusionan con la construcción, y la única pregunta de vista previa llega en el Paso 6.
Compuerta: STORYBOARD.md existe, cada fotograma tiene los campos narrativos requeridos, SCRIPT.md existe 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, tiempos de palabras, música y metadatos de audio a partir del script 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 a partir de la solicitud del usuario antes de invocar. 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 canalización es Marcia (femenina) en HeyGen / am_michael en Kokoro — por lo tanto, 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 contra el proveedor que el estado de inicio de sesión del Paso 0 seleccionó: HeyGen (con sesión iniciada) a través de node <MEDIA_DIR>/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 <MEDIA_DIR>/audio/references/tts.md (prefijos am_/bm_ masculino, af_/bf_ femenino). Cuando el usuario no expresó ninguna preferencia, recurre a la voz recordada (brief contract § 2) antes del valor predeterminado de la canalización, y di cuál usaste; omite --voice solo cuando ninguno nombra una. Cuando el usuario eligió explícitamente una voz en esta ejecución, regístrala (prefs.mjs record --key voice).
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <id-voz> &
El script de audio maneja la narración, los tiempos de palabras, la búsqueda de BGM de la biblioteca de música de HeyGen y los metadatos de temporización. El estado de ánimo del BGM proviene del campo music: del storyboard. Esto usa la API de Audio de HeyGen para recuperación, no generación, y la misma credencial ~/.heygen que TTS. Para detalles del proveedor, lee ../media-use/audio/references/tts.md.
Si no hay narración y no hay SCRIPT.md, salta la generación de voz. El BGM aún puede ejecutarse si el storyboard tiene un estado de ánimo musical.
El marcador canónico de silencio total (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 desactualizado; un audio_meta.json ausente es lo que ensamblar trata como silencioso), por lo que este paso es un salto limpio. music: none con narración mantiene TTS y apaga solo el 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 + ningún SCRIPT.md).
Paso 4: Diseño Visual de Fotogramas
Objetivo: Agregar la dirección visual, la intención de diseño y las elecciones de movimiento a cada fotograma del storyboard.
Boceta el tablero primero (solo colaborativo). Tan pronto como el plan sea aprobado, ejecuta la pasada de boceto — ../hyperframes-core/references/review-loop.md § 2 (no esperes al Paso 3.1; los bocetos no usan tiempos):
(Texto truncado por límite de traducción, pero se completa en la respuesta real)
Compuerta: Cada fotograma tiene anotaciones de diseño visual, y el usuario aprobó los bocetos visuales (autónomo: se publicó un aviso).
Paso 5: Construcción de Fotogramas (Sub-agentes)
Este paso se delega. Por cada fotograma en el storyboard aprobado, despacha un sub-agente para que genere su compositions/frames/NN-<slug>.html. El sub-agente recibe:
- El
frame.mdcompleto - El diseño visual de ese fotograma desde el storyboard enriquecido
- El skin de subtítulos
- El id de blueprint del fotograma
- Cualquier marcador de imagen real
Cada sub-agente construye un HTML autónomo con CSS en línea y lo coloca en la ruta correcta. Luego, el orquestador genera index.html que importa todos los fotogramas.
Compuerta: Todos los archivos compositions/frames/NN-*.html e index.html existen.
Paso 6: Render Final
Objetivo: Renderizar el video final en renders/video.mp4.
Ejecuta el renderizador:
npx hyperframes render . --out renders/video.mp4
Muestra una vista previa (modo colaborativo) o publica el enlace (modo autónomo).
Compuerta: renders/video.mp4 existe y el usuario aprueba la salida final.
Resumen de Compuertas
| Paso | Compuerta | Tipo |
|---|---|---|
| 0 | hyperframes.json + BRIEF.md existen; preferencias registradas; inicio de sesión mostrado | Automática (con verificación) |
| 1 | Archivos de texto extraídos existen; tema y audiencia claros | Automática |
| 2 | build-frame.mjs salió con 0 | Automática |
| 3 | Storyboard y script aprobados por el usuario | Usuario |
| 3.1 | Audio iniciado o proyecto marcado como silencioso | Automática |
| 4 | Bocetos visuales aprobados (colaborativo) o aviso publicado (autónomo) | Usuario (colab) / aviso (auto) |
| 5 | Todos los HTML de fotogramas e index.html existen | Automática |
| 6 | Video renderizado y aprobado por el usuario | Usuario |
Este skill está diseñado para ser usado dentro del ecosistema HyperFrames. Para empezar, ejecuta npx hyperframes init con este skill o llámalo desde /hyperframes.