Cómo extender tu propia IP rápidamente con Claude
Notas de la producción de los assets derivados de AirJelly — y por qué la parte difícil nunca fue generar una animación, sino restringirla.
Translated by AIPara que una IP se sienta verdaderamente viva, no puede quedarse en una sola ilustración de personaje.
Necesitamos expandirla a stickers, emojis, GIFs animados y otros assets que permitan al personaje aparecer en más situaciones — y ayudar a más gente a verlo, usarlo y recordarlo.
En un flujo de trabajo totalmente manual eso lleva una cantidad considerable de tiempo. La animación pixelada es especialmente exigente: cada movimiento se construye fotograma a fotograma mientras las proporciones, colores, formas y lenguaje visual del personaje tienen que mantenerse consistentes.
Hoy, unas pocas conversaciones breves con Claude pueden expandir una IP existente mucho más rápido preservando su estilo de diseño original. Este post comparte los problemas que encontré al crear GIFs animados para AirJelly, y el flujo de trabajo con el que terminé.
Pedirle GIFs directamente a Codex y Claude
Podían producir una medusa animada rápidamente, pero los resultados no eran del todo correctos. El personaje se movía, pero la animación no capturaba la esencia del diseño pixel-art de AirJelly.
El tamaño del píxel, la silueta, las proporciones, los límites de color, las formas de los tentáculos y el timing de los fotogramas importan todos. Si aunque sea uno de ellos se desvía demasiado, el resultado empieza a parecer un personaje nuevo similar en lugar de AirJelly mismo.
Así que el verdadero desafío no era generar una animación. Era construir restricciones lo bastante claras para preservar la identidad visual del personaje de principio a fin.
hi
happyConectar Pixelorama con Claude
Elegí Pixelorama porque fue creado específicamente para pixel art y animación fotograma a fotograma. Proporciona cuadrículas, edición a nivel de píxel, gestión de fotogramas, previsualizaciones de animación y exportaciones con fondo transparente.
Esas limitaciones a nivel de herramienta se convierten en restricciones creativas útiles. Le dan a Claude un entorno que sigue la lógica de la animación pixelada, en lugar de pedirle que aproxime un estilo pixel-art solo a partir de una descripción textual.
photoPixelorama no tenía un MCP nativo, así que Claude creó uno
Pixelorama no incluye un servidor MCP, así que el primer paso fue pedirle a Claude que escribiera uno y lo conectara al flujo de trabajo. Cero dependencias de npm, un solo archivo, Node ≥ 18. Hace dos cosas: escribe archivos de proyecto .pxo directamente (implementado contra el código fuente de Pixelorama v1.1.10, pxo_version 6), y maneja la CLI headless de Pixelorama para exportar imágenes.
Una vez integrado, el problema más difícil — la consistencia de estilo — quedó mayormente resuelto. Lo que quedaba era describir la acción, la expresión, el timing y los detalles en la conversación, y luego hacer que Claude previsualizara y refinara.
claude| Herramienta | Propósito |
|---|---|
| pixelorama_info | Informar la versión de Pixelorama envuelta y la ruta de instalación |
| create_pxo | Construir un proyecto .pxo a partir de datos de fotogramas RGBA en bruto (animación de varios fotogramas) |
| export_image | Exportación headless a png/gif, con escalado entero, rangos de fotogramas, spritesheets |
| project_info | Leer el tamaño y el número de fotogramas de un .pxo existente |
claude mcp add pixelorama -- node ~/pixelorama-mcp/server.mjs
Convertir lecciones repetidas en una Skill reutilizable
Más allá de la integración de herramientas, recopilé los prompts, las reglas de diseño y el flujo de trabajo de producción en una Skill. Significa que ya no tengo que explicarle las mismas reglas a Claude cada vez que creo una nueva animación — Claude reutiliza el lenguaje visual establecido, y el flujo de trabajo se vuelve más consistente con el tiempo.
thinkNunca rotes con CSS ni escales fraccionalmente un sprite pixelado — rasterízalo sobre la cuadrícula. Una celda de sprite equivale a una celda de cuadrícula, en todas partes de la escena.
Sin fundidos alfa y sin fotogramas intermedios semitransparentes. Las cosas aparecen mediante recorte, movimiento, revelado fila por fila, cortes duros o tramado.
El avance discreto le da a la animación de fotogramas su salto. Una interpolación lineal continua le da un deslizamiento, y el deslizamiento es lo que hace que deje de leerse como pixel art.
Anticipación, sobrepaso, seguimiento — expresados de forma discreta. Aleatoriza los ángulos finales y los puntos de aterrizaje para que las repeticiones nunca parezcan mecánicas.
Previsualizar todo junto, luego exportar por lotes
Organiza todas las acciones por categoría y previsualízalas juntas en una sola página HTML. Eso hace mucho más fácil comparar las proporciones del personaje, el rango de movimiento, la velocidad de reproducción y el estilo general en todo el conjunto — y saca a la luz las inconsistencias antes de exportar, no después.
Una vez refinada cada acción, exporta el conjunto completo como GIFs transparentes. Diseñar juntos, revisar juntos, exportar juntos mantiene consistente toda una familia de assets de una manera que exportar cada uno a medida que lo terminas nunca logra.
guitar
sleep
drink
waveExtender los mismos assets a más productos de IP
Los GIFs no tienen que ser el resultado final. Elige los fotogramas fijos más expresivos de las animaciones, conviértelos a SVG y llévalos a Figma para una segunda pasada — contornos, colores, trazos, composición — y luego adapta la ilustración para stickers, charms acrílicos y pines.
Los mismos assets de movimiento también se pueden reutilizar en video: AirJelly como un avatar presentador animado que reacciona a la narración con expresiones acordes. Desde emojis animados hasta gráficos planos, mercancía física y personajes de video, una colección de assets de IP no deja de separarse, recombinarse y reutilizarse.
like
thanksLlévate el kit
Ambas piezas están en un solo archivo — el servidor MCP de Pixelorama y la Skill de animación pixelada, más un README con los pasos de instalación. Cambia el nombre del personaje y las rutas de archivo por los de tu propio proyecto.
pixel-animation-kit.zipserver.mjs · SKILL.md · README — 8 KBPixelorama en sí viene de pixelorama.org o de las releases de GitHub. En macOS la ruta predeterminada es ~/Applications/Pixelorama.app; configura PIXELORAMA_BIN para cualquier otra cosa. Después de reiniciar Claude Code, las herramientas aparecen como mcp__pixelorama__*.
Qué cambió realmente
El valor de Claude aquí no es que dibuje una imagen más rápido. Es que puede extender el lenguaje de diseño que una IP ya tiene — con Pixelorama MCP aportando las restricciones a nivel de herramienta y la Skill manteniendo las reglas visuales en su lugar.
Animaciones que antes necesitaban un largo ciclo de producción fotograma a fotograma ahora se arman mediante unas pocas rondas de conversación, previsualización y refinamiento. Espero que te dé algunas ideas para tu propio personaje.
← Volver al blog