Habilidad de Video de VoxFlow

Genera videos cortos con IA: el LLM escribe el guion, la IA dibuja tarjetas o escenas, TTS narra, FFmpeg / Remotion renderizan el MP4 final.

Para reels de artículo a tarjeta (Slice — 13 temas: paper-slide / editorial-mag / bold-poster / notion-card / brutalist / glass-dark / editorial-stencil / broadsheet / blueprint / daisy-pastel / showa-catalog / photo-feature / atmospheric), cambia a voxflow:slice. Para conjuntos de imágenes de tarjetas HTML/CSS compartibles o exportación de tarjeta narrada a MP4, cambia a voxflow:card.

Cinco puntos de entrada — elige según lo que el usuario quiera:

Comando	Salida	Úsalo cuando
`picstory`	MP4 vertical/horizontal con tarjetas dibujadas a mano o escenas cinematográficas	"知识卡片视频", 小红书 / Twitter edu, tutoriales sketchnote
`present`	Video de tarjeta narrada 1080×1920, 5 esquemas visuales	Pitch decks, reels explicativos, cortos de marca
`explain`	Explicador MP4 con escenas de título / viñetas / resumen	Tutoriales "¿Qué es X?", introducciones de curso
`slides`	Deck HTML autónomo con audio TTS incrustado	Lanzamientos de productos, charlas, compartir como enlace
`image`	PNG individual	Ilustraciones únicas / miniaturas (Hunyuan TextToImage)

Requisitos previos

npm install -g voxflow y voxflow login
ffmpeg instalado (brew install ffmpeg / sudo apt install ffmpeg) — necesario para renderizar MP4
Para present / explain (basado en Remotion): la instalación local del plugin incluye remotion-cards/. Si present dice "Remotion no está listo", ejecuta npm install dentro del directorio incluido remotion-cards/. Para explain, puedes omitir Remotion local con --cloud.

🎴 picstory — video de tarjeta de conocimiento

El LLM escribe un guion estructurado, la IA dibuja una tarjeta por escena, TTS narra, FFmpeg ensambla. Mejor para 小红书 / Twitter edu / TikTok.

Inicio rápido

# Predeterminado: chino, estilo sketchnote, retrato, 5 escenas
voxflow picstory --topic "Guía de inicio de AI Agent"

# Prueba rápida de 2 escenas (sin renderizar video completo)
voxflow picstory --topic "Introducción a la IA" --scenes 2 --image-only

# Video en inglés horizontal
voxflow picstory --topic "How React Hooks Work" --language en --ratio landscape --style photo

Salida: picstory-<timestamp>.mp4 + .json (guion).

Estilos de tipo tarjeta (encabezado estructurado + puntos clave)

`--style`	Aspecto	Mejor para
`sketchnote` (predeterminado)	Diario de viñetas dibujado a mano y colorido	Compartir conocimiento, tutoriales
`neon_noir`	Oscuro ciberpunk con brillo neón	Tecnología, startups
`minimal_3d`	Arcilla 3D suave sobre degradados pastel	Estilo de vida 小红书
`chalkboard`	Tiza blanca sobre verde oscuro	Ciencia, académico

Estilos de tipo escena (ilustración de forma libre)

`--style`	Aspecto	Mejor para
`photo`	Cinematográfico / fotorrealista	Narración de historias, viajes
`manga_panel`	Trazo de tinta de manga japonés	Drama, guías paso a paso
`vintage_newspaper`	Periódico de los años 40	Historia, historias factuales

Relaciones de aspecto

`--ratio`	Píxeles	Plataforma
`portrait` (predeterminado)	1080×1920	小红书, TikTok, Reels, 抖音
`landscape`	1920×1080	YouTube, B站
`square`	1080×1080	Instagram, Twitter

Modelos de guion predefinidos (`--script-model`)

Predefinido	Proveedor	Fortaleza
omitido	configuración del servidor	Equilibrado predeterminado (gpt-4o-mini)
`gemini-flash`	OpenRouter	Multilingüe, buen chino
`deepseek`	DeepSeek	Más barato, excelente chino
`hunyuan`	腾讯混元	Chino nativo
`moonshot`	Moonshot	Chino de contexto largo

El servidor aplica una lista blanca: solo funcionan los nombres de predefinidos anteriores; los ID de modelo arbitrarios son rechazados.

Calidad de imagen (`--quality`)

La generación de imágenes es el costo significativo (~$0.005-0.08 por imagen). El guion del LLM (~2K tokens) es insignificante.

`--quality`	Proveedor	Fortaleza	Costo de 5 imágenes
`fast` (predeterminado)	OpenRouter Gemini Flash	Más barato, equilibrado	~$0.025
`hd`	OpenRouter Gemini Pro	Mayor detalle	medio
`ultra`	OpenRouter gpt-5.4-image-2	Mejor en general, ~16× costo	~$0.40
`fast-aiberm`	Aiberm Gemini Flash	Nivel Aiberm barato	bajo
`hd-aiberm`	Aiberm Gemini Pro	Representación de texto chino más fuerte — mejor para tarjetas 小红书 con encabezados en chino	medio

Usa fast para iteración; hd-aiberm cuando las tarjetas deban contener caracteres chinos precisos; ultra para exportaciones principales.

Opciones completas

Banderín	Predeterminado	Descripción
`--topic <texto>`	requerido (o `--text`)	Tema de la historia
`--text <contenido>`	—	Pega el artículo completo en lugar de un tema
`--style <nombre>`	`sketchnote`	Ver estilos arriba
`--ratio <nombre>`	`portrait`	`portrait` \| `landscape` \| `square`
`--language <código>`	`zh`	`zh` \| `en` \| `ja` \| `ko` \| ...
`--scenes <n>`	`5`	2–10. Usa `2` para pruebas rápidas.
`--script-model <predefinido>`	predeterminado del servidor	Ver predefinidos arriba
`--quality <nivel>`	`fast`	Ver tabla arriba
`--voice <id>`	predeterminado	Voz TTS de `voxflow voices`
`--speed <n>`	`1.0`	Velocidad TTS 0.5–2.0
`--bgm <archivo>`	—	Música de fondo (mp3/wav) mezclada debajo de la narración
`--bgm-volume <n>`	`0.1`	Volumen BGM 0–1
`--fade <n>`	`0.4`	Segundos de fundido de entrada/salida por escena (`0` para deshabilitar)
`--image-only`	false	Guarda imágenes + audio sin renderizar el video final
`--output-dir <dir>`	—	Directorio para todas las salidas
`--output <ruta>`	auto	Ruta final del MP4

Costo de cuota

Operación	Cuota
Guion LLM	100
TTS / escena	50
Imagen / escena	500
Prueba de 2 escenas	~1,200
Completo de 5 escenas	~2,850

Nivel gratuito (10K/mes) ≈ 3 videos picstory completos.

Pipeline

Tema / Texto
  ├─[1] Guion LLM → { title, scenes: [{ heading, keyPoints, narration }] }
  ├─[2] TTS por escena → audio PCM
  ├─[3] Imagen por escena (paralelo) → JPEG vía /api/image/generate
  └─[4] FFmpeg: imagen + WAV → zoompan MP4 Ken Burns → concat → +BGM → final.mp4

Solución de problemas

Problema	Solución
`ffmpeg no encontrado`	`brew install ffmpeg` (mac) / `sudo apt install ffmpeg`
`Falló la generación de imagen`	Reintentar; si se atasca en `hd`, baja a `--quality fast`
Renderizado demasiado lento	Ken Burns consume mucha CPU. Usa `--scenes 2 --image-only` para validar el contenido primero.
`model_not_allowed`	Usa un nombre de predefinido `--script-model`, no un ID de modelo crudo
Texto chino distorsionado en tarjetas	Cambia a `--quality hd-aiberm`

📑 present — video de tarjeta narrada (Remotion local)

Texto o URL → Tarjetas LLM → TTS → Renderizado Remotion. 1080×1920, 5 esquemas visuales.

voxflow present --text "Claude Code es una herramienta de programación con IA" --style aurora
voxflow present --url https://example.com/article --style noir
voxflow present --text "Panorama de los chips de IA en 2025" --web-search --style neon
voxflow present --cards pre-generated.json --no-audio

Banderín	Predeterminado	Notas
`--text` / `--url` / `--cards`	uno requerido	fuente de entrada
`--style`	`aurora`	`noir` \| `neon` \| `editorial` \| `aurora` \| `brutalist`
`--voice <id>`	`v-female-R2s4N9qJ`	Voz TTS
`--speed <n>`	`1.0`	0.5–2.0
`--no-audio`	false	Solo video sin sonido
`--web-search`	false	Aumenta el LLM con hechos web actualizados
`--output <ruta>`	`./present-<ts>.mp4`	`.mp4` o `.wav`

Si present informa "Remotion no está listo", ejecuta npm install dentro del directorio incluido remotion-cards/ para configurar el renderizador local.

🧠 explain — video explicativo con IA

Flujo de escenas de título / viñetas / resumen. Mejor para tutoriales "¿Qué es X?".

voxflow explain --topic "What is React?"
voxflow explain --topic demo --output demo.mp4         # demo incorporado (sin llamada API)
voxflow explain --topic "Introducción a blockchain" --style chalkboard --voice v-male-Bk7vD3xP
voxflow explain --topic "Machine Learning" --audio-only
voxflow explain --topic "Introducción a AI Agent" --cloud         # renderizar en el servidor

Banderín	Predeterminado	Notas
`--topic <texto>`	requerido	Usa `demo` para el guion de demostración incorporado
`--style`	`modern`	`modern` \| `playful` \| `corporate` \| `chalkboard`
`--language`	`en`	`en` \| `zh` \| `ja` \| `ko` \| ...
`--voice <id>`	`v-female-R2s4N9qJ`
`--scenes <n>`	`5`	3–12
`--audio-only`	false	Omitir renderizado, solo salida WAV
`--cloud`	false	Usa Remotion en la nube en lugar de local
`--output <ruta>`	`./explain-<ts>.mp4`

📊 slides — presentación HTML con TTS

Genera un deck HTML autónomo con audio base64 incrustado por diapositiva. Ábrelo en cualquier navegador, no necesita servidor.

voxflow slides "IA en la Salud"
voxflow slides "Informe de Ingresos Q4" --template report --theme paper
voxflow slides "Tutorial de React" --template tutorial --model balanced
voxflow slides "Pitch de Startup" --template pitch --theme ocean --no-audio

Banderín	Predeterminado	Notas
`--text <texto>` (o posicional)	requerido	Tema
`--template`	`free`	`product` \| `report` \| `tutorial` \| `pitch` \| `free`
`--theme`	`midnight`	`midnight` \| `paper` \| `ember` \| `forest` \| `ocean`
`--model`	`swift`	`swift` \| `balanced` \| `pro` \| `creative`
`--voice <id>`	`v-female-R2s4N9qJ`
`--no-audio`	false	Omitir TTS, solo diapositivas
`--output <ruta>`	`./slides-<ts>.html`

10 diseños: hero, title-bullets, two-column, three-cards, image-left, image-right, quote, timeline, stats, section. Las plantillas eligen automáticamente una secuencia de diseños.

🖼 image — ilustración única Hunyuan

Texto a imagen síncrono (PNG). Útil para miniaturas o arte independiente.

voxflow image "un gato durmiendo en una ventana soleada" --resolution 1024:1024 -o cat.png

Resoluciones: 768:768, 768:1024, 1024:768, 1024:1024, 720:1280, 1280:720, 768:1280, 1280:768, 1080:1920, 1920:1080.

Máximo 1000 caracteres para la instrucción. Salida: PNG local + URL COS.

Lista de verificación para elegir la herramienta correcta

"tarjetas de conocimiento estilo 小红书"           → picstory
"video corto de IA + caption"          → picstory --style sketchnote
"explicativo / ¿Qué es X?"        → explain
"corto de marca con mi texto"    → present
"ya tengo tarjetas/guion"     → present --cards
"deck HTML compartible con audio"  → slides
"ilustración única"           → image

Reglas

Busca voces con voxflow voices antes de pasar --voice. Nunca adivines IDs.
Verifica la cuota antes de las llamadas de video (voxflow status): picstory ≈ 3K, present/explain ≈ 500–2K.
Prueba barato primero: picstory --scenes 2 --image-only valida el guion antes de pagar por el renderizado completo.
Después de que termine el renderizado, reproduce automáticamente: open output.mp4 (macOS).

VoxFlowStudio/skills

¿Qué es skills?

Preguntar en tu IA favorita

Documentación