Claude Code estrena /design: artboards editables de tu interfaz antes de escribir código

Claude Code estrena /design: artboards editables de tu interfaz antes de escribir código
Ilustración: Digital Brain

Anthropic ha metido el flujo de diseño de Claude Design dentro de Claude Code. El nuevo comando `/design`, anunciado la noche del 17 de agosto desde la cuenta oficial @ClaudeDevs como research preview, genera varias maquetas editables de una interfaz, deja que elijas y retoques una, y después le pides a Claude que la implemente en tu código. Funciona en la CLI y en la app de escritorio, y está construido sobre los artifacts.

Puntos clave

  • Un comando, varios artboards. Escribes algo como `/design a few options for {feature}` y Claude devuelve varias propuestas de pantalla, no una.
  • Editables antes de programar. Eliges la que más te gusta, la modificas con el editor heredado de Claude Design y solo entonces pasa a código.
  • Lee tu proyecto. Según Nate Parrott, del equipo de Claude Code, Claude mira el código de tu repositorio y ajusta las maquetas al estilo visual que ya tienes.
  • Compartible. Las maquetas viven en un artifact, así que se pueden enseñar a alguien que no tiene el terminal abierto.
  • Planes Pro, Max, Team y Enterprise. Hay que actualizar Claude Code para verlo. Es research preview: a fecha de hoy no hay post en anthropic.com/news ni página en la documentación de Claude Code.

Qué es exactamente /design

Hasta ahora, cuando pedías a Claude Code una pantalla nueva, el flujo era el de siempre: describes lo que quieres, Claude escribe el código, arrancas la app y ves si se parece a lo que tenías en la cabeza. Si no, otra vuelta. Cada iteración cuesta tokens y minutos, y a la tercera vuelta ya no sabes si el problema es el diseño o tu forma de explicarlo.

`/design` mete un paso antes de todo eso. Nate Parrott, ingeniero de Anthropic que lo presentó en paralelo, lo describe así: pides "unas cuantas opciones para {funcionalidad}" antes de construir, eliges tu artboard favorito, lo editas y lo implementas. Y añade el detalle que importa: Claude lee tu base de código y hace que las maquetas encajen con el estilo de interfaz que ya usas, en vez de proponerte una pantalla genérica que luego hay que traducir a tus componentes.

La pieza técnica que lo hace posible son los artifacts, que Claude Code estrenó en junio como previsualización en vivo de páginas interactivas dentro del editor. Un artboard de `/design` es un artifact más: se pinta en el panel, se edita ahí y se comparte con un enlace.

De dónde viene: Claude Design

El flujo ya existía. Lo nuevo es dónde está. Anthropic Labs lanzó Claude Design el 17 de abril de 2026, un producto aparte para crear diseños, prototipos, presentaciones y one-pagers conversando con Claude, sobre Claude Opus 4.7. Permitía partir de un prompt, una imagen, un documento o un repositorio, refinar con comentarios inline y controles directos, aplicar el sistema de marca de forma automática y exportar a Canva, PDF, PPTX o HTML.

Y ya entonces tenía un botón de "handoff" hacia Claude Code: diseñabas en un sitio y programabas en otro. Cuatro meses después, Anthropic se ahorra el salto. Como resume el propio anuncio: el editor y el prompting de Claude Design, ahora directamente dentro de Claude Code.

Es un patrón que Anthropic repite. Primero prueba una capacidad como producto separado en Labs, y si funciona la absorbe la herramienta principal. Con Claude Code lleva todo el verano así: modo automático por defecto, mensajes entre sesiones, artifacts, y ahora diseño.

Lo que todavía no se sabe

Conviene ser honesto con lo que hay: dos tuits y ninguna documentación. No se sabe cuántos artboards genera por defecto, si consume el mismo cupo de uso que una sesión normal, si funciona igual con frameworks web que con apps nativas, ni cómo se comporta en un repositorio sin un sistema de diseño claro. Tampoco hay fecha para salir de research preview.

Lo que sí se sabe por el contexto de Claude Design: en Enterprise ese producto venía apagado por defecto y lo tenía que activar un administrador. Es razonable esperar algo parecido aquí, así que si trabajas en una cuenta de empresa y no ves el comando después de actualizar, mira antes con quien administre la cuenta que con el soporte.

La competencia ya estaba en esto

Anthropic no llega el primero al "diseña antes de programar" dentro del entorno de desarrollo. Replit lanzó Replit Design el 30 de julio con Mobbin integrado y 600.000 pantallas de referencia para inspirar las maquetas. Y v0, Lovable o Bolt llevan un año vendiendo justo eso: primero la pantalla, luego el código.

La diferencia de enfoque está en el punto de partida. Esas herramientas diseñan desde cero, para proyectos nuevos. `/design` parte de un repositorio que ya existe y promete respetar su estilo. Para quien empieza de cero da un poco igual; para quien tiene una app en producción con sus componentes y sus colores, es la diferencia entre una maqueta útil y una bonita.

Por qué importa

Si tu equipo usa Claude Code para herramientas internas, este es el paso que faltaba para no depender de un diseñador en cada pantalla nueva. En DigitalBrain montamos los paneles de sponsors y de newsletter con Claude Code, y el ciclo real ha sido siempre "escribe, mira, corrige, mira otra vez". Poder ver tres versiones de un panel antes de que exista una línea de código recorta ese ciclo por el lado más caro, que es el de descubrir tarde que la estructura no era la buena.

Dos cautelas prácticas. La primera: es preview, así que si vas a enseñarle el resultado a un cliente, guarda el artifact y no cuentes con que el comando se comporte igual la semana que viene. La segunda: la promesa de "encaja con tu estilo" depende de que tu código tenga un estilo que leer. Un proyecto con CSS heredado de tres épocas distintas le va a dar a Claude el mismo problema que le daría a un diseñador nuevo el primer día.


Relacionado