Taste Lab

taste: Elevando el Diseño con Razonamiento Abductivo para Agentes de IA

En el mundo del desarrollo web y la inteligencia artificial, a menudo se confunde una hoja de especificaciones con el verdadero buen gusto. Sin embargo, el taste (gusto o criterio de diseño) es mucho más que una lista de colores y fuentes. Como define su creador, Sen Lin, taste = decisiones × trade-offs.

taste es una herramienta diseñada para convertir cualquier URL en un contexto de diseño completo para tu agente de IA. No se limita a copiar números; permite que la IA comprenda el porqué detrás de cada elección visual, permitiéndole tomar las decisiones correctas incluso en páginas que nunca ha visto.

Taste es el razonamiento abductivo aplicado al diseño de cualquier sitio web.

¿Qué es taste?

Para entender taste, debemos diferenciarlo de una simple hoja de especificaciones. Mientras que una herramienta de extracción convencional te entrega tokens (como un fondo #08090A o una fuente Inter), el verdadero taste reside en las decisiones y los sacrificios (trade-offs).

• Una decisión es el porqué: Por ejemplo, por qué se eligió un tono específico de negro cercano al negro puro en lugar del negro absoluto.
• Un trade-off (compensación) representa ambos lados de esa decisión: Lo que se eligió y lo que se dejó fuera deliberadamente.

Cuando un agente de IA solo posee tokens, simplemente copia números sin entenderlos. Un agente equipado con taste conoce el significado de cada decisión y puede replicar la esencia del diseño de manera coherente.

Características Principales de taste

La herramienta taste ofrece un conjunto de funcionalidades diseñadas para la ingeniería de diseño de alta precisión:

1. El Pipeline de Cuatro Agentes

Para transformar una URL en un archivo de contexto utilizable, taste emplea un pipeline de cuatro pasos, donde cuatro agentes de IA asumen roles distintos para filtrar y pulir la información:

• 01 - Extraer Mediciones: Un Senior Design AI extrae mediciones objetivas y precisas.
• 02 - Detectar Patrones: Un Principal Design Engineer identifica las reglas sistemáticas basadas en las mediciones.
• 03 - Inferir el Gusto (Infer Taste): El Ultimate Design Critic deriva los trade-offs deliberados y, a veces, dolorosos que tomó el diseñador original.
• 04 - Observador: El Lead Critic & Final Editor actúa como un filtro de calidad riguroso para eliminar cualquier contenido irrelevante o de baja calidad.

2. Generación de Taste DNA

El resultado final incluye un Taste DNA compuesto por 4 principios fundamentales. Cada principio contiene:

• Trigger: El disparador o decisión que motivó la elección.
• Decision: Qué fue lo que se eligió finalmente.
• Reason: La lógica de diseño detrás de la elección.
• Evidence: Pruebas exactas del DOM (px, hex, ratios).
• Trade-off: Lo que se sacrifica para mantener la integridad del diseño.

3. Design Map Detallado

Además del ADN de diseño, taste genera un mapa completo de tokens que incluye:

• Sistema de Color: Fondos, superficies, colores de texto primarios y secundarios, y bordes de paneles.
• Tipografía: Tamaños de H1 a Body, pesos de fuente, interletrado (tracking) y altura de línea.
• Espaciado: Unidades base, rellenos de sección y gaps.
• Border Radius: Definiciones para micro-elementos, tarjetas primarias, modales y botones tipo píldora.
• Profundidad y Sombras: Señales de profundidad para tarjetas y elementos flotantes.

Cómo usar taste

Implementar taste en tu flujo de trabajo es un proceso sencillo de tres pasos que te permite ejecutar la herramienta en cualquier lugar.

Paso 1: Clonar el Repositorio

Clona la habilidad en tu directorio de habilidades de Claude: git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

Paso 2: Instalar Playwright

Instala el MCP de Playwright (esta es una instalación de una sola vez que descarga Chromium, aproximadamente 100MB): claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

Paso 3: Ejecutar la Herramienta

Reinicia Claude Code y ejecútalo sobre cualquier URL que desees analizar: /taste https://linear.app

Casos de Uso y Compatibilidad

taste está diseñado para integrarse perfectamente con las herramientas de IA que ya utilizas. Al finalizar cada ejecución, se generan dos archivos: un .md y un .json. Tu agente de IA recogerá estos archivos en su próxima ejecución sin necesidad de configuraciones adicionales ni de copiar y pegar.

Herramientas Compatibles:

• Cursor: Ubicación en .cursor/rules/{domain}-taste.mdc.
• Windsurf: Ubicación en .windsurf/rules/{domain}-taste.md.
• Claude Code: Se añade a la sección de Design Taste en CLAUDE.md.
• GitHub Copilot: Se integra en .github/copilot-instructions.md.
• Bolt: Configuración en .bolt/prompt.
• Antigravity: Archivo GEMINI.md.
• v0 de Vercel: Genera taste-tokens.css e instrucciones.
• Figma Make: Genera taste-figma.css e instrucciones.
• Lovable: Se imprime para pegar en el conocimiento del proyecto.

Preguntas Frecuentes (FAQ)

¿Qué tipo de archivos genera taste? Cada ejecución genera un archivo .md (un resumen legible) y un archivo .json (el conjunto completo de tokens). Ambos contienen el mapa de diseño y los 4 principios del Taste DNA.

¿Por qué es necesario el agente 'Observer' en el pipeline? El agente Observer actúa como una puerta de calidad. Ejecuta validaciones de JSON y aplica filtros para asegurar que el análisis final sea riguroso, útil y libre de información superflua.

¿Qué categorías de medición analiza la herramienta? taste analiza 20 categorías de medición, incluyendo cada color, peso, valor de espaciado, radio de borde y sombra, utilizando valores exactos en px, hex o ratios, sin aproximaciones.

¿Quién desarrolló taste? Es un proyecto desarrollado por Sen Lin, disponible en GitHub y compatible con entornos modernos de desarrollo asistido por IA.