Communitygithub.com

VoxFlowStudio/skills — Slice

Convierte artículos largos, notas o informes en videos verticales tipo tarjeta (1080×1920) con narración y 13 temas visuales. Ideal para plataformas como 抖音, 小红书, X, LinkedIn y más.

¿Qué es skills — Slice?

La habilidad **Slice** de VoxFlowStudio permite transformar cualquier contenido escrito extenso (artículos, informes, notas) en un video vertical de tarjeta (1080×1920) con narración sincronizada. Ofrece 13 temas visuales distintos, desde estilos minimalistas como `paper-slide` y `notion-card` hasta opciones más llamativas como `bold-poster` o `brutalist`. El flujo de trabajo incluye la generación de un `deck` (mazo de tarjetas) en JSON que puede inspeccionarse y editarse antes de renderizar el video final. Esto ahorra tiempo y recursos, permitiendo iterar rápidamente sobre el contenido y la estructura. Compatible con plataformas como 抖音, X (Twitter), LinkedIn, 小红书 y más, y se integra con herramientas CLI como `voxflow slice` para automatización y `voxflow slice stage` para previsualización local sin costo. La renderización final exacta de los 13 temas solo está disponible a través de la aplicación web `voxflow.studio/apps/slice`, mientras que la CLI ofrece una aproximación para quienes necesitan un MP4 desde la línea de comandos.

Compatible con✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/VoxFlowStudio/skills/tree/HEAD/skills/slice

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

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-slide solo sobrevive como uno de los 13 identificadores de tema.

Elige la Ruta

ContextoRutaNotas
El usuario quiere el JSON del mazo (sin renderizar) — rápido, adaptable, encadenableCLI: 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 renderizadoCLI: 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/sliceEl ú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 suficientevoxflow present o voxflow picstory --style sketchnoteSolo 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 RemotionVer 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 textoProduce 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 empaquetarMantén las APIs privadas, tokens, audio generado y salidas MP4 fuera del paquete de la habilidad.

Flujo de trabajo

  1. Elige un tema que coincida con la plataforma. Lee references/themes.md una vez — enumera los 13 temas, su firma visual y qué plataforma/tipo de contenido encaja cada uno. No uses paper-slide por defecto para todo.
  2. 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.
  3. 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.
  4. Elige imágenes a partir de palabras clave controladas. No busques en la web ni generes imágenes aleatorias al renderizar — elige un figureKeyword canónico; el renderizador lo asigna a una escena/pose/icono local dibujado a mano. (Ver references/deck-schema.md.)
  5. Renderiza mediante la ruta elegida. Aplicación web para temas exactos; CLI para aproximación; script local para contribuidores.
  6. 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.
  7. 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:

  1. Pega el artículo / nota en el compositor principal.
  2. La IA lo divide en 5–8 tarjetas.
  3. Elige un tema (13 opciones — ver references/themes.md) + una voz (6 voces de producción: 男主播 / 霸总男声 / 闲聊男声 / 小美 / 小心 / 小徐).
  4. 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/PaperSlide y quiere renderizar el mazo localmente — voxflow slice ... --json -o props.json y luego alimentar props.json al 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 slice con voxflow narrate si 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.json y 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ónUXSalida
Reescribir tarjeta completa ("regenera esta tarjeta, mantén el resto")Pasa el cursor sobre la tarjeta → botón en esquina Editar con IAModal 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 IAModal 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 SliceRuta CLI más cercana
paper-slidevoxflow picstory --style sketchnote
editorial-magvoxflow present --style editorial
bold-postervoxflow present --style brutalist (peso más cercano)
notion-cardvoxflow present --style minimal
brutalistvoxflow present --style brutalist
glass-darkvoxflow present --style noir o --style aurora
editorial-stencilvoxflow present --style editorial (sin equivalente de letterbox / bitono)
broadsheetvoxflow present --style editorial (sin paleta salmón de FT)
blueprintvoxflow picstory --style chalkboard (sensación de cuadrícula/diagrama más cercana)
daisy-pastelvoxflow picstory --style sketchnote (sin equivalente de ilustración pastel)
showa-catalogvoxflow picstory --style vintage_newspaper (sin equivalente city-pop)
photo-featurevoxflow picstory --style photo (photo-feature necesita imageUrl por tarjeta — ver deck-schema)
atmosphericvoxflow 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…

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

VoxFlowStudio/skills

Use when the user wants to turn text content into a set of polished, shareable visual CARD IMAGES or narrated card VIDEOS — knowledge cards, quote cards, 小红书图文, carousel cards, poster cards — rendered as HTML/CSS and exported via Playwright at ratios like 1:1 / 3:4 / 9:16; optionally produces a narrated MP4 video from those cards via `voxflow card render` (per-card TTS + FFmpeg static-image clips with optional subtitle bar / intro+outro cards / BGM mix). Triggers: card / 卡片 / 知识卡 / 文字卡片 / 金句卡 / 图文卡片 / 卡片生成 / make cards / card video / 卡片视频. For article → Slice-themed card VIDEO use voxflow:slice; for short videos / AI clips use voxflow:video; for podcasts use voxflow:podcast.

VoxFlowStudio/skills

Use when the user wants to read text aloud (TTS), search VoxFlow voices, sample AI stories, or set up VoxFlow install/auth/quota — the entry-point voice toolkit. For podcasts use voxflow:podcast; for short videos / AI clips use voxflow:video; for article-to-card reels (Slice) use voxflow:slice; for shareable card images or narrated card videos use voxflow:card; for transcription / dubbing / subtitle translation use voxflow:transcribe.

VoxFlowStudio/skills

Use when the user wants AI-generated short-form video — knowledge cards (picstory / 小红书 / TikTok / Reels), narrated explainers, presentations, AI clips, or slides — covering picstory, present, slides, explain, and image generation. For article-to-card reels (Slice — 13 themes including paper-slide), use voxflow:slice. For shareable HTML/CSS card images or narrated card MP4 videos (`voxflow card render`) use voxflow:card.

Skills relacionados