Claude Design MCP significa tres cosas distintas: un servidor integrado que devolvió HTTP 404 en Claude Code 2.1.181, el comando /design-sync y un servidor de la comunidad. Mira la configuración exacta para Claude Code y Codex, además de la solución a cada error reportado.
Busca Claude Design MCP y terminas en tres lugares distintos a la vez. Una es un servidor integrado que Claude Code inyecta por su cuenta y que respondió con un 404 a muchas personas en junio de 2026. Otra es el comando /design-sync, que envía tu biblioteca de componentes a Claude Design. La tercera es un servidor de la comunidad que maneja el sitio web de Claude Design desde una terminal, y es el único de los tres que también se conecta a Codex.
Mezclarlas es la razón por la que la mayoría de los reportes de "no funciona" no llevan a ninguna parte: una solución para una no sirve para las demás. Este artículo separa las tres, muestra los comandos exactos de configuración del servidor para Claude Code y Codex, y repasa cada mensaje de error que la gente ha reportado de verdad, con la causa y la salida más rápida.
💡 Resumen rápido: el 404 integrado es un problema del lado del servidor que no puedes arreglar en local,
/design-syncfalla por el inicio de sesión y los requisitos del proyecto, y el servidor de la comunidad falla por las sesiones de Chrome y los tiempos de espera. Ve a la sección que coincida con tu error.
Claude Design es la herramienta de Anthropic para crear prototipos, presentaciones y piezas de marketing chateando con Claude. Se lanzó el 17 de abril de 2026 dentro de Anthropic Labs, funciona con Claude Opus 4.7 y está disponible en los planes Pro, Max, Team y Enterprise. En las organizaciones Enterprise viene desactivado por defecto, así que un administrador tiene que activarlo. Cuando un diseño está listo, puedes exportarlo como carpeta, PDF, PPTX, HTML independiente, archivo de Canva, URL de la organización o pasarlo a Claude Code.
"MCP" aparece en este producto de tres maneras distintas, y cada una tiene su propio patrón de fallos.
Claude Code 2.1.181 empezó a inyectar en cada sesión un servidor llamado claude_design. Apunta a https://api.anthropic.com/v1/design/mcp, y para muchas personas ese endpoint devolvía un 404. El comando /doctor lo marcó, y /mcp mostró "Failed to reconnect to claude_design: HTTP 404 at https://api.anthropic.com/v1/design/mcp".
El servidor se inyecta de forma dinámica, así que no vive en ningún archivo de configuración, y si intentas quitarlo aparece "Cannot remove MCP server from scope: dynamic". El reporte de la incidencia #69323 se abrió el 18 de junio de 2026 y se cerró como duplicado el 22 de junio de 2026, junto con varios casi idénticos, como el #69325.
Anunciada el 17 de junio de 2026, /design-sync se ejecuta dentro de la terminal de Claude Code. Trae tu sistema de diseño real (componentes de React, tokens de CSS, tipografías) a Claude Design para que los prototipos partan de tus componentes, y envía el código de vuelta para que puedas seguir editando en el lienzo. /design-login autoriza el acceso con tu cuenta de claude.ai. Solo tú puedes lanzarlo: la skill está marcada como no invocable por el modelo, así que Claude no puede iniciarlo por su cuenta.
claude-design-mcp es un servidor no oficial, con licencia MIT, que maneja Claude Design desde CLI agénticas. Expone unas 30 herramientas, entre ellas create_design_system, generate, iterate, list_files, read_file, export y publish. Por debajo, automatiza Chrome sobre claude.ai, lo que significa que depende de endpoints internos no documentados y puede romperse cada vez que cambie el sitio. El README deja claro que no está afiliado ni respaldado por Anthropic.
| Pieza | Dónde se ejecuta | Funciona en Codex | Fallo típico |
|---|---|---|---|
Integrado claude_design | Inyectado por Claude Code | No | HTTP 404 |
/design-sync | Comando de barra de Claude Code | No | Autorización, 403 |
claude-design-mcp | Servidor stdio local más Chrome | Sí | Sesión caducada, tiempos de espera |
Diez minutos de revisión ahorran una tarde de depuración. La mayoría de los casos de "MCP no funciona" resultan ser un requisito que falta, no un servidor roto.
/design-sync necesita una cuenta de claude.ai de primera parte. Una credencial de API o una configuración de Bedrock o Vertex no sirven./design-sync advierte de importaciones que duran horas y de costos de tokens en repositorios grandes./design-sync. Ejecuta claude --version para comprobarlo.dist/ publicado, o React con Storybook. Vue, Angular y Svelte no son compatibles. Inicia el comando en el repositorio del sistema de diseño, no en la aplicación que lo consume.💡 Si
/design-logindice Unknown command, revisa tu versión antes que nada. Las versiones anteriores a v2.1.234 son la primera sospechosa.
Solo el servidor de la comunidad lo instalas tú, así que esta configuración trata de ese. El servidor integrado y /design-sync no necesitan nada más que los requisitos anteriores.
git clone https://github.com/e-brokenc0de/claude-design-mcp.git
cd claude-design-mcp
pnpm install
pnpm exec playwright install chromium
pnpm run chrome:cdp
pnpm run build
El script chrome:cdp lanza Chrome con un perfil persistente almacenado en .auth/cdp-chrome. Inicia sesión en claude.ai en esa ventana una vez, y la sesión se mantiene entre las llamadas a herramientas.
claude mcp add --transport stdio --scope user claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
El -- separa las opciones de Claude del comando que inicia el servidor. ¿Prefieres un archivo compartido con tu equipo? Pon la misma entrada en .mcp.json en la raíz del proyecto:
{
"mcpServers": {
"claude-design": {
"command": "node",
"args": ["/absolute/path/to/claude-design-mcp/dist/server.js"]
}
}
}
| Ámbito | Quién lo ve | Se guarda en |
|---|---|---|
local (predeterminado) | Tú, en este proyecto | ~/.claude.json |
project | Todos mediante el control de versiones | .mcp.json |
user | Tú, en todos los proyectos | ~/.claude.json |
claude mcp list
claude mcp get claude-design
Después, abre /mcp dentro de una sesión. Un servidor sano aparece como conectado, y pedirle a Claude muestra mis proyectos de Claude Design debería devolver resultados reales. Los servidores con ámbito de proyecto piden tu aprobación la primera vez; si la rechazaste sin querer, claude mcp reset-project-choices vuelve a mostrar el aviso.
Codex lee los servidores MCP de ~/.codex/config.toml, o de un .codex/config.toml con ámbito de proyecto, usando una tabla [mcp_servers.<name>] por servidor. La documentación MCP de Codex enumera todas las opciones.
codex mcp add claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
codex mcp list
O escríbela tú mismo:
[mcp_servers.claude-design]
command = "node"
args = ["/absolute/path/to/claude-design-mcp/dist/server.js"]
startup_timeout_sec = 30
tool_timeout_sec = 300
Codex usa por defecto 10 segundos para el arranque y 60 segundos por llamada a herramienta. Una herramienta que maneja un sitio web puede superar fácilmente ambos, así que subirlos es el primer ajuste que vale la pena hacer. Dentro de la interfaz de terminal de Codex, /mcp muestra qué servidores están activos.
💡 Rutas en Windows: en TOML, una barra invertida inicia un escape dentro de comillas normales. Escribe
C:/Users/you/claude-design-mcp/dist/server.jscon barras diagonales, o envuelve la ruta entre comillas simples.
Una advertencia honesta: el README de la comunidad muestra solo la configuración de Claude Code y Cursor. La entrada de Codex de arriba aplica el formato documentado de Codex al mismo comando de inicio, así que confírmala con codex mcp list antes de confiar en ella.
El servidor integrado claude_design lo inyecta Claude Code, /design-sync y /design-login son comandos de Claude Code, y el botón de traspaso envía los paquetes a Claude Code. Codex no tiene ninguno de esos. Lo que sí puede hacer es llamar a las herramientas del servidor de la comunidad, como read_file y export, o trabajar directamente con una carpeta exportada o un archivo HTML independiente, que son archivos normales en disco.
| Tarea | Claude Code | Codex |
|---|---|---|
| Añadir un servidor stdio | claude mcp add name -- cmd | codex mcp add name -- cmd |
| Archivo de configuración | ~/.claude.json, .mcp.json | ~/.codex/config.toml, .codex/config.toml |
| Listar servidores | claude mcp list | codex mcp list |
| Panel dentro de la sesión | /mcp | /mcp |
| Tiempo de espera de arranque | MCP_TIMEOUT (ms) | startup_timeout_sec (predeterminado 10) |
| Tiempo de espera de herramienta | MCP_TOOL_TIMEOUT (ms) | tool_timeout_sec (predeterminado 60) |
Busca tu mensaje en la tabla y luego lee la sección correspondiente.
| Lo que ves | Causa más probable | Primer paso |
|---|---|---|
HTTP 404 at .../v1/design/mcp | El endpoint integrado responde 404 | Actualiza y luego ignóralo |
/design-login requires an interactive terminal | Sesión sin interfaz, web o no interactiva | Ejecuta en una sesión de terminal normal |
status code 403 durante el registro de acceso | Autorización rechazada | Revisa de nuevo tu cuenta y la política de la organización |
| El servidor falla o las herramientas agotan el tiempo | Tiempo de espera de arranque o de herramienta demasiado bajo | Sube los valores de tiempo de espera |
| Las herramientas devuelven errores de inicio de sesión | Sesión de Chrome caducada | Vuelve a ejecutar pnpm run chrome:cdp |
Este no es tu problema. El endpoint respondió 404, el servidor se inyecta en lugar de configurarse, y el reporte señaló que la autenticación no era la causa. No hay ninguna entrada que borrar ni ningún token que renovar.
/doctor./mcp y mira tus propios servidores. Si solo claude_design está en rojo, trátalo como ruido.claude mcp get <name> y compárala con la dirección de la documentación del servidor.
Dos mensajes aparecen con más frecuencia: "DesignSync needs design-system authorization, but /design-login requires an interactive terminal and is not available in this environment" y un simple Unknown command. El primero significa que estás en una sesión que no puede mostrar un flujo de inicio de sesión, como la versión web o una ejecución sin interfaz. Un reporte relacionado (#91063) señala que todavía no hay una vía no interactiva, lo que bloquea los trabajos de CI.
/design-login en una terminal normal e interactiva de Claude Code, y luego /design-sync.
Un 403 dice "Couldn't record Design agent access ... Request failed with status code 403". Lo ven usuarios de la app de macOS, de Claude Code Web y de la CLI de Windows, y ya habían confirmado que su acceso desde el navegador funcionaba, así que no era un problema de plan. Cuando lo revisé, la incidencia #75024 seguía abierta y sin respuesta de ningún mantenedor. Mientras tanto, confirma que tu organización permite Claude Design, inicia sesión con una cuenta de primera parte y vuelve a intentarlo.
Los tiempos de espera pertenecen al servidor de la comunidad. En Claude Code, sube ambos límites antes de lanzarlo:
MCP_TIMEOUT=30000 MCP_TOOL_TIMEOUT=600000 claude
PowerShell no acepta ese formato con prefijo, así que define primero las variables:
$env:MCP_TIMEOUT = 30000; $env:MCP_TOOL_TIMEOUT = 600000; claude
En Codex, en cambio, sube startup_timeout_sec y tool_timeout_sec en la tabla TOML.
El servidor de la comunidad usa el perfil de Chrome de .auth/cdp-chrome. Si las herramientas empiezan a devolver errores de inicio de sesión o listas de proyectos vacías, la sesión de claude.ai probablemente caducó.
pnpm run chrome:cdp e inicia sesión de nuevo en claude.ai.git pull, pnpm install y pnpm run build. El servidor depende de endpoints internos, así que las correcciones llegan al repositorio cuando cambia el sitio.Claude Design funciona con Claude Opus 4.7, y el mismo modelo está disponible como modelo de texto en PicassoIA. Sirve como segundo par de ojos para un error MCP que no puedes descifrar a simple vista. Este es el procedimiento:
/mcp en Image. Si el texto pequeño sale ilegible, sube Max Image Resolution (el valor predeterminado es 0,5 megapíxeles).¿Quieres respuestas más rápidas para errores sencillos? Claude Sonnet 5 funciona igual.
💡 Nunca pegues tokens, cookies ni contraseñas reales en ningún cuadro de chat. Reemplázalos antes por marcadores de posición.
Los prototipos de Claude Design llenos de cajas grises de marcador de posición se ven sin terminar, y las fotos de stock rara vez encajan con una marca. Generar las imágenes desde la misma terminal donde ejecutas Claude Code o Codex cierra esa brecha.
PicassoIA ofrece una API para desarrolladores en https://api.picassoia.com/v1 y un conector MCP, así que un agente puede pedir medios como cualquier otra llamada a herramienta. Los trabajos son asíncronos: crea una predicción, consulta hasta que termine y luego obtén el resultado. Cada cuenta ejecuta hasta 5 predicciones a la vez, compartidas entre tokens y conexiones MCP, y las conexiones se gestionan desde picassoia.com/en/mcp/accounts después de iniciar sesión. Revisa la página de precios para saber qué incluye tu plan antes de construir sobre ello.
Tres modelos son importantes para el trabajo de diseño:
En el sitio web, Seedream 5 Pro es otra opción de texto a imagen para escenas fotorrealistas.
Cada solución anterior termina en el mismo punto: un flujo de diseño que funciona sigue necesitando imágenes. Abre Picasso IA Image, escribe una escena como lo harías al explicarle un encargo a un fotógrafo, y mira cómo se genera. Cambia el objetivo, la luz y la ubicación hasta que el encuadre resulte adecuado, luego envía la mejor a Image Editor Pro para los últimos retoques, o anímala con Picasso IA Video. Prueba hoy tres prompts, uno para un banner principal, otro para una foto de producto y otro para un retrato, y mira lo mucho más rápido que se completa tu próximo prototipo.
Elige tu idioma
