El buen gusto para Claude Code

Qué es y por qué importa

Pídele a Claude Code la página de tu app y casi siempre te llega la misma: título centrado, una etiqueta pequeña encima, tres recuadros con un icono, un degradado suave. No hay nada mal, pero no hay nada tuyo. Es la media de todas las páginas que el modelo ha visto.

Taste Skill sirve para quitar esa media. Es una Agent Skill, es decir, una carpeta de instrucciones y pequeños programas que Claude usa cuando le pides una página. El código está abierto en GitHub con licencia MIT, así que es gratis. Le da a Claude una dirección artística, fotos reales de archivos abiertos y un control en un navegador de verdad antes de decirte que ha terminado.

Es para quien lo hace todo solo y no tiene diseñador: founders, indie hackers, quien programa con IA. Funciona con cualquier tecnología, de React a HTML sencillo. El precio es el tiempo: una página necesita de 30 a 45 minutos y unos cientos de miles de tokens.

1. Qué necesitas y cómo instalarla

Antes de instalarla, comprueba dos cosas en tu ordenador:

• Node 22 o más reciente. Node es el programa que ejecuta JavaScript fuera del navegador: para ver tu versión escribe node -v en la terminal.
• Chrome, Edge o Chromium instalado. Sirve para abrir la página y hacerle capturas.

No hacen falta claves API y no instala nada suyo en el ordenador. Usa internet solo para buscar fotos. Luego la instalas como plugin de Claude Code:

1. Abre Claude Code y escribe /plugin marketplace add Leonxlnx/taste-skill. Añade el catálogo que contiene la skill.
2. Luego escribe /plugin install taste-skill@taste-skill. La skill entra en Claude Code con el prefijo taste-skill, así no se confunde con las otras skills que tengas.
3. Abre una sesión nueva, así te aseguras de que Claude la vea. Para actualizarla más adelante está /plugin update.

O la instalas desde la terminal con skills, un programa que instala skills en los asistentes de programación:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

2. Cómo trabaja, en seis pasos

Detrás hay un estudio: 248 webs recogidas de dos galerías de diseño, 156 de One Page Love y 92 de los Sites of the Day de Awwwards, de las que se cargaron 247. Las notas no las pusieron personas, sino modelos de IA, que las juzgaron a partir de capturas y medidas. Lo dice el propio estudio.

De ahí salen las reglas y veinte direcciones, es decir, veinte formas de componer una página. Cuando le pides una página, Claude hace esto:

1. Lee la petición y hace el inventario: de ocho a doce cosas que solo tiene tu producto y ningún competidor. El nombre y lo que significa, los números, el límite con el que vive.
2. Un programa, draw.mjs, saca al azar tres direcciones entre las que encajan con la petición, y Claude elige una. Tú no eliges: un modelo que elige libremente siempre se queda con la opción más previsible.
3. Encuentra la idea: una frase que une algo de tu inventario con la dirección elegida. Si la frase sirve también para tu competidor más cercano, la descarta.
4. Construye la página con fotos reales: primero las tuyas. Si no tienes, assets.mjs busca imágenes de tu mundo en archivos abiertos como Wikimedia Commons, Openverse, el Met y el Art Institute of Chicago (para los vídeos, también Internet Archive y la NASA), y pone los créditos en la página.
5. Hace el control. lint.mjs lee el código, inspect.mjs abre la página en un navegador de verdad a 1440, 768 y 390 píxeles de ancho, hasta el móvil, y marca FAIL donde se rompe una regla: títulos de más de dos líneas, degradados, pantallas vacías. Claude tiene que corregir cada FAIL.
6. Mira sus capturas, las juzga, corrige los tres peores problemas y vuelve a comprobar. Como mucho, tres rondas.

Al final te da un resumen: la dirección, la idea, lo que aún no le convence y la lista de fotos con autor, licencia y fuente.

3. El primer prompt: la página de tu app

Cuanto más le das, mejor trabaja. Este es el prompt que usaría para la página de una app de fitness hecha por un founder en solitario. Cambia las partes entre [ ] por las tuyas:

Usa la skill design-taste-frontend para crear la landing page de [nombre de la app], una app de iPhone que [qué hace, en una frase].
Para quién es: [quién la usa].
Lo único que la página tiene que conseguir: [descargar la app desde el App Store].
Lo que solo tiene ella: [tres o cuatro cosas reales: un número, un límite, un hábito].
Stack: [HTML sencillo / Next.js].
Mis fotos: [carpeta con las fotos reales, o: ninguna].
No inventes reseñas, clientes ni números. Al final dime la dirección que salió, la idea y qué textos de ejemplo tengo que sustituir.

La última línea cuenta. La skill no inventa reseñas, clientes ni estadísticas, pero rellena los huecos con textos de ejemplo y los enumera en el resumen. Esos los revisas tú, uno a uno.

4. Dale el material que solo tienes tú

En el estudio, las páginas con mejor nota partían de una idea sacada del propio producto, no del estilo. Así que tu trabajo es darle esa materia prima:

• El nombre y lo que significa. Puede convertirse en el centro de la página.
• Tus fotos reales: tú, el producto, el lugar. Dile que son tuyas y las pone primero. Una foto real del producto acaba en grande en la primera pantalla.
• Las capturas reales de tu app. Para un software son la imagen más fuerte que existe.
• El límite: lo que no haces, o solo haces de una manera concreta.

Aquí tienes mi material para la página.
Nombre: [nombre], y significa [significado].
Mis fotos en [carpeta]: son reales, úsalas antes que cualquier otra.
Capturas de la app en [carpeta].
Números reales: [números].
El límite que nos hace diferentes: [límite].
Parte de estas cosas para el inventario y la idea, no de la categoría.

5. Rehacer una página que ya tienes

Si ya tienes la página, no empiezas de cero: rehacer páginas existentes es parte de la skill. Antes de tocar nada, abre tu página en un navegador de verdad, la mide y guarda las capturas del antes. Mantiene tu tecnología, los contenidos y lo que funciona, y cambia tipografías, colores, márgenes y títulos y, por último, los bloques hechos en serie. Al final te enseña el antes y el después.

Usa la skill design-taste-frontend para rehacer la página en [ruta o dirección local]. Primero registra cómo está ahora, con medidas y capturas. Mantén el stack, los contenidos y los enlaces y formularios que funcionan. Al final enséñame el antes y el después en los tres anchos y dime qué has cambiado.

6. Dashboards y pantallas de la app

También funciona para las pantallas donde se trabaja: dashboards, paneles de administración, ajustes. Aquí sigue un camino propio, de un estudio aparte sobre 23 pantallas de productos reales: draw.mjs --app saca un estilo para tu tipo de producto, e inspect.mjs --app comprueba con reglas propias, como el color solo en los datos y los números alineados.

Usa la skill design-taste-frontend para el dashboard de [app]: es una pantalla donde se trabaja, no una página para leer. Quién la usa: [quién]. La pregunta a la que tiene que responder primero: [pregunta]. Datos realistas que cuadren: [datos o archivo]. Usa los mismos colores y tipografías de mi landing page.

Errores comunes

• Lanzarla sin mirar cuánto uso te queda. Una página son de 30 a 45 minutos y unos cientos de miles de tokens: en un plan con límites es un buen pedazo. Hazla cuando tengas margen.
• Darle una petición de una línea. Sin tu material, la idea sale de la categoría y la página vuelve a parecerse a todas las demás.
• Usarla sin Node 22 o sin Chrome. El inspector no arranca: Claude solo revisa el código, mira capturas hechas de otra forma y te dice que el inspector no se ha ejecutado.

Lista de comprobación

• Tengo Node 22 o más reciente y Chrome, Edge o Chromium
• Taste Skill está instalada y Claude la reconoce
• En el prompt están el nombre, qué hace, para quién es y lo único que hay que conseguir
• El inspector termina con cero FAIL a 1440, 768 y 390
• He sustituido los textos de ejemplo que aparecen en el resumen
• Los créditos de las fotos están al pie de la página

Preguntas frecuentes