Taste Lab

taste: De Ultieme Gids voor het Begrijpen en Toepassen van Design Taste

In de wereld van webdesign en kunstmatige intelligentie is er een fundamenteel verschil tussen het simpelweg kopiëren van waarden en het werkelijk begrijpen van een esthetiek. Veel extractietools leveren enkel tokens — de ruwe data van een pagina. Echter, taste gaat verder. Ontwikkeld door Sen Lin, is taste een tool die gebruikmaakt van abductieve redenering om de volledige design taste van elke website te achterhalen en te vertalen naar een context die bruikbaar is voor AI-agents.

Wat is taste?

De kernfilosofie achter deze tool is simpel maar diepgaand: taste = decisions × trade-offs (smaak = beslissingen × afwegingen).

Terwijl een standaard spec-sheet je vertelt dat een achtergrondkleur #08090A is of dat het lettertype Inter met een radius van 6px wordt gebruikt, verklaart taste de achterliggende redenen. Een beslissing beantwoordt de "waarom"-vraag: waarom is er gekozen voor dit specifieke bijna-zwart in plaats van puur zwart? Een afweging (trade-off) bekijkt beide kanten van die keuze — wat er is gekozen en wat er bewust is weggelaten.

Wanneer een AI-agent alleen over tokens beschikt, kopieert hij nummers zonder ze te begrijpen. Een agent die is uitgerust met taste, begrijpt echter wat elke beslissing betekende. Hierdoor kan de agent de juiste keuzes maken op een pagina die hij nog nooit eerder heeft gezien.

Hoe taste Werkt: De Pipeline

Het proces van het omzetten van een URL naar tastbare design-context verloopt via een nauwkeurige pipeline van vier stappen. Hierbij worden vier verschillende AI-agents ingezet, elk met een specifieke rol, om de pagina door een steeds scherpere lens te bekijken.

01: Extract Measurements (Metingen Extraheren)

De eerste stap wordt uitgevoerd door een Senior Design AI. De taak van deze agent is het extraheren van nauwkeurige, objectieve design-metingen van een webpagina. Hierbij worden 20 verschillende meetcategorieën geanalyseerd, variërend van kleuren en gewichten tot exacte pixelwaarden voor spacing en radius.

02: Detect Patterns (Patronen Detecteren)

In de tweede fase fungeert de AI als een Principal Design Engineer. Deze agent zoekt naar systematische regels binnen de verzamelde metingen. Er worden 5 tot 8 regels op systeemniveau geëxtraheerd, waarbij elk patroon wordt voorzien van een bewijslijn en een designdoel dat uitlegt waarom het patroon bestaat.

03: Infer Taste (Smaak Afleiden)

De derde agent is de Ultimate Design Critic. Deze agent leidt de werkelijke taste af: de doelbewuste en vaak pijnlijke afwegingen die de ontwerper heeft gemaakt. Dit resulteert in 4 smaakprincipes, elk onderbouwd met een trigger, beslissing, reden, bewijs en afweging.

04: Observer (De Waarnemer)

De laatste stap in de pipeline is de Lead Critic & Final Editor. Deze agent fungeert als een kwaliteitspoort die de analyse genadeloos filtert. Er wordt gecontroleerd op inconsistenties en JSON-validatie, waarna de uiteindelijke output wordt gegenereerd. Niets wat overbodig of onduidelijk is, passeert deze agent.

Belangrijkste Kenmerken (Features)

De output van taste bestaat uit twee essentiële bestanden: een .md bestand en een .json bestand. Deze bestanden vormen samen de volledige context voor uw AI-tools.

De Design Map

Dit is een compleet overzicht van alle visuele tokens op de pagina:

• Kleurensysteem: Inclusief paginachtergronden (zoals #08090A), oppervlakte-tinten (rgba(255,255,255,0.02)), en tekstkleuren.
• Typografie: Details over koppen (bijv. H1 op 64px met -1.408px tracking) en bodytekst, inclusief variabele font-gewichten.
• Spacing: De basiseenheid (bijv. 8px), sectie-padding en tussenruimtes.
• Border Radius: Specifieke waarden voor tags (2px), kaarten (6px) en buttons (9999px).
• Diepte & Schaduw: Inset borders en schaduwen voor floating kaarten.

Taste DNA

Het Taste DNA bevat 4 fundamentele principes. Elk principe legt de logica achter een specifieke designkeuze uit aan de hand van vijf elementen:

1. Trigger: Wat leidde tot deze ontwerpkeuze?
2. Decision: Wat is er uiteindelijk gekozen?
3. Reason: De achterliggende designlogica.
4. Evidence: Specifiek bewijs van de pagina (px, hex, DOM-waarden).
5. Trade-off: Wat is er opgeofferd door deze keuze te maken?

Gebruiksscenario's (Use Case)

taste is ontworpen om naadloos samen te werken met populaire AI-ontwikkelingstools. Zodra de bestanden zijn gegenereerd, kan uw AI-agent de taste direct oppakken in de volgende run, zonder extra installatie of handmatig plakken van tekst. Het is compatibel met:

• Cursor: .cursor/rules/{domain}-taste.mdc
• Windsurf: .windsurf/rules/{domain}-taste.md
• Claude Code: Voegt een sectie toe aan CLAUDE.md.
• GitHub Copilot: .github/copilot-instructions.md
• Bolt: .bolt/prompt
• v0 by Vercel: taste-tokens.css + instructies
• Figma Make: taste-figma.css + instructies
• Lovable: Geprinte tekst om in projectkennis te plakken.

Hoe Gebruik Je taste?

Het instellen van taste is een proces van drie eenvoudige stappen. Het werkt uitstekend in omgevingen zoals Claude Code en de Gemini CLI.

1. Kloon de skill: Kloon de repository naar uw Claude skills-directory: git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

2. Installeer Playwright MCP: Dit is een eenmalige installatie die Chromium downloadt (~100MB): claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

3. Start de analyse: Herstart Claude Code en voer de tool uit op elke gewenste URL: /taste https://linear.app

FAQ

V: Wat is het verschil tussen een token en taste? A: Een token is een technische waarde (zoals een hex-code). taste is het begrip van waarom die waarde is gekozen en welke andere opties zijn verworpen.

V: Waarom is een 'Trade-off' belangrijk? A: Een trade-off (afweging) laat zien wat een ontwerp opoffert om een specifiek doel te bereiken. Dit helpt een AI-agent om de grenzen en de focus van een designstijl te begrijpen.

V: Welke bestanden genereert taste? A: Elke run genereert een {domain}.md en een {domain}.json bestand, bevattende de Design Map en het Taste DNA.

V: Is er een specifieke lettertypevereiste? A: De tool detecteert wat er op de pagina aanwezig is. In de voorbeelden zien we vaak het gebruik van Inter Variable met specifieke tracking en gewichten.

"Een agent met smaak weet wat elke beslissing betekende. Het kan de juiste keuze maken op een pagina die het nog nooit heeft gezien."

taste is een zijproject van Sen Lin, beschikbaar op GitHub, Substack en Medium.