✨ Taste Skill (v2) — El Framework Anti-Slop de Frontend para Agentes de IA
Eliminando el Diseño Genérico de IA en Claude Code, Cursor, Codex, Gemini CLI y Antigravity
Taste Skill (creado por Leonxlnx, +90,000 ⭐ en GitHub, licencia MIT) es un ecosistema de habilidades de código abierto (Agent Skills) diseñado específicamente para impedir que los agentes de codificación generen páginas web clónicas, aburridas y con “olor a IA” (AI slop).
En lugar de recurrir al promedio estadístico de Internet (layouts centrados, tarjetas con iconos idénticos, píldoras superiores y gradientes morados), Taste Skill v2 inyecta dirección de arte fundamentada en 247 sitios web reales galardonados, busca material fotográfico auténtico en colecciones abiertas con créditos automáticos y audita la interfaz en un navegador real (Chrome/Chromium vía CDP) reprobando cualquier cliché de IA.
- 💻 Repositorio Oficial: github.com/leonxlnx/taste-skill
- 🌐 Sitio Web Oficial: tasteskill.dev · App de Escritorio: tastecode.dev
- 🤝 Patrocinadores: Vercel Open Source Program · animations.dev (Emil Kowalski) · Kimi / Moonshot AI · interfaces.dev · React Bits
- 🔗 Conexiones en la Bóveda: Scorch Design System (Velgrynd v4.1) · Obsidian Scorch Skill · GetDesign Awesome MD · MOC General
🎬 Demostración y Análisis de Video
Captura Oficial del Lanzamiento de Taste Skill v2
Video original de demostración archivado en la bóveda:
![[taste-skill-demo.mp4]]
🔍 Puntos Clave Extraídos del Video:
- El Problema del “AI Slop”: “Tu página web huele a IA a kilómetros”. Mismos layouts simétricos, espaciados descuidados, animaciones genéricas y tarjetas de 3 columnas repetidas hasta el cansancio.
- Ecosistema Modular: Una familia de 12+ habilidades adaptadas al tipo de proyecto (marketing, producto, rediseño, estilo minimalista o brutalista).
- Compatibilidad Total Multi-Agente: Funciona sin configuración previa en Antigravity CLI, Claude Code, Cursor, OpenAI Codex, Gemini CLI, AI Studio, v0, Lovable y OpenCode.
- Validación Visual Automatizada: La IA inspecciona mediante capturas sus propios errores en 3 anchos de pantalla (móvil, tablet y desktop) y ejecuta hasta 3 rondas de autorefinamiento.
🧠 ¿Qué es el “AI Slop” y Cómo lo Detecta Taste Skill?
El motor de reglas de Taste Skill (skills/taste-skill/scripts/lib/rules.mjs) formaliza matemáticamente los mayores vicios estéticos de los modelos de lenguaje:
| Vicio Típico de IA (AI Slop) | Nivel de Infracción | Criterio de Falla de Taste Skill | Solución Aplicada |
|---|---|---|---|
| Titulares Largos / Párrafos de Título | FAIL | Títulos que se envuelven en más de 2 líneas o exceden 10 palabras en el Hero. | Títulos concisos (máx. 2 líneas). El contexto se traslada al texto de apoyo. |
| Píldoras Superiores (Eyebrows / Kickers) | FAIL | Etiquetas flotantes en mayúsculas tipo [FEATURE] o badges redondeados sobre el título. | Eliminación total; la información se integra directamente en la redacción. |
| Tipografía Monospace Fuera de Código | FAIL | Uso de fuentes mono en subtítulos, captions o fechas decorativas. | Monospace restringido exclusivamente a bloques literales <pre> y <code>. |
| Tarjetas Idénticas con Iconos | FAIL | Fila de 3 o 4 tarjetas iguales rematadas con un icono flotante centrado. | Reemplazo por layouts narrativos asimétricos, listas tipográficas o imágenes reales. |
| Gradientes en Botones y Textos | FAIL | Rellenos degradados morado/cian (ai-purple) o botones con resplandores (glow). | Colores planos y sólidos. Contraste puro y tipografía de peso. |
| Líneas Divisoras Finas (Hairlines) | FAIL | Líneas de 1px separando secciones vacías sin necesidad estructural. | Separación lograda mediante espaciado en blanco (whitespace) o saltos tonales. |
| Sombras Estáticas en Reposo | FAIL | box-shadow difusas en tarjetas que no flotan ni tienen elevación física. | Superficies planas; sombras reservadas solo para modales, menús o barras flotantes. |
| Emojis como Iconos de UI | FAIL | Emojis utilizados como elementos de interfaz o marcadores de listas. | Lenguaje visual profesional, diseño editorial o iconografía SVG curada. |
🧭 Flujo de Trabajo en 6 Pasos de Taste Skill v2
flowchart TD A["📋 1. Inventario del Sujeto\n(8-12 hechos reales únicos: historia, ubicación, restricciones)"] --> B["✍️ 2. Estructura Argumental\n(Afirmaciones con prueba por sección; elimina secciones de relleno)"] B --> C["🎲 3. Sorteo de Dirección (draw.mjs)\n(Baraja 3 de 20 estilos basados en 247 sitios reales)"] C --> D["🖼️ 4. Búsqueda de Activos Reales (assets.mjs)\n(Fotos CC0 de Wikimedia/Met con créditos automáticos)"] D --> E["🌐 5. Auditoría en Navegador Real (inspect.mjs)\n(Pruebas CDP en Chrome a 3 resoluciones contra reglas Anti-Slop)"] E --> F{"🛑 ¿Hay fallas FAIL / WARN?"} F -- "Sí (Clichés detectados)" --> G["🔄 6. Refinamiento en Bucle\n(Corrige los 3 problemas principales; máx. 3 rondas)"] G --> E F -- "No (Aprobado)" --> H["🚀 Frontend Premium de Grado Humano"]
- Lectura e Inventario: La IA busca lo que hace única a la marca (nombre, dirección, historia, horario, números específicos, materiales).
- Estructura Argumental: Toda sección debe responder a una afirmación con prueba tangible; se descarta la secuencia cliché Hero 3 Features Testimonios Pricing.
- Sorteo de Dirección (
draw.mjs): Selecciona entre 20 direcciones estéticas destiladas (editorial, brutalista, tipográfica, técnica, minimalista, etc.). - Activos Reales (
assets.mjs): Localiza fotografías auténticas de archivo abierto en lugar de ilustraciones falsas. - Inspección en Navegador (
inspect.mjs): Abre la página generada con Chrome headless vía CDP y evalúa métricas exactas. - Bucle de Pulido: Corrige fallas de tipografía, contraste y espaciado de forma autónoma.
🦁 Catálogo del Ecosistema de Habilidades
Taste Skill ofrece variantes especializadas según el objetivo de diseño:
| Habilidad | Comando de Instalación (--skill) | Especialidad y Caso de Uso |
|---|---|---|
taste-skill | design-taste-frontend | La suite v2 principal: landing pages, marketing, portfolios y páginas corporativas. |
redesign-skill | redesign-existing-projects | Auditoría y rediseño: analiza código existente y repara jerarquía, paddings y colores. |
image-to-code-skill | image-to-code | Diseño guiado por imagen: genera o toma una referencia visual y produce el código idéntico. |
gpt-tasteskill | gpt-taste | Modo estricto para GPT/Codex: mayor varianza de layout y directrices de movimiento sólidas. |
soft-skill | high-end-visual-design | UI de producto calmada: contrastes suaves, abundante espacio en blanco y spring motion. |
minimalist-skill | minimalist-ui | Diseño editorial de producto: paleta sobria, estructura nítida y tipografía selecta. |
brutalist-skill | industrial-brutalist-ui | Brutalismo industrial: tipografía suiza, contrastes duros y cuadrículas mecánicas. |
stitch-skill | stitch-design-taste | Google Stitch: reglas de diseño con exportación opcional de DESIGN.md. |
output-skill | full-output-enforcement | Anti-perezoso: fuerza código 100% completo, sin // TODO ni componentes truncados. |
imagegen-frontend-web | imagegen-frontend-web | Generación de conceptos visuales: prompts de alta gama para interfaces web completas. |
imagegen-frontend-mobile | imagegen-frontend-mobile | Conceptos para móviles: pantallas y flujos nativos para iOS y Android. |
brandkit | brandkit | Tableros de marca: paletas, fuentes, logos y pautas corporativas completas. |
⚡ Guía de Instalación y Uso Multi-Agente
Instalación Global y por Agentes
1. Instalación Universal con Agent Skills CLI
# Instala todas las habilidades del repositorio
npx skills add https://github.com/Leonxlnx/taste-skill
# O instala únicamente la habilidad central v2
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"2. Claude Code
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill3. OpenAI Codex & Cursor
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill4. Requisitos del Sistema
- Node.js 22+
- Navegador Chrome, Chromium o Microsoft Edge instalado localmente para la ejecución de scripts CDP de inspección visual.
- No requiere API keys adicionales ni instalaciones pesadas.
🐉 Sinergia: Taste Skill y Ryukami Scorch Design
Integración con el Sistema de Diseño del Laboratorio
En el ecosistema de Ryukami Labs, Taste Skill complementa a la perfección nuestra especificación Scorch Design System (Velgrynd v4.1):
- La habilidad
brutalist-skillimplementa bordes afilados (border-radius: 0px), tipografía grotesca y contrastes industriales idénticos a los estándares de Ryukami.- La regla anti-slop prohíbe los degradados lavados y exige colores sólidos con carácter, perfectamente alineados con nuestra paleta carmesí
#E63946, obsidiana#0A0A0Ay acentos ámbar.- La herramienta
output-skillgarantiza que las notas y componentes exportados en código nunca sufran de pereza de contexto (lazy output).