Claude Code · скиллы · бесплатно

5 скиллов — и Claude начнёт анимировать

Скилл — набор инструкций, который ставится в Claude Code одной командой. Ниже пять бесплатных скиллов для анимации: у каждого команда установки и промпт. Копируешь, вставляешь — Claude берётся за работу.

Дмитрий Филюта · @dimani
маркетинг и ИИ-сотрудники
Как запустить Бесплатный мастер-класс
Как запустить

Четыре шага до первой анимации

Нужны Claude Code и Node.js. Команда npx, через которую устанавливаются скиллы, ставится вместе с Node.js.

  1. Проверь Node.js. В терминале напиши node -v. Появился номер версии? Всё готово. Ошибка? Скачай Node.js на nodejs.org и установи.
  2. Открой терминал в папке проекта, где будешь анимировать, и вставь команду установки нужного скилла. Нажми Enter.
  3. Запусти Claude Code в той же папке: напиши claude и нажми Enter.
  4. Вставь промпт из блока под командой. Claude применит скилл к твоей задаче.
Команду копируй целиком. У Genjutsu в конце стоит -g: он тоже часть команды.
Пять скиллов

Ставишь, копируешь промпт, смотришь результат

В каждом блоке две кнопки «Скопировать»: первая для терминала, вторая для Claude Code.

Скилл 1 / 5 · Three.js

3D-сцены прямо в браузере

Пакет из 10 скиллов: Claude собирает 3D-сцены, которые открываются в браузере.

  • 3D-сцены и камера.
  • Свет и тени.
  • GLTF-модели.
  • Шейдеры и bloom.
  • Вращение мышью.
Установка в терминале
npx skills add CloudAI-X/threejs-skills
Промпт для Claude Code
Сделай 3D-сцену с вращающимся кубом и мягким светом.
Скилл 2 / 5 · GSAP

Официальный скилл от создателей GSAP

GSAP — библиотека анимаций для сайтов. Этот скилл выпустили сами авторы.

  • Таймлайны.
  • Анимации на скролле.
  • React, Vue, Svelte.
  • SplitText, Flip, MorphSVG.
  • Анимации без тормозов.
Установка в терминале
npx skills add https://github.com/greensock/gsap-skills
Промпт для Claude Code
Анимируй заголовок по буквам, а секции пусть выезжают при скролле.
Скилл 3 / 5 · Design DNA

Разбирает чужой дизайн, переносит стиль на твой

Даёшь скриншот или ссылку на сайт-референс. Claude разбирает дизайн на части, записывает всё в один JSON и собирает по нему твой интерфейс в том же стиле.

  • Скриншот или ссылка на вход.
  • Цвета и шрифты.
  • Отступы и сетка.
  • Эффекты.
  • Всё в одном JSON.
Установка в терминале
npx skills add zanwei/design-dna
Промпт для Claude Code
Вот ссылка на сайт: [ссылка на сайт-референс]
Вытащи Design DNA и собери мой лендинг в этом стиле.

Вместо ссылки можно приложить скриншот.

Скилл 4 / 5 · Motion Design

Учит Claude думать как моушн-дизайнер

Скилл от LottieFiles. Без него движение линейное, с ним появляются easing и squash.

  • Тайминги и easing.
  • 12 принципов анимации Disney.
  • Хореография: порядок появления элементов.
  • Состояния загрузки и «Готово».
  • Работает с CSS, GSAP, Lottie.
Установка в терминале
npx skills add LottieFiles/motion-design-skill
Промпт для Claude Code
Добавь игривую анимацию появления карточек.
Скилл 5 / 5 · Genjutsu

Сначала идея, код — после твоего «ок»

От одной анимации до сайта целиком. Сначала Claude показывает идею, код пишет только после твоего «ок». Работает с Web, iOS и Android, без ИИ-шаблонщины.

  • /genjutsu:cast — одна анимация в интерфейсе.
  • /genjutsu:paint — весь стиль и дизайн-система.
  • /genjutsu:bunshin — целый сайт из твоих файлов силами агентов.
Установка в терминале
npx skills add https://genjutsu.athevon.dev -g
Промпт для Claude Code
/genjutsu:cast оживи карточки тарифов при наведении

Источники: Three.js · GSAP · Design DNA · Motion Design · Genjutsu. Все пять команд проверены 15.10.2026.

Если не работает

Скилл не встал? Проверь четыре вещи

Не установлен Node.jsКоманда npx идёт вместе с Node.js. Скачай его на nodejs.org, установи и проверь командой node -v.
«npx: command not found»Node.js уже стоит, а терминал его не видит. Закрой терминал и открой заново, затем напиши npx -v. Не помогло — установи Node.js заново с nodejs.org.
Claude не использует скиллЗакрой Claude Code и запусти его заново в той же папке: новая сессия увидит установленный скилл. Ещё раз проверь, что команда скопирована целиком.
Claude сделал не тоНазови одну правку и скажи, что не трогать: «Поправь только скорость появления карточек. Остальное оставь как есть».