Taste Skill enseña a tu agente a diseñar sin parecer una IA

Le pides a tu agente una landing y ya sabes lo que va a salir. Fuente Inter, degradado del morado al azul, tres tarjetas iguales y centradas, un
badge con borde redondeado.

Compila, funciona, se despliega. Y grita “esto lo ha hecho una IA” desde la primera pestaña.

Ya hemos peleado con este problema por aquí. Te conté cómo la skill oficial
frontend-design mete criterio estético en el prompt del agente. Y cómo
las skills de Impeccable empaquetan vocabulario de diseño en 17 comandos.

Las dos hacen bien su trabajo: le dan a tu agente el ojo que no tiene.

Taste Skill entra por otra puerta. No es una skill, son trece. No es un criterio general, son diales que ajustas a mano. Y no solo genera código:
también genera imágenes de referencia para que otro agente las convierta en web.

Con más de 30.800 estrellas y 2.300 forks en GitHub a día de hoy, es una de las colecciones anti-slop más descargadas del ecosistema.

En este artículo vas a ver:

• Qué es Taste Skill y por qué son trece skills y no una
• Los tres diales que definen el carácter de cada diseño
• Cómo se instala y cómo eliges la skill correcta para cada tarea
• Las skills de generación de imágenes, el terreno que frontend-design no pisa
• Dónde está el oro de verdad: el pre-flight check y el catálogo de “AI Tells”
• Qué NO esperar de esta colección y cómo encaja junto a lo que ya usas

Qué es Taste Skill y en qué se diferencia de lo que ya conoces ¶

Taste Skill es una colección de trece agent skills con licencia MIT que mejora la estética de las interfaces que generan los agentes de IA. La
creó el desarrollador Leonxlnx y su lema lo resume bien: darle buen gusto a tu IA para que deje de producir diseños genéricos.

Si no tienes claro qué es una agent skill, empieza por la guía completa de skills para
programadores. Aquí doy por hecho que conoces el concepto.

La diferencia con frontend-design e Impeccable no es de calidad, es de forma.

frontend-design es una skill: un bloque de criterio que Claude aplica antes de escribir CSS. Impeccable es un conjunto de comandos
(/critique, /bolder, /polish…) que le dan al agente vocabulario para diagnosticar y pulir.

Taste Skill es un armario entero. Trece ficheros SKILL.md, cada uno con una función distinta, que instalas juntos o por separado.

Dentro de ese armario hay skills que generan código y skills que generan imágenes de referencia. La principal, más variantes para minimalismo,
brutalismo, estética “suave” o rediseño de proyectos existentes. Y tres piezas que producen tableros visuales para web, móvil y marca.

🔑 frontend-design e Impeccable te dan criterio. Taste Skill te da un taller con criterio, diales y modos de trabajo distintos para cada tipo de
encargo.

Para que no quede en teoría, este es un ejemplo real generado con Taste Skill: la landing de una marca ficticia llamada Floria. Fíjate en el hero,
con tipografía de carácter y una composición que no cae en el centrado de siempre.

Conviene ser honesto con lo que es. Taste Skill es Markdown y un script de shell. No hay motor mágico debajo, no hay modelo entrenado, no hay
compilador.

Es un cuerpo de reglas muy bien afiladas que se inyectan en el contexto de tu agente. Su fuerza está en lo específicas que son esas reglas, no en
la tecnología.

Como ya defendimos al hablar de buenas prácticas para escribir skills, la mitad del
conocimiento experto de diseño es saber qué no hacer. Y esta colección lleva esa idea al extremo.

Como cualquier proyecto viral de la comunidad, también arrastra ruido. El repositorio incluye un aviso pidiendo que no lo confundas con ningún
token ni criptomoneda que use su nombre. Anécdota que dice más del hype del ecosistema que de la skill.

Ese ecosistema va muy rápido. Anthropic publicó el estándar abierto de Agent Skills el 18 de diciembre de 2025, y en semanas lo adoptaron OpenAI,
Google, GitHub Copilot y Cursor (fuente: análisis de SwirlAI recogido en Web Reactiva). Marketplaces como SkillsMP ya indexan más de 400.000
skills. Taste Skill nació para aprovechar esa ola.

Curso gratis · paso a paso

Dale método a tu agente, no solo buen gusto

Taste Skill le pone criterio de diseño; el Spec Driven Development le pone método para construir. En este curso recorres un ciclo completo de SDD con OpenSpec sobre un proyecto real y sales del vibecoding antes de coger tú el volante.

Entra en el curso gratis →

Cómo se usa Taste Skill paso a paso ¶

Usar Taste Skill son cuatro pasos: la instalas, eliges la skill de arranque, le das un brief con intención y revisas el resultado contra su
checklist. No hay configuración rara de por medio.

1. Instálala. Taste Skill usa el CLI de npx skills, igual que el resto de la colección. Un comando escanea la carpeta skills/ del
repositorio y coloca los ficheros donde tu agente los busca. Si ya conoces el CLI de npx skills, no
hay sorpresas.

# Instala toda la colección
npx skills add https://github.com/Leonxlnx/taste-skill

# O solo la skill principal, por su nombre interno
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Ese design-taste-frontend es la skill principal, y la versión por defecto es la v2, marcada como experimental. La v1 original sigue disponible
con el nombre design-taste-frontend-v1, por si dependías de su comportamiento exacto. Hay un CHANGELOG que documenta el salto.

2. Empieza por la principal. No cargues las trece a la vez. La recomendación del propio repositorio es sensata: arranca con la skill principal
y añade las especializadas solo cuando sepas qué dirección quieres.

Cargarlas todas de golpe es contraproducente, igual que pasa con cualquier stack de skills bien
elegido. Más contexto que el agente tiene que sopesar, y más ruido en el
que perderse.

3. Dale un brief con intención. Aquí está el 80% del resultado. La skill se activa sola cuando detecta una tarea de diseño, pero lo que le
pases marca la diferencia entre algo tibio y algo memorable.

En lugar de “hazme una landing”, cítala por su nombre de instalación y dale contexto, público y un diferenciador. Nombrarla asegura que entra en
juego, aunque la skill también se active sola al detectar una tarea de diseño. La landing de Floria que has visto arriba salió de un brief como
este:

Usa la skill design-taste-frontend.

Crea una landing para Floria, una floristería de autor que vende
suscripciones de ramos de temporada. Público: gente de 30-45 años
que regala con criterio. Estética editorial y cálida, con la
tipografía como protagonista y nada de aire de plantilla SaaS.

Con ese brief, la skill infiere los diales (varianza alta, densidad baja), elige una dirección estética y se compromete con ella antes de escribir
una línea de CSS.

4. Genera, revisa e itera. El agente produce el código y, si usas la v2, lo pasa por su propio pre-flight check antes de entregártelo. Tú
revisas, señalas qué mantener y qué cambiar, y vuelves a lanzar.

La regla práctica es sencilla: si tras tres iteraciones no te acercas al resultado, el problema suele estar en el brief inicial, no en los
detalles.

Un último apunte: Taste Skill no vive en el vacío. Si tu proyecto necesita tokens de marca concretos, un DESIGN.md en el
repositorio los aporta y encaja con estas reglas. Si buscas animación de verdad, las
skills oficiales de GSAP se ocupan del movimiento mientras Taste Skill cuida el gusto. Y si lo que
quieres no es web sino piezas para grabar, huashu-design cubre ese hueco con la misma filosofía
anti-slop.

Los tres diales que definen el carácter de tu diseño ¶

El rasgo que separa a Taste Skill del resto son sus tres diales. Antes de generar nada, la skill principal fija tres valores del 1 al 10 que
gobiernan todas las decisiones posteriores.

DESIGN_VARIANCE controla cuánto se aleja el layout de la simetría. En 1 tienes rejillas perfectas y todo centrado. En 10, masonry, asimetría
agresiva y zonas de espacio en blanco enormes.

MOTION_INTENSITY decide la profundidad de la animación. En 1 solo hay estados de hover. En 10, scroll con pinning, parallax y física
magnética.

VISUAL_DENSITY regula cuánta información cabe por pantalla. En 1 es una galería de arte con aire por todas partes. En 10, un cockpit de datos
con números en monoespaciada.

El baseline por defecto es 8, 6 y 4. Un diseño con personalidad, movimiento notable pero no de feria, y densidad tranquila.

Lo interesante no es que los diales existan. Es que la skill los infiere del brief antes de tocarlos.

Si le dices “algo limpio, estilo Linear”, baja la varianza y la densidad. Si le pides “premium de consumo tipo Apple”, sube el arte y la
contención. Si sueltas “agencia creativa, sorpréndeme”, los pone al máximo.

Hay una tabla de presets por caso de uso para que el ajuste no dependa de tu intuición:

¿Por qué importa esto? Porque el gran defecto de los agentes no es que diseñen mal. Es que diseñan igual una y otra vez.

Recurren siempre al mismo hero centrado sobre fondo oscuro, a las mismas tres tarjetas. Los diales rompen ese piloto automático de raíz: obligan
al agente a comprometerse con una dirección concreta en lugar de caer en la media de todo lo que ha visto.

💡 Si solo te llevas una idea de esta sección: los diales convierten “hazme una web bonita” en una decisión de diseño explícita. Y una decisión
explícita casi nunca es genérica.

Las skills que acompañan a la principal ¶

La principal (design-taste-frontend) te vale para casi todo, pero la gracia de Taste Skill es el resto del armario: doce piezas más, cada una
para un escenario concreto. Aquí tienes el mapa completo, con el nombre que pasas a --skill para instalar cada una.

Las tres últimas no escriben código: generan imágenes de referencia. Les dedico la siguiente sección aparte porque son el terreno donde Taste
Skill se separa de frontend-design.

Las skills de generación de imágenes: el terreno que frontend-design no pisa ¶

Estas tres skills cambian el destino del resultado. En lugar de producir CSS, producen planos: tableros visuales que otro agente convierte en web.
Es una capacidad que ni frontend-design ni Impeccable ofrecen.

imagegen-frontend-web produce comps de secciones web (hero, landing, multi-sección) con tipografía fuerte y dirección de arte anti-slop.
imagegen-frontend-mobile hace pantallas y flujos móviles para iOS, Android o multiplataforma, con mockups y sets coherentes. Y brandkit monta
tableros de identidad completos: logotipo, paletas, tipografía y aplicaciones de marca.

El flujo previsto es de dos pasos. Primero generas las imágenes con una herramienta como ChatGPT Images o el modo imagen de Codex. Después le
pasas esos fotogramas a tu agente de programación para que los convierta en web real.

Hay incluso una skill, image-to-code, que encadena las dos fases. Genera las referencias, las analiza en detalle y luego implementa el frontend
para que se parezca a lo generado.

Si esto te suena a lo que hace huashu-design con piezas visuales, vas bien encaminado. Pero hay un matiz.

huashu-design produce piezas para grabar o presentar: vídeos, animaciones, infografías. Las imagegen de Taste Skill están pensadas como planos de
un edificio que otro agente va a construir en código. El destino del resultado es distinto.

🎯 La lógica de fondo es potente: separar el momento de decidir cómo se ve algo del momento de escribirlo. Primero el plano, luego la obra. Un
agente que ve una referencia clara comete muchos menos errores que uno que improvisa la estética mientras programa.

Estas skills de imagen tienen sus propias reglas anti-genérico, y son detallistas hasta el extremo. En las pantallas móviles piden que el texto
nunca sea demasiado pequeño, que el marco del móvil esté presente pero no robe protagonismo al contenido, que la paleta sea limpia y no caiga en
el morado-azul de siempre.

Es el mismo espíritu del resto de la colección aplicado a un lienzo distinto.

El pre-flight check: dónde vive de verdad el valor ¶

Si tuviera que quedarme con una sola parte de Taste Skill, no serían los diales ni las imágenes. Sería el catálogo de “AI Tells” y el
pre-flight check de la skill principal.

Un “AI Tell” es una de esas señales que delatan que un diseño lo ha parido una IA sin criterio. Taste Skill las tiene listadas, con nombre y
apellidos.

Y obliga al agente a revisar su propio trabajo contra esa lista antes de dar nada por bueno. No es una recomendación difusa, es una checklist
mecánica que se recorre casilla por casilla.

Algunos ejemplos de lo que prohíbe:

• El guion largo como recurso de diseño. Taste Skill lo señala como el tell número uno y lo prohíbe por completo en titulares, etiquetas,
  botones y cuerpo de texto. La regla es binaria: cero guiones largos.
• La paleta beige más latón para producto premium. Ese beige cálido con acentos de latón y texto color espresso que aparece en cada web de
  cuchillería artesanal o marca de bienestar. Prohibido por defecto porque hace la marca invisible.
• Los “eyebrow” numerados. Esas etiquetas en mayúsculas sobre cada título de sección (001 · Capacidades, 06 · cómo funciona). Máximo uno
  cada tres secciones, y lo verifica contando instancias.
• Las pistas de scroll, los sellos de versión en el hero, los puntos de estado decorativos. Cada uno con su razón documentada.

Este enfoque no es nuevo, pero pocas skills lo llevan tan lejos. Volvemos a la idea de antes: la mitad del conocimiento experto es saber qué
no hacer.

Un diseñador senior ve un gradiente morado sobre fondo blanco y le rechinan los dientes, porque ha visto ese error mil veces. Claude no ha
cometido esos errores nunca, así que hay que decírselos sin rodeos. Taste Skill hace justo eso, pero con una exhaustividad que roza lo obsesivo.

El pre-flight check va más allá del catálogo de tells. Incluye reglas duras de layout que son un fallo si se incumplen.

El hero tiene que caber en el viewport inicial. La navegación tiene que ir en una sola línea en escritorio. Un grid tipo bento debe tener
exactamente tantas celdas como contenido, sin huecos vacíos. Y ningún bloque de código puede llevar comentarios de relleno.

Hay hasta esqueletos de código canónicos para los patrones de GSAP más peliagudos, como el sticky-stack o el scroll horizontal, con los
ScrollTrigger bien configurados para que no se disparen a medio scroll.

Este es el resultado de todo ese pulido en la parte inferior de la misma landing de Floria. Espaciado consistente, jerarquía clara y ni rastro de
las tarjetas centradas de plantilla.

⚠️ Cuidado con una cosa: la carpeta research/ del repositorio, que supuestamente respalda algunas de estas reglas, mezcla estudios reales con
afirmaciones de dudosa procedencia (que si prometer una propina de 200 dólares mejora la salida un 45%, que si los modelos escriben más corto en
diciembre…). El valor de Taste Skill está en las reglas, no en la ciencia que dice sustentarlas. Toma el reglamento; deja el folclore.

Qué NO esperar de Taste Skill ¶

Toca la parte incómoda, porque una herramienta se entiende mejor por sus límites.

Taste Skill no diseña por ti. Igual que Impeccable, es un filtro de criterio, no un botón mágico.

Si le das un prompt vago, el resultado será menos malo que sin la skill, pero seguirá siendo tibio. El contexto que le des sigue mandando.

Tampoco es para todo. El propio proyecto declara fuera de su alcance los dashboards densos, las tablas de datos, los formularios multipaso y los
editores de código.

Para eso apunta a sistemas de diseño oficiales como Fluent, Carbon o Material. Taste Skill juega en landings, portfolios y páginas de marketing, y
ahí es donde brilla. Pedirle una tabla de 20 filas es usar la herramienta equivocada.

Y hay solapamiento real con lo que ya tienes. Si ya usas frontend-design con buenos prompts y estás contento, Taste Skill no te va a cambiar la
vida de golpe.

Su ventaja no es hacer algo que las otras no hagan, sino ofrecer un abanico más ancho: los diales, las variantes estéticas, las skills de imagen y
ese pre-flight check tan detallado. Si nada de eso te hace falta, quédate con lo que ya funciona.

Un dato que conviene tener presente. El 66% de los developers señala las sugerencias de código imprecisas como el mayor problema de la IA (fuente:
Index.dev, 2025). Ninguna skill de gusto arregla eso.

Taste Skill mejora la estética del código, no su corrección. Sigues necesitando revisar, probar y pensar. La skill es el ojo del arquitecto, no el
aparejador que comprueba que la viga aguanta.

De usar skills a crearlas

Del catálogo ajeno a tus propias skills

Ya has visto lo que hace una colección de skills bien afinadas. En esta guía das el paso siguiente: escribir tus propios SKILL.md reutilizables que el agente carga solo cuando hacen falta, y que funcionan en Claude Code, Copilot, OpenCode o Gemini CLI.

Abrir la guía →

Acceso con suscripción Web Reactiva Premium · Sin permanencia

Cómo encaja Taste Skill junto a impeccable y frontend-design ¶

Taste Skill no compite tanto con frontend-design e Impeccable como parece. Encaja con ellas por capas.

frontend-design aporta el criterio general que va en el prompt del agente. Un DESIGN.md en el repositorio aporta tus tokens concretos de marca.
Impeccable aporta comandos de diagnóstico y pulido para iterar sobre un diseño ya generado.

Y Taste Skill aporta el reglamento anti-slop más granular, más los diales para fijar el carácter desde el minuto cero.

De hecho, una de sus variantes, stitch-design-taste, exporta reglas compatibles con el formato DESIGN.md. Las dos filosofías se dan la mano en
lugar de pelearse.

Combinaciones que tienen sentido:

1. Arranque limpio con carácter definido. Fijas los diales de Taste Skill según el brief, generas, y luego pasas Impeccable para el pulido
   fino. Uno pone el marco, el otro alinea los remates.
2. Rediseño de algo que ya existe. Usas redesign-existing-projects para auditar y arreglar sin romper. Su protocolo de auditoría previa
   (detectar qué preservar y qué retirar) es su mejor baza.
3. Diseño más animación. Combinas las reglas de Taste Skill con las skills oficiales de GSAP. Las de GSAP garantizan que las animaciones sean
   correctas y eficientes; Taste Skill evita que el conjunto huela a plantilla.

Ninguna de estas combinaciones es obligatoria. Son piezas de un mismo puzzle.

Lo bueno del estándar de agent skills es que no estás casado con una sola. Instalas, pruebas, te quedas con lo que te ahorra dolores de cabeza y
desinstalas lo demás. Cada skill que tu agente conoce es contexto que tiene que sopesar al decidir cuál activar.

El ecosistema de skills de diseño se está llenando, y eso es buena señal. El 68% de developers ya anticipa que la proficiencia con IA será un
requisito de empleo (fuente: State of the Developer Ecosystem 2025).

La habilidad ya no es solo saber pedirle cosas al agente. Es saber configurarlo para que tome buenas decisiones por defecto. Taste Skill es una de
las formas más completas que he visto de empaquetar ese “buen gusto por defecto” y meterlo en tu flujo.

Así que la próxima vez que tu agente escupa una landing con la Inter, el degradado morado y las tres tarjetas centradas, ya sabes que no tienes
por qué conformarte. ¿Le das a tu IA el ojo que le falta, o dejas que siga diseñando en piloto automático?

Preguntas frecuentes ¶

¿Qué es exactamente Taste Skill? ¶

Es una colección de trece agent skills con licencia MIT, creada por el desarrollador Leonxlnx, que mejora la estética de las interfaces que
generan los agentes de IA. Incluye skills que producen código y skills que producen imágenes de referencia. Se instala con el CLI de npx skills y
funciona con Claude Code, Codex, Cursor y otros agentes compatibles con el estándar abierto.

¿En qué se diferencia de la skill frontend-design? ¶

frontend-design es una única skill oficial de Anthropic que inyecta criterio estético en el prompt. Taste Skill es una biblioteca de trece skills
con tres diales configurables (varianza, movimiento y densidad), variantes estéticas especializadas y skills de generación de imágenes. Cubre más
terreno, aunque comparte el objetivo de evitar el AI slop.

¿Qué son los tres diales de Taste Skill? ¶

Son tres valores del 1 al 10 que gobiernan el diseño: DESIGN_VARIANCE (cuánta asimetría y experimentación de layout), MOTION_INTENSITY (cuánta
animación) y VISUAL_DENSITY (cuánta información por pantalla). El baseline por defecto es 8, 6 y 4, pero la skill los infiere del brief antes de
aplicarlos.

¿Taste Skill genera imágenes o código? ¶

Ambas cosas, según la skill que uses. Las skills de implementación generan código HTML, CSS y React. Las skills de generación de imágenes
(imagegen-frontend-web, imagegen-frontend-mobile y brandkit) producen tableros de referencia visual que luego pasas a otro agente para
convertirlos en web.

¿Funciona con agentes que no sean Claude Code? ¶

Sí. Las skills son Markdown plano, así que cualquier agente que lea el estándar de agent skills las interpreta: Codex, Cursor, GitHub Copilot,
Gemini CLI, OpenCode y muchos más. Hay una variante, gpt-taste, ajustada para GPT y Codex.

¿Merece la pena si ya uso frontend-design o Impeccable? ¶

Depende de qué te falte. Si quieres diales para fijar el carácter, variantes estéticas listas, skills de imagen o un pre-flight check muy
detallado, Taste Skill aporta cosas que las otras no tienen. Si ya obtienes buenos resultados con prompts cuidados, el salto será menor. No
compiten: se combinan por capas.

¿Para qué tipo de proyectos NO sirve Taste Skill? ¶

El propio proyecto se declara fuera de su alcance para dashboards densos, tablas de datos, formularios multipaso y editores de código. Para esos
casos recomienda sistemas de diseño oficiales como Fluent, Carbon o Material. Taste Skill está pensado para landings, portfolios y páginas de
marketing.

¿Qué es el pre-flight check? ¶

Es una checklist mecánica que la skill obliga al agente a recorrer antes de dar por terminado un diseño. Comprueba “AI Tells” (guiones largos,
paletas genéricas, etiquetas numeradas, pistas de scroll) y reglas duras de layout (el hero cabe en el viewport, la navegación en una línea, los
grids sin celdas vacías). Es donde está buena parte del valor de la colección.

¿La v1 y la v2 son muy distintas? ¶

La v2 es una reescritura profunda, marcada como experimental, con reglas anti-slop más estrictas, esqueletos de código canónicos para GSAP y un
protocolo de auditoría para rediseños. La v1 original sigue disponible con el nombre design-taste-frontend-v1 por compatibilidad. El repositorio
incluye un CHANGELOG que documenta el salto.

¿Es gratis y de código abierto? ¶

Sí. Taste Skill tiene licencia MIT: puedes copiarlo, modificarlo y distribuirlo con libertad. El proyecto está patrocinado por el programa Open
Source de Vercel y por Emil Kowalski (animations.dev), entre otros, y supera las 30.800 estrellas en GitHub.

Fuentes ¶

• Leonxlnx, “Taste Skill” (repositorio oficial en GitHub)
• tasteskill.dev, sitio oficial del proyecto
• Web Reactiva, “Cómo crear interfaces web únicas con la skill
  frontend-design”
• Web Reactiva, “Cómo lograr diseños únicos con IA con las skills de Impeccable”
• Web Reactiva, “Buenas prácticas para crear skills de agentes de IA”

🧨 Última oprtunidad para recibir la dinamita que mereces sobre programación con IA el próximo domingo: Suscríbete gratis a Web Reactiva en https://webreactiva.com/newsletter