Text-to-Lottie от Diffusion Studio - открытый навык для AI-агентов

Основатель Diffusion Studio Константин Паулюс выпустил Text-to-Lottie — открытый навык (skill) для AI-кодинг-агентов, который превращает текстовое описание в готовую Lottie-анимацию за секунды. Твит с анонсом собрал более 8 000 лайков за считанные дни, а репозиторий на GitHub стремительно набирает звёзды.

Больше не нужно вручную копаться в слоях After Effects, чтобы создать иконку, микровзаимодействие или анимированный элемент интерфейса. Вы просто описываете, что должно происходить на экране, — и нейросеть выдаёт готовый JSON-файл анимации.

Что такое Text-to-Lottie и как он работает

Text-to-Lottie — это не standalone-приложение и не модель. Это открытый навык (skill), который выступает надстройкой для популярных кодинг-агентов: Claude Code, OpenAI Codex и любых других агентов, поддерживающих систему skills.

Работает это так:

1. Установка одной командой: npx skills add diffusionstudio/lottie
2. Вы пишете агенту: «сделай анимированную иконку загрузки с пульсирующим кругом»
3. Агент читает SKILL.md с правилами Lottie-формата, схемой JSON и требованиями Skottie-рендера
4. Генерирует готовый файл lottie.json прямо в проекте
5. Встроенный плеер на Skia CanvasKit (Skottie) тут же показывает результат — dev-сервер с hot-reload обновляет анимацию в реальном времени

Ядро проекта — это полноэкранный Lottie-плеер на Skia CanvasKit (модуль Skottie), а не стандартный lottie-web. Управляющая панель построена на React + shadcn/ui + TypeScript. Агент пишет JSON, dev-сервер подхватывает изменения — и анимация оживает без перезагрузки.

Секрет качества: SKILL.md вместо файнтюнинга

Главное инженерное решение — SKILL.md. Вместо того чтобы файнтюнить модель под генерацию анимаций, Diffusion Studio кодирует в SKILL.md:

• Схему Lottie JSON — все поля, слои, ключевые кадры, шейпы
• Требования Skottie-рендера — как именно движок Skia отрисовывает анимации
• Best practices — принципы тайминга, easing-функции, хореография движений
• Конвертация миллисекунд в кадры — frames = ms / (1000 / fr), поскольку Lottie оперирует кадрами, а креативные практики — миллисекундами

Таким образом любой general-purpose агент превращается в специализированный Lottie-генератор без единого файнтюнинга модели.

Дополнение: для продвинутой анимации (принципы Диснея, сложный easing, сторителлинг движением) авторы рекомендуют сочетать Text-to-Lottie с motion-design скиллом от LottieFiles — механика против креатива.

Ключевые фишки

Полностью открытый исходный код

Репозиторий на GitHub — MIT-лицензия. Код можно изучать, форкать, модифицировать и встраивать в свои проекты.

Интеграция с популярными AI-агентами

Работает с Claude Code, OpenAI Codex, Cursor и любым агентом с поддержкой skills. Одна команда npx skills add — и агент готов генерировать анимации.

Production-ready файлы

Сгенерированные Lottie-анимации можно: - Использовать напрямую как JSON в вебе или мобильных приложениях - Импортировать в After Effects для дальнейшей доработки - Рассчитывать на малый вес — Lottie JSON весит килобайты, а не мегабайты - Свободно масштабировать — векторная графика не теряет качества

Как установить и попробовать

# Установка навыка (доступен Claude Code, Codex и другие skills-агенты)
npx skills add diffusionstudio/lottie

# Запуск dev-сервера с плеером
npm run dev

Затем просто попросите агента сгенерировать анимацию, используя навык text-to-lottie. Готовый JSON появится в public/lottie.json, и плеер мгновенно его отобразит.

Что можно генерировать: 7 идей для старта

Иконки загрузки — спиннеры, пульсации, прогресс-бары Микровзаимодействия — анимации кнопок, переключателей, ховер-эффектов Онбординг-анимации — иллюстрации для обучения пользователей Анимированные логотипы — морфы, появления, рассеивания Уведомления — колокольчики, алерты, баджи Переходы между экранами — для мобильных приложений Инфографику — анимированные чарты, диаграммы, схемы

Почему это важно

Text-to-Lottie закрывает болезненный разрыв между дизайном анимаций и их реализацией:

Скорость — анимация за секунды, а не часы в After Effects AI-first подход — агент не просто помогает, он сам создаёт анимацию Open source — никаких проприетарных замков, сообщество может развивать инструмент Модульность — работает с Claude Code, Codex, Cursor и любыми будущими агентами

Ссылки

GitHub: Diffusion Studio Text-to-Lottie