MCP para diseñadores: conexión de Figma, tokens y código a Claude y Cursor

Qué es MCP, en palabras sencillas

La documentación oficial MCP lo describe como un estándar de código abierto para conectar aplicaciones de IA a sistemas externos, como archivos, bases de datos y herramientas. Uno de sus propios ejemplos es Claude Code que genera una aplicación web completa a partir de un diseño Figma. Para un diseñador, la parte importante es esta: la IA ya no tiene que adivinar cómo es su diseño. Puede preguntar directamente a la herramienta de diseño.

Herramientas de diseño con servidores MCP hoy

A octubre de 2026:

• Figma: un servidor MCP que brinda a los agentes contexto de diseño (variables, componentes, diseño) para la generación de código y puede escribir contenido nativo en el lienzo. Figma lo incluye en planes iniciales y pagos; La escritura en lienzo es gratuita durante su versión beta.
• Penpot: un servidor MCP abierto y gratuito que funciona con cualquier cliente MCP, incluidos Claude, Cursor, VS Code y OpenAI Codex, y puede ser autohospedado.
• ExodeUI (lo hacemos nosotros): un servidor MCP que permite a las herramientas de codificación de IA crear y editar animaciones interactivas con estados y física de resortes.
• Tokens de diseño: si sus tokens se encuentran en un repositorio como JSON, una herramienta de codificación de IA ya puede leerlos como archivos; Solo se necesita un servidor dedicado para los tokens almacenados dentro de una herramienta.

Cómo lo usan realmente los diseñadores

Los flujos de trabajo más comunes son más prácticos que mágicos. Los desarrolladores seleccionan un marco y le piden a la IA que lo implemente con la biblioteca de componentes existente. Los diseñadores le piden a la IA que verifique si una pantalla codificada coincide con el diseño y enumera las diferencias. Los equipos le piden a la IA que actualice los tokens de un componente en todo el código base. Y cada vez más, los diseñadores utilizan la IA para redactar variantes directamente en el lienzo y luego refinarlas a mano.

Conectando un servidor

Claude Code agrega servidores con el comando claude mcp add o mediante un archivo .mcp.json en el proyecto, y admite servidores HTTP remotos y locales. Cursor administra servidores MCP en su configuración y admite servidores locales (stdio) y remotos. Los servidores remotos normalmente le piden que inicie sesión una vez con OAuth. Cada proveedor documenta el comando o URL exacto para su servidor.

Que tener en cuenta

MCP brinda acceso real a las herramientas de inteligencia artificial, así que trátelo como cualquier integración:

• Permisos: un agente que puede escribir en el lienzo o repositorio también puede cometer errores. Utilice el historial de versiones y revise los cambios.
• Privacidad: comprueba dónde van los datos de diseño y si tu plan lo permite.
• Costo: algunas funciones de escritura son gratuitas en versión beta y está previsto que se basen en el uso.
• Calidad: la salida de IA sigue su sistema de diseño solo si el sistema está bien estructurado, con componentes y tokens con nombre.