Un ranking de los servidores MCP que dan a los agentes de IA acceso real a las herramientas de diseño. Compara el servidor oficial de Figma, Framelink, Canva, Penpot, Blender, Storybook, shadcn/ui y Playwright, y luego configura la generación de imágenes y video directamente desde tu agente.
Tu asistente de IA ya sabe escribir una landing page decente. Lo que no puede hacer por sí solo es abrir tu archivo de Figma, revisar el kit de marca de Canva o mirar el botón que acabas de publicar y decirte que el padding está mal. Los servidores de Model Context Protocol (MCP) cierran esa brecha. Cada uno es un pequeño conector que le da a un agente de IA una capacidad concreta: leer este frame, editar aquella diapositiva, construir esta escena 3D, navegar por esa página.
Este ranking selecciona los servidores MCP que merecen un lugar en el equipo de un diseñador. Empieza con las opciones de Figma, pasa a las herramientas que las rodean y termina con la pieza que la mayoría de listas omite: las imágenes y los videos que llenan los diseños. Cada entrada explica qué hace el servidor, dónde se queda corto y quién debería instalarlo.
MCP es un protocolo abierto que permite a un cliente de IA (Claude, Cursor, VS Code, ChatGPT y otros) comunicarse con herramientas externas a través de una interfaz estándar. Un servidor publica una lista de herramientas, como "leer este frame de Figma" o "generar una imagen", y el cliente decide cuándo llamarlas. Instalas un servidor una vez, y cualquier cliente compatible con MCP puede usarlo.
Los servidores vienen en dos variantes:
npx o uvx, y se comunican con una aplicación que tienes abierta, como Blender.mcp.figma.com/mcp, y la primera vez inicias sesión desde tu navegador.
💡 Consejo: Ordena un solo archivo antes de conectar nada. Pon nombre a tus capas, convierte las formas repetidas en componentes y guarda los colores en variables. Los agentes leen la estructura, y una página llena de capas "Frame 1042" no les da nada con qué trabajar.
Figma es donde vive la mayor parte del diseño de producto, así que ahí es donde MCP ha avanzado más rápido. Dos servidores merecen atención, y resuelven problemas distintos.
Figma ofrece su propio servidor MCP remoto en https://mcp.figma.com/mcp. Lo conectas desde un cliente como Claude Code, Cursor, VS Code o Windsurf, inicias sesión con tu cuenta de Figma, y el agente puede extraer contexto de diseño en vivo de tus archivos: layout, componentes, variables y estilos. Figma también incluye a Android Studio, Replit y Warp entre sus socios.
Va más allá de la lectura. El servidor puede crear y modificar contenido nativo en Figma Design y FigJam, incluidos frames, componentes, variables, auto layout, notas adhesivas, conectores y formas. También lee archivos de Figma Make, así que un agente puede ver el código detrás de un prototipo en lugar de una imagen renderizada. Además funciona con Code Connect, la función que asigna los componentes de Figma a los componentes reales de tu base de código, para que el código generado reutilice lo que tu equipo ya publica.
Ideal para: diseñadores de producto que pasan el trabajo a los desarrolladores y quieren que el código generado use los componentes reales del equipo.
Ojo con: Figma marcó estas funciones como beta cuando anunció el servidor remoto, así que el comportamiento de las herramientas puede cambiar. Revisa tu plan y el tipo de asiento en el centro de ayuda de Figma antes de implementarlo en todo un equipo.
El servidor de Framelink (el proyecto Figma-Context-MCP en GitHub) sigue otro camino. Se ejecuta en local y llama a la API de Figma con un token de acceso personal que creas en la configuración de tu cuenta de Figma. Antes de que el agente vea algo, el servidor simplifica la respuesta de la API para que solo llegue al modelo la información de layout y estilo más relevante. Menos ruido en el contexto significa respuestas más precisas y menos tokens desperdiciados.
Ideal para: desarrolladores que quieren convertir un frame en código de front end con el espaciado y los estilos correctos, dentro de Cursor u otro agente de programación.
Ojo con: se centra en leer diseños y obtener recursos, así que no esperes que edite tu lienzo. Trata el token como si fuera una contraseña.
Elige el servidor oficial si tu equipo trabaja en Figma y quiere acceso de escritura, Code Connect y soporte para Make. Elige Framelink si prefieres una configuración ligera basada en token que se mantenga dentro de tus propias herramientas. Instala uno primero. Usar los dos le da al agente dos herramientas que se solapan para la misma tarea y hace sus decisiones más difíciles de predecir.
Canva ofrece un servidor MCP que permite a los asistentes de IA acceder a tu espacio de trabajo: tus diseños, recursos de marca y plantillas. Canva lo lanzó junto con un conector para ChatGPT, con la idea de que puedas pedir un diseño, obtenerlo y seguir editándolo en la misma conversación. Entre las acciones documentadas están crear y editar diseños, buscar en la biblioteca de plantillas, gestionar recursos de marca y exportar en varios formatos. Consulta la página de conectores de IA de Canva para ver la lista actual de asistentes y acciones compatibles.
Ideal para: equipos de marketing y pequeños equipos que ya trabajan en Canva y quieren que un agente redacte diez variaciones de una publicación para redes sociales a partir de un solo brief.
Ojo con: el agente trabaja con los bloques de construcción propios de Canva. La ilustración personalizada compleja o el trabajo fotográfico todavía necesitan una herramienta específica.
Penpot es la herramienta de diseño de código abierto, y su equipo ha estado experimentando con un servidor MCP. El enfoque es poco habitual. En lugar de un menú largo de herramientas específicas, el agente recibe un puñado, y la principal ejecuta JavaScript dentro del entorno de plugins de Penpot con acceso a la API de plugins completa. También existen servidores de la comunidad para instancias autoalojadas, que permiten a un agente leer, crear, modificar y exportar elementos de diseño.
Ideal para: equipos que necesitan autoalojamiento y control total de sus datos de diseño.
Ojo con: su estado experimental. Prueba primero en un archivo desechable, porque un agente que puede ejecutar código también puede romper un layout.
El proyecto blender-mcp de la comunidad, de ahujasid, combina un complemento para Blender con un servidor MCP en Python. Claude u otro cliente puede crear, cambiar y eliminar objetos, asignar materiales, tomar capturas del viewport y ejecutar Python dentro de Blender. También puede traer recursos de Poly Haven, Sketchfab, Hyper3D y Hunyuan3D. Necesita Blender 3.0 o posterior y Python 3.10 o posterior.
Ideal para: visualización de producto y bloqueo rápido de escenas, cuando el agente monta un suelo, las luces y una cámara mientras tú diriges el arte.
Ojo con: la herramienta de ejecución de código corre Python arbitrario en tu escena. Guarda tu archivo primero y trabaja sobre una copia.
El diseño se desvía en el momento en que llega al código. Estos tres servidores devuelven la interfaz publicada hacia el diseño.
Storybook MCP le da a un agente contexto específico de tu proyecto sobre tus componentes: qué existe, qué props aceptan y cómo están documentados. También expone las herramientas de pruebas de Storybook, así que el agente puede comprobar y corregir su propio resultado. El resultado práctico es una interfaz generada que reutiliza tu Button existente en lugar de inventar uno nuevo.
Ideal para: equipos con una biblioteca de componentes madura.
Ojo con: la documentación escasa. Si tus stories están vacías, el contexto también lo estará.
El servidor MCP oficial de shadcn permite a un asistente explorar, buscar e instalar componentes de registros, incluido el público, bibliotecas privadas de empresa y fuentes de terceros. Ejecuta npx shadcn@latest mcp init --client claude en tu proyecto, reinicia tu cliente y pide "una tabla de precios que use los componentes card y badge". Para los diseñadores que prototipan en código, es la forma más rápida de tener componentes reales y accesibles en pantalla.
Ideal para: equipos de React y Next.js que construyen sobre componentes de shadcn.
El Playwright MCP de Microsoft le da a un agente un navegador real. Trabaja a partir de instantáneas estructuradas de accesibilidad en lugar de píxeles en bruto, así que hacer clic y escribir es rápido y predecible, y puede tomar capturas de pantalla cuando quieras una prueba visual. Pídele que abra tu página de staging, cambie el tamaño a ancho de teléfono e informe de cualquier elemento que se desborde o no tenga etiqueta.
Ideal para: comprobar el comportamiento adaptable y las etiquetas de accesibilidad antes de la revisión de diseño.
Ojo con: una instantánea muestra la estructura, no el gusto. Una persona sigue teniendo que juzgar el espaciado, el color y el ritmo.
Todo lo anterior se encarga del layout, los componentes y el código. Nada de eso produce la fotografía que va en la sección principal ni el clip corto detrás del titular. Esa es la tarea del conector MCP de PicassoIA, y es el único servidor de esta lista diseñado para crear recursos en lugar de moverlos.
El conector le da a un agente herramientas para generar imágenes, editar imágenes y generar videos, además de herramientas para consultar el estado de un trabajo, listar tus generaciones anteriores, listar los modelos disponibles y leer tu cuenta. Los trabajos son asíncronos: el agente envía una solicitud, recibe un ID de predicción y luego consulta hasta que el estado indique succeeded o failed.
Cuatro modelos están detrás del conector:
Planifica con los límites en mente: cinco predicciones simultáneas por cuenta, compartidas entre el acceso a la API y las conexiones MCP, y prompts de hasta 4000 caracteres. Si prefieres escribir código, la API REST en api.picassoia.com/v1 usa tokens Bearer y el mismo flujo de crear, consultar y obtener.
En la propia plataforma, otros modelos encajan en tareas más específicas:
| Tarea de diseño | Modelo para probar |
|---|---|
| Logotipos e iconos como vectores limpios | Recraft V4.1 SVG |
| Carteles con tipografía legible | Ideogram V4 Quality |
| Imágenes hero fotográficas | GPT Image 2 |
| Redactar briefs y textos alternativos | Claude Sonnet 5 |
picassoia.com/en/mcp/accounts) y crea una conexión nueva.💡 Patrón de prompt: "Photorealistic photo of a ceramic studio at 7 a.m., soft window light from the left, 35mm lens, shallow depth of field, 16:9." Sujeto, escenario, luz, lente. Cuatro detalles valen más que un párrafo de adjetivos.
| Servidor | Tipo | Función principal | Ideal para | Esfuerzo de configuración |
|---|---|---|---|---|
| Figma (oficial) | Remoto | Leer y escribir archivos de Figma | Equipos de producto | Bajo |
| Framelink Figma Context | Local | Frames como datos simplificados | Desarrolladores de front end | Bajo |
| Canva | Remoto | Crear y editar diseños de Canva | Equipos de marketing | Bajo |
| Penpot | Autoalojado | Programar Penpot mediante plugins | Equipos de código abierto | Medio |
| Blender MCP | Complemento local | Controlar escenas de Blender | Visuales 3D y de producto | Medio |
| Storybook | Proyecto | Documentación y pruebas de componentes | Equipos de sistemas de diseño | Medio |
| shadcn/ui | Local | Explorar e instalar componentes | Equipos de React | Bajo |
| Playwright | Local | Comprobaciones en un navegador real | QA y trabajo adaptable | Bajo |
| PicassoIA | Remoto | Generar imágenes y video | Quien necesite recursos | Bajo |
Conjuntos que funcionan bien juntos:
Un servidor MCP es código que se ejecuta con tus permisos o una conexión de cuenta con acceso a tus archivos. Trátalo como tal.
Leer sobre conectores ayuda, pero la forma más rápida de ver la idea en acción es crear algo. Abre Picasso IA, elige PicassoIA Image y escribe un prompt para la foto hero que necesita tu proyecto actual: sujeto, escenario, luz, lente. Luego pasa el resultado por PicassoIA Image Editor Pro para ajustar un detalle a la vez.
Cuando eso te resulte natural, conecta el conector MCP a tu agente y deja que se encargue de la parte repetitiva. Pide cinco variaciones de hero en un solo brief, elige la mejor y conviértela en un clip corto con PicassoIA Video. Tus layouts siguen en Figma o Canva, tus componentes en Storybook, y tus imágenes llegan desde un solo prompt. Empieza hoy con una imagen y comprueba cuánto de tu flujo de diseño puede asumir un agente.
Elige tu idioma
