Habilidad Slice
Convierte un artículo, nota, trabajo o tema general en un video vertical de tarjeta (1080×1920) narrado y paginado al ritmo de TTS, con 13 temas visuales que cubren 抖音 / 小红书 / 知乎 / X / 公众号 / 飞书 / TikTok / LinkedIn / 雪球 / 微博 / 即刻 / B 站 / 播客.
Renombrado de
paper-slide→slice. El producto ahora se llama Slice (voxflow.studio/apps/slice); el slug anterior ya no está registrado.paper-slidesolo sobrevive como uno de los 13 identificadores de tema.
Elige la Ruta
| Contexto | Ruta | Notas |
|---|---|---|
| El usuario quiere el JSON del mazo (sin renderizar) — rápido, adaptable, encadenable | CLI: voxflow slice <article.md> --theme <id> | Llama directamente a /api/slice/deck (cuota de 200; renombrado de /api/paper-slide/slice en #3307 Deploy 2). Devuelve el mazo canónico de 5–8 tarjetas en JSON validado por el mismo backend que usa la web, acepta los 13 temas. Sin MP4 — encadena --json con herramientas personalizadas, la composición local de Remotion (contribuidores), o péguelo en la web para renderizar. |
| El usuario está iterando sobre un mazo — ediciones de varias rondas en el texto/estructura antes de comprometerse con un renderizado | CLI: voxflow slice stage <deck.json> | Inicia una página de previsualización localhost (sin costo de cuota) que se recarga en caliente con cada guardado del JSON del mazo. Bucle útil: voxflow slice ... -o deck.json → voxflow slice stage deck.json → ajustar mensaje → re-ejecutar slice → la previsualización se actualiza al instante. Ver Ruta Stage más abajo. |
| El usuario quiere un MP4 terminado + portada (flujo de consumo predeterminado) | Aplicación web: https://voxflow.studio/apps/slice | El único lugar que ejecuta los exactos 6 temas de Slice de principio a fin. El nivel gratuito produce MP4 9:16 + portada multiformato (9:16/3:4/1:1). |
El usuario quiere un video similar sin conexión mediante CLI pero el mazo solo de voxflow slice no es suficiente | voxflow present o voxflow picstory --style sketchnote | Solo aproximación. Esquemas visuales diferentes; no puede generar los temas editorial-mag / notion-card / brutalist / glass-dark de Slice. Ver Aproximación CLI más abajo. |
El checkout local tiene video-present/src/compositions/PaperSlide (solo contribuidores de VoxFlow) | Script experimental local de Remotion | Ver Ruta Local de Remotion. Nota: el script experimental solo usa la composición original paper-slide; los otros 12 temas se renderizan solo mediante el worker en la nube. |
| El usuario solo quiere estrategia o texto | Produce el JSON del mazo mediante voxflow slice (o a mano siguiendo el esquema); indícale qué renderizador usar. | El esquema del mazo es independiente del renderizador; el mismo JSON se renderiza en cualquier tema. |
| El usuario pide abrir el código o empaquetar | Mantén las APIs privadas, tokens, audio generado y salidas MP4 fuera del paquete de la habilidad. |
Flujo de trabajo
- Elige un tema que coincida con la plataforma. Lee
references/themes.mduna vez — enumera los 13 temas, su firma visual y qué plataforma/tipo de contenido encaja cada uno. No usespaper-slidepor defecto para todo. - Elige un escenario. Un caso de uso concreto supera al relleno genérico: resumen de artículo, actualización de producto, cierre de reunión, consejo profesional, lección de fundador, comentario de mercado, revisión de incidente.
- Escribe un mazo ajustado. 4-6 tarjetas: un título + 3-5 cuerpo. Una idea por tarjeta de cuerpo. Subtítulos lo suficientemente cortos para caber en una línea.
- Elige imágenes a partir de palabras clave controladas. No busques en la web ni generes imágenes aleatorias al renderizar — elige un
figureKeywordcanónico; el renderizador lo asigna a una escena/pose/icono local dibujado a mano. (Verreferences/deck-schema.md.) - Renderiza mediante la ruta elegida. Aplicación web para temas exactos; CLI para aproximación; script local para contribuidores.
- Verifica el artefacto. Comprueba duración, dimensiones (1080×1920) y al menos un fotograma de título + uno de cuerpo antes de informar como completado.
- Informa las rutas. Rutas absolutas a MP4 / pósters / accesorios.
Lee references/deck-schema.md al escribir JSON del mazo, elegir palabras clave o depurar el diseño. Lee references/example-decks.md para mazos de ejemplo. Lee references/themes.md al elegir un tema o explicar sus ventajas y desventajas.
Ruta de Aplicación Web (predeterminada — funciona para todos)
https://voxflow.studio/apps/slice
Flujo de trabajo:
- Pega el artículo / nota en el compositor principal.
- La IA lo divide en 5–8 tarjetas.
- Elige un tema (13 opciones — ver
references/themes.md) + una voz (6 voces de producción: 男主播 / 霸总男声 / 闲聊男声 / 小美 / 小心 / 小徐). - Renderiza → MP4 1080×1920 + portada multiformato (9:16 / 3:4 / 1:1).
Informa al usuario que esta es la única ruta que produce el renderizado exacto de Slice para los 13 temas — son composiciones privadas de Remotion, no incluidas con la CLI.
Ruta CLI del Mazo (voxflow slice)
Para usuarios que quieran el JSON estructurado del mazo sin el renderizado — rápido (una ida y vuelta, cuota de 200), encadenable y consciente del tema. Usa el mismo backend /api/slice/deck que la aplicación web, por lo que la forma del mazo es canónica.
voxflow slice article.md # tema predeterminado: paper-slide
voxflow slice article.md --theme editorial-mag -o deck.json
voxflow slice --text "artículo largo ..." --theme bold-poster --json | jq .deck
Cuándo usar esta ruta:
- El usuario quiere inspeccionar / iterar sobre la calidad del segmentado de la IA antes de comprometerse con un renderizado.
- El usuario quiere pegar el mazo en el flujo de "importar mazo" de la aplicación web para renderizar con un tema diferente.
- El usuario es un contribuidor con la composición privada de Remotion
video-present/src/compositions/PaperSlidey quiere renderizar el mazo localmente —voxflow slice ... --json -o props.jsony luego alimentarprops.jsonal script experimental. - El usuario está creando automatización que necesita una salida estructurada (por ejemplo, publicar tarjetas de conocimiento como texto en Twitter / 即刻 a partir de
deck.cards[*].caption + narration).
Límites:
- Sin MP4. El renderizador en la nube que produce el video 1080×1920 reside en la aplicación web.
- Sin TTS. Combina
voxflow sliceconvoxflow narratesi quieres audio por tarjeta sin renderizar.
Ruta Stage — voxflow slice stage (previsualización de iteración)
Para la fase de iteración con intervención humana antes de comprometerse con un renderizado en la nube. Stage inicia un servidor HTTP localhost con recarga en caliente — cada guardado del JSON del mazo actualiza la página al instante. Sin costo de cuota, sin ida y vuelta de red.
voxflow slice deck.md -o deck.json # 1. producir un mazo (cuota de 200)
voxflow slice stage deck.json # 2. abrir previsualización localhost (gratis)
# 3. editar deck.json a mano o re-ejecutar slice
# 4. la previsualización se recarga en caliente al guardar
¿Quieres un inicio sin cuota ni inicio de sesión? Usa la muestra incluida directamente:
voxflow slice stage examples/11-slice-stage/sample-deck.json
Banderas:
voxflow slice stage <deck.json> [--port <n>] [--theme <id>] [--no-open]
--port Puerto por defecto 5180. Salta automáticamente +1 hasta 5189 en caso de conflicto.
--theme Bloquea la previsualización a un tema (debe ser uno de los 13 IDs válidos).
--no-open No abre el navegador automáticamente (entornos CI / SSH / agente).
Cuándo usar Stage:
- El usuario está en un bucle de edición de varias rondas — ajustes de texto, reordenación de tarjetas, prueba A/B de temas — y reabrir el MP4 en cada iteración es una fricción costosa.
- El usuario quiere publicar tarjetas individuales como texto plano en plataformas centradas en texto (X / Twitter / 即刻 / Threads / Mastodon / comentarios de blog). Stage ofrece a cada tarjeta un botón "Copiar texto" (título + subtítulo + narración), y la barra de herramientas del mazo ofrece "Copiar JSON / Descargar .json / Copiar como Markdown" para pegar en Notion / blog / 飞书. Las exportaciones de imagen / carrusel para 小红书 / 微博 / 公众号 头图 llegarán en una Fase futura una vez que estén disponibles las imágenes fijas por tarjeta.
- Bucles impulsados por IA donde el agente regenera
deck.jsony el humano revisa mediante el navegador — la página se actualiza sin que el agente tenga que reimprimir rutas.
Utilidades de exportación de texto (Fase 1.4 solo texto)
La interfaz de Stage incluye controles de exportación centrados en texto para que las tarjetas puedan reutilizarse en plataformas solo texto sin pagar por un renderizado completo:
- "Copiar texto" por tarjeta — haz clic en el pequeño botón de cualquier tarjeta → el portapapeles obtiene
{title}\n\n{caption (si es distinto)}\n\n{narration}(recortado). Pégalo en un tweet, publicación de 即刻, fragmento de blog. - Barra de herramientas del mazo — "Copiar JSON" — copia el JSON completo del mazo al portapapeles (para encadenarlo con herramientas personalizadas / compartirlo con otro agente / guardar una instantánea).
- Barra de herramientas del mazo — "Descargar .json" — guarda el mazo como
<seriesTitle>.json(nombre de archivo sanitizado automáticamente, limitado a 60 caracteres +.json). - Barra de herramientas del mazo — "Copiar como Markdown" — formatea todo el mazo como Markdown (H1 = seriesTitle, H2 por tarjeta, narración como cita en bloque). Pégalo en Notion / editor de blog / documentos de 飞书.
Los formateadores residen en lib/stage-core/deck-format.js (formatCardAsText, formatDeckAsMarkdown, suggestDeckFilename) y tienen pruebas unitarias en tests/deck-format.test.js. Su fuente se convierte en cadena en el HTML servido mediante Function.prototype.toString() para que el navegador ejecute el mismo código que cubren las pruebas — fuente única de verdad, sin doble mantenimiento.
Las exportaciones de carrusel de imagen / MP4 para 小红书 / 微博 / 公众号 头图 NO están en la Fase 1.4 solo texto. Llegarán en una Fase futura una vez que estén disponibles las miniaturas renderStill por tarjeta (requieren un endpoint de Remotion en el backend que aún no existe).
Lo que Stage NO es:
- No es una previsualización completa de Remotion todavía. MVP muestra la estructura del mazo (tarjetas + JSON); las miniaturas de tema renderizadas en la nube llegan en la Fase 1.3 mediante
renderStill. - No es un sustituto de los píxeles del renderizado completo — los temas son composiciones del lado del servidor. Stage previsualiza el texto del mazo, no los fotogramas finales del video.
Bucle de edición con IA (el flujo de iteración real)
Stage no intenta ser Cursor — es un cierre de retroalimentación visual que pasa mensajes a la herramienta de IA que el usuario ya tiene abierta (Claude Code, Cursor, ChatGPT, cualquier otra). Dos mecanismos cubren todo el bucle de edición:
| Intención | UX | Salida |
|---|---|---|
| Reescribir tarjeta completa ("regenera esta tarjeta, mantén el resto") | Pasa el cursor sobre la tarjeta → botón en esquina Editar con IA | Modal con un mensaje: ruta del archivo + fragmento JSON de cards[N] + espacio para <tu instrucción> |
| Reescribir frase local ("solo esta frase no encaja") | Selecciona texto dentro de una tarjeta → aparece un botón flotante Editar selección con IA | Modal con un mensaje: ruta del archivo + la subcadena seleccionada exacta entrecomillada + JSON completo de la tarjeta para contexto |
El usuario escribe la instrucción (ej. "acorta a 12 caracteres, más visceral"), hace clic en Copiar mensaje, lo pega en su IA. La IA usa sus herramientas nativas de edición de archivos (Editar de Claude Code, Aplicar de Cursor, etc.) para reescribir el archivo. El observador SSE de Stage recarga en caliente la previsualización en ~150 ms. Bucle hasta que esté satisfecho.
Por qué este diseño y no un chat incrustado / servidor MCP: ver #3330 para la justificación completa del diseño (copiar-pegar universal vs. MCP solo para Claude Code, equilibrio entre costo y cobertura, ruta de actualización futura de MCP condicionada a la telemetría de uso).
Ruta de Aproximación CLI (alternativa de MP4 completo)
Si el usuario debe tener un MP4 solo desde la CLI (sin aplicación web, sin acceso de contribuidor a Remotion), recurre a voxflow present o voxflow picstory — cubren la misma forma de artículo a video pero con sus propios esquemas visuales, no los 13 temas exactos de Slice.
voxflow present --text "pegar artículo o resumen" --style editorial --output slice-approx.mp4
voxflow picstory --topic "tema" --style sketchnote --scenes 4 --output slice-sketch.mp4
Esquema CLI más cercano por tema de Slice:
| Tema de Slice | Ruta CLI más cercana |
|---|---|
| paper-slide | voxflow picstory --style sketchnote |
| editorial-mag | voxflow present --style editorial |
| bold-poster | voxflow present --style brutalist (peso más cercano) |
| notion-card | voxflow present --style minimal |
| brutalist | voxflow present --style brutalist |
| glass-dark | voxflow present --style noir o --style aurora |
| editorial-stencil | voxflow present --style editorial (sin equivalente de letterbox / bitono) |
| broadsheet | voxflow present --style editorial (sin paleta salmón de FT) |
| blueprint | voxflow picstory --style chalkboard (sensación de cuadrícula/diagrama más cercana) |
| daisy-pastel | voxflow picstory --style sketchnote (sin equivalente de ilustración pastel) |
| showa-catalog | voxflow picstory --style vintage_newspaper (sin equivalente city-pop) |
| photo-feature | voxflow picstory --style photo (photo-feature necesita imageUrl por tarjeta — ver deck-schema) |
| atmospheric | voxflow present --style noir |
Informa siempre al usuario: "Este es un borrador similar a Slice. El renderizador exacto de 13 temas está en voxflow.studio/apps/slice."
Ruta Local de Remotion (solo contribuidores)
Omite si video-present/src/compositions/PaperSlide no está en tu checkout — es código privado; los usuarios de npm / habilidades no lo tienen.
Desde la raíz del checkout del contribuidor:
cd video-present
node scripts/paper-slide-experiments.mjs
Renderiza un subconjunto:
cd video-present
PAPER_SLIDE_EXPERIMENT_FILTER=research-reading node scripts/paper-slide-experiments.mjs
Verifica las salidas:
ffprobe -v error -select_streams v:0 \
-show_entries stream=width,height,duration \
-of default=nw=1 out/paper-slide-experiments/research-reading.mp4
ffmpeg -y -hide_banner -loglevel error -ss 9 \
-i out/paper-slide-experiments/research-reading.mp4 \
-frames:v 1 -q:v 2 out/paper-slide-experiments/research-reading-body.jpg
Esperado: 1080×1920, 20-35 segundos, sin destellos negros, sin desbordamiento de subtítulos, figura no recortada.
Reglas de escritura del mazo (aplican a los 13 temas)
- Tarjeta de título: gancho, contraste o promesa. Evita etiquetas abstractas como "Introducción".
- Tarjeta de cuerpo: una sola idea. Subtítulo generalmente menor de 16 caracteres chinos o 7 palabras en inglés.
- Narración: conversacional, 25-60 caracteres chinos por tarjeta de cuerpo.
- Palabras clave de escena (prefiere cuando encajen):
problem-framing,evidence-board,customer-pain,timeline-review,owner-deadline,risk-guardrail,cashflow-ledger,team-alignment,before-after,learning-loop,decision-fork,growth-system. - Palabras clave de figura / icono (acentos visuales):
thinking,running,climbing,stuck,celebrating,briefcase,users,target,clock…