Mejores servidores MCP de diseño: Figma, Mobbin, Stitch, Sleek

Un servidor MCP de diseño permite que un agente de código lea diseños, busque referencias de UI o genere pantallas a través del Model Context Protocol. Para un diseño existente en Figma, empieza con Figma. Para buscar referencias, usa Mobbin. Para crear nuevas pantallas de apps móviles en un proyecto editable, Sleek es una opción diseñada para ese trabajo.

Esta comparación cubre las funciones documentadas y las rutas de configuración de ocho proveedores para Claude Code y Cursor, verificadas el 28 de septiembre de 2026. Somos los creadores de Sleek. Las siguientes recomendaciones se basan en lo que hace cada integración, no en una clasificación de calidad basada en pruebas directas.

Puntos Clave

Elige según la tarea: leer un diseño, buscar referencias y generar pantallas requieren herramientas distintas.
El MCP remoto de Figma puede leer diseños y escribir en el lienzo. Su servidor de escritorio tiene un conjunto de funciones más limitado.
Mobbin ofrece referencias de productos reales. Stitch y Sleek pueden generar nuevas pantallas mediante servicios alojados.
Pencil y Paper permiten que un agente trabaje en un lienzo de diseño local. Mantén abierto el documento correspondiente para ese flujo de trabajo.
Sleek ofrece una prueba gratuita de su API con créditos otorgados una sola vez. El acceso continuo requiere Pro o Team; el plan Starter está excluido.

¿Qué es un servidor MCP de diseño?

Un servidor MCP de diseño expone las herramientas de un producto de diseño a un cliente de IA. El agente puede llamar a esas herramientas y recibir datos o imágenes sin pedirte que copies cada detalle en el chat. El protocolo proporciona la conexión; el servidor determina si el agente puede leer un archivo, buscar en un catálogo o modificar un diseño.

Un servidor alojado en la nube se conecta a través de una URL. Una integración local se conecta al software de tu computadora. Ninguna de las dos etiquetas te dice si puede generar pantallas. Consulta las operaciones disponibles antes de elegir un servidor.

¿Cómo se comparan los servidores MCP de diseño?

Figma es útil cuando necesitas trabajar con el diseño en Figma. Mobbin proporciona referencias de productos existentes. Stitch y Sleek ofrecen flujos de trabajo alojados para generar pantallas, mientras que Pencil y Paper conectan a un agente con un lienzo local. Algunas funciones se superponen, así que elige el tipo de resultado y el flujo de trabajo que necesitas en lugar de la lista de herramientas más larga.

Todos los detalles de acceso a continuación están actualizados a septiembre de 2026. Las fuentes de los proveedores y las instrucciones para cada cliente se encuentran después de la tabla.

Servidor	Lee diseños	Crea o edita pantallas	Búsqueda de referencias	Autenticación	Acceso o restricción de plan	Claude Code / Cursor
Figma remoto	Frames, variables, componentes	Sí, escritura en lienzo en beta	Sin catálogo de referencias	OAuth	Todos los planes y tipos de licencia, con límites de uso	Plugin o HTTP / plugin
Figma de escritorio	Contexto del diseño seleccionado	Escritura en lienzo solo en versión remota	Sin catálogo de referencias	Sesión de escritorio	Plan de pago con licencia Dev o Full	HTTP local / HTTP local
Google Stitch	Datos del proyecto y de las pantallas	Sí, pantallas generadas	No es su propósito principal	clave de API o OAuth	Consulta los límites actuales de tu cuenta	HTTP remoto / HTTP remoto
Mobbin	Imágenes de referencia	Sin herramienta de generación documentada	Pantallas, flujos, secciones web	OAuth	Pro, Team, Enterprise	Conector o HTTP / plugin
Sleek	HTML e imágenes de pantallas	Sí, pantallas de apps móviles	Referencias seleccionadas de Sleek	OAuth; opción alternativa con clave de API	Prueba gratuita; acceso continuo en Pro o Team	HTTP remoto / HTTP remoto
ScreensDesign	Pantallas y flujos de UX	Sí, generación basada en biblioteca	Biblioteca de apps de iOS y señales de ingresos	OAuth o clave de API con permisos limitados	Pro	HTTP remoto / HTTP remoto
AIDesigner	Diseños generados y contexto del canvas	Sí, HTML/CSS con Tailwind	Sin catálogo de referencias; acepta URL de sitios web	OAuth	Cuenta y créditos de generación	CLI o HTTP / CLI o HTTP
Pencil, ahora pen.dev	Documento .pen abierto	Sí, en el lienzo	Sin catálogo de referencias	Conexión con app local	Gratuito actualmente; costos del agente de código por separado	Integración de app / extensión de IDE
Paper	Documento abierto	Sí, lienzo HTML/CSS	Sin catálogo de referencias	Conexión con app local	Gratis: 100 llamadas MCP/semana; Pro: 1 millón/semana	Plugin / plugin

La tabla separa la generación de la búsqueda de referencias. El resultado de una búsqueda puede ayudar a un agente a entender un patrón de checkout, pero no es una pantalla de checkout nueva para tu app.

¿Qué hace el servidor MCP de Figma?

El MCP de Figma proporciona contexto de diseño para la implementación, incluyendo layout, variables y componentes. El servidor remoto también permite que los clientes compatibles creen y editen contenido nativo de Figma. Úsalo cuando el archivo de Figma sea la base sobre la que piensas trabajar o escribir. El servidor de escritorio sigue estando disponible para leer el contexto de un diseño local.

El centro de ayuda de Figma indica acceso remoto para todos los planes y tipos de licencia, acceso de escritorio para licencias Dev o Full de pago, y escritura gratuita en el lienzo durante la fase beta. El acceso no es ilimitado: la página de límites de uso de Figma concede al plan Starter hasta 20 llamadas a herramientas de lectura al mes, con límites más altos para licencias Dev y Full de pago.

Comandos comprobados el 2026-09-28.

La guía de instalación remota recomienda este plugin para Claude Code:

claude plugin install figma@claude-plugins-official

O añade solo el servidor:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Abre /mcp en Claude Code y autentícate. Para Cursor, la misma guía documenta este comando en el chat del agente:

/add-plugin figma

Para la opción de escritorio, activa el servidor MCP en el panel de inspección del Dev Mode de Figma. La guía de escritorio incluye este comando para Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

La configuración de escritorio para Cursor es:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Pega el enlace a un frame y pídele al agente que lo implemente. Ese es el punto de partida más claro cuando el layout ya está decidido. Las herramientas de escritura del servidor remoto también lo convierten en una opción cuando necesitas crear contenido directamente en Figma.

¿Qué hace el servidor MCP de Google Stitch?

Google Stitch ofrece una conexión MCP alojada para trabajar con proyectos de Stitch y generar pantallas a partir de texto. El diseño resultante se guarda dentro de un proyecto de Stitch. Sirve a desarrolladores que quieren usar el generador de diseño de Google desde su agente de código y obtener los datos de la pantalla como parte del mismo flujo de trabajo.

La guía de configuración del MCP de Stitch documenta la autenticación mediante clave de API y OAuth. La opción con clave de API utiliza una clave obtenida desde los ajustes de Stitch. El SDK oficial de Stitch también documenta el endpoint remoto, la generación y la obtención del HTML e imágenes de las pantallas.

Claude Code, usando la configuración con clave de API de la guía de instalación:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor, en .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Reemplaza el texto de relleno con tu clave y mantén ese archivo fuera del control de versiones. Revisa los límites actuales en tu cuenta de Stitch antes de planificar la generación en lote. La página de configuración es una guía de conexión.

Convierte tus ideas en diseños de app

¿Qué hace el servidor MCP de Mobbin?

El MCP de Mobbin permite que el agente busque interfaces de productos reales y reciba imágenes de las pantallas. Es útil antes de diseñar un flujo o implementar un patrón sobre el que aún no te has decidido. Sus herramientas documentadas buscan material existente; no generan el diseño de una nueva app. El resultado es material de referencia para tomar tu siguiente decisión.

La introducción de Mobbin confirma autenticación OAuth y acceso en los planes Pro, Team y Enterprise. Su lista de herramientas incluye pantallas, flujos y secciones de sitios web. Las URL de las imágenes en alta resolución caducan después de 30 días.

La guía de Claude Code de Mobbin recomienda configurar primero el conector verificado en Claude Desktop o en la web. También documenta esta alternativa exclusiva para CLI:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Luego abre /mcp, selecciona Mobbin y autentícate.

Para Cursor, los pasos de configuración del proveedor utilizan el plugin de su Marketplace en lugar de un fragmento de JSON:

Abre el plugin de Mobbin en el Marketplace de Cursor y selecciona Add to Cursor.
Selecciona Add Plugin.
En Cursor, abre Customize, luego Installed y después Mobbin.
Selecciona Authenticate e inicia sesión.

Pide una referencia concreta, como pantallas de onboarding de apps bancarias. Elige los patrones más útiles antes de pedirle a un generador o agente de código que implemente tu propio flujo.

¿Qué hace el servidor MCP de Sleek?

El MCP de Sleek permite que un agente genere pantallas editables para apps de iOS y Android dentro de un proyecto de Sleek. El agente puede obtener el HTML de la pantalla, renderizar imágenes y devolver un enlace al proyecto para su revisión. Úsalo cuando el diseño de la app móvil sea el paso que falta entre tu brief y el código que quieres que escriba el agente.

El README del MCP de Sleek documenta un servidor alojado, inicio de sesión con OAuth y exportaciones a Figma y código. Proporciona al agente el brief completo de la app en un solo mensaje para que Sleek pueda planificar el conjunto de pantallas de forma integrada. La generación consume créditos del espacio de trabajo; la lectura y el renderizado no lo hacen.

Claude Code:

claude mcp add --transport http sleek https://sleek.design/api/mcp

Abre /mcp, selecciona Sleek y completa la autenticación en el navegador. Para Cursor, añade lo siguiente a .cursor/mcp.json para un solo proyecto o a ~/.cursor/mcp.json para todos los proyectos:

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

Activa el servidor e inicia sesión. El README recomienda OAuth; las claves de API son la opción alternativa para los clientes que no son compatibles con OAuth.

Las cuentas gratuitas pueden probar la API con 60 créditos otorgados una sola vez. Entre los planes de suscripción públicos, el acceso continuo a la API y al agente requiere Pro o Team, no Starter. Pro cuesta $69 al mes o $360 al año con 20.000 créditos mensuales a septiembre de 2026. Las exportaciones a Figma y a código están incluidas en todos los planes, mientras que las exportaciones del plan Free están limitadas a las pantallas desbloqueadas.

El README del MCP estima unos 30 créditos por cada pantalla nueva y entre 5 y 30 por edición. Solo puede haber una ejecución de diseño activa por proyecto. La llamada a design espera hasta 270 segundos y luego devuelve un estado de ejecución si es necesario; el agente debe consultar periódicamente get_design_run en lugar de enviar el brief de nuevo.

Sleek produce diseños y código de UI exportable. Tu agente de código todavía debe conectar los datos y el comportamiento de la app, y adaptar el código de la pantalla si estás construyendo con React Native o SwiftUI. Si prefieres un flujo de trabajo con API REST, la guía de skills de diseño de UI para Claude Code explica la instalación independiente de la skill de Sleek.

¿Qué hace el servidor MCP de ScreensDesign?

El MCP de ScreensDesign combina la investigación de apps para iOS con la generación de pantallas. Su página de MCP incluye una biblioteca de más de 2.715 apps de mayor recaudación, flujos completos de UX, señales de ingresos y herramientas que generan pantallas a partir de esas referencias a septiembre de 2026. Encaja con un brief que comienza examinando patrones móviles existentes.

El acceso al MCP requiere ScreensDesign Pro. El servidor alojado admite OAuth o claves de API con permisos limitados. Para Claude Code, agrega el endpoint HTTP y autentícate a través de /mcp:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Para Cursor, agrega esto a .cursor/mcp.json y luego conecta el servidor:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Usa la guía paso a paso de configuración del proveedor para realizar la configuración específica de tu cuenta. Las señales de ingresos describen las apps de referencia; no demuestran que copiar una pantalla vaya a mejorar la tasa de conversión de tu app.

¿Qué hace el servidor MCP de AIDesigner?

El MCP de AIDesigner genera y perfecciona diseños en HTML/CSS con Tailwind para viewports móviles o de escritorio. Puede usar el contexto del repositorio y compartir los resultados con su canvas. Elígelo cuando quieras código de interfaz generado que se adapte a tu proyecto existente, e inspecciona el resultado antes de darlo por definitivo.

La guía de configuración oficial ofrece una CLI que configura el servidor y las instrucciones del agente. Ejecuta esto en la raíz de tu proyecto para Claude Code:

npx -y @aidesigner/agent-skills init

Para Cursor, selecciona el host de forma explícita:

npx -y @aidesigner/agent-skills init cursor

Ambos se conectan a https://api.aidesigner.ai/api/v1/mcp. Completa el inicio de sesión con OAuth desde el panel de MCP del cliente. La generación consume créditos de la cuenta; revisa tu saldo antes de ejecutar varias variaciones. El resultado documentado es HTML de la interfaz, no una app móvil nativa completa.

¿Qué hace el servidor MCP de Pencil?

Pencil, ahora pen.dev, conecta a un agente con el documento .pen abierto en su app de escritorio o extensión de IDE. El agente puede inspeccionar y modificar ese lienzo mientras tú trabajas en el mismo archivo. Esto sirve a desarrolladores que desean tener un documento de diseño junto a su repositorio y un flujo de trabajo de edición local e interactivo.

La documentación de integración de IA describe una conexión stdio local con la app. La guía de instalación proporciona estos pasos para Claude Code en lugar de una URL que puedas usar en cualquier equipo:

Abre un documento .pen en pen.dev.
Activa Claude Code CLI en Settings y luego en MCP.
Inicia o reinicia Claude Code.
Ejecuta /mcp y confirma que pencil está conectado.

Para Cursor, usa la ruta documentada para la extensión de IDE:

Abre Extensions y busca pen.dev.
Instala la extensión.
Crea o abre un archivo .pen.

La página de precios indica que pen.dev es gratuito a fecha de septiembre de 2026. Eso no incluye la suscripción independiente de tu agente de código. Mantén abierto el documento para este flujo de trabajo con MCP; no intentes adivinar un endpoint alojado ni uses una ruta al ejecutable copiada de la máquina de otra persona.

¿Qué hace el servidor MCP de Paper?

El MCP de Paper permite que un agente lea y edite un documento de diseño de Paper construido con HTML y CSS. Admite un flujo de trabajo con lienzo compartido: el agente modifica el diseño, tú lo inspeccionas y el agente puede usar el resultado durante la implementación. Paper Desktop debe estar ejecutándose y tener un archivo abierto para realizar estas operaciones en el documento.

La guía del MCP de Paper documenta la instalación de estos plugins. Primero instala y abre Paper Desktop. Para Claude Code, ejecuta:

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Luego abre Claude Code y consulta /mcp. Para Cursor, ejecuta esto en el panel del agente:

/add-plugin paper-desktop

Recarga Cursor si el servidor no aparece. La antigua configuración HTTP de localhost en Paper aún funciona, pero los plugins actuales usan el CLI de Paper. El CLI puede exponer herramientas mientras Desktop está cerrado; la lectura y escritura de documentos siguen requiriendo la aplicación.

La página de precios de Paper indica 100 llamadas MCP a la semana en el plan Free y 1 millón a la semana en el plan Pro a septiembre de 2026. Pro cuesta $20 por editor al mes, o $16 por editor al mes si se factura anualmente. El límite de llamadas a herramientas no equivale al número de pantallas: una sola tarea de diseño puede requerir varias llamadas.

¿Qué servidor MCP de diseño deberías usar?

Usa Figma para implementar un diseño existente en Figma, Mobbin para encontrar referencias y Sleek para generar pantallas móviles dentro de un proyecto que puedas revisar y exportar. Stitch es otra opción de generación alojada. Elige Pencil o Paper cuando quieras que un agente y un lienzo local trabajen en el mismo documento de diseño.

Empieza por la tarea inmediata. Si tu compañero de equipo ya te entregó un frame de Figma, un segundo generador añade una decisión de diseño que tal vez no necesites. Si no tienes un layout, las referencias pueden ayudarte a decidir qué debe ir en la pantalla antes de generarla. Para el brief de una nueva app móvil, conecta tu agente a Sleek e inspecciona las pantallas resultantes antes de implementarlas. La prueba gratuita cubre aproximadamente una ejecución de diseño; Pro admite el uso continuo.

Proporciona al agente las reglas de marca existentes como parte del brief. La biblioteca DESIGN.md ofrece pautas de diseño por escrito que puedes usar junto con estas herramientas; es una entrada independiente de la conexión MCP.

Para conocer opciones además de las integraciones con agentes, consulta la clasificación de herramientas de diseño de apps móviles con IA y las alternativas a Claude Design.

Preguntas frecuentes

¿El servidor MCP de Figma es gratuito?

El servidor remoto de Figma está disponible en todos los planes y tipos de licencia, con límites de uso. El plan Starter ofrece hasta 20 llamadas a herramientas de lectura al mes a septiembre de 2026. El acceso de escritorio requiere una licencia Dev o Full en un plan de pago. La escritura en lienzo es gratuita durante la fase beta.

¿El MCP de Mobbin genera pantallas nuevas?

Sus herramientas documentadas buscan pantallas, flujos y secciones web existentes. Devuelven imágenes de referencia para tu agente, pero no crean el diseño de una nueva app.

¿Puedo conectar más de un servidor MCP de diseño?

Sí. Conecta herramientas que realicen tareas distintas, como buscar referencias y generar diseños. Especifica qué servicio debe usar el agente en cada paso para que el flujo de trabajo deseado sea claro.

¿El MCP de Sleek funciona en el plan Starter?

No. El plan Starter no incluye acceso a la API. Las cuentas gratuitas pueden probar la API con créditos de prueba otorgados una sola vez. El acceso continuo está incluido en Pro y Team; Pro cuesta $69 al mes o $360 al año a septiembre de 2026.

¿Pencil y Paper necesitan tener una app local abierta?

Para los flujos de trabajo de edición de documentos con MCP descritos aquí, sí. Pencil funciona con un documento .pen abierto en la app de escritorio o extensión de IDE. Paper necesita tener Desktop ejecutándose y un archivo abierto para leer y escribir documentos, aunque su CLI pueda exponer herramientas mientras Desktop está cerrado.

¿En qué se diferencia un servidor MCP de diseño de una skill de diseño?

Un servidor MCP expone herramientas a las que el agente puede llamar. Una skill proporciona instrucciones y puede incluir scripts o guías sobre la API. Sleek admite ambas opciones: su MCP se conecta mediante OAuth, mientras que su skill le enseña al agente a usar la API REST.

Los mejores servidores MCP de diseño para Claude Code y Cursor