Анимация · разбор LottieFiles MCP · сентябрь 2026
Анимация в Claude Code без After Effects: 3 шага через LottieFiles
Анимацию для сайта можно собрать разговором: пишешь в Claude Code «сделай пульсирующий круг», и он рисует её в редакторе, открытом в соседней вкладке. Связку даёт небольшая программа-посредник @lottiefiles/creator-mcp, она ставится одной строкой за полминуты. Но сразу после установки модель видит 0 инструментов: нужен второй шаг, про который в пересказах не пишут, и он занимает ещё минуту
Но одной строки мало, и это главное, ради чего стоит читать дальше. Я поставил его сам и проверил: после установки клиент пишет «Connected», а инструментов у модели ровно ноль. Ниже три шага в правильном порядке и разбор той самой тишины, на которой большинство бросает
Первый шаг занимает полминуты, начни с него. Открой окно команд и вставь строку:
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latestДальше объясню, что произошло и чего не хватает
Выполни три шага подряд, порядок важен. Первый: поставь посредника строкой claude mcp add lottiefiles-creator. Второй: открой в браузере creator.lottiefiles.com и включи там Settings, MCP Settings, Enable local MCP. Третий: дождись синего значка у имени файла. Без второго шага инструментов у модели ноль, хотя подключение показывает галочку
Что это вообще такое
Lottie это формат анимации для сайтов: лёгкий файл, который рисуется прямо в браузере и не тормозит страницу. Раньше такие делали в After Effects, а потом выгружали отдельной надстройкой
Здесь другой путь. У LottieFiles есть онлайн-редактор, и к нему написали программу-посредника MCP. MCP это способ дать модели руки: не только советовать, а самой нажимать кнопки в чужой программе. Как подключаются такие расширения вообще, я разбирал в гайде про подключение внешних инструментов. Представь, что ты посадил дизайнера за компьютер и говоришь ему, что делать, только дизайнер это Claude, а компьютер это вкладка браузера
Важно понять сразу, чем этот путь отличается от соседнего. Если ты дизайнер и у тебя уже есть макет в Figma, тебе скорее подойдёт надстройка Magic Animator для Figma: там всё делается мышкой, без единой команды. Эта статья про обратный случай: макета нет, зато есть Claude Code, и анимацию проще описать словами
Шаг 1. Поставь посредника одной строкой
Ты это уже сделал, если начал сразу. Разберём, что случилось
Строка claude mcp add lottiefiles-creator говорит Claude Code: запомни новый инструмент под таким именем. Хвост после двух дефисов это команда запуска: npx скачает пакет и запустит его, -y согласится на установку без вопросов
Что увидишь сразу после ввода:
Added stdio MCP server lottiefiles-creator with command: npx -y @lottiefiles/creator-mcp@latest to local configПроверь, что он жив, второй командой:
claude mcp listПризнак успеха: команда claude mcp list показывает строку lottiefiles-creator со словом Connected
Мой прогон 14 сентября 2026: Node версии 25.9.0, версия пакета 0.2.2, размер 251 527 байт. После установки claude mcp list вернул строку «lottiefiles-creator: npx -y @lottiefiles/creator-mcp@latest - ✔ Connected». Запись всех моих команд сохранена рядом со статьёй
Нужен только Node.js версии 18 или выше. Если команда node -v отвечает «команда не найдена», поставь Node с официального сайта, всё остальное подтянется само. Если сам Claude Code у тебя ещё не стоит, начни с разбора, что это и как им пользоваться
Если работаешь не в Claude Code, строка другая, а смысл тот же. Все три сняты с живой документации:
| Клиент | Чем ставится |
|---|---|
| Claude Code | claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest |
| VS Code | code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}' |
| Cursor | конфиг mcpServers в Settings, Tools & MCPs, Add custom MCP, затем полный перезапуск |
Таблица прокручивается вбок →
Тишина после установки: почему инструментов ноль
Вот тут начинается то, чего нет ни в одном пересказе. Галочка «Connected» стоит, а модель ничего не умеет. Спрашиваешь «покажи, что ты можешь в Lottie» и получаешь пустоту
Я полез разбираться и спросил у самой программы-посредника, какие инструменты она отдаёт. Ответ оказался честным и пустым:
serverInfo: {"name": "@lottiefiles/creator-mcp", "version": "0.2.2"}
capabilities: {"tools": {"listChanged": true}}
инструментов в tools/list: 0
Что она пишет о себе при запуске
[lottiefiles-creator-mcp] WebSocket server listening on 127.0.0.1:3847
[lottiefiles-creator-mcp] MCP server started on stdio
Разгадка в двух строках этого вывода. Посредник открывает канал связи на твоём же компьютере по адресу 127.0.0.1:3847 и ЖДЁТ, пока к нему подключится вкладка браузера с редактором. А listChanged: true означает «список инструментов появится позже, когда будет к чему их применять»
Логика простая, если её проговорить. Посредник не рисует анимацию сам, он передаёт команды в открытый редактор. Нет редактора, нечем рисовать, и показывать модели список кнопок бессмысленно
Шаг 2. Открой редактор и включи мост
Зайди на creator.lottiefiles.com и войди в аккаунт. Бесплатного достаточно, платный план документация не требует
Дальше самое важное действие всей статьи. В редакторе открой Settings, внутри найди MCP Settings и включи Enable local MCP. Это тумблер, который разрешает вкладке соединиться с тем каналом на твоём компьютере
Что увидишь: всплывёт уведомление Local MCP bridge connected
Признак успеха: в редакторе выскочило уведомление Local MCP bridge connected
Вкладку не закрывай, пока работаешь. Закроешь, и связь оборвётся: модель снова перестанет видеть инструменты, хотя в списке подключений останется та же галочка
Шаг 3. Проверь, что модель видит инструменты
Вернись в Claude Code и спроси что-нибудь простое, например «какие инструменты LottieFiles тебе доступны». Теперь список должен быть непустым
Признак успеха: рядом с именем файла в редакторе горит синий значок MCP
Если значка нет, проверь по порядку три вещи: открыта ли вкладка редактора, включён ли тумблер Enable local MCP, не блокирует ли соединение брандмауэр. Четвёртой причины в моей практике не встречалось
В зависимостях пакета лежит библиотека ws версии 8.21.0, то есть работа с веб-сокетами, и официальный набор инструментов MCP версии 1.27.1. Это подтверждает устройство связки: посредник держит постоянное соединение с вкладкой, а не отправляет одиночные запросы
Что теперь можно просить словами
Когда мост поднят, модель получает доступ к редактору по нескольким направлениям. Вот они с переводом на человеческий:
| Что в документации | Что это значит на практике |
|---|---|
| Scenes and layers | создать сцену, задать размер, частоту кадров и длительность, переименовать и переставить слои |
| Shapes and text | нарисовать фигуры и добавить надписи |
| Styling and effects | цвета, обводки, тени и прочее оформление |
| Animation and timing | ключевые кадры: что в какой момент двигается |
| Assets and scene inspection | подтянуть картинку внутрь и посмотреть, что уже собрано |
| Themes and reusable motion | темы и повторно используемые куски движения |
| Segments and interactivity | отрезки анимации и реакция на действия человека |
Таблица прокручивается вбок →
Практически это выглядит так: пишешь «сделай квадрат 200 на 200, пусть он за секунду превращается в круг и меняет цвет с синего на зелёный», и смотришь, как в соседней вкладке это собирается. Не нравится тайминг, говоришь «сделай медленнее вдвое»
Готовый файл выгружается из редактора и ставится на сайт как обычный Lottie. Если страницу ты тоже собираешь через Claude, анимация встанет туда же, где собирается лендинг
Честная граница, которую называет сам вендор
В документации написано прямо: качество анимации сильно зависит от того, какой моделью ты пользуешься. Рекомендуют брать сильнейшую доступную
Это стоит принять до того, как начнёшь. Инструмент даёт руки, но не даёт вкуса: слабая модель нарисует движение, которое технически работает и выглядит дёшево. Сложную анимацию всё равно придётся описывать подробно, разбивая на части
Есть и необязательное дополнение, отдельный навык с приёмами анимации:
npx skills add LottieFiles/motion-design-skillОн не обязателен для работы, но подсказывает модели, как обычно строят движение. Про навыки в целом я писал в разборе десяти полезных навыков Claude
Где это ломается на практике
Три вещи, которые стоит знать заранее
Первое и главное: связь держится, пока открыта вкладка. Это не разовая установка, а постоянное соединение. Перезагрузил браузер, значит включай мост заново
Второе: доступ к части возможностей зависит от твоего рабочего пространства и уровня подписки, документация это оговаривает. На бесплатном аккаунте базовое рисование работает, а отдельные функции могут быть закрыты
Третье: это редактор анимации, а не генератор видео. Он собирает векторное движение из фигур, а не рисует картинку по описанию. Если нужна анимация фотографии или сложной сцены, задача другая и инструмент другой
Памятка: три шага и признак успеха на каждом
| Шаг | Что делаешь | Чем убеждаешься, что получилось |
|---|---|---|
| 1 | claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest | claude mcp list показывает строку со словом Connected |
| 2 | в редакторе: Settings, MCP Settings, Enable local MCP | уведомление Local MCP bridge connected |
| 3 | спросить у модели список инструментов | синий значок MCP рядом с именем файла, список непустой |
Таблица прокручивается вбок →
Источники
Все команды и числа проверены мной прогоном 14 сентября 2026, запись прогона сохранена рядом со статьёй
- Документация Lottie Creator MCP - команды установки для всех клиентов, шаги включения моста, перечень возможностей
- Редактор LottieFiles Creator - сама вкладка, которая должна быть открыта
- Пакет @lottiefiles/creator-mcp на npm - версия, размер и зависимости, которые я сверял командой npm view
- LottieFiles - сам формат и экосистема вокруг него
- Протокол MCP - как устроено подключение инструментов к модели
- Документация Claude Code по MCP - официальная сторона подключения таких программ
Памятка: что проверить, если модель не видит инструменты
Пять строк по порядку, первая закрывает больше половины случаев
Сохрани себе
- вкладка creator.lottiefiles.com открыта прямо сейчас, а не была открыта раньше
- тумблер Enable local MCP включён в настройках самого редактора
claude mcp listпоказывает строку lottiefiles-creator со словом Connectednode -vотвечает версией 18 или выше- синий значок MCP виден рядом с именем файла в верхней панели редактора
Куда это ведёт
Это один пример механики, которая работает далеко за пределами анимации
MCP превращает модель из советчика в исполнителя: она перестаёт объяснять, куда нажать, и нажимает сама. Так же подключаются таблицы, макеты, аналитика и твои собственные программы
На ИИ-Лагере мы собираем такие связки под конкретную задачу участника: разбираем, что у тебя делается руками каждый день, и отдаём это модели
Кнопка ведёт в мой закрытый канал. Жмёшь «Подать заявку», впускаю сразу, бот пишет в личку и отдаёт путёвку. Бесплатно
Частые вопросы
Нужен ли платный аккаунт LottieFiles?
Документация платный план не требует, я ставил на обычном аккаунте. При этом там оговорено, что доступ к части возможностей зависит от рабочего пространства и уровня подписки, так что отдельные функции могут оказаться закрыты
Поставил, а модель говорит, что ничего не умеет. Что не так?
Почти наверняка не сделан второй шаг. Сервер ждёт вкладку редактора и без неё отдаёт ноль инструментов, я это проверил прямым запросом к нему. Открой creator.lottiefiles.com и включи Enable local MCP
Работает ли это не в Claude Code?
Да. Для VS Code есть команда code --add-mcp с тем же пакетом, для Cursor конфиг в настройках, в списке поддерживаемых также Windsurf и Copilot CLI. Меняется только способ прописать сервер, остальное одинаково
Чем это отличается от плагина Magic Animator в Figma?
Тем, откуда берётся движение. Плагин оживляет готовый макет по слоям, и работа идёт мышкой. Здесь макета может не быть вовсе: анимация описывается словами и собирается с нуля в редакторе
Можно ли так анимировать видео или фотографию?
Нет, это редактор векторной анимации: фигуры, текст, ключевые кадры. Для оживления фотографии нужен другой класс инструментов
Читать дальше
Я соло-предприниматель на Claude, Claude Code и агентах
Всё, что не влезает в статью, лежит у меня в канале: разборы инструментов до того, как о них напишут, и внутрянка моих вайб-маркетинговых проектов - что я запускаю, что из этого не работает и почему
Открытый канал, подписка в одно нажатие