# generative-illustration

Скилл превращает отдельные сгенерированные векторные элементы в покадровую анимацию на Canvas с экспортом в MP4 через FFmpeg.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 544 установки · ★ 7
- Автор: iart-ai
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/iart-ai/generative-illustration-skills/tree/HEAD/skills/generative-illustration/SKILL.md
- Обновлён: 2026-06-30
- HTML: https://affpapa.org/nevibecode/skills/generative-illustration

## Что делает

Скилл выстраивает рабочий процесс для моушн-дизайна. Нейросети отдают сплошной набор не сгруппированных путей без именованных слоёв, поэтому оживить готовую сложную картинку без дефектов невозможно. Агент разбивает концепт на мелкие самостоятельные детали, запрашивает их на чистом фоне и удаляет фоновые плашки скриптом. Каждый спрайт перемещается в коде независимо.

Движение строится на элементе `<canvas>` как строгая функция времени `t`. Здесь не используются циклы `requestAnimationFrame` или переходы CSS, так как они вызывают рассинхронизацию при экспорте. Playwright последовательно обращается к холсту с фиксированным шагом таймлайна, снимает скриншоты, а FFmpeg склеивает кадры в готовый файл.

Для отрисовки и сохранения анимации API-ключи не нужны. Достаточно связки из Node, Playwright и FFmpeg на локальной машине. Токен OpenRouter или Replicate потребуется только в том случае, если вы поручаете агенту саму генерацию векторных спрайтов через Recraft или музыки через Lyria.

## Установка

### Claude Code (родная платформа)

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

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/generative-illustration/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/generative-illustration/

### Codex

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

2. **Вручную: положить файлы**
- Файл: `.agents/skills/generative-illustration/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

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

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/generative-illustration/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

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

2. **Вручную: положить файлы**
- Файл: `.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. **Командой платформы**
```bash
gemini skills install https://github.com/iart-ai/generative-illustration-skills --path skills/generative-illustration
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/generative-illustration/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

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

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/iart-ai/generative-illustration-skills/tree/HEAD/skills/generative-illustration/SKILL.md

## Когда брать
- разбить визуальную метафору на изолированные векторные спрайты
- очистить SVG от фоновых прямоугольников перед вставкой в код
- построить детерминированный таймлайн анимации на холсте
- сохранить анимацию покадрово через Playwright и упаковать в MP4
- синхронизировать движение графики со сгенерированным аудио

## Примеры запросов агенту
- Сделай анимированную метафору с распускающимся маком и экспортируй в MP4
- Собери сцену из векторных спрайтов на холсте с детерминированным таймлайном
- Очисти фон у векторных элементов Recraft и анимируй их появление

## Похожие
- [product-launch-motion](https://affpapa.org/nevibecode/skills/product-launch-motion.md) — скилл · 585 установок
- [canvas-generative](https://affpapa.org/nevibecode/skills/canvas-generative.md) — скилл · 995 установок
- [cinetic](https://affpapa.org/nevibecode/skills/cinetic.md) — скилл · 1000 установок
- [generative-ui](https://affpapa.org/nevibecode/skills/generative-ui.md) — скилл · 3200 установок
- [html-diagram](https://affpapa.org/nevibecode/skills/html-diagram.md) — скилл · 4100 установок
- [scroll-scrubbed-visual-sequence](https://affpapa.org/nevibecode/skills/scroll-scrubbed-visual-sequence.md) — скилл · 1500 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md