Cómo usar Taste Skill en Codex y Claude Code.

Taste Skill es la skill de diseño más conocida para que los sitios web hechos con IA parezcan menos genéricos. La versión 2.5, publicada el 4 de noviembre de 2026, es una reconstrucción completa para sitios web de empresa y de marketing. Este tutorial explica qué necesita, cómo instalarla en Codex y Claude Code, cómo funciona una construcción y cómo sacarle el máximo partido.

Actualizado el 6 de noviembre de 2026 · 7 min de lectura

Qué hace Taste Skill 2.5

Taste Skill es una skill de código abierto (licencia MIT) de Leonxlnx, que se instala como design-taste-frontend. La versión 2.5 construye sitios web de empresa con textos sencillos, un único sistema de diseño, una sección por pantalla, bordes izquierdo y derecho iguales, fotografías reales, iconos de marcas reales y UI de producto real. Los efectos de shader y las escenas de scroll se reservan solo para páginas de software, tecnología y videojuegos, y un verificador comprueba cada página en un navegador real antes de que el agente la entregue.

Qué necesitas

Node.js 22 o posterior.
Chrome, Edge o Chromium. Define CHROME_PATH si está instalado en un lugar poco habitual.
Opcional: ffmpeg, para fotos WebP y el recorte móvil de una foto de hero.

No instala nada y no necesita claves de API. Sus fotos incluidas funcionan sin conexión; descargar fotos, fuentes o iconos adicionales requiere acceso a la red.

Instálala

Codex:

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

Inicia después una sesión nueva de Codex para que se cargue la skill.

Claude Code:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

En Claude Code la skill tiene el espacio de nombres taste-skill:. Ejecuta /plugin update para actualizarla más adelante.

Cualquier agente compatible con la CLI npx skills:

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

¿Ya tenías instalada una versión anterior? Ejecuta de nuevo el mismo comando de instalación; el nombre de instalación no ha cambiado.

Construye una página con ella

Pídele a tu agente que construya o rediseñe un sitio web de empresa. La skill se carga sola, copia sus recursos en tu proyecto y parte de su página inicial. Dale material real, porque la skill está pensada en torno a la sustancia: el nombre, a qué se dedica el negocio, cifras reales, horarios y fotos si las tienes.

Brief para un sitio web de empresa

Crea el sitio web de [Ostra, una pequeña marisquería de Lisboa con 24 asientos]. Abre [de martes a sábado, de 6 de la tarde a medianoche], la carta cambia [cada día según la pesca de la mañana] y las reservas se hacen por [teléfono e Instagram]. Usa Taste Skill para planificar la página pantalla por pantalla antes de escribir ningún marcado y ejecuta su verificador antes de entregármela.

Cada construcción sigue los mismos pasos:

Clasifica el negocio como software, videojuegos, tecnología, producto, servicio o lugar, y planifica la página pantalla por pantalla.
Reparte los tokens y el layout. Un script reparte una paleta y una pareja de Google Fonts para ese tipo de página, además de uno de los once layouts de hero probados.
Parte de un único sistema: una sección por pantalla a 1440×900, bordes iguales, una barra de navegación fija y un pie de página de cierre.
Muestra cosas reales: fragmentos de UI de producto y diagramas para software y tecnología; fotografías cuidadas y con créditos para lugares, tiendas y servicios.
Reserva los efectos para tecnología y videojuegos. Las cafeterías, los hoteles, las tiendas, los estudios y los servicios no llevan WebGL ni efectos de scroll.
Comprueba en un navegador real a 1440, 1024, 768 y 390 píxeles de ancho, detectando visuales vacíos, caídas de contraste, columnas desalineadas, texto de relleno y más.

Para rediseñar una página existente, pídelo de la misma forma. La skill audita la página actual en un navegador antes de cambiar nada.

Ejecuta sus herramientas tú mismo

Todas las herramientas son scripts de Node sencillos que están en la carpeta de la skill. Vale la pena conocer dos:

# Deal a palette and font pairing for a kind of page
node scripts/start.mjs deal --page software

# Check a built page (a URL or a file) against the rules
node scripts/consistency.mjs <url or file> --page software

El verificador imprime PASS, WARN o FAIL para cada regla, una forma rápida de ver por qué una página sigue sin convencer.

Adónde fueron las otras skills de Taste

El repositorio ahora contiene una sola skill. Las skills de estilo anteriores (high-end-visual-design, minimalist-ui, industrial-brutalist-ui, gpt-taste, stitch-design-taste) pasaron a Leonxlnx/taste-skill-classics, y las skills basadas en imágenes (imagegen-frontend-web, imagegen-frontend-mobile, brandkit, image-to-code) pasaron a Leonxlnx/imagegen-skills. Conservan sus nombres de instalación:

npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

Cuándo usar otra cosa

Apps móviles y dashboards. La versión 2.5 está pensada para sitios web. Para pantallas de apps, consulta Impeccable y UI UX Pro Max, o empieza por un sistema de apps de nuestra biblioteca de sistemas de diseño.
Una marca ya existente. Taste Skill reparte su propia paleta y sus propias fuentes. Si tu marca ya las tiene, ponlas en un DESIGN.md y dile al agente que las respete.
Elegir entre propuestas. Cada construcción reparte una paleta, una pareja de fuentes y un layout de hero. Si quieres comparar varios looks, pide dos o tres versiones de la primera pantalla y míralas lado a lado.

Preguntas frecuentes

¿Taste Skill es gratis?

Sí. Es de código abierto con licencia MIT. Su autor también ofrece TasteCode, una app de escritorio gratuita y de código abierto con la skill y un agente de diseño integrados.

¿Taste Skill funciona con React o Next.js?

Sí. Puedes publicar el HTML sencillo que construye, o pedirle al agente que traslade los mismos tokens, el layout de secciones y las comprobaciones a React, Next.js, Vue, Svelte, Astro o Tailwind.

¿Por qué Taste Skill necesita Chrome?

Su verificador renderiza cada página en Chrome headless a cuatro anchos para comprobar reglas como el contraste y la alineación, en lugar de fiarse del código.