Lottie Creator MCP

Lottie Creator MCP

undefined

Lottie Creator MCP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установка MCP

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

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

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

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

Следуйте инструкциям для вашего конкретного клиента, чтобы установить и подключить Lottie Creator MCP. Некоторые клиенты также поддерживают навыки, которые добавляют знания по моушн-дизайну, чтобы ваш ИИ мог создавать более осмысленные и отточенные анимации. 🖇️ Вот навык моушн-дизайна 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: Установка по глубокой ссылке**

1. Нажмите на [глубокую ссылку LottieFiles MCP server.](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:

Terminal

```
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"]
    }
  }
}
```

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

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Следуйте документации Antigravity по настройке MCP и используйте конфигурацию выше. Следуйте документации Cline по настройке MCP и используйте конфигурацию выше. Следуйте [руководству по настройке 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` Следуйте документации VS Code по настройке MCP и используйте конфигурацию выше. Или через 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 ``` Следуйте документации Gemini Code Assist по настройке MCP и используйте конфигурацию выше. Следуйте документации JetBrains по настройке MCP и используйте конфигурацию выше. Следуйте документации Kiro по настройке MCP и используйте конфигурацию выше. Следуйте документации Qoder по настройке MCP и используйте конфигурацию выше. Добавьте локальный MCP-сервер с:

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

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

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

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

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

1. Включите MCP в Creator

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

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

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

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

О навыках

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

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

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

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

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

Terminal

npx skills add LottieFiles/motion-design-skill

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

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

Возможности

MCP предоставляет вашему ИИ полный доступ к Creator API. Вот все, что он может делать:

🎬 Управление сценами

• Создавать сцены — задавать имя, размер, частоту кадров, продолжительность
• Переключаться между сценами
• Устанавливать цвет фона (только для предпросмотра, не экспортируется)
• Считывать свойства сцены — слои, размер, частоту кадров
• Экспортировать сцены в Lottie JSON
• Импортировать Lottie JSON, dotLottie, SVG или изображения

🗂 Управление слоями

• Устанавливать видимость, состояние блокировки и фокус
• Управлять таймингом — начальный кадр, конечный кадр, смещение
• Устанавливать режимы наложения (16 режимов, включая multiply, screen, overlay)
• Применять и анимировать маски и матовые слои
• Выравнивать и отражать слои
• Анимировать трансформации — положение, поворот, масштаб, наклон

🔷 Создание фигур

• Прямоугольник — положение, размер, скругление углов
• Эллипс — положение, размер
• Многоугольник — точки, радиус, скругление
• Звезда — внутренний/внешний радиус, точки
• Путь — пользовательская кривая Безье с полным контролем касательных
• Группа — группировать существующие фигуры вместе

🎨 Заливки и обводки

• Сплошная цветная заливка — статический или анимированный RGB
• Линейная градиентная заливка — настраиваемые начальная/конечная точки
• Радиальная градиентная заливка — угол и длина подсветки
• Сплошные и градиентные обводки — с анимируемой шириной
• Обрезка путей — анимация рисования (начало %, конец %, смещение)

⏱️ Анимация и ключевые кадры

• Добавлять ключевые кадры на определенных кадрах со значениями
• Устанавливать статические значения (без анимации)
• Считывать, проверять и удалять ключевые кадры
• Устанавливать сглаживание — Linear или Cubic Bezier (x1, y1, x2, y2)
• Анимировать: положение, поворот, масштаб, непрозрачность, цвет, путь и многое другое

🖼 Ресурсы и воспроизведение

• Перечислять, клонировать и удалять ресурсы (сцены и изображения)
• Считывать свойства изображения — ширина, высота, URI в base64
• Воспроизводить, приостанавливать и переходить к определенным кадрам
• Считывать текущий кадр и состояние воспроизведения
• Считывать выбранные узлы и ключевые кадры

Скоро: State Machines и Motion Tokens

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

• Установите навык motion design для лучшего качества: MCP даёт вашему ИИ инструменты. Навык motion design даёт ему умение правильно их использовать — кривые плавности, принципы тайминга, хореографию. Одна команда — значительно лучший результат. Навык motion design можно найти здесь.
• Начинайте с собственных 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 мс с замедлением» даёт ИИ то, с чем можно работать. Чем больше вы описываете ощущение — резкое, упругое, медленное и кинематографичное — тем ближе первый результат будет к тому, что вы представляете.