Claude Code /design: el flujo de Claude Design llega al CLI

Claude Code ya tiene un comando /design. Lleva el flujo de artboards de Claude Design a una sesión de desarrollo y funciona sobre los Artifacts de Claude Code.

La diferencia es importante. /design no convierte el terminal en la aplicación completa de Claude Design. Usa el repositorio como contexto, genera una página HTML visual, la abre en el navegador y permite volver al código después de elegir una dirección.

La ruptura que todavía tenía mi flujo de trabajo

El diseño seguía siendo una etapa separada dentro de mi flujo agentic. Preparaba el producto en Claude Code y después tenía que:

abrir Claude Design en la web;
volver a proporcionar el contexto del producto;
explicar el design system y los componentes existentes;
generar varias maquetas;
exportar o describir la dirección elegida;
volver a Claude Code para implementarla.

Este traspaso manual generaba un problema sencillo: el repositorio y la maqueta no compartían automáticamente el mismo contexto. Tenía que repetir las restricciones para cada user story y comprobar que el diseño no hubiera inventado componentes, datos o acciones que el producto no soportaba.

Lo que hace realmente `/design`

El anuncio oficial de Claude Developers describe /design como el flujo de artboards de Claude Design dentro de Claude Code, construido sobre Artifacts. Un Artifact es una página web interactiva publicada desde una sesión de Claude Code en una URL privada de claude.ai.

El flujo pasa a ser:

Claude Code inspecciona el repositorio, sus componentes y sus tokens;
/design crea una página HTML autónoma con una o varias direcciones visuales;
el navegador muestra los artboards;
el usuario compara las propuestas y solicita correcciones;
Claude Code modifica los archivos reales del proyecto según la dirección aprobada;
las pruebas y el git diff todavía deben revisarse antes de cualquier pull request.

El contexto del repositorio es la parte útil. El modelo puede respetar el design system, los componentes React, los estados soportados y los datos disponibles en lugar de empezar desde una página en blanco.

`/design` y Claude Design son productos distintos

Claude Design	`/design` en Claude Code
Producto creativo completo	Flujo visual desde una sesión de código
Proyectos, colaboración y comentarios	Artifact HTML autónomo
Design systems compartidos	Design system leído desde el repositorio
Edición visual avanzada	Correcciones solicitadas a Claude en la sesión
Exportaciones HTML, PDF, PPTX o Canva	Regreso directo a los archivos del proyecto

Comparten la exploración mediante artboards. La superficie técnica es diferente: /design crea un Artifact, no un proyecto de Claude Design sincronizado.

Mi prueba con una funcionalidad SaaS real

Probé el comando con DNS Connects, una funcionalidad de AgentMail. El backend y los estados ya existían: dominio vacío, verificación pendiente, éxito, error y SES no disponible.

No quería una landing page inventada. El diseño debía respetar los componentes del producto, mostrar los registros DNS reales y conservar las acciones disponibles.

Este es el tipo de prompt que utilicé:

/design
Analiza el flujo DNS Connects existente, sus componentes,
tokens y datos disponibles.

Propón tres direcciones realmente diferentes.
Reutiliza el design system existente.
Cubre únicamente los estados soportados por el backend.
No implementes nada antes de que apruebe una dirección.

La última línea importa. Esperar una selección antes de programar es una restricción del prompt, no una garantía automática del comando. Primero quiero comparar las direcciones, corregir los textos y revisar el diseño responsive.

La revisión humana sigue siendo necesaria

Una maqueta bonita no demuestra que la funcionalidad sea correcta. Después de implement that, sigo revisando:

los componentes reutilizados de verdad;
los estados de negocio cubiertos;
las acciones conectadas al backend existente;
el comportamiento responsive y la accesibilidad;
las pruebas específicas;
cada archivo modificado en git diff.

El Artifact ayuda a elegir una dirección. El repositorio, las pruebas y la revisión de código determinan si esa dirección puede llegar a producción.

Límites de los Artifacts

La documentación de Claude Code establece varios límites prácticos:

un Artifact es una sola página HTML o Markdown;
no tiene backend propio;
las solicitudes externas están muy restringidas por la política de seguridad;
el archivo renderizado debe pesar menos de 16 MiB;
la publicación requiere una cuenta claude.ai compatible y una versión reciente de Claude Code;
el resultado no se sincroniza automáticamente con un proyecto de Claude Design.

El formato funciona bien para una maqueta, una comparación o un informe interactivo. Una aplicación con varias páginas, autenticación, persistencia y APIs todavía debe implementarse en una infraestructura real.

Mi veredicto

/design reduce el traspaso manual entre el repositorio, la maqueta y la implementación. Resulta especialmente útil cuando el proyecto ya tiene un design system y componentes que Claude puede inspeccionar.

El comando no sustituye a Claude Design completo, las pruebas ni la revisión del diff. Acerca la decisión visual al código que debe ejecutarla.

Ver mi prueba completa de /design

Recibir mis próximos workflows de IA y desarrollo en The Agentic Dev