Una design skill es un conjunto de instrucciones que le enseña a Claude cómo diseñar interfaces, componentes y sistemas visuales a tu manera. La instalas una vez y, a partir de ahí, Claude genera cada diseño con tu criterio, tus tokens y tus reglas, en vez de partir de la plantilla genérica de siempre cada vez que le pides algo.
En esta guía vas a ver cómo instalar tu primera design skill y dejarla lista para trabajar, tanto en Claude Code como en la app de Claude. Sigue leyendo y en unos minutos lanzas tu primer encargo de diseño con una skill activa.
Cuando le das una orden de diseño a Claude, una design skill entra en juego de forma silenciosa y modifica cómo aborda la petición. En lugar de saltar directo al código, sigue un marco de trabajo, elige tipografía y jerarquía, aplica tus colores y evita los patrones que más se repiten en las interfaces generadas por IA. El resultado es un diseño que se parece a tu producto y no al de cualquier otra web del mismo nicho.
Aquí conviene separar dos cosas que se confunden. Claude Design es la herramienta, el lienzo donde Claude genera e itera interfaces a partir de tu chat, mientras que una design skill es el contexto que cargas dentro de esa herramienta o de Claude Code para que cada sesión abra con tu marca ya puesta.
La herramienta dibuja y la skill decide con qué criterio lo hace. Puedes usar Claude Design sin ninguna skill, pero entonces partes de cero en cada conversación, explicando tu paleta y tu tipografía una y otra vez.
El proceso cambia un poco según uses Claude Code en tu terminal o la app de Claude en el navegador, pero la idea es la misma. Instalas la skill, compruebas que está disponible, dejas que se active y le lanzas un primer encargo. Cada paso viene con el comando exacto que necesitas escribir.
En Claude Code, una skill vive en una carpeta con un archivo SKILL.md dentro. Si quieres que esté disponible en todos tus proyectos, créala en tu carpeta personal con mkdir -p ~/.claude/skills/mi-design-skill. Si solo la quieres para un proyecto concreto, usa la carpeta del repositorio con mkdir -p .claude/skills/mi-design-skill.
Para instalar una skill oficial empaquetada como plugin, abre el menú de plugins con /plugin y elige la que quieras desde el marketplace de Anthropic. Al instalarla, Claude Code te preguntará dónde quieres tenerla disponible. Si eliges usuario, la skill estará en todos tus proyectos. Si eliges proyecto, solo en el repositorio en el que estés trabajando.
En la app de Claude el camino cambia, porque trabajas desde el navegador en lugar de la terminal. Primero activa la ejecución de código en los ajustes, porque las skills dependen de ese entorno para funcionar. Una vez activada, entra en Customize > Skills, pulsa el botón de añadir y sube la skill como un archivo ZIP que contenga la carpeta con el SKILL.md.
Antes de pedirle nada, confirma que Claude reconoce la skill. En Claude Code tienes dos vías. Escribe / y mira si la skill sale en el listado de comandos, o pregúntale directamente a Claude qué skills tiene disponibles para que te las enumere. Si aparece por su nombre en cualquiera de las dos, es que ya está cargada y lista para usar.
En la app de Claude, entra en Customize > Skills y revisa que la skill aparece en la lista con su interruptor activado en verde. Si la ves en gris, todavía no está lista y solo tienes que pulsar el toggle para encenderla.
Lo cómodo es que Claude lee la descripción de la skill y la activa por su cuenta cuando detecta que tu petición encaja, así que muchas veces no tienes que hacer nada especial. Pides una interfaz y la skill entra en juego sola.
Si prefieres forzarla, en Claude Code la lanzas escribiendo / seguido del nombre de la skill, por ejemplo /mi-design-skill. Cuanto más clara sea la descripción de la skill, mejor sabrá Claude cuándo activarla. Cuando una skill no se dispara aunque esté instalada, casi siempre es porque esa descripción es demasiado vaga.
Con la skill activa, escribe tu petición como se la harías a un diseñador, y cuanto más concreta sea, mejor será el resultado. Nombra el tipo de proyecto, da una referencia visual y marca uno o dos límites claros. Por ejemplo, una landing para una startup de fitness con estética limpia, inspirada en una revista deportiva y sin degradados morados.
La skill se encarga del resto, aplicando tu criterio sobre tipografía, color y jerarquía. A partir de ese primer resultado iteras con frases cortas, le pides ajustar el contraste, cambiar el tamaño de los titulares o reorganizar una sección, hasta que la pantalla queda como la imaginabas.
No hace falta que escribas la tuya desde cero para empezar. Hay skills oficiales y de la comunidad que cubren buena parte del trabajo de diseño, y puedes instalarlas tal cual o usarlas como base para la tuya.
Ya tienes lo necesario para instalar tu primera design skill, comprobar que está activa y lanzar un encargo con tu propio criterio en lugar de partir de cero cada vez. Con un poco de práctica, cada sesión de diseño arranca con tu marca ya puesta y tú solo afinas el resultado.
Si quieres pasar de diseñar pantallas a construir productos completos con Claude, en el curso gratuito de Claude Code aprendes a sacarle partido al vibe coding paso a paso, sin necesidad de programar.
Descubre lo que puedes crear en 7 días, sin saber programar
Cada día, un proyecto que podrás construir sin escribir una sola línea de código, directo a tu bandeja de entrada.
Empieza Gratis
Academia de herramientas no-code y low–code
.svg){kind=icon}
