Taste Lab

taste: Abduktives Schließen für das Design-Verständnis jeder Website

In der Welt der künstlichen Intelligenz und des modernen Webdesigns reicht es oft nicht aus, nur oberflächliche Daten zu extrahieren. Wahre Ästhetik und Nutzererfahrung entstehen durch tiefgreifende Überlegungen. Hier setzt taste an. Das Tool, entwickelt von Sen Lin, verfolgt einen einzigartigen Ansatz: taste = decisions × trade-offs (Geschmack = Entscheidungen × Abwägungen). Während herkömmliche Extraktions-Tools lediglich Token liefern, bietet taste einen vollständigen Design-Kontext, der es KI-Agenten ermöglicht, die Logik hinter jeder visuellen Wahl zu verstehen.

Was ist taste?

taste ist weit mehr als ein einfacher Web-Scraper. Es ist ein System für abduktives Schließen, das jede beliebige URL in eine detaillierte Design-Map und eine sogenannte Taste DNA verwandelt.

Das Kernkonzept von taste basiert auf der Erkenntnis, dass ein bloßes Datenblatt – wie etwa die Angabe einer Hintergrundfarbe (#08090A), einer Schriftart (Inter) oder eines Eckenradius (6px) – noch keinen "Geschmack" ausmacht. Geschmack definiert sich durch:

1. Entscheidungen (Decisions): Das "Warum" hinter einer Wahl. Warum wurde dieses spezifische Fast-Schwarz anstelle von reinem Schwarz gewählt?
2. Abwägungen (Trade-offs): Beide Seiten einer Entscheidung. Was wurde gewählt und was wurde bewusst weggelassen?

Ein KI-Agent, der lediglich über Token verfügt, kopiert Zahlen ohne Verständnis. Ein Agent mit taste hingegen begreift die Bedeutung jeder Entscheidung und kann somit auch auf Seiten, die er noch nie zuvor gesehen hat, die richtigen Design-Aufrufe tätigen.

Funktionen von taste

Das Tool taste bietet eine strukturierte Pipeline und hochpräzise Analysewerkzeuge, um das Design-System einer Website vollständig zu entschlüsseln.

Die taste-Pipeline: Vier Schritte zum Design-Verständnis

Der Prozess von der URL zum fertigen taste-Output durchläuft vier spezialisierte Agenten-Rollen, die dieselbe Seite durch immer schärfere Linsen betrachten:

1. Messungen extrahieren (Senior Design AI): In diesem ersten Schritt werden präzise, objektive Design-Messungen von der Webseite extrahiert.
2. Muster erkennen (Principal Design Engineer): Hier werden systematische Regeln in den bereitgestellten Messungen identifiziert.
3. Geschmack ableiten (Ultimate Design Critic): Dieser Agent leitet die bewussten, oft schwierigen Abwägungen ab, die der Designer getroffen hat.
4. Beobachter (Lead Critic & Final Editor): Als Qualitätsinstanz filtert dieser Agent die Analyse gnadenlos. Er validiert JSON-Daten und entfernt unnötige Informationen, um ein sauberes Endergebnis zu garantieren.

Umfassende Analyse-Kategorien

• 20 Messungskategorien: Jede Farbe, jedes Gewicht, jeder Abstands- und Schattenwert wird mit exakten Pixel-, Hex- oder Verhältniswerten zitiert. Es gibt keine Annäherungen.
• Systemweite Regeln: Es werden 5 bis 8 Regeln auf Systemebene extrahiert, jeweils ergänzt durch Beweiszeilen und ein Designziel.
• 4 Geschmack-Prinzipien: Jedes Prinzip umfasst Trigger, Entscheidung, Grund, Beweis und Abwägung. Mindestens ein Prinzip muss eine gestalterische Zurückhaltung (Restraint) aufzeigen.

Der taste-Output: Design Map und Taste DNA

Jeder Durchlauf von taste generiert zwei essenzielle Dateien: eine .md-Datei und eine .json-Datei. Diese bieten eine strukturierte Übersicht über das Design-System.

Part 1: Design Map

Die Design Map enthält das komplette Token-Set der Seite:

• Farbsystem: Beispielsweise Hintergrundfarben wie #08090A (Fast-Schwarz), Panel-Farbtöne wie rgba(255,255,255,0.02) und Textfarben.
• Typografie: Genaue Angaben zu Schriftarten (z. B. Inter Variable), Schriftgrößen (H1 mit 64px), Gewichten (wt 510/590) und Buchstabenabständen.
• Abstände (Spacing): Definition der Basiseinheiten (z. B. 8px), Sektions-Padding und Button-Abstände.
• Eckenradius (Border Radius): Genaue Werte für Mikro-Elemente (2px), Primärkarten (6px) oder Pill-Buttons (9999px).
• Tiefe & Schatten: Details zu inset-Ringen, fließenden Karten und Vignetten.

Part 2: Taste DNA

Die Taste DNA erklärt das "Warum". Ein DNA-Prinzip besteht aus:

• Trigger: Was hat die Design-Entscheidung ausgelöst?
• Decision: Was wurde konkret gewählt?
• Reason: Die logische Begründung dahinter.
• Evidence: Spezifische Beweise aus dem DOM (px, hex, Verhältnisse).
• Trade-off: Was wurde durch diese Wahl geopfert?

So verwenden Sie taste (How to Use)

Die Einrichtung von taste ist in drei einfachen Schritten erledigt. Es funktioniert hervorragend in Umgebungen wie Claude Code oder der Gemini CLI.

1. Klonen des Repositorys: Klonen Sie das Skill-Verzeichnis in Ihren lokalen Ordner: git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

2. Installation von Playwright MCP: Dies ist eine einmalige Installation, die Chromium herunterlädt: claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

3. Ausführung: Starten Sie Claude Code neu und führen Sie taste auf einer beliebigen URL aus: /taste https://linear.app

Anwendungsfälle (Use Case)

taste ist darauf ausgelegt, nahtlos mit Ihren bevorzugten KI-Entwicklungstools zusammenzuarbeiten. Ihr KI-Agent erhält durch eine zusätzliche Datei den vollständigen Design-Geschmack, ohne dass ein manuelles Kopieren und Einfügen erforderlich ist.

• Cursor: Nutzt .cursor/rules/{domain}-taste.mdc
• Windsurf: Nutzt .windsurf/rules/{domain}-taste.md
• Claude Code: Ergänzt die Sektion "Design Taste" in der CLAUDE.md.
• GitHub Copilot: Nutzt .github/copilot-instructions.md
• v0 by Vercel: Erstellt taste-tokens.css inklusive Anweisungen.
• Figma Make: Generiert taste-figma.css.
• Lovable: Die Ausgabe kann direkt in das Projektwissen eingefügt werden.

FAQ – Häufig gestellte Fragen

Was unterscheidet taste von einem normalen CSS-Extraktor? Ein normaler Extraktor liefert nur Rohdaten (Token). taste hingegen nutzt abduktives Schließen, um die strategischen Entscheidungen und Kompromisse (Trade-offs) hinter diesen Daten zu verstehen und für KIs nutzbar zu machen.

Welche Dateien erzeugt das Tool? Es werden immer zwei Dateien erstellt: eine Markdown-Datei (.md) für die menschliche Lesbarkeit und eine JSON-Datei (.json) für die maschinelle Weiterverarbeitung.

Benötigt taste eine komplexe Einrichtung? Nein, nach dem Klonen des GitHub-Repositorys und der einmaligen Installation von Playwright kann das Tool sofort über einfache Befehle in der Konsole genutzt werden.

Wer hat taste entwickelt? Das Projekt ist ein Side-Project von Sen Lin, der auch auf Plattformen wie Substack und Medium über Design-Themen publiziert.

"Ein Agent mit Geschmack weiß, was jede Entscheidung bedeutet. Er kann die richtige Wahl auf einer Seite treffen, die er noch nie zuvor gesehen hat."