← Blog
Design9 min read

How to Extend Your Own IP Fast with Claude

Notes from producing AirJelly's derivative assets — and why the hard part was never generating an animation, but constraining it.

For an IP to feel truly alive, it cannot remain a single character illustration.

We need to expand it into stickers, emoji, animated GIFs, and other assets that let the character show up in more situations — and help more people see it, use it, and remember it.

In a fully manual workflow that takes a considerable amount of time. Pixel animation is especially demanding: every movement is built frame by frame while the character's proportions, colors, shapes, and visual language all have to stay consistent.

Today, a few short conversations with Claude can expand an existing IP much faster while preserving its original design style. This post shares the problems I hit while creating animated GIFs for AirJelly, and the workflow I ended up with.

02 · The first attempt

Asking Codex and Claude for GIFs directly

They could produce an animated jellyfish quickly, but the results were not quite right. The character moved, yet the animation did not capture the essence of AirJelly's pixel-art design.

Pixel size, silhouette, proportions, color limits, tentacle shapes, and frame timing all matter. If even one of them drifts too far, the result starts to look like a similar new character rather than AirJelly itself.

So the real challenge was not generating an animation. It was building constraints clear enough to preserve the character's visual identity all the way through.

hi
happy
Same bell, same palette, same grain
03 · A better approach

Connecting Pixelorama to Claude

I chose Pixelorama because it was built specifically for pixel art and frame-by-frame animation. It provides grids, pixel-level editing, frame management, animation previews, and transparent-background exports.

Those tool-level limitations become useful creative constraints. They give Claude an environment that follows the logic of pixel animation, instead of asking it to approximate a pixel-art style from a text description alone.

photo
One sprite cell = one grid cell
04 · The missing piece

Pixelorama had no native MCP, so Claude built one

Pixelorama does not ship an MCP server, so the first step was asking Claude to write one and wire it into the workflow. Zero npm dependencies, a single file, Node ≥ 18. It does two things: writes .pxo project files directly (implemented against the Pixelorama v1.1.10 source, pxo_version 6), and drives Pixelorama's headless CLI to export images.

Once it was integrated, the hardest problem — style consistency — was mostly solved. What remained was describing the action, expression, timing, and details in conversation, then having Claude preview and refine.

claude
Four tools, one stdio file
ToolPurpose
pixelorama_infoReport the wrapped Pixelorama version and install path
create_pxoBuild a .pxo project from raw RGBA frame data (multi-frame animation)
export_imageHeadless export to png/gif, with integer scaling, frame ranges, spritesheets
project_infoRead size and frame count of an existing .pxo
Register it with Claude Code
claude mcp add pixelorama -- node ~/pixelorama-mcp/server.mjs
05 · Sedimenting the rules

Turning repeated lessons into a reusable Skill

Beyond the tool integration, I collected the prompts, design rules, and production workflow into a Skill. It means I no longer explain the same rules to Claude every time I create a new animation — Claude reuses the established visual language, and the workflow gets more consistent over time.

think
The rules, written down once
01Grid discipline

Never CSS-rotate or fractionally scale a pixel sprite — rasterize it onto the grid instead. One sprite cell equals one grid cell, everywhere in the scene.

02Motion language

No alpha fades and no semi-transparent in-between frames. Things appear through clipping, movement, row-by-row reveal, hard cuts, or dithering.

03Step, don't tween

Discrete stepping gives frame animation its jump. A continuous lerp gives it a glide, and the glide is what stops reading as pixel art.

04Keep it alive

Anticipation, overshoot, follow-through — expressed discretely. Randomize final angles and landing spots so repeats never look mechanical.

06 · The workflow

Preview everything together, then export in batches

Organize all the actions by category and preview them together on a single HTML page. That makes it much easier to compare character proportions, movement range, playback speed, and overall style across the complete set — and it surfaces inconsistencies before export, not after.

Once every action has been refined, export the full set as transparent GIFs. Design together, review together, export together keeps an entire family of assets consistent in a way that exporting each one as you finish it never does.

guitar
sleep
drink
wave
Four of the forty-six, exported in one pass
07 · Beyond GIFs

Extending the same assets into more IP products

GIFs do not have to be the final output. Pick the most expressive still frames out of the animations, convert them to SVG, and take them into Figma for a second pass — outlines, colors, strokes, layout — then adapt the artwork for stickers, acrylic charms, and badges.

The same motion assets can be reused in video too: AirJelly as an animated presenter avatar that reacts to narration with matching expressions. From animated emoji to flat graphics to physical merchandise to video characters, one collection of IP assets keeps getting separated, recombined, and reused.

like
thanks
Still frames become stickers and badges
Appendix

Take the kit

Both pieces are in one archive — the Pixelorama MCP server and the pixel-animation Skill, plus a README with the install steps. Swap the character name and file paths for your own project.

pixel-animation-kit.zipserver.mjs · SKILL.md · README — 8 KB

Pixelorama itself comes from pixelorama.org or the GitHub releases. On macOS the default path is ~/Applications/Pixelorama.app; set PIXELORAMA_BIN for anything else. After restarting Claude Code the tools show up as mcp__pixelorama__*.

What actually changed

Claude's value here is not that it draws a picture faster. It is that it can extend the design language an IP already has — with Pixelorama MCP supplying the tool-level constraints and the Skill holding the visual rules in place.

Animations that used to need a long frame-by-frame production cycle now come together through a few rounds of conversation, preview, and refinement. I hope it gives you some ideas for your own character.

← Back to blog