Que un agente de terminal se ponga a diseñar interfaces suena a broma. Con Claude Code /design describes la interfaz que quieres y te genera el código listo para producción. Llevo semanas exprimiéndolo en proyectos reales y tengo opinión formada. Va más en serio de lo que parece.
TL;DR: El resumen sin rodeos
- Claude Code /design: comando que traduce lenguaje natural en código de UI real, usando tus componentes y tokens de diseño existentes.
- Integración con Figma: lee tus archivos de diseño por MCP para que el código generado respete tu sistema visual.
- Precio real: el plan Pro (20 $/mes) aguanta 3-4 prompts de diseño. Para uso diario, mínimo Max 5x (100 $/mes).
- No es Figma: no sustituye la exploración visual ni la colaboración en tiempo real. Es un acelerador de implementación.
¿Qué es Claude Code /design y qué problema resuelve?
Claude Code /design es un comando integrado en Claude Code, el agente de codificación de Anthropic, que conecta diseño visual y generación de código en un solo paso.
Describes la interfaz que necesitas, pegas una captura de pantalla o importas un archivo de Figma a través del servidor MCP, y la IA genera el código con tus componentes y tokens de diseño.
Aquí no arrastras cajitas. Conecta la idea con código funcional y te ahorras el ping-pong eterno entre diseñador y desarrollador.
¿La diferencia con pedirle a Claude "hazme una landing"? Que /design entiende tu sistema de diseño. Tira de tus tokens y genera código que respeta la arquitectura de componentes que ya tienes. En producción, eso es lo que separa el código que se integra del que hay que reescribir.
Los diseñadores pueden usarlo para construir plugins de Figma o herramientas internas sin ser ingenieros. Y desde hace poco, Claude Design (la herramienta visual de Anthropic) también funciona en la app de escritorio, con un rol de administrador para las directrices de marca.
Cómo instalar y usar Claude Code /design paso a paso
Claude Code se instala con npm install -g @anthropic-ai/claude-code. En Windows hay un instalador nativo en la web de Anthropic. Dentro de cualquier proyecto, ejecutas /design y describes lo que necesitas: una captura, un archivo de Figma por MCP o texto plano.
El truco: antes de lanzar /design, dale tu sistema de diseño como contexto. Reglas de estilo, tokens, metadatos de componentes... lo que tengas. Los usará para generar UI con tu lenguaje visual, no con genéricos.
¿No tienes sistema de diseño? Funciona igual, pero el resultado será genérico. Y genérico en producción equivale a deuda técnica desde el minuto uno.
Caso práctico: de prompt a componente
Necesitas una tarjeta de producto para un comercio electrónico. En lugar de la cadena Figma, exportar, desarrollar, ajustar: abres Claude Code, ejecutas /design y escribes "tarjeta responsive con imagen, precio, etiqueta de descuento y botón de compra, usando mis componentes".
Claude Code se recorre tu repositorio y pilla tus componentes. El código que genera ya sigue las convenciones del proyecto. Si tienes Figma conectado por MCP, lee los tokens directamente de ahí.
¿Perfecto a la primera? Rara vez. Pero la iteración es rápida: "mueve la etiqueta arriba a la derecha y cambia el botón a variante primary". Tres rondas y tienes un componente listo para revisión de código. Lo que antes costaba un día de ida y vuelta: 20 minutos.
Cuánto cuesta Claude Code /design (y por qué te quedas sin tokens)
Claude Code /design viene incluido en todos los planes de pago: Pro a 20 $/mes, Max 5x a 100 $/mes y Max 20x a 200 $/mes. Los equipos arrancan en 25 $/mes por asiento (facturación anual).
Ojo: el plan Pro se agota en 3-4 prompts de diseño. Las tareas de /design consumen tokens a una velocidad que el plan básico no soporta. Cosa que Anthropic, ojo, no destaca en su página de precios. Si piensas usar /design como herramienta diaria, necesitas Max 5x como mínimo.
¿Y el clásico "Claude Code /design not working"? En la mayoría de casos no es un fallo técnico: es que te has quedado sin cuota. El mensaje de error no siempre lo dice claro, y ahí nace la frustración.
Apostaría a que el grueso de las quejas en foros son límites de tokens disfrazados de bugs. La herramienta funciona. Tu plan, probablemente no. Si ya te peleas con los tokens, hay formas de optimizar el consumo que aplican también aquí.
Claude Code /design frente a Cursor: qué resuelve cada uno
Claude Code /design y Cursor resuelven problemas distintos. La comparación sale mucho, pero es tramposa.
Cursor es un IDE con IA integrada: editor visual, autocompletado, chat contextual, edición asistida. Genial para el día a día escribiendo código. Claude Code es un agente de terminal que entiende tu proyecto completo y ejecuta tareas de principio a fin, incluido diseñar interfaces con /design.
/design gana en velocidad: de concepto a componente funcional sin abrir otro programa. Cursor, en que ves lo que estás tocando en tiempo real.
¿Son incompatibles? Para nada. Usa /design para prototipar y generar, Cursor para refinar, y a correr.
En mi experiencia, lo que nadie te cuenta de /design es que su valor real no está en generar UI bonita. Está en que te OBLIGA a pensar en sistemas de diseño desde el primer commit. Si no tienes tokens definidos, lo notas. Si tus componentes son un caos, lo notas más.
/design es, sin quererlo, la mejor auditoría de tu frontend. Si quieres ir directo al prototipado rápido con este mismo comando, ya lo hemos desgranado paso a paso.
¿Merece la pena Claude Code /design? Si ya tienes un flujo de automatización con IA y tu proyecto cuenta con un sistema de diseño (o quieres empezar uno), sí. Si buscas un sustituto de Figma para explorar libremente, todavía no. Hoy, /design es un atajo brutal para quien sepa usarlo. Y un pozo de tokens para quien no.
Copia esto y pégalo en Claude Code, Cursor o tu asistente de código favorito:
Instala Claude Code con npm install -g @anthropic-ai/claude-code, abre mi proyecto y ejecuta /design. Crea una tarjeta de producto responsive con imagen, título, precio y botón de compra usando los componentes que ya existan en el repo.
No necesitas saber programar. El asistente se encarga de la instalación, la configuración y las pruebas.
Preguntas frecuentes sobre Claude Code /design
¿Qué es el servidor MCP en Claude Code?
MCP (Model Context Protocol) es el protocolo que permite a Claude Code conectarse con herramientas externas como Figma. Lee tus archivos de diseño y expone tokens, componentes y estructura para que /design genere código alineado con tu diseño. Se configura una vez por proyecto.
¿Funciona Claude Code /design sin conexión a Figma?
Sí. Puedes describir la interfaz en texto, pegar capturas de pantalla o dar tu sistema de diseño como contexto manual. La conexión con Figma vía MCP es la opción más completa, pero no es obligatoria.
