Claude Design MCP en Claude Code: mantén diseño y código sincronizados

Un comando conecta el MCP de Claude Design a tu terminal. Traer un diseño al repo, o subir el repo como proyecto, dejan de ser copiar y pegar.

El MCP de Claude Design en Claude Code: dos carriles entre tu terminal y tus proyectos de Claude Design, uno que baja artboards .dc.html listos para implementar y otro que sube tu trabajo como proyecto con su URL, con /design-consent como permiso que se concede una vez

TL;DR Un comando conecta tus proyectos de Claude Design al terminal, en las dos direcciones: bajas artboards .dc.html y le pides que los implemente, o subes tu trabajo como un proyecto con su URL. El montaje tiene un paso que la documentación se salta, porque conectado no es lo mismo que permitido: después de claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp, ejecuta /design-consent.

Llevo mucho tiempo echando de menos un MCP para hablar con Claude Design directamente. Hasta ahora el puente iba en una sola dirección y a mano: diseñabas en la web, exportabas, pegabas el enlace en el terminal. Ese MCP ya existe, y montarlo tiene un paso que el artículo de soporte no menciona.

Qué se mueve en cada dirección

Conviene ajustar la expectativa: lo que viaja son los ficheros del proyecto, no componentes generados a partir de un diseño.

Hacia tu repo. Claude lista tus proyectos, lee sus ficheros y los deja en tu carpeta. Lo que baja son artboards en formato .dc.html, el mismo que publica el comando /design. A partir de ahí ya le pides que implemente lo que hay dentro.
Hacia Claude Design. Crea un proyecto nuevo en tu cuenta y sube los ficheros que le digas. Queda visible en claude.ai/design con su URL, listo para compartir.

En mi prueba el MCP vio 10 proyectos y se trajo un artboard de 11.679 bytes. La herramienta nativa que ya trae Claude Code veía cero de esos mismos proyectos, porque solo mira los de tipo design system.

Si tu bucle es contra un diseño de Figma, ese es otro MCP distinto y ya está contado en Figma y Chrome MCP.

Cómo añadir el MCP de Claude Design a Claude Code

1. Añade el servidor

claude mcp add --scope user --transport http claude-design \
  https://api.anthropic.com/v1/design/mcp

2. Comprueba que aparece

claude mcp list

claude-design: https://api.anthropic.com/v1/design/mcp (HTTP) - ✔ Connected

3. Abre una sesión nueva

Un MCP recién añadido no entra en una sesión que ya estaba corriendo. Sus herramientas aparecen al arrancar la siguiente.

4. Concede el permiso

/design-consent

Connected no significa permitido

Este es el paso que cuesta encontrar. claude mcp list dice ✔ Connected y no pide autenticación, a diferencia de otros servidores que sí marcan "Needs authentication". Parece que ya está. No lo está: la primera llamada real se rechaza con esto.

Connect to Claude Design? Claude can read and edit your Design
projects from this tool. Change anytime at
claude.ai/design/settings or with /design revoke.
The user hasn't granted this yet

O sea, conectar el servidor y autorizar el acceso a tus proyectos son dos cosas separadas. La segunda se concede con /design-consent, escrito con guion, y es un permiso duradero: se queda puesto hasta que lo revocas.

El aviso sobre la ortografía va en serio. Ese mensaje de rechazo te remite a /design consent con espacio, que en el cliente es una ruta distinta con su propia condición de activación: cuelga del comando /design, que depende de la política de tu organización, de que entres con cuenta de claude.ai y de un despliegue progresivo. El comando suelto con guion no arrastra esa última condición.

Las dudas de antes de montarlo

No hay un login aparte. Si ya entras en Claude Code con tu cuenta de claude.ai, el servidor conecta con esa credencial y no te pide nada más. /design-login existe para las sesiones que no tienen ese login de primera parte, no como paso obligatorio para todo el mundo.

No sustituye a nada de lo que ya tienes. El comando /design y este MCP son caminos distintos al mismo producto, y no se estorban.

No aparece en las novedades. Este camino solo está documentado en el artículo de soporte de Claude Design, no en el What's New de Claude Code. Por eso cuesta tanto dar con él.

Lo que estás concediendo

El texto del permiso lo dice sin rodeos: Claude puede leer y editar tus proyectos de Claude Design. No es solo lectura. Si tienes trabajo real ahí dentro, tenlo presente antes de aprobar.

Se retira con /design-revoke, o desde claude.ai/design/settings.

Un límite que te vas a encontrar

El MCP expone 23 herramientas: proyectos, ficheros, miembros, permisos de compartición, comentarios y previews. Ninguna borra un proyecto. Puedes crear y puedes escribir, pero deshacer una creación es cosa tuya desde la interfaz web. Si pruebas la exportación, ponle al proyecto un nombre que reconozcas para limpiarlo después.

Referencia

Aspecto	Detalle
Conectar	`claude mcp add --scope user --transport http claude-design <url>`
Autorizar	`/design-consent` (con guion)
Revocar	`/design-revoke` o claude.ai/design/settings
Alcance del permiso	Lectura y escritura sobre tus proyectos
Herramientas	23, ninguna borra proyectos
Formato que baja	`.dc.html`, artboards
Cuándo aparecen las tools	Al abrir sesión nueva, no en la que ya corría

Documentación oficial: Get started with Claude Design

Requisitos

Cuenta de claude.ai de primera parte (no con API key, Bedrock ni Vertex)
Plan con Claude Design disponible y política de organización que lo permita
Probado en Claude Code v2.1.241