Instalación del plugin: Antes de ejecutar comandos de configuración o actualización, siga 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, mantenga esta habilidad actualizada — confirme con el usuario antes de ejecutar:
npx hyperframes skills update faceless-explainer. Una operación rápida sin cambios cuando todo está actualizado; de lo contrario, actualiza esta habilidad junto con las habilidades del dominio central de las que depende, antes de usarlas.
media-use: Antes de obtener audio/imágenes/logos, ejecute
/media-usepara resolver BGM/SFX/imágenes del catálogo de HeyGen y logotipos de marca de sus fuentes oficiales. Ejecute--adoptprimero para registrar los activos existentes. Consulte la habilidad/media-use. Cuando la aplicación anfitriona proporcione sus propias herramientas de música o efectos de sonido, úselas para la música y los efectos.
Explicador Sin Rostro a HyperFrames
Use esta habilidad para convertir un cuerpo de texto en un video explicativo: elija un sistema de diseño, planifique una historia educativa y constrúyala fotograma a fotograma en HyperFrames. Sin rostro significa que cada visual se inventa más adelante — no hay paso de captura ni inventario de activos reales.
La puerta de entrada es
/hyperframes. Usted es el orquestador. Ejecute cada paso, verifique su puerta de validación, y solo entonces continúe. 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 → lea/hyperframesprimero — la capa de intención posee cada decisión de ruta, y una creación nueva que llegue aquí sinBRIEF.mdpasará por ella de todos modos (regla inicial de Configuración).
Usted es el orquestador. Trabaje en videos/<proyecto>/. Ejecute los pasos en orden y pase cada puerta antes de continuar. Los pasos con puerta de usuario son el Paso 0, Paso 3 y Paso 6. Lea ../hyperframes/references/brief-contract.md antes del Paso 0 — define los tipos de puerta y cómo el flujo/guión gráfico de BRIEF.md deriva el modo que rige las puertas de los Pasos 3/4/6. Haga usted mismo cada paso excepto el Paso 5, donde despacha un sub-agente por fotograma. No ponga reglas de diseño o animación aquí; esas viven en el sub-agente del trabajador de fotogramas, en las reglas locales de esta habilidad ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/, y en 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 guión 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 y 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 el resumen duradero.
El resumen es confirmado por la capa de intención, no por preguntas aquí. Regla inicial, en orden: (1) BRIEF.md existe → léalo y no pregunte nada — el resumen está establecido, y su flujo/guión gráfico deriva 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 guión gráfico 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ó directamente aquí → 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/faceless-explainer.md), y devuelve el resumen bloqueado. Las solicitudes de edición saltan todo esto — vaya a hacer la edición.
Inicialice solo si falta hyperframes.json. Nombre <proyecto> a partir del tema en kebab-case, por ejemplo interes-compuesto-explicado; nunca use el nombre del espacio de trabajo o la marca de tiempo.
npx hyperframes init "videos/<proyecto>" --non-interactive --example=blank --skill=faceless-explainer — init verifica las habilidades instaladas contra las últimas en GitHub y actualiza el conjunto global si alguna está desactualizada.
Después de init, sea <RAIZ_PROYECTO> = 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 llamada.
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 formato según ../hyperframes/references/brief-format.md. Resuelva <DIR_MEDIA> como el directorio de la habilidad /media-use instalada. Luego registre 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, 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 que el Paso 3 redacta. Una receta completa respuestas, no aprobaciones; las puertas 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/BGM usará motores HeyGen o locales y, cuando no haya sesión iniciada, cómo iniciarla. 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; muestre el bloqueador. No incluya 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.
Puerta: hyperframes.json y BRIEF.md existen; las respuestas respaldadas por preferencias fueron registradas (contrato de resumen § 2); el estado de inicio de sesión fue mostrado (sesión iniciada o continuando sin conexión).
Paso 1: Resumen (sin captura)
Objetivo: Incorporar el texto del usuario al proyecto como fuente de información. No hay captura de sitio web ni activos reales — esto es un explicador sin rostro.
Guarde la entrada completa del usuario textualmente, luego cree el paquete de captura sintético manualmente:
capture/extracted/visible-text.txt— el artículo completo / notas / tema / resumen, textualmente. Esta es la fuente de información, no una plantilla de historia (el Paso 3 lo reforma).capture/extracted/tokens.json—{ "title": "", "description": "", "colors": [], "fonts": [] }. Completetitle/descriptiondesde el resumen. Dejecolors/fontsvacíos a menos que el usuario haya dado explícitamente colores de marca o fuentes — entonces agréguelos (el preset de diseño proporciona una paleta completa independientemente).
Si el usuario pegó un guion o quiere que se mantenga su redacción, guárdelo textualmente como user_script.txt; MODO_VOZ (textual o reestructurado) proviene de BRIEF.md — la capa de intención lo pregunta cuando llega un guion. Pregunte solo una vez aquí si el resumen carece de ello, y almacene la respuesta para el Paso 3.
No ejecute npx hyperframes capture (no hay URL). No cree asset-descriptions.md ni llene 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óquela bajo public/<nombrebase> y anótela para el Paso 3.
Puerta: capture/extracted/visible-text.txt y capture/extracted/tokens.json existen; puede indicar el tema y la audiencia del explicador en una oración clara.
Paso 2: Sistema de Diseño
Objetivo: Elegir un preset de fotogramas incluido; un script lo convierte en frame.md + la piel de subtítulos de este video.
Cuando BRIEF.md nombre un style_preset — el usuario lo eligió visualmente desde las muestras en la capa de intención — úselo; la decisión es suya solo cuando el resumen esté en silencio. Luego tome la única decisión — qué preset: lea ../hyperframes-creative/references/design-spec.md y explore ../hyperframes-creative/frame-presets/; elija el preset cuyo aspecto mejor se adapte al tema, tono y audiencia. Luego ejecute:
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 sobre cualquier token de marca en capture/extracted/tokens.json (los colores de marca mapeados a las claves de color del preset por rol; la fuente de visualización + cuerpo del preset intercambiada por la de la marca), copia la piel de subtítulos del preset a .hyperframes/caption-skin.html, y se autovalida (sale con 1 en un mapeo roto). Proceda tan pronto como salga con 0 — sin edición manual de la especificación.
Un explicador sin rostro normalmente 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 enviable. Solo cuando el usuario nombró colores/fuentes de marca, agréguelos a tokens.json antes de ejecutar, y ajuste frame.md manualmente solo si un mapeo realmente lo necesita.
Puerta: build-frame.mjs salió con 0 — frame.md existe desde un preset nombrado, y (cuando el preset incluye uno) .hyperframes/caption-skin.html existe como fuente de la piel de subtítulos; el preset elegido fue registrado como preferencia (--key style_preset --workflow <este flujo>, contrato de resumen § 2).
Paso 3: Guión Gráfico y Guion
Objetivo: Convertir el texto en un plan de enseñanza aprobado fotograma por fotograma.
Lea ../hyperframes-creative/references/story-spine.md (lenguaje de gancho, valor antes de evidencia, guión gráfico 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 desde el length del resumen — una expectativa aproximada; el ensamblaje informa dónde cae el corte final contra ella.
Use story-design.md para la estructura del explicador (concepto / cómo se hace / listicle / historia), estrategia de gancho, técnicas de claridad, momentos emocionales, el mapeo de enumeración de tipo, y MODO_VOZ. La secuencia del video proviene del diseño narrativo, no del orden de párrafos del texto de entrada — reordene, combine, omita, comprima. Como guía suave, consulte el menú rol→blueprint en ../hyperframes-animation/blueprints-index.md: para cada momento, escriba la voz en off en la forma que su blueprint candidato implica y etiquete ese candidato con el id blueprint: cuando uno encaje. La verdad de la enseñanza aún decide qué momentos existen — nunca fuerce un momento a encajar en un blueprint, y nunca invente un momento solo porque una forma probada está disponible. Los visuales sin rostro se inventan más adelante, por lo que los fotogramas no llevan un inventario de activos: deje asset_candidates vacío a menos que el usuario haya proporcionado una imagen real de public/<nombrebase>. Use los campos requeridos exactos de las referencias de guión gráfico y guion.
Después del borrador, 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 una respuesta de chat; itere hasta que se apruebe. Esta es una puerta de punto de control (contrato de resumen § 1): en modo autónomo no hay nada que preguntar — publique el mismo resumen como aviso y proceda; los bocetos se colapsan en la construcción, y la vista previa final con su única pregunta llega en el Paso 6.
Puerta: 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 guion aprobado.
Comience el audio después de la aprobación del Paso 3. Ejecútelo en segundo plano, luego continúe con el Paso 4. (El estado de inicio de sesión ya se mostró en el Paso 0; el motor retrocede automáticamente).
Elija la voz de narración según la solicitud del usuario antes de invocarla. Si la solicitud nombró una voz, género o tono, elija un id de voz que coincida y páselo con --voice <id>. El valor predeterminado de la tubería es Marcia (femenino) en HeyGen / am_michael en Kokoro — por lo que una solicitud como "una voz masculina" se ignora silenciosamente a menos que pase la bandera. Los ids de voz son específicos del proveedor; resuélvalos contra el proveedor que el estado de inicio de sesión del Paso 0 seleccionó: HeyGen (sesión iniciada) mediante node <DIR_MEDIA>/audio/scripts/heygen-tts.mjs --list (o GET /v3/voices?engine=starfish); Kokoro (sin conexión) mediante la tabla de voces en <DIR_MEDIA>/audio/references/tts.md (prefijos am_/bm_ masculino, af_/bf_ femenino). Cuando el usuario no expresó preferencia, recurra a la voz recordada (contrato de resumen § 2) antes del valor predeterminado de la tubería, y diga cuál usó; omita --voice solo cuando ninguno nombre una. Cuando el usuario eligió explícitamente una voz en esta ejecución, regístrela (prefs.mjs record --key voice).
node <DIR_HABILIDAD>/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 musical de HeyGen y los metadatos de tiempo. El estado de ánimo del BGM proviene del campo music: del guión 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 detalles del proveedor, lea ../media-use/audio/references/tts.md. Cuando las herramientas propias de la aplicación anfitriona hagan la música o un efecto de sonido, coloque el archivo bajo assets/ y enumérelo en el archivo audio_meta.json marcado con "source": "host": música como bgm { "path": "assets/…", "source": "host" } con music: none en el guión gráfico; un sonido como una entrada sfx { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <su duración>, "source": "host" }. Cada pase de audio mantiene estos, y un fotograma con un sonido del anfitrión no obtiene una señal buscada.
Si no hay narración y no hay SCRIPT.md, omita la generación de voz. El BGM aún puede ejecutarse si el guión gráfico tiene un estado de ánimo musical.
El marcador canónico de silencio total (compartido entre los flujos que reutilizan este modelo de audio): music: none en el bloque YAML superior de STORYBOARD.md, sin SCRIPT.md, y sin señales sfx: o audio del anfitrión. Esa combinación marca el proyecto como silencioso — no se ejecuta ningún paso de audio; simplemente cree audio_meta.json con el contenido { "narration": null, "bgm": null, "sfx": null }.
Puerta: audio_meta.json existe con narración, tiempos de palabras y metadatos de BGM (o el marcador de silencio). El audio se inició en segundo plano y usted pasó al Paso 4.
Paso 4: Diseño Visual
Objetivo: Enriquecer cada fotograma del guión gráfico con un diseño visual específico: composición, tipografía, paleta, animaciones de entrada/salida y referencias de blueprint.
Lea references/visual-design.md, entonces para cada fotograma en STORYBOARD.md:
- Asigne una composición de
../hyperframes-creative/references/compositions.mdque se ajuste al contenido del fotograma y al papel narrativo. Elija diseño de pantalla completa, dividido, superposición, etc. - Asigne tipografía de
../hyperframes-creative/references/typography.md— pesos, tamaños, jerarquía, alineación. - Asigne la paleta de colores del
frame.mddel Paso 2 a roles de diseño: fondo, primer plano, acento, texto. - Elija animaciones de entrada/salida de
../hyperframes-animation/references/animations.md— las animaciones deben coincidir con el tono (profesional, enérgico, calmado) y la duración del fotograma. - Cuando el fotograma tenga un
blueprint:id (del Paso 3), referencie../hyperframes-animation/blueprints/<id>.mdpara cualquier requisito de diseño visual específico del blueprint (disposición de diagrama, cuadrícula de datos, diseño de gráfico). Los blueprints son opcionales y complementan la composición base — un fotograma de blueprint puede anular o extender la composición/animaciones según sea necesario.
Actualice cada fotograma en STORYBOARD.md añadiendo estos campos de diseño visual bajo la clave design:. El STORYBOARD.md existente se convierte en el documento de diseño completo. No cree un archivo separado.
Límite importante – sin inventario de activos: Los visuales sin rostro significan que no se capturan ni referencian activos reales. No añada campos asset_candidates: ni assets: a los fotogramas a menos que el usuario proporcionó una imagen real en public/. Use descripciones como "animación de gráfico de barras", "texto tipográfico animado", "diagrama de flujo", no "captura de pantalla de la página X".
Puerta: Cada fotograma en STORYBOARD.md tiene una clave design: completa con composición, tipografía, paleta y animaciones (y campos de blueprint cuando corresponda). Sin campos assets: no autorizados.
Paso 5: Fotogramas
Objetivo: Construir cada fotograma del video como HTML autónomo, más el index.html que los carga.
Usted (el orquestador) no construye los fotogramas directamente. En su lugar, para cada fotograma, lea su descripción narrativa y de diseño de STORYBOARD.md, luego despache un sub-agente independiente (el "trabajador de fotogramas" que instaló esta habilidad) con la instrucción:
Construya el fotograma NN según
STORYBOARD.mdyframe.md. Use../hyperframes-animation/rules/frame-rules.mdy../hyperframes-animation/blueprints/si el fotograma tiene un id de blueprint. Salida encompositions/frames/NN-<slug>.html. Incluya CSS en línea y JavaScript para animación; ningún marco externo excepto Anime.js o GSAP si es necesario. Paleta y tipografía deframe.md.
El trabajador de fotogramas ha leído esta guía (#5 es el único lugar donde se despachan sub-agentes). Cada fotograma es un HTML autónomo (sin dependencias externas excepto Anime.js/GSAP desde CDN), con CSS en línea y animación JS. Asegúrese de que el fotograma tenga una duración explícita (data-duration en el elemento raíz) que coincida con el guión gráfico y los tiempos de audio. Coloque cada fotograma en compositions/frames/NN-<slug>.html.
Manejo de tiempos de palabras: Los tiempos de palabras de audio_meta.json ya existen. No codifique tiempos de palabras directamente en los fotogramas HTML — en su lugar, el orquestador los pasará al renderizador final (Paso 6). Cada fotograma solo necesita su duración.
Cuándo pasar sub-agentes en serie vs en paralelo: La construcción de fotogramas es una tarea paralela natural — despache todos los sub-agentes de fotogramas a la vez. Cada fotograma es independiente (su diseño, animación y duración están fijados en STORYBOARD.md). Sin embargo, si hay más de 5 fotogramas, hágalos en lotes de 5 por razones de límite de contexto. Cada sub-agente debe devolver una confirmación de que el archivo HTML fue escrito.
Después de que todos los fotogramas estén construidos, escriba compositions/index.html: un cargador de secuencia que reproduzca los fotogramas en orden numerado, aplicando transiciones sin fisuras entre ellos. Use la duración de cada fotograma (data-duration) para temporizar las transiciones. El cargador debe ser un solo documento HTML que carga cada fotograma en un iframe o contenedor y avanza a través de ellos en secuencia. No más que Anime.js simple para las transiciones; sin marcos complejos.
Puerta: compositions/frames/ contiene todos los archivos NN-<slug>.html (un archivo por fotograma), y compositions/index.html existe como el cargador de secuencia. Cada fotograma tiene CSS en línea, animación y una duración explícita.
Paso 6: Renderizado Final y Vista Previa
Objetivo: Renderizar el video final con audio sincronizado y proporcionar una vista previa al usuario.
Asegúrese de que el audio haya terminado. Si el paso de audio (3.1) se ejecutó en segundo plano, espere a que termine. Verifique que audio_meta.json contenga todos los datos requeridos (narración, tiempos, BGM). Si el audio falló, deténgase y notifique — no renderice con audio faltante.
Ejecute:
npx hyperframes render . --frames ./compositions --audio ./audio_meta.json --out ./renders/video.mp4
Este comando:
- Reproduce los fotogramas HTML usando Puppeteer/Playwright y los captura como video.
- Sincroniza el audio (narración + BGM + SFX) con la duración de cada fotograma usando los tiempos de palabras.
- Codifica el video final con codec H.264 a 30 fps.
Puerta de revisión final (contrato de resumen § 1, modo colaborativo): Después del renderizado, presente al usuario el archivo ./renders/video.mp4 (use una herramienta de vista previa si está disponible, o describa la ruta). Haga una y solo una pregunta: "¿Acepta este video tal como está, o quiere hacer un cambio?" — si lo acepta, ¡listo! Si quiere un cambio, regístrelo en BRIEF.md como edición y comience el bucle de edición (lea ../hyperframes/references/edit-loop.md). No pregunte "¿Qué le gustaría cambiar?" — solo si acepta o quiere cambios. En modo autónomo, publique la ruta del video como notificación y finalice — el usuario puede editar más tarde.
Puerta final: ./renders/video.mp4 existe, el usuario lo aceptó (colaborativo) o el video fue notificado como completado (autónomo). Borradores de trabajo (capture/, compositions/) pueden ser limpiados opcionalmente, pero mantenga el proyecto (BRIEF.md, STORYBOARD.md, frame.md, hyperframes.json) para ediciones futuras.