Lottie Creator MCP
oficialEl Lottie Creator MCP integra tu asistente de IA directamente en tu flujo de trabajo de animación, otorgándole acceso completo a LottieFiles Creator para que pueda crear y editar animaciones Lottie en tu nombre mediante lenguaje natural.
Documentación
Lottie Creator MCP
undefined
Lottie Creator MCP
El Lottie Creator MCP lleva a tu asistente de IA directamente a tu flujo de trabajo de animación — dándole acceso completo a LottieFiles Creator para que pueda construir y editar animaciones Lottie en tu nombre 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 usando el Model Context Protocol. El Lottie Creator MCP conecta asistentes de IA como Claude, Cursor y Windsurf a la API de Creator a través de un puente local — lo que significa que tu IA obtiene el mismo acceso completo a Creator que tú.
Con el MCP habilitado, puedes:
✦ Crear animaciones desde cero
Describe lo que quieres — un spinner 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 variantes 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 color de marca.
✦ Analizar animaciones para accesibilidad y marca
Pide a tu IA que inspeccione animaciones en busca de problemas de contraste, velocidad de movimiento, consistencia de color o alineación con tus directrices de marca — y que arregle lo que encuentre.
✦ Integrar en tu flujo de trabajo de proyecto
Genera recursos 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 habilítalo en LottieFiles Creator. Las secciones siguientes guían a través de cada paso.
Requisitos previos
Antes de instalar, asegúrate de tener lo siguiente configurado:
✅ 📦 Node.js 18+: Necesario para ejecutar el paquete MCP a través de 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 con soporte MCP.
Primero, ve al archivo README de Creator MCP donde puedes acceder a las cadenas y comandos MCP.
Instalando el 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 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 soportan skills, que añaden conocimiento de diseño de movimiento para que tu IA pueda producir animaciones más intencionadas y pulidas. 🖇️ Aquí está la 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 Config"**. 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 MCP**
Pega lo siguiente en el archivo de configuración dentro del objeto `mcpServers`. Puede que necesites añadir o eliminar 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 `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" />
Eso es todo. Claude Code instalará y registrará el MCP automáticamente.
```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
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 completamente Cursor** (cierra y vuelve a abrir - no solo recargar)
Después de reiniciar, ve a **Settings → 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==" />
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 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 vía CLI:
Terminal
```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```
O añade 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.
```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```
O añade vía CLI:
```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```
```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```
- Nombre: `lottiefiles-creator`
- Comando: `npx`
- Argumentos: `y @lottiefiles/creator-mcp@latest`
Conectando a Lottie Creator
- 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.
- Habilita MCP en Creator
En Creator, ve a Configuración → Ajustes MCP → Habilitar MCP.
- Confirma la conexión
Deberías ver una notificación en Creator: Puente MCP local conectado
Si ves esto, ¡está todo listo y preparado para empezar a pedir! 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 las Skills
Las Skills proporcionan orientación sobre cómo un agente debe abordar las tareas de animación — usando una combinación de llamadas a herramientas MCP y un profundo conocimiento de diseño de movimiento incorporado como instrucciones reutilizables.
Mientras que el Lottie Creator MCP expone herramientas individuales (crear una capa, establecer un fotograma clave, ajustar un relleno), las 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 desvanecimiento, cómo secuenciar una entrada de múltiples elementos, o cómo estructurar el tiempo para que una animación se sienta intencionada en lugar de mecánica.
Las 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.
Instalar la skill de diseño de movimiento
Ejecuta este comando una vez en tu terminal. Funciona con más de 40 agentes incluyendo Claude Code, Cursor, Codex y GitHub Copilot.
Terminal
npx skills add LottieFiles/motion-design-skill
✨ Altamente recomendado. La diferencia entre una IA que produce animaciones rígidas y mecánicas y una que produce movimiento pulido e intencionado depende casi por completo de si tiene este contexto. Instálalo una vez y se aplica a cada sesión de animación.
Ver la skill completa en GitHub → LottieFiles/motion-design-skill
Capacidades
El MCP le da a tu IA acceso completo a la API de Creator. Aquí está todo lo que puede hacer:
🎬 Gestión de Escenas
- Crear escenas — establecer nombre, tamaño, velocidad de fotogramas, duración
- Cambiar entre escenas
- Establecer color de fondo (solo vista previa, no exportado)
- Leer propiedades de escena — capas, tamaño, velocidad de fotogramas
- Exportar escenas a Lottie JSON
- Importar Lottie JSON, dotLottie, SVG o imágenes
🗂 Gestión de Capas
- Establecer visibilidad, estado de bloqueo y foco
- Controlar tiempo — fotograma inicial, fotograma final, desplazamiento
- Establecer modos de fusión (16 modos incluyendo multiplicar, pantalla, superponer)
- Aplicar y animar máscaras y mattes
- Alinear y voltear capas
- Animar transformaciones — posición, rotación, escala, sesgo
🔷 Creación de Formas
- Rectángulo — posición, tamaño, redondez de esquinas
- Elipse — posición, tamaño
- Polígono — puntos, radio, redondez
- Estrella — radio interior/exterior, puntos
- Ruta — bezier personalizado con control total de tangentes
- Grupo — agrupar formas existentes juntas
🎨 Rellenos y Trazos
- Relleno de color sólido — RGB estático o animado
- Relleno de gradiente lineal — puntos de inicio/fin personalizados
- Relleno de gradiente radial — ángulo de resalte y longitud
- Trazos sólidos y de gradiente — con ancho animable
- Recortar rutas — animar dibujo (inicio %, fin %, desplazamiento)
⏱️ Animación y Fotogramas Clave
- Añadir fotogramas clave en fotogramas específicos con valores
- Establecer valores estáticos (sin animación)
- Leer, inspeccionar y eliminar fotogramas clave
- Establecer easing — Lineal o Bezier Cúbico (x1, y1, x2, y2)
- Animar: posición, rotación, escala, opacidad, color, ruta y más
🖼 Recursos y Reproducción
- Listar, clonar y eliminar recursos (escenas e imágenes)
- Leer propiedades de imagen — ancho, alto, URI base64
- Reproducir, pausar y saltar a fotogramas específicos
- Leer fotograma actual y estado de reproducción
- Leer nodos seleccionados y fotogramas clave
Próximamente: Máquinas de Estado y Motion Tokens
Mejores prácticas
- Instala la habilidad de diseño de movimiento para obtener mejor calidad: El MCP le da a tu IA las herramientas. La habilidad de diseño de movimiento le da el criterio para usarlas bien — curvas de aceleración, principios de temporización, coreografía. Un solo comando, resultados significativamente mejores. La habilidad de diseño de movimiento se encuentra aquí.
- Comienza 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, primero importa 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 concentre en lo que hace mejor: movimiento, temporización y secuenciación.
- Prueba estos enlaces de remezcla
- Medalla: https://lottie.link/metal
- Clima: https://lottie.link/weather
- Gráfico: https://lottie.link/graph
- Buzón: https://lottie.link/mailbox1
- Prueba estos enlaces de remezcla
- 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 la temporización, secuenciación y 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_circleytext_headlinele ayudan a apuntar a los elementos correctos, evitar errores y mantenerse organizada en escenas complejas. Nombres genéricos comoShape 1oGroup 4dificultan que la IA construya sobre tu trabajo con precisión. - Divide las animaciones complejas en pasos: En lugar de "construye una animación de incorporación completa", ve escena por escena. Crea la escena → agrega formas → agrega fotogramas clave → refina la temporización. Los 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 la temporización y la sensación: "Un fundido suave" es vago. "Un fundido de entrada de 400ms con desaceleración" 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 se acercará el primer resultado a lo que estás imaginando.