Lottie Creator MCP

Lottie Creator MCP

Подключите AI-ассистента к Lottie Creator через локальный MCP-мост, чтобы создавать, редактировать и анимировать с помощью промптов.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) позволяет совместимому браузерному ассистенту использовать Creator напрямую, без этого локального моста. Он включен по умолчанию в поддерживаемых браузерах. Следуйте этому руководству, если хотите подключиться через локальный сервер Creator MCP.

Lottie Creator MCP приводит вашего AI-ассистента прямо в ваш анимационный рабочий процесс — предоставляя ему инструменты для просмотра, создания и редактирования Lottie-анимаций в LottieFiles Creator с помощью естественного языка. Инструкции по установке вы найдете ниже.

MCP-серверы являются частью стандартизированного интерфейса для AI-агентов, позволяющего взаимодействовать с источниками данных через Model Context Protocol. Lottie Creator MCP подключает AI-ассистентов, таких как Claude, Cursor и Windsurf, к инструментам редактирования Creator через локальный мост.

С включенным MCP вы можете:

✦ Создавать анимации с нуля

Опишите, что вам нужно — спиннер загрузки, индикатор прогресса, анимацию персонажа — и ваш AI создаст это прямо в Creator, слой за слоем.

✦ Редактировать и изменять существующие анимации

Меняйте цвета, настраивайте тайминг, заменяйте кривые easing, переименовывайте слои или рефакторите всю сцену. Ваш AI читает текущее состояние файла и редактирует его в реальном времени.

✦ Пакетно генерировать варианты анимаций

Автоматически создавайте несколько версий анимации одновременно — темные и светлые темы, разные размеры, варианты фирменных цветов.

✦ Анализировать анимации на доступность и соответствие бренду

Попросите вашего AI проверить анимации на проблемы с контрастом, скорость движения, согласованность цветов или соответствие гайдлайнам бренда — и исправить найденное.

✦ Интегрироваться в ваш проектный рабочий процесс

Генерируйте анимационные ассеты на лету, работая над более крупным проектом.

Чтобы использовать MCP, установите его в вашем AI-клиенте и включите в LottieFiles Creator. В разделах ниже описан каждый шаг.

Предварительные требования

Перед установкой убедитесь, что у вас есть следующее:

✅ 📦 Node.js 18+: Требуется для запуска MCP-пакета через npx. Скачать Node.js →

✅ 🎬 LottieFiles Creator: Откройте creator.lottiefiles.com в браузере и держите эту вкладку открытой.

✅ 🤖 MCP-совместимый AI: Claude, Cursor, Windsurf, VS Code Copilot или любой другой ассистент с поддержкой MCP.

Сначала перейдите к README-файлу Creator MCP, где вы можете получить MCP-строки и команды.

Установка MCP

Для всех ваших AI-инструментов вы можете использовать следующую конфигурацию:

{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

Эта документация охватывает шаги установки для некоторых из поддерживаемых MCP-клиентов. Список руководств по установке для поддерживаемых MCP-клиентов см. ниже:

Поддерживаемые MCP-клиенты

Следуйте инструкциям для вашего конкретного клиента, чтобы установить и подключить Lottie Creator MCP. Некоторые клиенты также поддерживают скиллы, которые добавляют знания о моушн-дизайне, чтобы ваш AI мог создавать более продуманные и отточенные анимации. 🖇️ Вот скилл LottieFiles по моушн-дизайну.

Выполните шаги для вашего MCP-клиента:

---

**1. Откройте настройки Claude Desktop**

Перейдите в **Settings → Developer** и нажмите **"Edit Config"**. Откроется JSON-файл конфигурации на вашем компьютере, который можно редактировать в VS Code, Cursor или любом текстовом редакторе.

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. Добавьте MCP-конфигурацию**

Вставьте следующее в файл конфигурации внутри объекта `mcpServers`. Возможно, вам потребуется добавить или удалить скобки/запятые, чтобы JSON оставался корректным.

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

Вот как может выглядеть файл конфигурации после вставки конфигурации выше:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. Убедитесь, что подключение установлено**

Нажмите кнопку **"+"** в чате, перейдите в **Connectors** и подтвердите, что переключатель `lottiefiles-creator` включен.

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. Выполните следующую команду в терминале**

Вот и все. Claude Code установит и зарегистрирует MCP автоматически.

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

#### **Использование Lottie Creator MCP для Cursor**

1. Нажмите `Cmd + Shift + P` (Mac) или `Ctrl + Shift + P` (Windows/Linux) → найдите **"Cursor Settings"**
2. На боковой панели перейдите в **Tools & MCPs**
3. Нажмите **"Add custom MCP"**

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. Вставьте:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

Сохраните и **полностью перезапустите Cursor** (закройте и откройте заново — не просто перезагрузите)

После перезапуска перейдите в **Settings → Tools & MCP**, и вы должны увидеть зеленую точку рядом с `lottiefiles-creator`, подтверждающую подключение.

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**Вариант A: Установка через deep link**

1. Нажмите [deep link сервера LottieFiles MCP.](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D) Это откроет конфигурацию MCP в VS Code.
2. Нажмите кнопку **Install**.

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**Вариант B: CLI или файл конфигурации**

Или через CLI:

Терминал

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

Или добавьте в ваш `.vscode/mcp.json`:

JSON — .vscode/mcp.json

```
{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

ℹ️ Вам понадобится [GitHub Copilot](https://github.com/features/copilot), включенный в вашей учетной записи, чтобы использовать MCP-инструменты в VS Code.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Следуйте документации по настройке MCP в Antigravity и используйте конфигурацию выше. Следуйте документации по настройке MCP в Cline и используйте конфигурацию выше. Следуйте [руководству по настройке MCP](https://github.com/openai/codex/blob/main/docs/config.md), используя:

```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

Или добавьте через CLI:

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

1. Запустите `copilot` 2. Выполните `/mcp add` 3. Настройте: - Имя сервера: `lottiefiles-creator` - Тип сервера: `Local` - Команда: `npx -y @lottiefiles/creator-mcp@latest` Следуйте документации по настройке MCP в VS Code и используйте конфигурацию выше. Или через CLI:

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

``` gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ``` droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest" ``` ``` gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest ``` Следуйте документации по настройке MCP в Gemini Code Assist и используйте конфигурацию выше. Следуйте документации по настройке MCP в JetBrains и используйте конфигурацию выше. Следуйте документации по настройке MCP в Kiro и используйте конфигурацию выше. Следуйте документации по настройке MCP в Qoder и используйте конфигурацию выше. Добавьте локальный MCP-сервер с:

- Имя: `lottiefiles-creator`
- Команда: `npx`
- Аргументы: `y @lottiefiles/creator-mcp@latest`

Следуйте документации по настройке MCP в Warp и используйте конфигурацию выше. Следуйте документации по настройке MCP в Windsurf и используйте конфигурацию выше.

Подключение к Lottie Creator

1. Откройте Lottie Creator

Перейдите на creator.lottiefiles.com в браузере и держите эту вкладку открытой на протяжении всей сессии. MCP взаимодействует с Creator через эту вкладку браузера.

1. Включите локальный MCP в Creator

В Creator перейдите в Settings → MCP Settings → Enable local MCP.

1. Подтвердите подключение

Вы должны увидеть уведомление в Creator: Local MCP bridge connected

Если вы видите это, все готово, и вы можете начинать создавать промпты! Имейте в виду, что качество анимации сильно зависит от используемой модели, поэтому обязательно используйте лучшую доступную вам модель.

О скиллах

Скиллы предоставляют рекомендации о том, как агенту следует подходить к задачам анимации — используя комбинацию вызовов MCP-инструментов и глубоких знаний моушн-дизайна, встроенных в виде переиспользуемых инструкций.

В то время как Lottie Creator MCP предоставляет отдельные инструменты (создать слой, установить ключевой кадр, настроить заливку), скиллы помогают вашему AI понять, как использовать их правильно. Например, знать, какая кривая easing подходит для отскока, а какая для затухания, как выстроить последовательность появления нескольких элементов или как структурировать тайминг, чтобы анимация ощущалась продуманной, а не механической.

Скиллы не заменяют MCP-подключение и не добавляют новых инструментов. Они уменьшают количество догадок, упаковывая экспертизу моушн-дизайна в инструкции, которые ваш AI автоматически использует при работе с анимациями.

Установите скилл моушн-дизайна

Выполните эту команду один раз в терминале. Она работает с 40+ агентами, включая Claude Code, Cursor, Codex и GitHub Copilot.

Терминал

npx skills add LottieFiles/motion-design-skill

✨ Настоятельно рекомендуется. Разница между AI, который создает скованные, механические анимации, и тем, который создает отточенные, продуманные движения, почти полностью сводится к наличию этого контекста. Установите его один раз, и он будет применяться к каждой анимационной сессии.

Посмотреть полный скилл на GitHub → LottieFiles/motion-design-skill

Возможности

Lottie Creator MCP, Motion Copilot и Lottie Creator WebMCP предлагают одинаковые возможности редактирования в Creator. Их настройка и интерфейсы ассистентов различаются.

Область	Что можно запросить
Сцены и слои	Просматривать и создавать сцены; изменять размер, частоту кадров, длительность или фон предпросмотра; переименовывать, дублировать, группировать, выравнивать, менять порядок, скрывать или блокировать слои.
Фигуры и текст	Создавать и редактировать прямоугольники, эллипсы, полигоны, звезды, пути и текст; изменять шрифты и стили текста; разбивать текст на части для анимации.
Стилизация и эффекты	Настраивать сплошные и градиентные заливки или обводки; использовать режимы наложения, тени, размытие, цветовые эффекты, маски и матты.
Анимация и тайминг	Добавлять, просматривать, изменять, копировать или удалять ключевые кадры; настраивать easing; анимировать трансформации, прозрачность и цвет; использовать пути движения, каскадные появления и ретайминг.
Ассеты и просмотр сцены	Импортировать SVG, Lottie-анимации и изображения; преобразовывать слои изображений PNG или JPG в векторы; просматривать сцену и перемещать playhead на конкретный кадр.
Темы и переиспользуемые движения	Создавать и связывать слоты motion-токенов, обновлять их значения, создавать или переключать темы. Находить и применять сохраненные стили и motion-пресеты из Motion System вашего рабочего пространства.
Сегменты и интерактивность	Создавать именованные сегменты анимации, стейт-машины, состояния, переходы и входные данные; подключать события клика, наведения и состояния к действиям.

Доступ к функциям зависит от вашего рабочего пространства и тарифа Creator. Когда анимация готова, используйте элементы управления экспортом Creator, чтобы сохранить результат.

Лучшие практики

• Установите навык моушн-дизайна для лучшего качества: MCP предоставляет вашему ИИ инструменты. Навык моушн-дизайна дает ему понимание, как их использовать — кривые easing, принципы тайминга, хореография. Одна команда, значительно лучший результат. Навык моушн-дизайна можно найти здесь.
• Начните с собственных SVG, затем анимируйте: ИИ может быть непредсказуемым при создании иллюстраций с нуля. Для лучших результатов сначала импортируйте свои существующие SVG-активы в Creator, затем попросите ИИ анимировать их. Это сохранит ваш визуальный стиль и позволит ИИ сосредоточиться на том, что он делает лучше всего — движение, тайминг и последовательность.
  • Попробуйте эти ссылки для ремиксов
    • Медаль: https://lottie.link/metal
    • Погода: https://lottie.link/weather
    • График: https://lottie.link/graph
    • Почтовый ящик: https://lottie.link/mailbox1
• Всегда используйте лучшую доступную модель: Качество анимации напрямую зависит от модели. Если у вас есть доступ к Claude Sonnet или Opus, используйте их вместо меньшей модели — разница в обработке тайминга, последовательности и пространственного мышления заметна.
• Называйте слои перед запросом: ИИ читает названия слоев, чтобы понять структуру вашей анимации. Хорошо названные слои, такие как left_arm, right_leg, bg_circle и text_headline, помогают ему нацеливаться на правильные элементы, избегать ошибок и оставаться организованным в сложных сценах. Общие названия, такие как Shape 1 или Group 4, затрудняют ИИ точную работу над вашим проектом.
• Разбивайте сложные анимации на шаги: Вместо «создай мне полную анимацию онбординга» работайте сцену за сценой. Создайте сцену → добавьте фигуры → добавьте ключевые кадры → уточните тайминг. Меньшие шаги дают больше контроля и упрощают обнаружение и исправление ошибок.
• Будьте конкретны в тайминге и ощущении: «Плавное затухание» — это расплывчато. «Затухание на 400 мс с ease-out» дает вашему ИИ, с чем работать. Чем точнее вы описываете ощущение — резкое, упругое, медленное и кинематографичное — тем ближе первый результат будет к тому, что вы представляете.