/ Annuaire / Playground / Taste Skill
← Tous les serveurs ↗ GitHub
● Communauté Leonxlnx ⚡ Instantané

Taste Skill

par Leonxlnx · Leonxlnx/taste-skill

Encode le goût du design — typographie, espacement, couleur, règles de composition — pour que Claude arrête de livrer des interfaces génériques et produise du travail qui paraît senior.

Taste Skill est un petit ensemble de règles opinâtres qui prévient les erreurs de design AI les plus courantes : trop de polices, texte de corps à 14px sur un site marketing, trois accents concurrents, hero stack qui ressemble à Bootstrap 4 en 2018. Il s'exécute comme une étape de révision et réécriture de l'interface générée, applique ses règles et explique pourquoi. Utilisable dans n'importe quel agent qui supporte les skills.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

~/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
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.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 utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "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
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Taste Skill

Réviser une page d'atterrissage générée par Claude avec le filtre taste

👤 Tout dev qui livre une page marketing construite par Claude ⏱ ~30 min intermediate

Quand l'utiliser : Le premier rendu est correct mais sans originalité.

Prérequis
  • Skill installé — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste
Déroulement
  1. Critiquer
    Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ Copié
    → 10 à 20 violations, chacune taguée
  2. Corriger le tier-1
    Apply only severity-high fixes. Don't change copy — only visual/structural.✓ Copié
    → Diff appliqué ; le site ne ressemble plus à du « générique »
  3. Itérer
    Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ Copié
    → Converge en 2 passes

Résultat : Une page qui paraît élaborée, pas générée.

Pièges
  • Le skill impose un style qui se bat contre la marque — Passez --brand /design/brand.md pour qu'il respecte les contraintes
Combiner avec : filesystem

Auditer un seul composant pour des problèmes de taste

👤 Devs touchant au système de design ⏱ ~15 min beginner

Quand l'utiliser : Avant de livrer un nouveau composant dans le système.

Déroulement
  1. Critiquer
    Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ Copié
    → Problèmes avec lignes citées
  2. Vérification des variantes
    Compare hover, focus, and disabled states for visual coherence.✓ Copié
    → Dérive détectée le cas échéant

Résultat : Le composant est livré avec moins de tickets « pourquoi ça a l'air bizarre ».

Pièges
  • La critique ignore des choix de design intentionnels (ex. style brutaliste) — Passez --style brutalist ou similaire pour assouplir certaines règles

Utiliser taste-skill pour établir une base de référence pour un nouveau système de design

👤 Équipes démarrant un nouveau produit ⏱ ~60 min intermediate

Quand l'utiliser : Vous choisissez une échelle de tokens, une police, une palette et voulez une base saine.

Déroulement
  1. Générer la base
    Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ Copié
    → tokens.json avec justification par choix
  2. Test de stress
    Generate sample pages (login, dashboard, settings) using the baseline. Critique your own output.✓ Copié
    → Pages + auto-critique avec raffinements possibles

Résultat : Un point de départ défendable que vous n'avez pas eu à négocier avec les parties prenantes.

Pièges
  • La base générée est trop « sûre » — Fournissez des inputs de marque (ambiance, références) pour que la sortie ne soit pas terne
Combiner avec : design-extract-mcp

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

taste-skill-leon + design-extract-mcp

Extraire les tokens depuis un site de référence, puis passer taste-skill pour affiner

taste-skill-leon + filesystem

Persister les critiques comme archives de revue design

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
critique path_or_url, brand? Révision avant livraison 0
fix path, severity_threshold Après critique, cibler tier-1/2 0
baseline context: {product, audience} Démarrage à froid d'un système de design 0

Coût et limites

Coût d'exécution

Quota d'API
N/A
Tokens par appel
Modéré — une critique pleine page représente 5 à 10k tokens
Monétaire
Gratuit
Astuce
La critique au niveau composant est moins chère qu'en pleine page ; itérez ainsi

Sécurité

Permissions, secrets, portée

Portées minimales : filesystem-read filesystem-write
Stockage des identifiants : Aucun
Sortie de données : Local

Dépannage

Erreurs courantes et correctifs

La critique ne retourne aucune violation sur une interface évidemment générique

Le skill est peut-être en mode « permissif » — passez --strict

La correction casse la mise en page

Exécutez avec --diff-preview d'abord, appliquez sélectivement

Conflits avec les directives de marque

Passez le Markdown de marque via --brand pour que le skill respecte les exceptions

Alternatives

Taste Skill vs autres

AlternativeQuand l'utiliserCompromis
stevembarclay/pencilplaybookVous voulez un goût de design UI enraciné dans le produit PencilSpécifique à Pencil ; taste-skill est général
Simple fichier brand.mdVous ne livrez qu'un seul produitNe détectera pas les patterns AI-génériques que ce skill vise

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills