Lottie Creator MCP

Lottie Creator MCP

Conecta un asistente de IA a Lottie Creator a través del puente MCP local para crear, editar y animar usando indicaciones.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) permite que un asistente de navegador compatible use Creator directamente, sin este puente local. Está activado por defecto en navegadores compatibles. Sigue esta guía si quieres conectarte a través del servidor MCP local de Creator.

El Lottie Creator MCP lleva a tu asistente de IA directamente a tu flujo de trabajo de animación, brindándole herramientas para inspeccionar, construir y editar animaciones Lottie en LottieFiles Creator mediante lenguaje natural. Puedes consultar la instalación más abajo.

Los servidores MCP forman parte de una interfaz estandarizada para que los agentes de IA interactúen con fuentes de datos mediante el Model Context Protocol. El Lottie Creator MCP conecta asistentes de IA como Claude, Cursor y Windsurf a las herramientas de edición de Creator a través de un puente local.

Con el MCP habilitado, puedes:

✦ Crear animaciones desde cero

Describe lo que quieres — un indicador de carga, una barra de progreso, una animación de personaje — y tu IA lo construirá directamente en Creator, capa por capa.

✦ Editar y modificar animaciones existentes

Cambia colores, ajusta tiempos, intercambia curvas de easing, renombra capas o refactoriza una escena completa. Tu IA lee el estado actual de tu archivo y lo edita en tiempo real.

✦ Generar variaciones de animación por lotes

Produce automáticamente múltiples versiones de una animación a la vez — temas oscuros y claros, diferentes tamaños, variaciones de colores de marca.

✦ Analizar animaciones para accesibilidad y marca

Pide a tu IA que inspeccione animaciones para detectar problemas de contraste, velocidad de movimiento, consistencia de color o alineación con tus pautas de marca — y que corrija lo que encuentre.

✦ Integrar en tu flujo de trabajo de proyecto

Genera activos de animación sobre la marcha mientras trabajas en un proyecto más amplio.

Para usar el MCP, instálalo en tu cliente de IA y actívalo en LottieFiles Creator. Las secciones siguientes explican cada paso.

Requisitos previos

Antes de instalar, asegúrate de tener lo siguiente configurado:

✅ 📦 Node.js 18+: Necesario para ejecutar el paquete MCP mediante npx. Descargar Node.js →

✅ 🎬 LottieFiles Creator: Abre creator.lottiefiles.com en tu navegador y mantén esta pestaña abierta.

✅ 🤖 Una IA compatible con MCP: Claude, Cursor, Windsurf, VS Code Copilot o cualquier otro asistente compatible con MCP.

Primero, ve al archivo README del MCP de Creator donde puedes acceder a las cadenas y comandos del MCP.

Instalación del MCP

Para todas tus herramientas de IA, puedes usar la siguiente configuración:

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

Esta documentación cubre los pasos de instalación para algunos de nuestros clientes MCP compatibles. Para ver una lista de guías de instalación para clientes MCP compatibles, consulta la lista a continuación:

Clientes MCP compatibles

Sigue las instrucciones para tu cliente específico para instalar y conectar el Lottie Creator MCP. Algunos clientes también admiten skills, que añaden conocimientos de diseño de movimiento para que tu IA produzca animaciones más intencionales y pulidas. 🖇️ Aquí está el skill de diseño de movimiento de LottieFiles.

Sigue los pasos para tu cliente MCP:

---

**1. Abre la configuración de Claude Desktop**

Navega a **Configuración → Desarrollador** y haz clic en **"Editar configuración"**. Esto abre un archivo de configuración JSON en tu computadora que puedes editar en VS Code, Cursor o cualquier editor de texto.

<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. Añade la configuración del MCP**

Pega lo siguiente en el archivo de configuración dentro del objeto `mcpServers`. Es posible que necesites añadir o quitar corchetes/comas para mantener el JSON válido.

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

Así es como podría verse el archivo de configuración después de pegar la configuración anterior:

```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. Verifica que esté conectado**

Haz clic en el botón **"+"** en un chat, navega a **Conectores** y confirma que el interruptor de `lottiefiles-creator` esté activado.

<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. Ejecuta el siguiente comando en tu terminal**

Eso es todo. Claude Code instalará y registrará el MCP automáticamente.

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

#### **Usar el Lottie Creator MCP para Cursor**

1. Presiona `Cmd + Shift + P` (Mac) o `Ctrl + Shift + P` (Windows/Linux) → busca **"Cursor Settings"**
2. En la barra lateral ve a **Tools & MCPs**
3. Haz clic en **"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. Pega:

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

Guarda y **reinicia Cursor por completo** (sal y vuelve a abrir, no solo recargar)

Después del reinicio, ve a **Configuración → Tools & MCP** y deberías ver un punto verde junto a `lottiefiles-creator` confirmando que está conectado.

<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==" />

**Opción A: Instalación mediante enlace profundo**

1. Haz clic en el [enlace profundo del servidor MCP de LottieFiles.](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) Esto abrirá la configuración del MCP en VS Code.
2. Presiona el botón **Instalar**.

<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=" />

**Opción B: CLI o archivo de configuración**

O mediante CLI:

Terminal

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

O añádelo a tu `.vscode/mcp.json`:

JSON — .vscode/mcp.json

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

ℹ️ Necesitarás [GitHub Copilot](https://github.com/features/copilot) habilitado en tu cuenta para usar herramientas MCP en VS Code.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Sigue la documentación de configuración de MCP de Antigravity y usa la configuración anterior. Sigue la documentación de configuración de MCP de Cline y usa la configuración anterior. Sigue la [guía para configurar MCP](https://github.com/openai/codex/blob/main/docs/config.md) usando:

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

O añádelo mediante CLI:

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

1. Inicia `copilot` 2. Ejecuta `/mcp add` 3. Configura: - Nombre del servidor: `lottiefiles-creator` - Tipo de servidor: `Local` - Comando: `npx -y @lottiefiles/creator-mcp@latest` Sigue la documentación de configuración de MCP de VS Code y usa la configuración anterior. O mediante 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 ``` Sigue la documentación de configuración de MCP de Gemini Code Assist y usa la configuración anterior. Sigue la documentación de configuración de MCP de JetBrains y usa la configuración anterior. Sigue la documentación de configuración de MCP de Kiro y usa la configuración anterior. Sigue la documentación de configuración de MCP de Qoder y usa la configuración anterior. Añade un servidor MCP local con:

- Nombre: `lottiefiles-creator`
- Comando: `npx`
- Argumentos: `y @lottiefiles/creator-mcp@latest`

Sigue la documentación de configuración de MCP de Warp y usa la configuración anterior. Sigue la documentación de configuración de MCP de Windsurf y usa la configuración anterior.

Conexión a Lottie Creator

1. Abre Lottie Creator

Navega a creator.lottiefiles.com en tu navegador y mantén esta pestaña abierta durante toda tu sesión. El MCP se comunica con Creator a través de esta pestaña del navegador.

1. Habilita el MCP local en Creator

En Creator, ve a Configuración → Configuración de MCP → Habilitar MCP local.

1. Confirma la conexión

Deberías ver una notificación en Creator: Puente MCP local conectado

Si ves esto, estás listo para empezar a dar indicaciones. Ten en cuenta que la calidad de la animación depende en gran medida del modelo que estés usando, así que asegúrate de usar el mejor modelo disponible para ti.

Acerca de los Skills

Los skills proporcionan orientación sobre cómo un agente debe abordar tareas de animación, utilizando una combinación de llamadas a herramientas MCP y conocimientos profundos de diseño de movimiento integrados como instrucciones reutilizables.

Mientras que el Lottie Creator MCP expone herramientas individuales (crear una capa, establecer un keyframe, ajustar un relleno), los skills ayudan a tu IA a entender cómo usarlas bien. Cosas como saber qué curva de easing se adapta a un rebote frente a un fundido, cómo secuenciar una entrada de múltiples elementos o cómo estructurar el tiempo para que una animación se sienta intencional en lugar de mecánica.

Los skills no reemplazan la conexión MCP ni añaden nuevas herramientas. Reducen las conjeturas al empaquetar experiencia en diseño de movimiento en instrucciones que tu IA utiliza automáticamente cada vez que trabaja en animaciones.

Instala el skill de diseño de movimiento

Ejecuta este comando una vez en tu terminal. Funciona con más de 40 agentes, incluidos Claude Code, Cursor, Codex y GitHub Copilot.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Muy recomendado. La diferencia entre una IA que produce animaciones rígidas y mecánicas y una que produce movimiento pulido e intencional depende casi por completo de si tiene este contexto. Instálalo una vez y se aplica a cada sesión de animación.

Consulta el skill completo en GitHub → LottieFiles/motion-design-skill

Capacidades

Lottie Creator MCP, Motion Copilot y Lottie Creator WebMCP ofrecen las mismas capacidades de edición de Creator. Su configuración e interfaz de asistente difieren.

Área	Qué puedes pedir
Escenas y capas	Inspeccionar y crear escenas; cambiar tamaño, velocidad de fotogramas, duración o fondo de vista previa; renombrar, duplicar, agrupar, alinear, reordenar, ocultar o bloquear capas.
Formas y texto	Crear y editar rectángulos, elipses, polígonos, estrellas, trazados y texto; cambiar fuentes y estilos de texto; dividir texto en partes para animación.
Estilos y efectos	Ajustar rellenos y trazos sólidos o degradados; usar modos de fusión, sombras, desenfoque, efectos de color, máscaras y mates.
Animación y tiempos	Añadir, inspeccionar, cambiar, copiar o eliminar keyframes; ajustar easing; animar transformaciones, opacidad y color; usar rutas de movimiento, entradas escalonadas y reajuste de tiempos.
Activos e inspección de escena	Importar SVGs, animaciones Lottie e imágenes; convertir capas de imagen PNG o JPG a vectores; inspeccionar la escena y mover el cabezal de reproducción a un fotograma específico.
Temas y movimiento reutilizable	Crear y vincular ranuras de tokens de movimiento, actualizar sus valores y crear o cambiar temas. Encontrar y aplicar estilos guardados y presets de movimiento del Motion System de tu espacio de trabajo.
Segmentos e interactividad	Crear segmentos de animación con nombre, máquinas de estado, estados, transiciones y entradas; conectar eventos de clic, hover y estado a acciones.

El acceso a las funciones sigue tu espacio de trabajo y plan de Creator. Cuando la animación esté lista, usa los controles de exportación de Creator para guardar el resultado.

Mejores prácticas

• Instala la skill de motion design para mejor calidad: El MCP le da a tu IA las herramientas. La skill de motion design le da el criterio para usarlas bien: curvas de easing, principios de timing, coreografía. Un solo comando, resultados significativamente mejores. La skill de motion design se puede encontrar aquí.
• Empieza con tus propios SVGs y luego anima: La IA puede ser impredecible al generar formas de ilustración desde cero. Para obtener los mejores resultados, importa primero tus activos SVG existentes a Creator y luego pide a tu IA que los anime. Esto mantiene tu estilo visual consistente y permite que la IA se enfoque en lo que mejor hace: movimiento, timing y secuenciación.
  • Prueba estos enlaces de remix
    • Medalla: https://lottie.link/metal
    • Clima: https://lottie.link/weather
    • Gráfica: https://lottie.link/graph
    • Buzón: https://lottie.link/mailbox1
• Usa siempre el mejor modelo disponible: La calidad de la animación escala directamente con el modelo. Si tienes acceso a Claude Sonnet u Opus, úsalo en lugar de un modelo más pequeño: la diferencia en cómo maneja el timing, la secuenciación y el razonamiento espacial es notable.
• Nombra tus capas antes de dar instrucciones: La IA lee los nombres de tus capas para entender la estructura de tu animación. Capas bien nombradas como left_arm, right_leg, bg_circle y text_headline le ayudan a apuntar a los elementos correctos, evitar errores y mantenerse organizada en escenas complejas. Nombres genéricos como Shape 1 o Group 4 dificultan que la IA construya sobre tu trabajo con precisión.
• Divide las animaciones complejas en pasos: En lugar de "hazme una animación de onboarding completa", ve escena por escena. Crea la escena → añade formas → añade keyframes → refina el timing. Pasos más pequeños te dan más control y hacen que los errores sean más fáciles de detectar y corregir.
• Sé específico sobre el timing y la sensación: "Un fundido suave" es vago. "Un fundido de entrada de 400ms con ease-out" le da a tu IA algo con lo que trabajar. Cuanto más describas la sensación — ágil, elástica, lenta y cinematográfica — más cerca estará el primer resultado de lo que imaginas.