/ Directorio / Playground / Taste Skill
← Todos los servidores ↗ GitHub
● Comunidad Leonxlnx ⚡ Instantáneo

Taste Skill

por Leonxlnx · Leonxlnx/taste-skill

Encapsula el gusto en diseño — tipografía, espaciado, color, reglas de composición — para que Claude deje de publicar UI de aspecto genérico y produzca trabajo que se lea como de nivel senior.

Taste Skill es un pequeño y opinado conjunto de reglas que previene los errores de diseño más comunes de IA: demasiadas fuentes, texto de cuerpo a 14px en un sitio de marketing, tres acentos en competencia, hero stack que parece Bootstrap 4 de 2018. Se ejecuta como un paso de revisión y reescritura sobre la UI generada, aplicando sus reglas y explicando el porqué. Usable en cualquier agente que soporte skills.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "taste-skill-leon",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json
{
  "context_servers": {
    "taste-skill-leon": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Leonxlnx/taste-skill",
          "~/.claude/skills/taste"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add taste-skill-leon -- git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Taste Skill

Revisar una landing page generada por Claude a través del filtro de gusto

👤 Cualquier desarrollador que publique una página de marketing que Claude construyó ⏱ ~30 min intermediate

Cuándo usarlo: La primera versión se ve bien pero es olvidable.

Requisitos previos
  • Skill instalada — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste
Flujo
  1. Criticar
    Usa taste-skill en /pages/landing.tsx. Lista todas las violaciones de gusto con severidad y la regla que rompen.✓ Copiado
    → 10-20 violaciones, cada una etiquetada
  2. Corregir nivel-1
    Aplica solo las correcciones de severidad alta. No cambies el copy — solo lo visual/estructural.✓ Copiado
    → Diff aplicado; el sitio ya no grita 'genérico'
  3. Iterar
    Vuelve a ejecutar la crítica sobre el resultado. Para cuando solo queden detalles de nivel-3.✓ Copiado
    → Converge en 2 pasadas

Resultado: Una página que se lee como elaborada, no generada.

Errores comunes
  • La skill impone un estilo que choca con la marca — Pasa --brand /design/brand.md para que respete las directrices
Combinar con: filesystem

Auditar un componente individual para problemas de gusto

👤 Desarrolladores que tocan el sistema de diseño ⏱ ~15 min beginner

Cuándo usarlo: Antes de publicar un nuevo componente en el sistema.

Flujo
  1. Criticar
    Ejecuta taste-skill en /components/Card.tsx. ¿Hay problemas de gusto a nivel de componente?✓ Copiado
    → Problemas con líneas citadas
  2. Verificar variantes
    Compara los estados hover, focus y disabled para coherencia visual.✓ Copiado
    → Deriva detectada si la hay

Resultado: El componente se publica con menos tickets de '¿por qué eso se ve raro?'.

Errores comunes
  • La crítica ignora elecciones de diseño intencionales (p. ej. estilo brutalista) — Pasa --style brutalist o similar para relajar algunas reglas

Usar taste-skill para establecer una línea base para un nuevo sistema de diseño

👤 Equipos que inician un nuevo producto ⏱ ~60 min intermediate

Cuándo usarlo: Estás eligiendo una escala de tokens, fuente y paleta y quieres un punto de partida sensato.

Flujo
  1. Generar línea base
    Genera un conjunto de tokens alineados con taste-skill — tipo, espaciado, color — para un dashboard SaaS.✓ Copiado
    → tokens.json con razonamiento por cada elección
  2. Prueba de estrés
    Genera páginas de ejemplo (login, dashboard, configuración) usando la línea base. Critica tu propia salida.✓ Copiado
    → Páginas + auto-crítica con posibles refinamientos

Resultado: Un punto de partida defendible que no tuviste que negociar con los stakeholders.

Errores comunes
  • La línea base generada es demasiado 'segura' — Proporciona inputs de marca (estado de ánimo, referencias) para que la salida no sea sosa
Combinar con: design-extract-mcp

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

taste-skill-leon + design-extract-mcp

Extraer tokens de un sitio de referencia y luego ejecutar taste-skill para refinarlos

taste-skill-leon + filesystem

Persistir las críticas como registros de revisión de diseño

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
critique path_or_url, brand? Revisión pre-publicación 0
fix path, severity_threshold Después de critique, enfocarse en nivel-1/2 0
baseline context: {product, audience} Arrancar un sistema de diseño desde cero 0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
N/A
Tokens por llamada
Moderado — la crítica de página completa es 5-10k tokens
Monetario
Gratis
Consejo
La crítica a nivel de componente es más barata que la de página completa; itera así

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: filesystem-read filesystem-write
Almacenamiento de credenciales: Ninguno
Salida de datos: Local

Resolución de problemas

Errores comunes y soluciones

La crítica no devuelve violaciones en UI obviamente genérica

La skill puede estar en modo 'permisivo' — pasa --strict

Fix rompe el layout

Ejecuta con --diff-preview primero, aplica selectivamente

Conflictos con las directrices de marca

Pasa el markdown de marca mediante --brand para que la skill respete las excepciones

Alternativas

Taste Skill vs otros

AlternativaCuándo usarlaContrapartida
stevembarclay/pencilplaybookQuieres gusto en diseño UI enraizado en el producto de PencilEspecífico de Pencil; taste-skill es general
Solo un prompt brand.mdSolo publicas un productoNo detectará los patrones genéricos de IA contra los que esta skill está diseñada

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills