Communitygithub.com

AI Coding Video: estilo de video con código

La biblioteca y el método para crear videos fotograma a fotograma con código: cientos de estilos visuales realizables solo con código (Categoría C: Canvas 2D, WebGL, SVG, Three.js, p5.js, Manim, Remotion, etc.) y técnicas de edición de video con material real (Categoría T: grabaciones, capturas de pantalla, fotos, datos) y material generado por IA (Categoría G: imágenes generadas, videos generados, síntesis de voz), clasificados por tipo de contenido (divulgación, voz en off, ventas, videos promocionales, cortometrajes, videoclips, noticias, documentales, tutoriales, viajes, deportes, cuentos infantiles). Incluye una frase descriptiva del estilo que se puede copiar, un índice para seleccionar estilos, guías para escribir prompts, fuentes y procesamiento de material, música y narración, y un proceso de tres niveles desde 'seleccionar estilo' hasta 'crear un pack de estilos' pasando por 'crear una muestra'.

¿Qué es AI Coding Video: estilo de video con código?

Esta habilidad para asistentes de IA (como Claude Code, Cursor, Codex) proporciona una biblioteca completa y una metodología para crear videos mediante código, ideal para desarrolladores y creadores de contenido. La habilidad clasifica cientos de estilos visuales en tres categorías principales: Código puro (Canvas, WebGL, SVG, Three.js, p5.js, Manim, Remotion), Material real (grabaciones, fotos, datos) y Material generado por IA (imágenes, video, voz sintetizada). Ofrece un índice organizado por tipo de contenido y un proceso de tres niveles: Nivel 0 (selección de estilo), Nivel 1 (creación de muestra de 3-5 segundos) y Nivel 2 (empaquetado del estilo como módulo reutilizable). Incluye guías detalladas para escribir prompts, manejar material, seleccionar música y narración, y generar código de renderizado. La habilidad está diseñada para usarse en plataformas que ejecutan código generado por IA, y su documentación incluye ejemplos prácticos, plantillas de código y pautas para evitar errores comunes. Se recomienda seguir el orden de consulta definido para evitar cargar todo el contenido de una vez.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Chans-gh/AI-Coding-Video/tree/HEAD/skills/ai-coding-video

Preguntar en tu IA favorita

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

Documentación

AI Coding Video: biblioteca de estilos para hacer videos con código

Para el contenido y el método de mantenimiento, consulta README.md. Este archivo solo explica cómo el asistente de IA debe consultar y utilizar la biblioteca.

Cuándo usarlo

  • El usuario quiere definir un estilo para un video, o pregunta "¿qué estilos hay?" o "¿qué estilo es adecuado para X?".
  • Necesita una frase descriptiva del estilo para escribir prompts de imagen o directamente código de renderizado (Canvas, WebGL, SVG, Three.js, Manim, Remotion, etc.).
  • El usuario desea ver cómo queda un estilo en su proyecto (crear una muestra) o quiere fijar el estilo seleccionado (crear un pack de estilos).
  • El usuario tiene grabaciones, capturas de pantalla, fotos, datos, o quiere usar material generado por IA (imágenes, video, voz sintetizada) y editarlo con código.
  • Quiere seleccionar música de fondo, efectos de sonido o el tono de la narración en chino para el video.

Uso en tres niveles: desde seleccionar estilo hasta el pack de estilos

NivelQué hacerResultadoCuándo
Nivel 0: DiccionarioSeleccionar 2–3 candidatos de la biblioteca, proporcionar prompt y justificaciónLista de candidatos + prompt de estilo y ruta técnica para cada unoEl usuario aún no ha definido el estilo
Nivel 1: MuestraAplicar los candidatos con los colores de marca, fuentes y contenido real del usuario, ejecutar 3–5 segundos en el stack técnico del proyectoUna muestra en horizontal 16:9 y otra en vertical 9:16 + collage de fotogramas para que el usuario las veaEl proyecto necesita cambiar o añadir un estilo; se hace en una sola conversación
Nivel 2: Pack de estilosEl estilo aprobado por el usuario se aplica a las presentaciones habituales del proyecto (intro, explicación, datos, transiciones, subtítulos, etc.)Módulos de código reutilizables + especificación del estilo (paleta de colores, fuentes, movimiento, sonido, elementos prohibidos) escrita en las normas del proyectoDespués de aprobar el Nivel 1

Cada nivel requiere la aprobación del usuario antes de pasar al siguiente. Antes del Nivel 1, confirma que la ruta técnica funciona en el proyecto del usuario (si tiene navegador, GPU, entorno Python, etc.).

Cómo consultar (en orden, no leer todo de una vez)

  1. No sabe qué estilo usar → Primero identificar las tres categorías: todo el video se genera con código (Categoría C), se usa material real (Categoría T), o se usa material generado por IA (Categoría G). Si el usuario dice qué tipo de video quiere (voz en off, ventas, videoclip, noticias...), consulta primero la tabla "Por tipo de contenido" en index.md, comparando las columnas T y G. Si quiere código puro, busca en las demás tablas del índice (tema, uso comercial, audiencia, emoción, plataforma y formato, material y condiciones) y elige las filas que aparecen repetidas; esas son las preferidas. Ofrece al usuario 2–3 candidatos con su justificación.
  2. Conoce el nombre o número del estilo → Busca el número (ej. C-013, T-007) en el "Directorio de estilos" de index.md, abre el archivo styles/*.md correspondiente (los de Categoría C están en archivos por tecnología, T en styles/footage.md, G en styles/generated.md) y localiza la entrada por el ancla #C-013.
  3. Quiere escribir un prompt completo o código de renderizado → Lee prompting.md: 8 puntos de control, plantilla general, rutas de creación, ejemplos, errores comunes y soluciones.
  4. Quiere filtrar por tecnología (ej. "solo SVG", "que use Three.js") → Lee tags.md y data/styles.json. Cada entrada tiene id / name / theme / content_type / materials / fit / prompt / layer / suggested / verified / render_code / pack / refs (Categoría C tiene theme; T y G tienen content_type y materials).
  5. Quiere añadir sonido → Lee sound.md: primero elige la música y efectos según el tema, luego el tono de narración según el propósito.
  6. Quiere usar material (Categorías T y G) → Lee materials.md: de dónde obtener material, cómo verificar licencias, cómo generarlo, cómo procesarlo y entregarlo al código, y cómo añadir sonido.
  7. Quiere crear una muestra (Nivel 1) o un pack de estilos (Nivel 2) → Lee making.md: comprobaciones previas, cómo escribir la muestra y autoverificación, cinco métodos para crear un pack de estilos y qué escribir en STYLE.md.
  8. Quiere escribir código de renderizado → Primero revisa el código incluido en esta habilidad: samples/API.md (estructura de la muestra y referencia rápida de funciones), samples/<número>/ (scene.js, sound.py de cada estilo verificado), packs/<nombre>/ (packs de estilos). Las rutas en el texto enlazado "Código de muestra" y "Pack de estilos" son las rutas dentro del directorio de esta habilidad; no es necesario ir a GitHub.

Reglas de uso

  • El bloque de código text en cada entrada es la frase descriptiva del estilo. Úsala tal cual y luego complétala con la plantilla de prompting.md (tema, especificaciones, sonido y flujo de trabajo).
  • "Técnica (verificada)" significa que en el repositorio hay código que genera una muestra funcional; "Técnica (recomendada)" es solo una sugerencia, no verificada. Al explicarle al usuario, deja clara esta diferencia.
  • Usar solo el nombre del estilo degenera en un estilo plano genérico: debes incluir 3–5 elementos característicos, elementos prohibidos y obras de referencia.
  • Las obras de referencia solo se usan para aprender la composición, el ritmo y la lógica del color. No copies personajes, logotipos ni música. Los "estilos homenaje" con nombres de obras o autores (ej. C-187 Estilo Ghibli) también: solo se aprende la técnica de dibujo; los personajes, escenas, logotipos y diálogos deben ser completamente originales.
  • El prompt solo define la dirección; la misma frase no produce exactamente la misma imagen cada vez. Para reproducir el mismo efecto, usa el código de muestra de la entrada "Técnica (verificada)" y modifícalo. No confíes solo en el prompt ni diseñes desde cero: primero copia samples/<número>/ al proyecto del usuario y hazlo funcionar, luego cambia el contenido (método en making.md "Nivel 1: Muestra"). Si hay un "Pack de estilos", úsalo directamente.
  • El código de muestra proporciona la tubería y la técnica de dibujo, no el contenido: la tubería de salida (lib.js, synth.py, batch.py) se puede usar tal cual; las técnicas de dibujo (recortes, sombras, texturas, etc.) se pueden tomar prestadas. Los personajes, la composición, la paleta de colores y el texto de la muestra no se pueden copiar directamente al video del usuario; deben reemplazarse por el tema y la marca del usuario.
  • Las cadenas de herramientas, costos y tiempos de los ejemplos son según el autor original y no han sido verificados; no los prometas como garantía al usuario.
  • Las imágenes de la Categoría C se generan completamente con código, sin usar ningún material. Efectos como rostros realistas o voz en off real no se pueden lograr solo con código; en ese caso, pasa a la Categoría T (material propio del usuario) o Categoría G (material generado por IA), e informa al usuario qué debe preparar.
  • La Categoría T solo utiliza material sobre el cual el usuario confirme tener derechos, o material de dominio público o con licencia abierta. Anota el origen y la licencia de cada pieza. La Categoría G puede usar cualquier servicio de generación de imágenes, video o síntesis de voz, configurado según materials.md "Configurar servicios de generación". Si alguna categoría no está configurada, primero indícale al usuario qué debe configurar; las partes que no requieran generación se hacen con normalidad. No generes personas reales ni clones de voces reales.

Modificar contenido

Los pasos para añadir o modificar estilos están en README.md en "Mantenimiento". Después de modificar, debes ejecutar y pasar:

python3 scripts/build_index.py          # Genera data/styles.json y el directorio de estilos en index.md a partir de styles/*.md
python3 scripts/build_index.py --check  # Verifica coherencia de números, etiquetas, imágenes, enlaces y directorios

Los números solo se incrementan, no se modifican. data/styles.json y el directorio de estilos son archivos generados; no los edites manualmente.

Skills relacionados