Claude Design: el skill que casi nadie usa (y deberías estar usando)

Cuando hablamos de crear diseños —sitios web, infografías, imágenes en general— normalmente nadie piensa en Claude, porque no genera imágenes. Pero sí genera código, y con código puede llegar a producir interfaces bastante decentes.

De ahí sale Claude Design: una plataforma para generar interfaces y diseños de todo tipo, en la línea de lo que hace Figma, pero con IA. Y aunque parezca una función que nadie usaría, es probable que te estés perdiendo una de las mejores formas de trabajar interfaces en tus proyectos web: pedir propuestas, verlas, probarlas y recién ahí decidir qué se implementa en tu código.

En este artículo te comparto para qué sirve el skill design, qué puedes generar con él y cómo lo uso yo.

El problema que resuelve

Claude Design no es nuevo. A inicios de año ya se podían hacer diseños de aplicaciones móviles, presentaciones, animaciones, wireframes, CVs, portafolios. En la práctica, casi cualquier cosa relacionada con diseño.

El motivo por el que yo no lo usaba tanto es que estaba muy atado a la aplicación web. Pedir cosas desde ahí no es cómodo: aunque puedes integrarlo con GitHub o subir imágenes, si estás desarrollando es difícil andar saltando entre la página web y tu editor tratando de llevar eso a código.

Eso cambió con el skill design, que trae ese mismo flujo directamente a Claude Code. Ahora, mientras estás haciendo un cambio en código, puedes pedir un diseño, Claude te genera una URL, entras, revisas las propuestas y eliges una. "Ve por la A", le dices, y sigues trabajando. Puedes ir saltando entre varios diseños dentro de la misma interfaz sin salir de la sesión.

Cómo se usa

El skill viene preinstalado en Claude Code. Basta con escribir /design seguido de lo que quieras:

/design Dame propuestas para diseños de una web de cafetería

Después de un momento vas a obtener cuatro diseños de sitios web. Y aquí está lo importante: no son imágenes estáticas, es código renderizado dentro de una interfaz web. Eso significa que puedes pedir modificaciones de cada sección, seguir iterando a medida que haces clic, o editar el texto directamente sobre el diseño. Si quieres que un titular vaya en mayúsculas, lo editas ahí mismo y al salir del campo se actualiza.

Si los diseños no te convencen, puedes combinar el skill con otros skills de estilo y el resultado mejora bastante.

El editor: hasta dónde llega

Arriba a la derecha del canvas hay un ícono de show properties. Ahí ves cada elemento al que estás accediendo, con una jerarquía parecida a la de Canva —mucho más básica, obviamente, pero funcional.

Con eso puedes:

• Seleccionar un elemento y ver su CSS.
• Eliminar elementos que no quieres. Si de cuatro tarjetas solo necesitas tres, borras la que sobra.
• Guardar los cambios con save, y el código se altera de inmediato.
• Aislar un artboard con play y exportarlo en HTML, PDF o imagen.

El límite que conviene tener claro: en este lienzo no puedes editar con IA como sí ocurre en Claude Design completo. Esta es una versión preliminar del canvas. Aquí guardas cambios manuales y exportas; el trabajo con IA lo sigues haciendo desde Claude Code. Aun así, si encontraste un skill de estilo por internet y quieres ver varias variantes aplicadas, esta es una forma muy directa de lograrlo.

Segundo caso: infografías

Creas una carpeta, abres Claude Code y ya. Lo interesante acá es que puedes partir de referencias visuales: Pinterest, Dribbble y similares. Buscas algo como infographic design, tomas screenshots de dos o tres piezas que te gusten y las arrastras a la sesión.

/design Crea propuestas de infografía sobre Bun, el entorno de ejecución.
Básate en las imágenes que te he dado.

Lo que obtienes son diseños construidos a partir de esas referencias, con el texto correcto sobre el tema. Como el modelo genera varias propuestas, no todas tienen que parecerse entre sí, así que puedes mezclar referencias distintas a propósito.

Un detalle útil: arriba del canvas queda una especie de resumen de qué dirección de diseño se usó. Es una nota aparte del diseño en sí, y sirve para saber por qué salió lo que salió.

Recomendación práctica: ve armando tu propia galería de referencias. Cada vez que encuentres algo que te guste, guárdalo. Ya sabes que esa es la que vas a usar la próxima vez.

Si quieres afinar una sola pieza, tienes dos caminos: seguir pidiendo iteraciones sobre esa propuesta, o descargarla y volver a pasarla a Claude para trabajar con un único diseño.

Tercer caso: rediseñar algo que ya existe

Este es el uso que más valor me da.

Supongamos que tienes una sección de tu web que no te termina de gustar. Lo normal sería pedirle la modificación a Claude, esperar, revisar el resultado en el navegador y, si no funciona, repetir. Cada vuelta cuesta tokens y tiempo.

Con /design puedes darle acceso al código actual y pedir propuestas antes de tocar nada. En mi caso me devolvió variantes que no se me habían ocurrido: una con un sidebar dentro de la página, otra con un resumen todo-en-uno a la derecha. Y desde el canvas puedes reacomodar: mover inputs de un lado a otro, reordenar tarjetas completas.

La ventaja es evidente cuando el proyecto es grande: iteras visualmente, sin escribir una sola línea de código, y solo implementas cuando ya sabes qué quieres. Evitas el gasto excesivo de tokens que implica pedir, implementar, revisar y descartar.

Todo queda guardado como artifact

Cuando pides un diseño, Claude lo guarda como un artifact con su propia URL. No es un servidor local que se pierde al cerrar la terminal.

Si entras a tu cuenta de Claude, sea en web o escritorio, vas a encontrar una sección de artefactos con todos los diseños que has pedido: interfaces, dashboards, sidebars, documentación. Poder volver a revisarlos o usarlos como referencia después es más útil de lo que parece.

Requisitos y costo

Antes de entusiasmarte, los datos concretos:

• Es una research preview, anunciada por Anthropic en agosto de 2026.
• Funciona en la CLI y en Claude Code Desktop, desde la versión 2.1.233.
• Está disponible en los planes Pro, Max, Team y Enterprise. No es gratuito.
• Al apoyarse en artifacts, hereda sus requisitos: sesión iniciada con cuenta de claude.ai.
• Según tu cuenta, obtienes el editor visual con guardado, o una vista de solo lectura con exportación.
• Consume tokens. Piensa en esto como generar landing pages en HTML una y otra vez, porque en el fondo es exactamente eso.

Fuente: Claude Code /design skill

Conclusión

Usar este skill es sencillo, no necesitas un curso para aprenderlo. Cuando recién salió tampoco lo tenía muy claro y pensaba que no era tan útil. Pero al momento de generar interfaces y código, vale la pena: te da una forma visual de revisar antes de implementar, que es justamente lo que siempre terminas haciendo cuando hay modificaciones de por medio.

Si ya tienes una suscripción alta y lo combinas con otros skills, es una de esas funciones que ahorran tiempo de verdad.

¿Tú lo usas de otra forma? Cuéntamelo en los comentarios.