Aprender

La respuesta breve

El nuevo flujo /design es útil porque inserta un paso de exploración antes de que Claude escriba componentes. En lugar de empezar con “constrúyeme un panel”, describes la interfaz y revisas varias direcciones visuales primero.

Eso es un mejor valor predeterminado para trabajos de UI ambiguos. El error costoso a menudo no es un JSX malo; es comprometerse con la primera disposición plausible antes de que alguien haya comparado alternativas. La vista previa todavía está en una fase temprana, y la referencia pública de comandos puede no listar cada comando con acceso restringido o específico de cuenta, así que verifica la disponibilidad local antes de documentarlo como una dependencia estable del equipo.

Comienza con el prompt más pequeño

Verifica la versión instalada primero; actualiza solo si la vista previa no está disponible:

claude --version
# If needed:
claude update

Luego describe al usuario, la tarea, el contenido y las restricciones—no una pila de instrucciones CSS. Por ejemplo:

/design Create a mobile-first reading dashboard for saved technical articles. Show unread count, filters, article cards, and a clear empty state. Use our existing dark theme and make keyboard focus visible.

La salida útil no es una captura de pantalla final. Es un conjunto de direcciones competidoras que puedes comparar: densidad, jerarquía, navegación y cuánto de la pantalla se dedica a la tarea principal.

Un ciclo de revisión que evita callejones bonitos pero inútiles

Revisa cada dirección contra cuatro preguntas concretas:

1. ¿Puede el usuario completar la tarea principal sin explicación? Si la respuesta depende de elementos decorativos, recházala.
2. ¿Cabe el contenido? Prueba títulos reales, etiquetas largas, estados vacíos, errores y estados de carga—no texto de relleno.
3. ¿Sobrevive a las restricciones responsive y de accesibilidad? Revisa el orden del teclado, la visibilidad del foco, el contraste, la reducción de movimiento y pantallas estrechas.
4. ¿Puede el sistema existente soportarlo? Compara espaciamiento, tipografía, tokens de color y componentes antes de inventar nuevos patrones.

Mantén un registro de decisiones breve que explique por qué una dirección ganó, en lugar de copiar un artboard al repositorio sin su intención.

Dónde termina la vista previa

/design no elimina la necesidad del juicio de producto. Las direcciones generadas pueden dar prioridad excesiva a la novedad visual, omitir estados de validación o implicar interacciones costosas en móvil. Tampoco pueden conocer tus analíticas, requisitos legales, modelo de contenido o lenguaje de diseño establecido a menos que proporciones ese contexto.

La entrega limpia es un brief compacto: dirección seleccionada, alternativas rechazadas, usuarios objetivo, ejemplos de contenido real, reglas responsive, requisitos de accesibilidad y los componentes que deben reutilizarse. Inicia un prompt de implementación nuevo a partir de ese brief. Separar la exploración de la codificación evita que el modelo defienda su primera idea visual mientras escribe el primer componente.

Veredicto

Usa /design cuando el problema sea ¿qué debería ser esta interfaz? Usa el flujo de trabajo normal de codificación cuando la decisión de diseño ya esté tomada. El comando es más valioso como un mecanismo de forzado: compara múltiples direcciones, pruébalas contra restricciones reales y luego escribe código con una decisión que puedas explicar.

Este artículo describe una vista previa temprana y evita intencionalmente tratarla como una garantía de comando estable. La referencia oficial de comandos y el changelog de Claude Code siguen siendo la fuente de la verdad para disponibilidad y comportamiento por versión, verificados el 2026-08-20.