Communitygithub.com

motion-piece — gráficos en código, metraje solo donde se necesi…

Crea videos de gráficos en movimiento para el usuario — videos de lanzamiento de SaaS y productos, explicadores de funciones, demos cinéticas de UI, secuencias de títulos, tarjetas finales, superposiciones HUD y de texto — como una película Claude Motion (dibujada con código, desplazable, comentable, exporta MP4), mezclando clips de Higgsfield solo donde se necesita metraje real, para que los gráficos cuesten cero créditos y cualquier detalle pueda cambiarse sin regenerar.

¿Qué es motion-piece — gráficos en código, metraje solo donde se necesi…?

Esta habilidad está diseñada para que los agentes de IA (como Claude, Cursor o Codex) generen videos de gráficos en movimiento de alta calidad, enfocados principalmente en lanzamientos de SaaS, videos de productos, explicadores de funciones y demos de interfaz de usuario. Sigue el enfoque 'Claude Motion', que prioriza la creación de todos los gráficos en código (HTML/CSS/JS) para que sean editables al instante y sin costo de créditos, mientras que solo se utiliza metraje real (proveniente de Higgsfield o de la fábrica de assets) cuando se necesita un elemento humano o físico. La habilidad guía al agente a través de un flujo de trabajo estructurado: primero, realizar una breve entrevista al usuario para capturar la marca, fuentes y preferencias; luego, planificar 4-7 'beats' (momentos clave) decidiendo qué partes son código y cuáles metraje; construir la película usando un artefacto de Motion; y finalmente revisar y exportar. Para evitar el aspecto genérico de 'Claude Motion', se enfatiza en personalizar el estilo visual a partir del trabajo previo del usuario, elegir música primero y limitar los movimientos a 1-2 característicos, además de usar efectos de código abierto con licencia clara. Las plataformas compatibles incluyen Claude (a través de artefactos Motion) y pipelines de código alternativos para casos que requieran voz en off o edición en Premiere. La habilidad también describe cómo manejar revisiones (cambiar solo lo que el usuario nombre) y qué evitar (logotipos de terceros, canciones reales o texto generado por IA dentro del metraje).

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SwapnilDawar2004/ai-video-skills/tree/HEAD/skills/motion-piece

Preguntar en tu IA favorita

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

Documentación

motion-piece — gráficos en código, metraje solo donde se necesita

La lección principal del tutorial de Claude Motion: los clips generados + los gráficos de código editables significan que solo se regenera la toma dañada, nunca el video completo. Los gráficos de código cuestan 0 créditos y cambian en segundos. Las startups de IA piden videos de SaaS y lanzamiento más que cualquier otra cosa.

Lo que suele funcionar (ajústalo al gusto del usuario)

  • "Gráficos en movimiento" normalmente significa tipografía cinética + interfaz de usuario + movimiento constante, no partículas abstractas.
  • Los personajes y la historia a menudo vencen a la tipografía sola. Para un video de lanzamiento, dale un pequeño momento humano si encaja.
  • Poco texto en pantalla; cada palabra grande, corta y clara.
  • Solo palabras reales del producto (por ejemplo, para una app de notas: captura rápida, búsqueda, libretas compartidas, sincronización sin conexión). Nunca inventes funciones.
  • Lee ~/.claude/skills/taste/taste.md antes de planificar.

No crees el aspecto predeterminado de Claude

Los videos de movimiento hechos con código están empezando a verse iguales en todas partes: texto enmascarado que surge de una línea, orbes suaves y brillantes, apariciones elásticas, tarjetas de vidrio, palabras degradadas, la misma suavización. Si un fotograma podría ser de cualquier video de Claude, cámbialo. Antes de construir:

  • Empieza desde el trabajo del usuario, no desde los valores predeterminados. Toma el aspecto de style.md, los archivos de la marca y las películas anteriores del usuario (grano riso, pinceladas pictóricas, puerta de 16 mm, píxel art HD, papel recortado, lo que sea que hayan hecho). Reutiliza sus propios efectos antes de inventar otros nuevos.
  • La música primero. Obtén la pista de sound-pass (primero la música del propio usuario) y sincroniza cada movimiento grande con sus tiempos (beats.json). La música marca el ritmo, no el código.
  • Elige 1–2 movimientos característicos para esta película y no uses nada más; prohíbe los movimientos predeterminados anteriores a menos que la marca los necesite.
  • Usa efectos de código abierto: pinceladas (p5.brush), partículas (tsParticles), transiciones de sombreado (gl-transitions / xfade-easing), texto animado (moving-letters). Solo con una licencia clara (MIT/Apache/CC0) y después de leer el código; nunca ejecutes código descargado a ciegas; da crédito al autor donde la licencia lo solicite.

Paso 0 — Pregunta primero al usuario (siempre)

Antes de planificar, ejecuta la recopilación en ~/.claude/skills/taste/intake.md: marca, fuentes, colores, referencias, preferencias, música, efectos. Cada respuesta puede ser "omitir".

Paso 1 — Planifica los tiempos (beats)

Decide la duración (15–30 s por defecto), la relación de aspecto (16:9; 9:16 para Reels/Shorts; 1:1 para el feed) y 4–7 tiempos: gancho → qué es → cómo funciona (2–3 momentos del producto) → prueba o recompensa → logotipo/CTA. Cada tiempo indica qué partes son código (tipografía, UI, contadores, gráficos, transiciones, logotipo) y cuáles, si las hay, son metraje (una persona, un lugar real, una toma de producto físico).

Por defecto, todo código. Añade metraje solo cuando un tiempo necesite un momento humano o físico real. Los clips de metraje provienen de la fábrica (asset-sheet → kling-prompt), silenciados, de 3–5 s cada uno.

Muestra el plan al usuario como una tarjeta breve ("Hacerlo" / "Cambiarlo") junto con el costo de créditos de la película (0 si es todo código).

Paso 2 — Constrúyelo como una película Claude Motion

  • Inicia un artefacto Motion desde el tipo de artefacto Motion (encuéntralo con la herramienta Artifact usando quickstart o la lista de tipos), con un title real (el nombre de la película) y auto_open: "after_first_write". Luego sigue las instrucciones que lleve el resultado de la creación — son la autoridad sobre cómo se rellena una película Motion (sus documentos de almacén, módulos de escena, assets, la partitura) y sobre lo que rechaza (sin canciones existentes, sin logotipos o diseños propietarios de otras empresas, sin personajes conocidos).
  • Su primer paso pregunta Estilo/Colores/Duración. Si la recopilación (Paso 0) ya los respondió, usa esas respuestas; de lo contrario, deja que el tipo Motion haga sus preguntas.
  • Marca: usa los colores, fuentes y logotipo reales de la empresa cuando el usuario sea propietario o trabaje para ella, o tenga su kit de marca.
  • Metraje: sube cada clip como un asset de video a la película (mp4, pequeño — 480p/720p es suficiente para una inserción silenciada). Los clips se reproducen en silencio; la partitura de la película se compone en código.

Paso 3 — Revisión

Las películas Motion tienen su propia página con desplazamiento y comentarios. Para la decisión del usuario, exporta o graba la película terminada a MP4 solo si las herramientas del tipo lo permiten; de lo contrario, envía el enlace de la película ("Mírala, luego decide") con Enviar / Cambiar. Opcionalmente, muéstrala en una página de revisión (consulta ~/.claude/skills/taste/desk.md). Los cambios vuelven como razones de una línea o comentarios en la línea de tiempo de la película; corrige solo lo que se nombre.

Cuando Motion no es la herramienta adecuada

  • Necesita voz en off, sincronía de labios o audio de diálogo real → construye los gráficos en Motion, exporta y ensambla con la voz en off en rough-cut (o un pipeline de código simple: index.html + render.mjs → MP4).
  • Necesita durar más de ~60 s, o editarse más en Premiere → exporta MP4 desde Motion y corta en Premiere; si se desean superposiciones como capas separadas → ProRes transparente desde el pipeline de código.
  • El tutorial mostró exportaciones a After Effects y Blender; eso no es una característica confirmada de Motion aquí — no lo prometas.

Revisiones

Bloquea lo que funciona, cambia solo lo que el usuario nombre. Mantén el plan/archivos existentes, edita solo las partes nombradas (por ejemplo, "grano más fuerte", "un estilo para todos los visuales", "el texto resalta más", "ritmo más rápido"), añade las nuevas referencias que envíen y vuelve a renderizar. Nunca reconstruyas desde cero para una nota.

Nunca

  • Nunca uses el logotipo, la interfaz de usuario o el diseño propietario de otra empresa a menos que el usuario trabaje allí o tenga el kit de marca de esa empresa.
  • Nunca uses una canción real como partitura.
  • Nunca pongas texto generado por IA dentro del metraje — todo el texto es código.

Skills relacionados