# generative-illustration

Guides coding agents to build motion graphics from isolated AI vector assets and render deterministic Canvas animations to MP4.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 544 installs · ★ 7
- Author: iart-ai
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/iart-ai/generative-illustration-skills/tree/HEAD/skills/generative-illustration/SKILL.md
- Updated: 2026-06-30
- HTML: https://affpapa.org/en/nevibecode/skills/generative-illustration

## What it does

The skill establishes a practical motion design workflow. AI image models output flat, ungrouped vector paths without distinct layers, making it impractical to rig a finished illustration. The agent solves this by prompting for isolated elements on solid white backgrounds, deleting background paths with a script, and treating each item as an independent sprite.

All visual properties on the `<canvas>` derive strictly from time parameter `t`. The harness avoids `requestAnimationFrame` loops and CSS transitions because they fall out of sync during frame capture. Playwright advances the clock in discrete increments, captures screenshots, and passes them to FFmpeg to create the video.

Local animation rendering needs no API keys. The entire capture process runs on your machine using Node with Playwright and FFmpeg. An OpenRouter or Replicate key is required only if you want the agent to call Recraft for vector art or Lyria for backing music.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/generative-illustration/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/generative-illustration/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/generative-illustration/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/generative-illustration/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install iart-ai/generative-illustration-skills generative-illustration
```

2. **Manually: put the files in place**
- File: `.github/skills/generative-illustration/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/iart-ai/generative-illustration-skills --path skills/generative-illustration
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/generative-illustration/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/iart-ai/generative-illustration-skills/tree/HEAD/skills/generative-illustration/SKILL.md

## When to use it
- split an illustration concept into distinct AI-generated sprites
- strip solid background paths from generated vector files
- build deterministic canvas motion keyed to exact time values
- render video frames via headless browser into an MP4 file
- generate background audio and combine it with the video

## Example prompts
- Create an animated motion piece featuring an opening flower and export it to MP4
- Build a deterministic canvas timeline for isolated vector sprites
- Strip the white background from these Recraft SVGs and animate their entrance

## Similar
- [product-launch-motion](https://affpapa.org/en/nevibecode/skills/product-launch-motion.md) — skill · 585 installs
- [canvas-generative](https://affpapa.org/en/nevibecode/skills/canvas-generative.md) — skill · 995 installs
- [cinetic](https://affpapa.org/en/nevibecode/skills/cinetic.md) — skill · 1000 installs
- [generative-ui](https://affpapa.org/en/nevibecode/skills/generative-ui.md) — skill · 3200 installs
- [html-diagram](https://affpapa.org/en/nevibecode/skills/html-diagram.md) — skill · 4100 installs
- [scroll-scrubbed-visual-sequence](https://affpapa.org/en/nevibecode/skills/scroll-scrubbed-visual-sequence.md) — skill · 1500 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md