/ Verzeichnis / Playground / Taste Skill
← Alle Server ↗ GitHub
● Community Leonxlnx ⚡ Sofort

Taste Skill

von Leonxlnx · Leonxlnx/taste-skill

Design-Geschmack kodieren — Typografie, Abstände, Farben, Kompositionsregeln — damit Claude aufhört, generisch aussehendes UI zu liefern, und stattdessen Arbeit produziert, die nach einem Senior wirkt.

Taste Skill ist ein kleines, meinungsstarkes Regelwerk, das die häufigsten AI-Design-Fehler präventiv verhindert: zu viele Schriftarten, Fließtext bei 14px auf einer Marketing-Website, drei konkurrierende Akzentfarben, ein Hero-Stack, der nach Bootstrap 4 von 2018 aussieht. Es läuft als Review-und-Rewrite-Schritt über generiertem UI, wendet seine Regeln an und erklärt, warum. In jedem Agenten nutzbar, der Skills unterstützt.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

bereit

Installieren

Wählen Sie Ihren 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
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die 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
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

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

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Taste Skill

Eine von Claude generierte Landingpage durch den Geschmacksfilter prüfen

👤 Jeder Entwickler, der eine von Claude erstellte Marketing-Seite ausliefert ⏱ ~30 min intermediate

Wann einsetzen: Die erste Ausgabe sieht in Ordnung aus, aber wirkt unvergesslich.

Voraussetzungen
  • Skill installiert — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste
Ablauf
  1. Kritisieren
    Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ Kopiert
    → 10–20 Verstöße, jeder mit Tag
  2. Tier-1-Fixes anwenden
    Apply only severity-high fixes. Don't change copy — only visual/structural.✓ Kopiert
    → Diff angewendet; Seite sieht nicht mehr generisch aus
  3. Iterieren
    Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ Kopiert
    → Konvergiert in 2 Durchläufen

Ergebnis: Eine Seite, die handgefertigt wirkt, nicht generiert.

Fallstricke
  • Skill erzwingt einen Stil, der gegen die Marke kämpft — --brand /design/brand.md übergeben, damit er Marken-Leitlinien respektiert
Kombinieren mit: filesystem

Eine einzelne Komponente auf Geschmacksprobleme prüfen

👤 Entwickler, die am Design-System arbeiten ⏱ ~15 min beginner

Wann einsetzen: Vor der Auslieferung einer neuen Komponente ins System.

Ablauf
  1. Kritisieren
    Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ Kopiert
    → Probleme mit zitierten Zeilen
  2. Varianten prüfen
    Compare hover, focus, and disabled states for visual coherence.✓ Kopiert
    → Drift erkannt, falls vorhanden

Ergebnis: Komponente wird mit weniger ‚warum sieht das komisch aus'-Tickets ausgeliefert.

Fallstricke
  • Kritik ignoriert beabsichtigte Design-Entscheidungen (z. B. Brutalist-Stil) — --style brutalist oder ähnlich übergeben, um bestimmte Regeln zu lockern

Taste-Skill nutzen, um eine Baseline für ein neues Design-System zu setzen

👤 Teams, die gerade ein neues Produkt starten ⏱ ~60 min intermediate

Wann einsetzen: Du wählst eine Token-Skala, Schriftart und Palette und möchtest eine vernünftige Ausgangsbasis.

Ablauf
  1. Baseline generieren
    Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ Kopiert
    → tokens.json mit Begründung pro Wahl
  2. Stress-Test
    Generate sample pages (login, dashboard, settings) using the baseline. Critique your own output.✓ Kopiert
    → Seiten + Selbstkritik mit möglichen Verfeinerungen

Ergebnis: Ein vertretbarer Ausgangspunkt, über den nicht mit Stakeholdern verhandelt werden muss.

Fallstricke
  • Generierte Baseline ist zu ‚sicher' — Marken-Inputs (Stimmung, Referenzen) bereitstellen, damit die Ausgabe nicht bland wird
Kombinieren mit: design-extract-mcp

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

taste-skill-leon + design-extract-mcp

Token von einer Referenzsite extrahieren, dann mit Taste-Skill verfeinern

taste-skill-leon + filesystem

Kritiken als Design-Review-Aufzeichnungen persistieren

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
critique path_or_url, brand? Pre-Ship-Review 0
fix path, severity_threshold Nach der Kritik, Tier-1/2 anvisieren 0
baseline context: {product, audience} Ein Design-System von Grund auf starten 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Nicht zutreffend
Tokens pro Aufruf
Mittel — vollständige Seitenkritik sind 5–10k Token
Kosten in €
Kostenlos
Tipp
Kritik auf Komponentenebene ist günstiger als auf Seitenebene; so iterieren

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: filesystem-read filesystem-write
Credential-Speicherung: Keine
Datenabfluss: Lokal

Fehlerbehebung

Häufige Fehler und Lösungen

Kritik findet keine Verstöße bei offensichtlich generischem UI

Skill befindet sich möglicherweise im ‚lenient'-Modus — --strict übergeben

Fix bricht das Layout

--diff-preview zuerst ausführen, selektiv anwenden

Konflikte mit Marken-Leitlinien

Marken-Markdown per --brand übergeben, damit Skill Ausnahmen respektiert

Alternativen

Taste Skill vs. andere

AlternativeWann stattdessenKompromiss
stevembarclay/pencilplaybookDu möchtest UI-Design-Geschmack, der in Pencils Produkt verwurzelt istSpezifisch für Pencil; Taste-Skill ist allgemein
Nur ein brand.md-PromptDu lieferst nur ein einzelnes ProduktErkennt die AI-generischen Muster nicht, gegen die dieser Skill ausgelegt ist

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen