Espacio de trabajo de IA de código abierto para creadores que reúne traducción y descarga de videos, generación de imágenes y videos, voces en off y escritura, basado en Codex CLI.
13,8 mil1,5 milTypeScriptApache-2.0Actualizado ayer
pengchujin/livecanvas
Una skill de asistente de programación con IA que convierte una frase en una portada animada al estilo Live Photo, con gráficos, emoji y cronologías, basada en Remotion.
- Estrellas
- 507
- Forks
- 29
- Issues abiertos
- 1
- Último commit
- hace 11 días
¿Qué es?
LiveCanvas es una skill para asistentes de programación con IA, como Codex y Claude Code. A partir de una frase que describa un tema, busca y verifica datos, diseña un storyboard, renderiza una animación con Remotion y genera una vista previa junto con recursos de Apple Live Photo.
El resultado puede incluir imágenes, emoji, escenas, cronologías y gráficos, y se entrega como una portada diseñada, un MP4, las fuentes de datos y un proyecto editable. En Linux, Windows y macOS puede generar pares de recursos de Apple Live Photo con Python 3.10+, Pillow y FFmpeg; macOS también cuenta con una opción nativa en Swift. Las herramientas actuales generan video H.264 sin audio e imágenes fijas JPEG.
La instalación se realiza con Skills CLI, con la opción de instalarlo solo para Codex. Para ejecutar las animaciones se necesitan Node.js, Python 3, FFmpeg y fuentes adecuadas para el contenido.
Funciones clave
- 01Convierte una frase en una portada animada con un diseño cuidado.
- 02Admite imágenes, emoji, escenas, cronologías y gráficos.
- 03Genera pares de Apple Live Photo en Linux, Windows y macOS.
- 04Exporta vistas previas en MP4 y proyectos editables de Remotion.
- 05Se instala mediante Skills CLI para Codex y otros asistentes.
Casos de uso
- Convertir una tendencia de datos, como las temperaturas anuales, en una portada animada para compartir.
- Crear animaciones explicativas breves para comparar productos o mostrar cifras de mercado.
- Crear versiones Live Photo de gráficos para compartir en iPhone.
Inicio rápido
- 1
Instala la skill en todos tus asistentes de IA con Skills CLI
npx skills add pengchujin/livecanvas --skill livecanvas -g - 2
Instala la skill solo para Codex
npx skills add pengchujin/livecanvas --skill livecanvas -g -a codex - 3
Abre un chat nuevo e introduce una solicitud como el ejemplo de las temperaturas de Pekín y Shanghái del README
Antes de usarlo
- Se necesitan Node.js/npm, Python 3, FFmpeg y fuentes adecuadas para el renderizado.
- El asistente debe poder buscar en la web y ejecutar código.
- La salida nativa de Live Photo solo es totalmente compatible con macOS; en otras plataformas se usa una alternativa portátil con limitaciones.
Temas
Preguntas frecuentes
- ¿Qué es livecanvas?
- Una skill de asistente de programación con IA que convierte una frase en una portada animada al estilo Live Photo, con gráficos, emoji y cronologías, basada en Remotion. LiveCanvas es una skill para asistentes de programación con IA, como Codex y Claude Code. A partir de una frase que describa un tema, busca y verifica datos, diseña un storyboard, renderiza una animación con Remotion y genera una vista previa junto con recursos de Apple Live Photo.
- ¿livecanvas es gratuito? ¿Qué licencia tiene?
- livecanvas es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿livecanvas sigue mantenido?
- Mantenimiento activo. El último commit de livecanvas fue el 10 oct 2026.
- ¿Para qué puedo usar livecanvas?
- Convertir una tendencia de datos, como las temperaturas anuales, en una portada animada para compartir. Crear animaciones explicativas breves para comparar productos o mostrar cifras de mercado. Crear versiones Live Photo de gráficos para compartir en iPhone.
- ¿Cómo se instala livecanvas?
- Instala la skill en todos tus asistentes de IA con Skills CLI: npx skills add pengchujin/livecanvas --skill livecanvas -g Instala la skill solo para Codex: npx skills add pengchujin/livecanvas --skill livecanvas -g -a codex Abre un chat nuevo e introduce una solicitud como el ejemplo de las temperaturas de Pekín y Shanghái del README
- ¿Dónde consigo livecanvas?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pengchujin/livecanvas
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Una skill para agentes que convierte recetas de estilos artísticos y gramáticas de videos explicativos en animaciones generadas con código, para dar movimiento a pinturas y diagramas.
4,7 mil504JavaScriptMITActualizado hace 5 días
Un kit de herramientas de diseño de movimiento que permite a agentes de programación como Claude Code crear videos con Remotion, escenas guiadas por una línea de tiempo, revisión visual y un motor de sonido en Python.
49663JavaScriptMITActualizado hace 12 días
Lista seleccionada de recursos de motion design y cinco skills instalables para agentes, compatibles con GSAP, Motion, Remotion, Lottie y Rive.
6920CC0-1.0Actualizado hace 7 días
Una skill de agente para Claude Code / Codex que convierte la descripción de un producto en un video de lanzamiento de calidad comercial, creado con código, música compuesta y edición punto por punto.
78077JavaScriptMITActualizado anteayer
Convierte un guion escrito en un video explicativo narrado o una demo de producto, con voz local, sincronización por palabra y renderizado en canvas, mediante un agente de programación.
61439JavaScriptMITActualizado ayer