Las 3 skills que vuelven a Claude tu diseñador

La primera · Taste Skill

★ 95,088 en GitHub · tasteskill.dev

Tus reglas de diseño, antes de que Claude dibuje

Es un archivo de reglas contra lo que sus autores llaman «AI slop»: el degradado morado, las tres tarjetas iguales, la tipografía de siempre. Claude lo lee antes de escribir tu página. Está pensada para landings, portafolios y rediseños; el propio archivo dice que no es para dashboards ni tablas de datos.

tasteskill.dev

Trae tres perillas

Son tres números del 1 al 10 y de ellos sale todo lo demás: qué tanto se arriesga con el acomodo, cuánto se mueve la página y qué tan llena va. Vienen así de fábrica.

Fuente: SKILL.md, sección 1 («The Three Dials», base 8 / 6 / 4). No hace falta editar el archivo para moverlas: se lo dices a Claude en la conversación («menos movimiento», «más aire») y las ajusta.

Y tus reglas mandan

Esto es lo que digo en el video. La skill trae sus propias reglas, pero te deja poner las tuyas encima. Lo dice su documentación:

O sea: abres el SKILL.md, pegas hasta arriba tu guía de estilo (tus colores, tus fuentes, lo que nunca quieres ver) y Claude la toma como la verdad. Los cambios aplican en la siguiente página que le pidas. La plantilla para llenarla está en «Para pegar».

Lo que le prohíbe a Claude

La sección 9 del archivo es una lista de vetos. Estos son algunos:

Los tres candados son la sección 4 («The locks»). También trae una regla para el inicio de la página: titular de máximo dos líneas, texto de apoyo de máximo veinte palabras y el botón principal visible sin hacer scroll.

github.com/Leonxlnx/taste-skill · examples/floria-top.webp

La tercera · Awesome DESIGN.md

★ 120,539 en GitHub · getdesign.md

El diseño de 84 sitios reales, cada uno en un archivo

Un DESIGN.md es un archivo de texto con los colores, las fuentes, los espacios y los componentes de un sitio, escrito para que lo lea una IA. El formato lo propuso Google Stitch. Este repo trae 84 ya hechos: Claude, Stripe, Apple, Linear, Notion y muchos más. Es la más estrellada de las tres.

Doce de los 84. Cada ficha está pintada con los colores primary, ink y canvas de su archivo, y abajo va el nombre que escribes en el comando. Leídos en el repo el 12 oct 2026. Sin logotipos a propósito: léete el aviso de abajo.

Cómo se usa

1. Mira el catálogo. Cada marca tiene su nombre corto

   En la terminal Copiar

   npx getdesign@latest list

   También puedes verlos con vista previa en getdesign.md/design-md.

2. Trae el que te guste. Se guarda como DESIGN.md en tu proyecto

   En la terminal · cambia stripe por el tuyo Copiar

   npx getdesign@latest add stripe

   Si ya tenías un DESIGN.md, el nuevo se guarda en una subcarpeta para no pisarlo. Con --force lo reemplaza.

3. Dile a Claude que lo lea. Antes de escribir cualquier pantalla

   Para Claude Copiar

   Antes de escribir o cambiar cualquier interfaz de este proyecto, lee DESIGN.md en la raíz. Respeta sus colores, su escala de tipografía, sus espacios y sus componentes. Trátalo como la fuente de verdad de las decisiones visuales.

   Es la instrucción que recomienda el propio paquete, traducida. ¿En el chat de Claude, sin proyecto? Adjunta el archivo y pide: «con el sistema de diseño del archivo, hazme una página de precios».

Qué trae un archivo por dentro

Esto es un pedazo real del de Claude. Así se ve lo que tu agente lee:

colors:
  primary: "#cc785c"
  ink: "#141413"
  canvas: "#faf9f5"
  …y 22 colores más

typography:
  display-xl:
    fontFamily: "Copernicus, Tiempos Headline, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
  …y 13 niveles más de tipografía

Las nueve secciones que el README dice que trae cada archivo. Un detalle: las fuentes de marca, como Copernicus o Tiempos, son de pago. El archivo las nombra, no las incluye: pídele a Claude una parecida que sí puedas usar.

github.com/VoltAgent/awesome-design-md

Para pegar

Tu guía de estilo y cuatro pedidos listos

Cambia lo que va entre corchetes. La primera es la más importante: es lo que hace que Claude diseñe con tu marca y no con la de todos.

# GUÍA DE ESTILO DE [TU MARCA]
Esta guía manda sobre cualquier otra regla de este archivo.

## Colores
- Principal: [#000000]. Sólo para botones y enlaces.
- Fondo: [#FFFFFF]. Texto: [#111111].
- Nunca: [degradados, morado, más de un color de acento].

## Tipografía
- Títulos: [nombre de la fuente], peso [700].
- Texto: [nombre de la fuente], mínimo [16] px.

## Forma
- Esquinas: [8] px en todo.
- Sombras: [ninguna / suaves].
- Espacios: múltiplos de [8] px.

## Voz
- Le hablamos de [tú / usted] a [quién es tu cliente].
- Frases cortas. Nunca decimos: [las palabras que no usas].

## Lo que nunca
- [Tres cosas que no quieres volver a ver en una página tuya].

La plantilla es mía; lo de pegarla arriba del archivo es de su documentación. El archivo está en .claude/skills/design-taste-frontend/SKILL.md. Un consejo mío: pégala debajo de las tres rayitas que cierran el encabezado del archivo, no encima, para no romperle el nombre a la skill.

Usa la skill de Taste como tu única fuente de reglas de diseño.

Brief:
- Tipo de página: [landing / portafolio / página de producto]
- Producto: [nombre y qué hace, en una línea]
- Para quién: [quién la va a leer]
- Cómo se debe sentir: [2 a 4 adjetivos concretos, por ejemplo "sobria, editorial, cálida"]
- Referencias: [sitios o marcas reales que se parecen a lo que quiero]
- Evita: [lo que no quiero que salga por defecto]

Paso 1. Dime en una frase cómo leíste el brief y qué valor le pones a cada una de las tres perillas, con una línea de razón por cada una. Detente ahí.

Paso 2 (cuando te diga que sí). Construye la página con las secciones que de verdad le sirven al producto. Un solo tema para toda la página e imágenes reales, no dibujos hechos con cajas.

Paso 3. Corre por escrito el Pre-Flight Check de la skill y dime qué pasa y qué falla. Si algo falla, no está terminada.

Adaptado al español del prompt oficial de tasteskill.dev/guide. El original está en inglés y pide Next.js con al menos ocho secciones; aquí lo dejé abierto.

Lee DESIGN.md antes de escribir nada. Con ese sistema de diseño, hazme [la página que necesitas: una landing, una página de precios] para [tu producto, en una línea].

Usa sus colores con el papel que les da el archivo, su escala de tipografía y sus componentes. Si pide una fuente de pago, usa la más parecida que sea gratuita y dime cuál elegiste.

Los textos van en español y son míos: [pega aquí tu titular, tu texto y tu botón, o pídele que los proponga].

/impeccable generate 3 layout variants of the hero. Make the main button easier to find and keep the fonts and colors.

Sigue la forma del ejemplo de su documentación, que está en inglés. Cambia the hero por la sección que quieras y la segunda frase por lo que buscas.

/impeccable critique landing
/impeccable audit
/impeccable polish

Uno a la vez: primero qué está mal de diseño, luego lo técnico y al final la pasada de limpieza.