Cómo diseñar UI/UX con Claude Code: un flujo de trabajo real de la idea a la interfaz (2026)

¿Claude Code realmente puede diseñar UI/UX?

Sí, pero primero tienes que entender la herramienta. Claude Code es una CLI agéntica que corre en tu terminal: lee tu repositorio, escribe el código de la interfaz directamente (React, Next.js, Tailwind, shadcn/ui) y produce algo que se ejecuta de inmediato, en lugar de solo dibujar un mockup y dejarlo ahí. Esa es la mayor diferencia frente a la experiencia "Claude Design" basada en la web, de la que en realidad hablan la mayoría de los resultados de búsqueda en inglés.

Dicho de forma simple: Claude Code diseña UI/UX al estilo "de la idea al código que corre", mientras que Claude Design (web) se inclina más hacia wireframe -> mockup visual. Si eres desarrolladora trabajando en un proyecto React/Next de verdad, Claude Code es la opción correcta, porque el resultado aterriza directo en tu base de código, con Git, tests y build.

Déjame ser honesta sobre la trampa: por defecto, la UI que produce Claude Code suele ser "segura" hasta el punto de resultar aburrida - layouts simétricos, degradados morados, fuente Inter, tarjetas de características con esquinas redondeadas idénticas. No es que el modelo no sepa hacer que las cosas se vean bien; es que le faltan restricciones estéticas. El resto de este artículo trata de cómo le das esas restricciones para elevar la calidad a un nivel de producción.

¿Por qué la UI de Claude Code sale "genérica"?

Entiende la causa y arreglarás lo correcto. Una UI genérica no es que el modelo sea "malo para la estética"; es el resultado de entradas que faltan:

• Ningún design system. Cuando solo dices "haz una landing page", el modelo no tiene paleta, ni escala de espaciado, ni combinación de fuentes - así que elige los valores por defecto más seguros que más ha visto en sus datos de entrenamiento: Inter, degradados morado/azul, sombras suaves.
• Ninguna referencia visual. Claude Code trabaja principalmente con texto. Si nunca llega a "ver" una referencia (un mockup, la captura de un sitio que te gusta), no tiene un objetivo estético al que apuntar.
• Ninguna restricción de componentes. Sin dirección, se fabrica a mano su propio button/input/card en lugar de usar una biblioteca decente - lo que lleva a inconsistencia y a una accesibilidad débil.
• Ningún bucle de retroalimentación. Escribe el código una vez y se detiene; no mira el resultado renderizado ni se corrige a sí mismo.

La buena noticia: las cuatro causas se pueden arreglar con pasos concretos. Por eso justamente este artículo se centra en un proceso, y no en un único prompt "mágico".

Antes de empezar: lo que necesitas

Prepara tu entorno primero para no tener que detenerte a mitad de camino:

• Claude Code instalado y con la sesión iniciada (mira cómo instalar Claude Code si aún no lo tienes).
• Node.js (para los servidores MCP que corren a través de npx) y un proyecto React/Next.js + Tailwind ya inicializado.
• Cuentas/claves para conectar los servidores MCP (shadcn, Playwright) - entiende el concepto en qué es MCP.

Los tres grupos de herramientas que vas a usar:

El flujo de trabajo de 6 pasos para diseñar UI/UX con Claude Code

Este es el proceso que uso una y otra vez. Cada paso tiene un objetivo claro, un comando o prompt específico y un resultado que deberías ver. No tienes que hacerlo todo desde el primer día, pero si te saltas un paso, la UI se volverá "genérica" justo en ese punto.

Paso 1 - Genera un design system decente (skill de inteligencia de diseño)

Este es el paso de mayor impacto. En lugar de dejar que el modelo adivine la paleta y las fuentes, usa una skill de inteligencia de diseño para generar todo el design system de una vez: paleta de colores, combinación de fuentes, escala de espaciado, radio de los bordes y pautas de UX que encajen con tu tipo exacto de producto (dashboard SaaS, landing page, e-commerce, etc.).

Una skill como ak-ui-ux-pro-max hace coincidencias con una gran biblioteca de referencia - más de 50 estilos, 161 paletas, 57 combinaciones de fuentes, 161 tipos de producto, 99 pautas de UX, 25 tipos de gráfico, 10 stacks - así que, en lugar de "adivinar algo bonito", elige una combinación ya validada. Describes el producto y te devuelve un design system en forma de tokens, listos para soltar en tu config de Tailwind.

# In Claude Code, describe the product so the skill generates a design system
Use the ui-ux design-intelligence skill: generate a design system for a
SaaS task-management landing page, professional yet modern tone, audience
is developers. Return a palette (with hex codes), one font pairing
(heading/body), a spacing scale, radius, and 5 core UX guidelines.
Output it as tokens.

Resultado esperado: una tabla de tokens concreta (no "un azul suave"), lista para copiar y pegar directo en tailwind.config. De aquí en adelante, cada componente hace referencia a la misma fuente única.

Paso 2 - Escribe reglas estéticas en CLAUDE.md

Un design system solo es útil si Claude Code lo obedece en cada sesión. La forma más duradera es fijar las reglas en un archivo CLAUDE.md en la raíz del repositorio - ese archivo se carga automáticamente en el contexto cada vez que trabajas (los detalles están en la guía de CLAUDE.md).

# CLAUDE.md - Design rules (UI/UX)

## Aesthetics (must follow)
- DO NOT use the Inter or Roboto font. Use the font pairing in the design tokens.
- DO NOT use default purple/blue gradients. Only use colors from the palette tokens.
- Every spacing/color/radius must reference tokens - no loose hardcoded values.
- UI components must use shadcn/ui - do not hand-roll button/input/card.
- Minimum contrast 4.5:1; every interactive element has a visible focus ring.
- Minimum touch target 44x44px; no horizontal scroll on mobile.

Esta es la barrera de protección más importante: convierte las decisiones estéticas en restricciones firmes, no en sugerencias blandas. Cada vez que Claude Code está a punto de recurrir "cómodamente" a Inter, esta regla lo hace retroceder.

Paso 3 - Conecta una biblioteca de componentes a través de MCP (shadcn/ui)

Para que Claude Code ensamble componentes decentes en lugar de reescribir los suyos, conecta shadcn a través de MCP. Los componentes de shadcn/ui ya se encargan de la accesibilidad (Radix por debajo) y son consistentes en el estilo:

claude mcp add shadcn -- npx -y shadcn@latest mcp

Una vez conectado, pides algo como "usa shadcn para añadir un formulario de inicio de sesión", y Claude Code toma los componentes correctos (button, input, dialog) y los ensambla sobre tus tokens del Paso 1. El resultado: menos componentes hechos a mano, menos bugs de accesibilidad y una UI notablemente más consistente.

Paso 4 - Dale a Claude Code una referencia visual

El modelo hace un trabajo de UI mucho mejor cuando tiene un objetivo al que apuntar. Antes de decirle que programe una pantalla, entrégale una referencia visual: una imagen de mockup, la captura de una página que te guste o un componente existente.

Lo que funciona: pega la imagen de referencia en la sesión y describe exactamente qué quieres tomar prestado - "sigue el layout de la hero y el ritmo de espaciado de esta imagen, pero usa mi paleta y mis fuentes de los tokens". Cuanto más específica seas ("espacio en blanco generoso", "la tipografía como punto focal", "un CTA contundente"), menos genérico será el resultado. No digas solo "que se vea bien" - señala qué tipo de bien.

Paso 5 - El bucle de captura -> comparar -> refinar (Playwright MCP)

Este es el paso que distingue esta guía de las demás. En lugar de capturar tú misma la pantalla y describir los fallos, deja que Claude Code "vea" el resultado por sí mismo con Playwright MCP: abre la página renderizada, toma una captura, la compara con la referencia y luego corrige el código - repitiendo al menos dos veces.

claude mcp add playwright -- npx -y @playwright/mcp@latest

El prompt del bucle:

Use Playwright MCP: open http://localhost:3000 and screenshot the hero
screen. Compare it to the reference on spacing, hierarchy, and contrast.
List the 3 biggest gaps, fix the code, screenshot again, and loop until
it matches the reference. Keep the constraints in CLAUDE.md.

En cada pasada, el modelo ve la diferencia entre "lo que programó" y "lo que debería alcanzar", así que la calidad sube en lugar de estancarse tras el primer intento. Esto es lo más parecido a compensar la debilidad visual de una herramienta que piensa primero en texto.

Paso 6 - Fija los design tokens y revisa la accesibilidad

Cuando estés contenta con la UI, fíjala para que no "derive" en sesiones posteriores. Exporta tus design tokens a un único archivo fuente (por ejemplo tokens.css o un bloque en tailwind.config) y anota en CLAUDE.md que esa es la fuente de la verdad - cada pantalla nueva debe hacer referencia a ella, sin valores sueltos.

Justo después, haz una revisión rápida de accesibilidad (los detalles están en la sección de abajo): contraste 4.5:1, focus rings visibles, touch targets >=44px, sin desplazamiento horizontal y respeto por prefers-reduced-motion. Fijar los tokens sumado a revisar la accesibilidad convierte un "build que quedó bonito por suerte" en un sistema repetible.

Un ejemplo real: construir una landing page, antes/después

Para que sea concreto, aquí va un caso ilustrativo con una landing page para un gestor de tareas SaaS (público desarrollador). El proceso sigue exactamente los seis pasos de arriba.

El build v1 (sin restricciones): Claude Code devolvió el clásico aspecto "genérico" - una hero centrada, fuente Inter, un degradado morado en el botón de CTA, tres tarjetas de características con esquinas redondeadas idénticas. Funcionaba, pero se notaba "esto lo hizo la IA" de un vistazo.

Tras aplicar los pasos 1-5: el design system pasó a una combinación de fuentes con más personalidad (una serif para los títulos, una sans para el cuerpo), una paleta neutra con un color de acento cálido, un espaciado más amplio y un CTA de color sólido en lugar de un degradado. Después de tres bucles de Playwright, la jerarquía quedó más clara y las tarjetas de características tuvieron ritmos distintos en vez de repetirse.

Siendo honesta sobre los límites: Claude Code hace muy bien el layout, el espaciado sistemático y el ensamblaje de componentes. Lo que todavía corrijo a mano son las microinteracciones (tiempos de animación, easing) y algunas decisiones de "gusto" que las reglas en texto tienen dificultad para transmitir del todo. En otras palabras: se encarga del 80% del armazón, y el último 20% aún necesita un ojo humano. Si quieres profundizar en la construcción del frontend, lee cómo construir un frontend React con Claude Code.

Revisa la accesibilidad y el diseño responsivo (no te lo saltes)

La mayoría de las guías solo hablan de "que se vea bien" y se saltan la accesibilidad - lo cual es una lástima, porque es justo aquí donde Claude Code ayuda mucho, ya que puede verificar con código. Ejecuta esta lista de comprobación antes de darlo por terminado:

• Contraste >= 4.5:1 para texto normal (3:1 para texto grande) - según la WCAG 2.1 AA.
• Foco visible: todo elemento interactivo (enlace, botón, input) tiene un focus ring claro cuando navegas con el teclado usando Tab.
• Touch targets >= 44x44px en móvil para que los toques no fallen.
• Sin desplazamiento horizontal en los breakpoints principales (360px, 768px, 1024px).
• Respeta prefers-reduced-motion: desactiva o reduce la animación para usuarios sensibles al movimiento.
• HTML semántico + alt: niveles de encabezado correctos, imágenes con texto alt, formularios con labels.

Puedes delegarlo directamente: "audita toda la página contra la lista de accesibilidad en CLAUDE.md, enumera las infracciones con la línea de código y corrígelas". Como es un trabajo basado en reglas, Claude Code lo hace rápido y con pocos errores.

Los límites reales de Claude Code para el diseño de UI/UX

Para que ajustes bien las expectativas - y esta es la parte que la mayoría de las guías evita:

• El razonamiento visual complejo aún es débil. "Lee" las capturas bastante bien, pero los juicios sutiles sobre el equilibrio visual y el ritmo del layout todavía no están al nivel de una persona diseñadora.
• No es pixel-perfect. No esperes una coincidencia píxel a píxel con Figma; sigue el espíritu del diseño, no un plano exacto.
• Las reglas en texto no reemplazan a las imágenes. Puedes describir "premium" con palabras, pero una referencia visual siempre es mucho más eficaz.
• Microinteracciones y animaciones sutiles. Tiempos, easing, transiciones suaves - esta parte suele necesitar ajuste manual.
• Todavía necesita revisión humana. Acelera muchísimo, pero la decisión estética final y la experiencia emocional siguen siendo tuyas.

¿Cuándo sigues necesitando a una persona diseñadora de verdad? Cuando construyes una nueva identidad de marca desde cero, o cuando necesitas un design system complejo de varios productos. Claude Code es el "brazo constructor rápido y consistente", no un reemplazo del pensamiento de diseño.

Acelera: la skill de UI/UX lista para usar en AgentKit

El Paso 1 (generar el design system) es la parte que más trabajo da si construyes la skill tú misma. Aquí es donde una skill lista para usar ahorra mucho tiempo: ak-ui-ux-pro-max - la versión completa con 161 paletas, 57 combinaciones de fuentes, 99 pautas de UX, 25 tipos de gráfico y 10 stacks - viene con AgentKit. Claude Code llama a esta skill automáticamente cuando trabajas en UI, así que no tienes que reescribir las reglas de diseño desde cero en cada proyecto.

Una línea para evitar confusiones: AgentKit aquí es el kit para Claude Code (agentkit.best, usando la CLI ak), que es diferente del AgentKit de OpenAI (Agent Builder/ChatKit). Si te interesa el kit de desarrollo en sí, mira qué incluye el Engineer Kit - el Engineer Kit cuesta actualmente $99 (el sitio no indica ninguna cuota recurrente), con "garantía de devolución del dinero" y "actualizaciones de por vida", según la información de la página.

¿Quieres saltarte la construcción de un design system a mano? El conjunto de skills de UI/UX de AgentKit incluye ak-ui-ux-pro-max para que Claude Code venga con una paleta, fuentes y pautas de UX sólidas de fábrica.

Preguntas frecuentes (FAQ)

¿En qué se diferencia Claude Code de Claude Design (web)?

Claude Code es una CLI agéntica que corre en tu terminal y escribe el código de la UI directamente en tu repositorio, donde se ejecuta de inmediato. Claude Design (web) se inclina más hacia wireframe -> mockup visual en el navegador. Si estás construyendo un proyecto React/Next de verdad, Claude Code encaja mejor, porque el resultado vive en tu base de código.

¿La UI que produce Claude Code puede tener calidad de "producción"?

Sí, si aplicas el flujo completo: un design system + restricciones en CLAUDE.md + componentes decentes (shadcn) + un bucle de refinamiento + una revisión de accesibilidad. Si te saltas esos pasos, la UI se vuelve genérica con facilidad. Las microinteracciones y la estética más sutil todavía conviene revisarlas a mano.

¿Necesito saber Figma?

No es obligatorio. Puedes trabajar por completo a partir de una descripción en texto más una imagen de referencia. Pero, si tienes un mockup en Figma, usarlo como referencia visual ayuda a que Claude Code siga la estética mucho mejor.

¿Necesito una skill de pago?

No necesariamente. Puedes escribir reglas de diseño en CLAUDE.md gratis. Una skill lista para usar como ak-ui-ux-pro-max solo te permite saltarte la construcción del design system - práctico cuando trabajas en muchos proyectos y quieres consistencia, pero no es un requisito.

¿Qué servidores MCP debería conectar para el diseño de UI?

Los dos que más valen la pena: shadcn MCP (para ensamblar componentes decentes y accesibles) y Playwright MCP (para que Claude Code capture la UI renderizada, la compare con una referencia y la refine en bucle).

¿Cómo hago que la UI sea menos genérica?

Aliméntalo con restricciones: prohíbe fuentes/colores por defecto en CLAUDE.md, dale una referencia visual específica, usa tu propio design system en lugar de dejar que el modelo adivine y ejecuta el bucle de captura -> comparar -> corregir al menos dos veces.

Conclusión + próximos pasos

En resumen, Claude Code diseña bien UI/UX cuando le das suficientes restricciones: genera un design system, fija reglas estéticas en CLAUDE.md, conecta shadcn + Playwright a través de MCP, dale una referencia visual, ejecuta el bucle de refinamiento y luego fija los tokens y revisa la accesibilidad. No esperes pixel-perfect - úsalo como un brazo constructor rápido y consistente, y guárdate a ti misma las decisiones de gusto.

Próximo paso: lee cómo construir un frontend React con Claude Code para profundizar en el código de la interfaz y, si quieres saltarte la construcción de un design system a mano, considera la skill ak-ui-ux-pro-max que viene con AgentKit (mira el recuadro de abajo).