/ 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

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

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.

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