El comando /design de Claude Code: boceta interfaces antes de construir

Las personas planifican, Claude ejecuta

Anthropic analizó unas 400.000 sesiones de Claude Code de aproximadamente 235.000 usuarios, y el reparto de decisiones estaba desequilibrado. Las personas tomaron alrededor del 70 % de las decisiones de planificación, es decir, qué construir. Claude tomó alrededor del 80 % de las decisiones de ejecución: qué archivo, qué sintaxis, qué comando. A lo largo de los siete meses estudiados, las sesiones dedicadas a reparar código roto bajaron del 33 % al 19 %, mientras crecían el manejo de software y el análisis.

Ese reparto explica la función que Anthropic lanzó esta semana. Cuando un agente se encarga de la ejecución, el cuello de botella sube a la parte que sigue en manos de las personas, y en todo lo que tiene pantalla la planificación es visual. Escribir «construye la página de ajustes» no puede significar nada preciso si nadie ha visto todavía la página de ajustes. Es como describir los muebles de una habitación en la que nadie ha entrado.

Así que la mayoría construimos la cosa para averiguarlo. Idea, código, render, no gusta, reescribir. Cada idea descartada se paga en la moneda más cara que existe.

Qué ha cambiado

Claude Code y Claude Design ya podían hablar entre sí. Registras el servidor MCP de diseño e inicias sesión:

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

Una vez conectados, puedes traer un diseño a tu código, tu código puede convertirse en un prototipo vivo y el trabajo puede viajar en ambas direcciones. Todo eso es anterior a esta semana.

Lo nuevo es el propio comando /design. Anthropic incorporó una vista previa temprana a Claude Code el 17 de agosto de 2026. Lo anunció Nate Parrott, el diseñador de producto que creó Claude Design, y el equipo de Claude Code lo respaldó ese mismo día. En la CLI o en la app de escritorio, Claude ahora produce un puñado de maquetas de interfaz editables, llamadas artboards, que se muestran como un Artifact. Eliges una, la ajustas y le dices a Claude que la construya. Los planes Pro, Max, Team y Enterprise lo incluyen, y claude update lo descarga.

«Los dos productos pueden sincronizarse» frente a «los artboards viven en tu terminal» suena a fontanería, pero cambia lo que cuesta una idea descartada: antes, cuatrocientas líneas de JSX; ahora, unos nueve segundos de mirar. El ciclo pasa a ser una idea, seis posibilidades visuales, cinco descartadas, una programada.

Adónde iba antes la exploración

Antes del comando había dos opciones, y ninguna era barata.

La primera era describir la interfaz en prosa y cruzar los dedos. Entran tres párrafos sobre el espaciado de las tarjetas y la jerarquía, Claude devuelve un componente, se abre localhost y algo falla de una manera que el prompt no tenía forma de prever. Acabas editando código para corregir una decisión de maquetación que treinta segundos de mirar habrían resuelto.

La segunda era abrir claude.ai/design, prototipar allí y luego cuadrar el resultado con tus componentes reales en el repositorio. Es una buena vía y a menudo sigue siendo la correcta. El problema es el cambio de herramienta, y ese cambio es lo que mata la exploración: aceptas una dirección y te saltas seis, porque abrir otra pestaña se sentía como comprometerse.

La propia historia de Parrott muestra por qué. A finales de 2025 era el único diseñador de Claude Code for VS Code, junto a dos ingenieros. Ese noviembre llegó Opus 4.5, los ingenieros se aceleraron muchísimo y él tuvo que seguirles el ritmo. Su primer intento fue pegar en Claude la salida del terminal y capturas de pantalla y pedirle un diseño, y según cuenta salió mal. La solución fue darle a Claude un lienzo HTML en vez de una caja de texto, porque el HTML es un medio visual rico y Claude lo escribe sorprendentemente bien. De ahí salió Claude Design, y /design lleva ese mismo flujo de artboards al terminal, junto al código.

Hábitos que hacen que funcione

Parrott publicó sus propias buenas prácticas en julio. Se trasladan casi por completo a la CLI y son más útiles que cualquier lista de funciones.

Piensa antes de escribir el prompt. Dedica tiempo de verdad a redactar prompts antes de diseñar, a veces dictándolos y a veces escribiéndolos en las notas del móvil desde el sofá. Averiguar qué quieres es una actividad distinta de pedirlo, y un prompt vago gasta uso en algo que vas a rechazar.

Describe el aspecto. Si lo dejas a su aire, Claude deriva hacia unas cuantas estéticas favoritas, y las reconocerías al instante. Dale tipografías y colores, un moodboard, o pídele que proponga combinaciones de tipografía y color y discute con él hasta que una encaje. Solo este hábito hace que el resultado parezca tu producto y no cualquier landing generada por IA del último año y medio.

Empieza con wireframes cuando la fidelidad pueda esperar. Son más rápidos y mantienen a Claude centrado en la estructura y lejos del detalle visual. Mientras todavía decides entre una barra lateral y una superior para los filtros, los degradados solo añaden ruido. Prueba ocho ideas estructurales antes de pulir una.

Pide diez y luego remezcla. La mayoría no serán buenas, y es lo esperable. La continuación de Parrott suena más o menos a que le gusta la opción B más un poco de la D, y pide cinco variaciones que las combinen.

Haz el último tramo a mano. Las ediciones directas en el lienzo, como reordenar, borrar, redimensionar y cambiar textos o colores, no cuestan tokens. Pedir esos mismos cambios por prompt cuesta bastante, y la alineación es más fácil de juzgar a ojo que de describir. Deja de escribir frases sobre el padding.

Dibuja y señala. Si tienes una maquetación en la cabeza pero sin palabras, dibújala en papel y hazle una foto. En lugar de escribir un párrafo sobre a qué elemento te refieres, haz clic en él y habla.

Anatomía de un prompt que funciona

Esos hábitos se reducen a una forma reutilizable con cinco huecos. Si te saltas uno, obtendrás un fallo previsible.

Cantidad. El número de direcciones que quieres. Da una cifra o recibirás una sola. Seis va bien para wireframes y tres para alta fidelidad.

Fidelidad. Wireframe o pulido. Dilo, porque el modelo tiende a pulir y en el pulido es donde desaparecen el tiempo y el uso.

El objeto. Una superficie acotada y con nombre, como un panel de preferencias de notificaciones, un estado vacío de primer uso o una vista de detalle de factura. «El dashboard» es demasiado grande.

Restricciones de tu código. Qué componentes existentes deben aparecer. Aquí la CLI se gana su sitio, porque Claude puede leerlos. Nómbralos de todos modos: señalar es mejor que esperar.

Dirección estética o un aplazamiento explícito. Nombra las tipografías y los colores, o escribe «structure only, ignore visual styling for now» (solo estructura, ignora el estilo visual por ahora). Callarse es la única opción que sale mal de forma fiable, porque el silencio te da el estilo de la casa.

/design 6 wireframe options for the invoice detail view.
Reuse DataTable and StatusPill from src/components.
Structure only, no styling yet.

Compáralo con lo que la gente suele escribir primero, /design an invoice page. El comando es el mismo y el resultado, muy distinto.

Los consejos de Anthropic sobre prompts para Claude Design se solapan con esto y conviene tenerlos al lado: indica el objetivo, la maquetación, el contenido y el público. Los cinco huecos de arriba están pensados para la divergencia, mientras que la versión de Anthropic sirve para producir un buen artefacto, así que úsala cuando ya sepas lo que quieres.

Una prueba rápida de si el prompt cumplió su función: repasa lo que ha vuelto y pregúntate si las opciones difieren en jerarquía o solo en color. Seis versiones de la misma arquitectura de información indican un prompt demasiado estrecho o que pidió pulido demasiado pronto. El objetivo son seis respuestas realmente distintas a «¿qué prioriza esta pantalla?». Pagas por decisiones distintas, no por paletas distintas.

Conectar tu sistema de diseño real

/design-sync lleva tu sistema de diseño local a Claude Design, de modo que lo generado se monta con tus componentes reales y Claude no se inventa una clase de botón desde cero. Puede leer desde un repositorio de GitHub, archivos de diseño, subidas o el código local, y puedes nombrar el sistema en el mismo comando: /design-sync Acme DS.

Hay dos puntos que conviene planificar. La referencia de comandos de Anthropic dice que una primera sincronización verifica cada componente y puede tardar unas horas en un repositorio grande, así que lánzala antes de comer y no justo antes de una demo. El centro de ayuda también señala las bases de código grandes como fuente de lentitud y recomienda vincularlas mediante Claude Code en lugar del navegador. Y como la implementación se centra por ahora en React, los proyectos con Vue y Svelte dependen de que Claude lea los componentes directamente en la sesión.

Un obstáculo administrativo: en los planes Enterprise, Claude Design está desactivado por defecto, y un administrador tiene que activarlo antes de que nada de esto funcione.

Lo que cuesta

Claude Design ya no tiene una asignación propia que vigilar. El uso sale del fondo compartido con el chat de Claude, Claude Code y Cowork, y Anthropic deja claro que los proyectos complejos, las bases de código grandes y muchas iteraciones consumen más. Antes existía una asignación semanal aparte, y ya no está.

En la CLI se nota más que en la web. Cuando pides allí varias maquetas completas, la sesión ya carga con una base de código indexada y una conversación en marcha. Si llegas a tus límites, Claude Design no estará disponible hasta que se restablezcan.

La forma de aliviar el coste es la lista de buenas prácticas al revés: funciones acotadas y no flujos de varias pantallas, wireframes antes que alta fidelidad y ediciones manuales en el lienzo para el último 10 %, que son gratis.

Lo que /design no hace

Parrott traza el alcance con claridad. Claude Code sirve para escribir software de producción, y Claude Design cubre el resto: la ideación temprana, la colaboración y conseguir el visto bueno antes de que nadie se comprometa a construir. Lo dijo antes de que existiera /design, y un lienzo dentro del terminal borra esa frontera. Lo que sigue en pie es otra división: divergencia por un lado y convergencia por otro, ambas en una misma sesión.

El comando no se queda con el ciclo de construcción. Lo que añade es un paso de planificación visual delante. Exploras direcciones en el lienzo, eliges una y vuelves al Claude Code de siempre para implementar, probar, refactorizar y todo lo demás que hace real el software.

Tiene apenas unos días y se nota. Los diseños pasan al paso de construcción, pero todavía hay que guardarlos a mano. /design no aparece en la referencia oficial de comandos de Claude Code, mientras que /design-login y /design-sync sí. Es probable que el comportamiento cambie.

Qué superficie usar

Usa /design en Claude Code cuando el resultado vaya a acabar pronto en un repositorio que tengas clonado. Estar cerca del código es justo la gracia.

Recurre a claude.ai/design cuando el público sea una persona: una presentación, un one-pager, una landing o un prototipo navegable para pruebas con usuarios, básicamente cualquier cosa que alguien interesado pueda abrir en el navegador sin terminal. Exporta PDF, PPTX, HTML independiente y .zip, y envía el trabajo a Canva, Miro, Replit, Vercel y herramientas del entorno de Figma, entre otras.

Los dos funcionan en ambos sentidos, así que lo empezado en uno puede pasar al otro. Una diseñadora sin entorno de desarrollo local debería tratar la app web como su base, con el traspaso como puente. Un ingeniero que piensa en repositorios se queda con /design.

Si Figma es tu fuente de verdad

No hace falta elegir. El 17 de febrero de 2026, Figma y Anthropic lanzaron Code to Canvas, que envía la interfaz renderizada y en funcionamiento desde Claude Code a Figma como marcos editables, no como capturas estáticas. Instala el plugin:

claude plugin install figma@claude-plugins-official

Después abre /mcp en una sesión, conecta el servidor remoto de Figma y autentícate. Si aparece una entrada figma-desktop, desactívala, porque es el servidor local de solo lectura y choca con el remoto. A partir de ahí, decir «send this to Figma» (envía esto a Figma) llama a generate_figma_design.

Algunas personas han tenido problemas aquí. Hilos del foro de la comunidad de Figma describen capturas atascadas en un bucle de procesamiento infinito que acabaron en archivos en blanco, aunque al menos un desarrollador lo consiguió tras simplificar la página. Pruébalo con algo desechable antes de prometerle nada a una diseñadora.

En resumen, /design explora antes de que exista código, y Code to Canvas toma código que sí existe y lo devuelve a un lienzo para que el equipo lo debata.

Tu primera prueba

Elige una función a la que le das vueltas sin llegar a construirla y mantenla acotada: un panel, un modal, una página de ajustes. Ejecuta claude update, abre una sesión en el repositorio adecuado y empieza con:

/design 6 wireframe options for a notification preferences panel.
Use our existing card and toggle components. Structure only,
no color or polish yet.

Revisa las seis y comprueba que de verdad discrepan en la jerarquía. Descarta cuatro. Pide cinco remezclas de las dos que quedan. Elige una ganadora, pide una pasada de alta fidelidad con tus tipografías y colores bien especificados, y corrige el espaciado a mano en el lienzo, no describiéndolo. Solo entonces di «implement this» (impleméntalo).

Cronométralo. Toda la exploración debería costar menos de lo que habría costado en código una sola ronda de «¿puedes mover los interruptores a la derecha?», y la maquetación con la que acabas es una que elegiste, no una con la que te conformaste.

Ese es el cambio real, y es más pequeño y práctico que el discurso de transformación de la industria que suelen atraer estos lanzamientos. La programación con IA ya había abaratado la implementación. Ahora también es barato tirar las malas ideas. El agente cubre la mayor parte del cómo, y ver las opciones afina tu criterio sobre el qué, que siempre ha sido tu trabajo.