Anima MCP Server

Conecta agentes de codificación de IA con Anima Playground, diseños de Figma y el sistema de diseño de tu equipo. Reduce la brecha entre prototipos y código de producción.

GitHub
6
Prueba este MCPPatrocinado

Documentación

Guía del Servidor MCP de Agent Grid

Agent Grid es un hub gobernado, creado por Anima, donde los agentes de IA construyen, alojan, publican y comparten aplicaciones web. Este repositorio es la guía del servidor MCP y la habilidad que enseña a tu agente de codificación a usarlo: instálalo como un plugin de Claude Code, una habilidad de Codex o un servidor MCP simple.

Agent Grid vive en app.agentgrid.io. Para la documentación completa, consulta nuestra documentación de ayuda.

Lo que tu agente puede hacer

  • Crear una aplicación a partir de un prompt, un sitio web o un diseño de Figma — descríbelo, clona una URL o entrega marcos de Figma, y obtén una aplicación en funcionamiento en una URL en vivo.
  • Alojar código que ya tienes — importa un proyecto o inicia un repositorio vacío y haz push.
  • Editar cualquier artefacto mediante git — cada artefacto es un repositorio git real; clona, haz commit, haz push.
  • Publicar en una URL pública en vivo — y retirarla cuando quieras.
  • Generar código consciente del diseño en tu propio código base — marcos de Figma a archivos en tu repositorio, adaptados a tu stack.

Todo es un artefacto: un repositorio git en el espacio de trabajo de tu equipo, identificado por su sessionId.

Inicio rápido: plugin de Claude Code

/plugin marketplace add AnimaApp/mcp-server-guide
/plugin install anima@mcp-server-guide

Esto configura el servidor MCP e instala la habilidad. Autentícate cuando se te solicite. Eso es todo.

Instalación y configuración

Requisitos

  • Una herramienta de codificación de IA compatible con MCP — Claude Code, Codex, Cursor, VS Code o cualquier cosa que hable HTTP transmisible
  • Una cuenta de Agent Grid

URL del servidor: https://api.agentgrid.io/v1/mcp · Transporte: HTTP transmisible

Claude Code (manual)

  1. En tu terminal (no dentro de Claude Code):
claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp
  1. Reinicia Claude Code
  2. Ejecuta /mcp, selecciona anima y autentícate en el navegador
  3. (Opcional) Conecta Figma durante la autenticación para habilitar los flujos de Figma

Gestiona los servidores con claude mcp list, claude mcp get anima, claude mcp remove anima. Consulta la documentación de MCP de Anthropic.

OpenAI Codex

codex mcp add anima --url https://api.agentgrid.io/v1/mcp

O en ~/.codex/config.toml:

[mcp_servers.anima]
url = "https://api.agentgrid.io/v1/mcp"

Luego instala la habilidad (recomendado):

codex skill install AnimaApp/mcp-server-guide/skills/anima

Consulta la documentación de MCP de Codex de OpenAI.

VS Code

  1. Cmd Shift P / Ctrl Shift P → MCP: Add Server
  2. Selecciona HTTP
  3. URL: https://api.agentgrid.io/v1/mcp
  4. ID del servidor: anima
  5. Elige el ámbito global o del espacio de trabajo
{
  "servers": {
    "anima": {
      "type": "http",
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

[!NOTA] MCP en VS Code requiere GitHub Copilot. Consulta la documentación de VS Code.

Cursor

Cursor > Configuración > Configuración de Cursor > MCP > + Agregar nuevo servidor MCP global:

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

Haz clic en Conectar para autenticarte. Consulta la documentación de Cursor.

Cualquier otro cliente

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

¿Sin MCP? Usa la CLI

La CLI de Anima ejecuta las mismas herramientas desde una terminal — sin necesidad de configurar un servidor MCP:

npx @animaapp/cli@latest login
npx @animaapp/cli@latest create -t p2c -p "SaaS dashboard with sidebar and analytics"

Cómo dar instrucciones a tu agente

Crear algo nuevo

"Créame un panel de análisis SaaS con una barra lateral, tarjetas KPI y un feed de actividad."

Tu agente crea un artefacto, espera la compilación y te entrega una URL de vista previa en vivo. Pide variantes y puede generar varias en paralelo para comparar.

Clonar un sitio o implementar un diseño de Figma como aplicación en vivo

"Clona stripe.com/payments en una aplicación." "Convierte este marco de Figma en un sitio funcional: https://figma.com/design/..."

Editar un artefacto existente

"El encabezado en https://app.agentgrid.io/artifacts/xyz está roto en móvil — arréglalo."

El agente clona el repositorio git del artefacto, lo corrige y hace push. Los cambios de contenido siempre pasan por git.

Implementar un diseño de Figma en tu propio código base

"Implementa este diseño de Figma en mi proyecto: https://figma.com/design/..."

El agente genera código adaptado a tu stack y usa las capturas de diseño devueltas como referencia visual.

Publicar

"Publícalo."

Publicar hace que una aplicación sea pública para el mundo — no es necesario solo para compartir, ya que la URL del artefacto ya es visible.

Acceso al sistema de diseño (Enterprise)

"Implementa un formulario de inicio de sesión siguiendo nuestro sistema de diseño, usando esta URL de Figma: ..."

La configuración del sistema de diseño se realiza con nuestro equipo. Contáctanos para configurarlo.

Mejores prácticas

Describe la intención, no el CSS. Agent Grid es consciente del diseño; los valores hexadecimales y las dimensiones en píxeles en un prompt anulan eso y producen resultados genéricos. Di para qué es, para quién es y las 3–5 características que importan.

Sé específico al implementar. "Implementa el formulario de inicio de sesión usando nuestros componentes existentes Button y Input de src/components/ui" es mejor que "implementa este diseño".

Divide los diseños grandes. Primero el encabezado, luego la cuadrícula de tarjetas, luego el pie de página. Las solicitudes enfocadas son más precisas.

Solución de problemas

Los problemas comunes — generación asíncrona, validación de tipo de creación, expiración del token git, semántica de publicación — están cubiertos en la referencia de solución de problemas de la habilidad.

MCP no reconocido: confirma que el servidor esté configurado en tu herramienta y que la autenticación se haya completado. Problemas de autenticación: elimina y vuelve a agregar el servidor, borra las cookies, reinicia tu cliente.

Qué hay en este repositorio

RutaPropósito
skills/anima/SKILL.mdLa habilidad que tu agente lee
skills/anima/references/Referencia de herramientas, configuración, flujo de trabajo git, ejemplos, solución de problemas
.claude-plugin/Plugin de Claude Code y manifiestos del marketplace
.mcp.jsonServidor MCP que instala el plugin
server.jsonEntrada del Registro MCP
anima/SKILL.mdEspejo de la habilidad, mantenido en sincronía por CI

Recursos adicionales