Шаблон бренда и Apple-правила движения делают моушен Клода не нейросетевым на вид

Что показано

Артемий Миллер показывает четыре шага, которыми он собрал анимированный ролик целиком в Клод-коде, без After Effects и без моушн-дизайнера. Ролик, который служит демонстрацией, это сетка карточек с названиями методов рассуждения (Systems thinking, Decomposition, Adversarial и так далее), плавно проявляющихся одна за другой. В конце заявление, что "никто не поймёт, что монтаж сделал AI". Тут сразу торможу: по одному демо-ролику в сторис такое не проверить, это маркетинговая фраза, а не факт.

Почему это работает

Если просто попросить Клода "сделай красивую анимацию", он выдаёт генерик-моушн, короче такой же, как у тысячи других промптов. Приём убирает эту генеричность тремя якорями. Первый - frame.md, бренд-файл на 305 строк с вашей реальной палитрой (ground, surface, muted, cream, coral в примере автора) и уровнями шрифта, который Клод сам же вывел из пяти кадров ваших старых роликов. Второй, и тут самое интересное, правила движения берутся не из головы модели, а с живой страницы Apple HIG Motion через apple-design-skill: в кадре видно файл references/hig/motion.md с датой последнего изменения. Я прочитал этот файл целиком - там нет ни одной формулы, только текстовые принципы вроде "добавляйте движение осознанно, не ради самого движения" и "стремитесь к точной и краткой обратной связи в анимации". Синусоидальное уравнение y(t) = y0 + A·sin(wt), которое видно в кадре, - это не цитата из Apple, а код, который Клод сам написал в scene.tsx, переводя текстовый принцип "плавное, естественное движение" в конкретную формулу затухающего колебания. Третий - 21st.dev, библиотека тысяч готовых React-компонентов и анимаций, сделанных живыми дизайнерами, откуда Клод берёт вёрстку вместо того, чтобы придумывать с нуля. А рендерит всё это, собственно, HyperFrames: не LLM гадает пиксели, а детерминированный пайплайн, HTML с анимацией открывается в headless Chrome, снимается покадрово и склеивается FFmpeg в MP4.

Клоду здесь не поручают придумать красиво. Ему дают три конкретных файла, на которые можно посмотреть, и весь фокус именно в этом.

Как повторить

Установите Node.js 22+ и FFmpeg, без них HyperFrames не рендерит.
Поставьте HyperFrames как плагин Клод-кода:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Вызывается командой /hyperframes:hyperframes. Можно и вручную, тогда npx hyperframes init my-video, preview для просмотра в браузере, render для MP4.

Поставьте apple-design-skill:

npx skills add dickwu/apple-design-skill -a claude-code -g

(флаг -g ставит скилл во все проекты, без него только в текущий). Это ревьюер UI/UX по Apple HIG для разных фреймворков, но нам нужны только его справочники, то есть references/hig/motion.md и соседние страницы HIG внутри references/hig/.

Соберите шаблон бренда: отдайте Клоду пять кадров своих прошлых роликов и попросите (в кадре видно ровно этот промпт, модель - Opus 5.5):

Вот пять кадров моих роликов. Сделай из них шаблон бренда для HyperFrames.

Клод напишет frame.md с палитрой и типографикой проекта.

Пропишите в CLAUDE.md проекта (шаг восстановлен по кадру с текстовым редактором, дословная формулировка не видна полностью):

Перед монтажом смотри frame.md

Так каждый следующий ролик стартует со сверки с вашим шаблоном, а не рисуется заново.

Когда нужен конкретный визуальный блок, кнопка, hero-секция, фоновый паттерн, отправьте Клода смотреть 21st.dev и указать конкретный компонент или категорию.
Попросите собрать сцену с движением по правилам apple-design-skill и отрендерить через npx hyperframes render.

Ссылки и ресурсы

HyperFrames - открытый CLI и скилл для Клод-кода от HeyGen, рендерит HTML/CSS-анимацию в MP4 через headless Chrome и FFmpeg; 71к звёзд, Apache 2.0; найдено в описании автора и на кадрах f_04, f_09, бесплатно.
hyperframes.dev - сайт проекта, домашняя страница из README репозитория; найдено на кадре f_04, бесплатно.
apple-design-skill - скилл-ревьюер интерфейсов по Apple HIG для Клод-кода, Cursor, Codex; 1,9к звёзд, без явной лицензии в репозитории; найдено в описании автора и на кадре f_18 (виден файл references/hig/motion.md внутри), бесплатно.
21st.dev - библиотека 12 000+ React-компонентов, шаблонов и тем shadcn плюс 2000+ маркетинг-блоков; найдено в описании автора и на кадрах f_12-f_14. Бесплатный тариф Free даёт безлимитный просмотр и 2 копирования компонента в день - для разового шаблона бренда этого достаточно. Платные тарифы начинаются от 6 $/мес (Builder, безлимитные копирования и установки, годовая оплата) и доходят до 60-80 $/мес (Builder + AI с ежемесячными AI-кредитами).
Apple HIG · Motion - первоисточник, который реально лежит внутри apple-design-skill как references/hig/motion.md; проверено напрямую, бесплатно.

Проверочный прогон

После рендера откройте MP4 и сверьте с frame.md: цвета фона и акцентов должны совпадать с вашей палитрой, а не плыть кадр от кадра. Движение букв и блоков должно быть плавным и затухающим, как у iOS, а не линейным дёрганьем, вот и вся разница между движением по принципам HIG и обычной генерик-анимацией. Если ролик выглядит как случайный набор шейдеров с 21st.dev без связи с вашим брендом, значит, frame.md не подключился или Клод его не прочитал. Тогда проверьте, что строка в CLAUDE.md реально стоит и путь к файлу верный.

Оговорки

apple-design-skill спроектирован как ревьюер готового интерфейса по Apple HIG, а не как библиотека для генерации анимации. Автор ролика использует только его файлы-справочники, это не баг, но и не то, для чего скилл написан, так что обновления скилла в будущем могут поменять структуру references/hig/ и сломать путь к файлу. Лицензия apple-design-skill в репозитории не указана явно (в отличие от HyperFrames с Apache 2.0), для личного некоммерческого использования это не проблема, а вот для встраивания в чужой продукт стоит свериться с автором репозитория. Фраза "никто не поймёт, что монтаж сделал AI" - рекламное преувеличение, не проверяемый факт. Opus 5.5 в кадре показан на плане Claude Max, на более дешёвых планах лимиты по этой модели другие, и собрать 305-строчный frame.md за один проход может не выйти. Промпт для шаблона бренда и строка в CLAUDE.md восстановлены по читаемому тексту на кадрах, а не считаны один в один с полного экрана, в оригинале возможны мелкие отличия в формулировке.