TL;DR Escribe
/designseguido de lo que quieres diseñar. Claude publica un lienzo de artboards y te da el enlace. Abres, mueves las piezas tú mismo, y luego le dices cuál implementar. No hay nada que instalar y no consume una bolsa aparte. Necesitas la v2.1.233 o superior.
Yo trabajo mucho en Claude Design y hasta ahora el puente iba en una sola dirección. Diseñabas en la web, le dabas a exportar, copiabas el enlace y lo pegabas en Claude Code para que partiera de ahí. Funcionaba, pero el diseño siempre empezaba fuera. Desde la v2.1.233 hay un comando que lo empieza dentro.
Qué es la skill /design
Es una skill integrada en Claude Code, en research preview. Le das un encargo en lenguaje normal y publica un lienzo con tus diseños como artifact, la misma pieza que ya usas cuando le pides una página web con el trabajo de la sesión.
Lo que hay dentro del artifact no es una captura. Es el editor de lienzo de Claude Design, empaquetado y servido junto al diseño. Cada archivo que Claude escribe es un artboard con su marco, su título y sus controles propios, colocados sobre un mismo lienzo que se mueve y se acerca.
Lo que sale en pantalla
/design una pricing card para un solo plan: nombre, precio,
tres líneas de features y un botón
Claude escribe el diseño, lo publica y responde con el enlace del lienzo. Lo abres y tienes los artboards en fila, cada uno con su nombre encima.
En la barra superior, a la izquierda, están deshacer y rehacer junto al zoom. A la derecha, el botón Save. El texto lo reescribes sobre el propio diseño; el panel de propiedades, para lo demás, se abre desde la barra o desde el menú rápido de lo que tengas seleccionado. Nada de eso vuelve al terminal hasta que guardas, y guardar publica una versión nueva para todo el que tenga acceso al enlace.
Encima de cada artboard salen además los ajustes que Claude haya declarado. En el ejemplo de arriba, un selector de color de acento por artboard: lo cambias y ese diseño entero se recolorea sin escribir una línea.
Cómo usar Claude Design desde Claude Code
1. Pídelo con el encargo dentro
/design tres direcciones para la pantalla de ajustes de la app
Cuanto más concreto el encargo, menos vueltas. Si estás dentro de un repo, Claude busca antes tus tokens, tus componentes y tus pantallas parecidas, y dibuja con eso en lugar de inventarse una estética.
2. Elige sobre el lienzo, no en el chat
Pídele varias direcciones y compáralas puestas una al lado de otra. Es más rápido que describir con palabras lo que no funciona de la primera.
3. Retoca lo que sea más rápido a mano
Un padding, un color, una palabra. Corregirlo en el panel cuesta menos que redactar la frase que se lo explique.
4. Devuélvelo al terminal
Dile qué artboard quieres, por su nombre, y que lo implemente. Ese es el punto del comando: el diseño y el código dejan de vivir en dos aplicaciones distintas.
Las dudas de antes de probarlo
No hay nada que instalar. Ni servidor, ni extensión, ni cuenta nueva. Para saber si tu cuenta lo tiene, escribe /design en el prompt: si no te autocompleta, el preview todavía no ha llegado.
No es un sitio aparte. claude.ai/design existe y es la herramienta completa. Esto es su editor de lienzo funcionando dentro de Claude Code.
No es gratuito ni tiene bolsa propia. Llega con los planes de pago, Pro, Max, Team y Enterprise. Antes Claude Design tenía su asignación semanal separada; ya no, el gasto sale del mismo límite que tu chat y tu Claude Code.
El lienzo nace privado. Se comparte desde el menú de la propia página. Quien entre sin permiso de escritura lo ve en modo lectura y puede exportar a PNG o PDF, pero no guardar.
Lo que este preview no hace
Conviene saberlo antes de apoyarte en ello. /design import, /design export y /design status no funcionan aquí y te remiten a claude.ai/design; ese camino pasa por el servidor MCP de Claude Design, que se instala aparte. Tampoco hay tokens de color del design system ni el ciclo de pedir ajustes por chat dentro del lienzo, porque dependen del backend de la web.
Y hay dos límites que conviene tener presentes. El editor va empaquetado dentro de cada lienzo que publicas, así que un lienzo antiguo no recibe las mejoras que lleguen después. Y si dos personas editan a la vez, la segunda en guardar recibe un conflicto: no se fusiona nada.
Si lo que buscas es que el código que ya escribe Claude deje de parecer generado por una máquina, eso es otra skill distinta. Esta no toca tu código: te da un lienzo. Y si acabas usando el resultado para entender un cambio antes de delegarlo, ese hábito lo cuento en cómo uso los artefactos para entender lo que delego.
Referencia
| Aspecto | Detalle |
|---|---|
| Comando | /design <lo que quieres diseñar> |
| Qué devuelve | Un artifact con el editor de lienzo y tus artboards |
| Planes | Pro, Max, Team y Enterprise |
| Dónde funciona | Terminal y Claude Code Desktop |
| Guardar | Botón Save; publica una versión nueva para todos |
| Exportar | PNG por artboard, o un PDF con todos |
| Coste | Del límite compartido, sin asignación propia |
| Estado | Research preview, sin paridad con claude.ai/design |
Documentación oficial: What's New, semana 34
Requisitos
- Claude Code v2.1.233 o superior
- Plan Pro, Max, Team o Enterprise