generative-illustration — скилл для Claude Code: обзор и установка
Скилл превращает отдельные сгенерированные векторные элементы в покадровую анимацию на Canvas с экспортом в MP4 через FFmpeg.
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a claude-codeЧто делает generative-illustration
Скилл выстраивает рабочий процесс для моушн-дизайна. Нейросети отдают сплошной набор не сгруппированных путей без именованных слоёв, поэтому оживить готовую сложную картинку без дефектов невозможно. Агент разбивает концепт на мелкие самостоятельные детали, запрашивает их на чистом фоне и удаляет фоновые плашки скриптом. Каждый спрайт перемещается в коде независимо.
Движение строится на элементе <canvas> как строгая функция времени t. Здесь не используются циклы requestAnimationFrame или переходы CSS, так как они вызывают рассинхронизацию при экспорте. Playwright последовательно обращается к холсту с фиксированным шагом таймлайна, снимает скриншоты, а FFmpeg склеивает кадры в готовый файл.
Для отрисовки и сохранения анимации API-ключи не нужны. Достаточно связки из Node, Playwright и FFmpeg на локальной машине. Токен OpenRouter или Replicate потребуется только в том случае, если вы поручаете агенту саму генерацию векторных спрайтов через Recraft или музыки через Lyria.
Какие задачи решает
- разбить визуальную метафору на изолированные векторные спрайты
- очистить SVG от фоновых прямоугольников перед вставкой в код
- построить детерминированный таймлайн анимации на холсте
- сохранить анимацию покадрово через Playwright и упаковать в MP4
- синхронизировать движение графики со сгенерированным аудио
Примеры запросов агенту
- Сделай анимированную метафору с распускающимся маком и экспортируй в MP4
- Собери сцену из векторных спрайтов на холсте с детерминированным таймлайном
- Очисти фон у векторных элементов Recraft и анимируй их появление
Как установить generative-illustration
1Через Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a claude-code2Вручную: положить файлы
~/.claude/skills/generative-illustration/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/generative-illustration/
1Через Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a codex2Вручную: положить файлы
.agents/skills/generative-illustration/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a cursor2Вручную: положить файлы
.cursor/skills/generative-illustration/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install iart-ai/generative-illustration-skills generative-illustration2Вручную: положить файлы
.github/skills/generative-illustration/SKILL.md1Через Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a gemini-cli2Командой платформы
gemini skills install https://github.com/iart-ai/generative-illustration-skills --path skills/generative-illustrationВручную: положить файлы
.devin/skills/generative-illustration/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о generative-illustration
Как установить generative-illustration в Claude Code?
Выполните команду npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a claude-code.
Что нужно подготовить на компьютере для сборки видео?
Сборка работает локально без внешних сервисов. Потребуются установленный Node с Playwright для захвата кадров и FFmpeg для сборки видеоряда.
Для каких задач этот скилл не подходит?
Скилл не рассчитан на графики данных, кинетическую типографику или трёхмерные сцены с частицами на WebGL. Для них требуются специализированные инструменты вроде chart-animation или webgl-animation.
