Taste Lab

taste: Odkryj Prawdziwy Design Taste Każdej Strony Internetowej

W świecie nowoczesnego projektowania stron internetowych, samo kopiowanie parametrów CSS nie wystarcza, aby stworzyć produkt o wysokiej jakości estetycznej. Prawdziwa wartość kryje się w czymś głębszym – w pojęciu, które definiujemy jako taste. Narzędzie taste, stworzone przez Sena Lina, to zaawansowane rozwiązanie oparte na sztucznej inteligencji, które wykonuje abdukcyjne rozumowanie (abductive reasoning) w celu odkodowania estetyki dowolnej witryny. Dzięki taste, Twój agent AI nie tylko kopiuje liczby, ale zaczyna rozumieć duszę projektu.

Co to jest taste?

Według twórców narzędzia, taste to nie jest zwykły arkusz specyfikacji. To równanie, które można zapisać jako:

taste = decyzje × kompromisy (trade-offs)

Podczas gdy standardowe narzędzia do ekstrakcji danych dostarczają jedynie tokeny (np. kolor tła #08090A czy font Inter), taste idzie o krok dalej. Definiuje on design taste poprzez analizę dwóch kluczowych elementów:

1. Decyzja: To odpowiedź na pytanie „dlaczego?”. Dlaczego wybrano ten konkretny odcień niemalże czerni zamiast czystej czerni?
2. Kompromis (Trade-off): To zrozumienie obu stron wyboru – co zostało wybrane, a co świadomie odrzucone.

Kiedy agent AI operuje tylko na tokenach, powiela wartości bez ich zrozumienia. Agent wyposażony w design taste wie, co oznacza każda decyzja, dzięki czemu potrafi podjąć właściwe kroki projektowe nawet na stronie, której nigdy wcześniej nie widział.

Główne Funkcje Narzędzia taste

Narzędzie taste oferuje kompleksowy rurociąg (pipeline) analityczny, który zamienia dowolny adres URL w kompletny kontekst projektowy dla Twojego agenta AI. Proces ten składa się z czterech precyzyjnie zdefiniowanych etapów, w których uczestniczą wyspecjalizowani agenci AI.

Pipeline: Cztery Kroki do Odkrycia Design Taste

Proces analizy przebiega w sposób hierarchiczny, gdzie każda kolejna rola pogłębia zrozumienie struktury wizualnej:

1. Extract Measurements (Senior Design AI): Ten etap polega na ekstrakcji precyzyjnych i obiektywnych pomiarów z witryny. Obejmuje 20 kategorii, w tym kolory, wagi fontów, odstępy, promienie zaokrągleń (radius) i cienie, cytowane z dokładnością co do piksela lub hexu.
2. Detect Patterns (Principal Design Engineer): Na tym etapie wykrywane są reguły systematyczne. Narzędzie identyfikuje od 5 do 8 zasad na poziomie systemu, dostarczając dowody i cele projektowe (Design Goals).
3. Infer Taste (Ultimate Design Critic): To serce systemu, gdzie wyciągane są wnioski dotyczące design taste. Krytyk definiuje cztery zasady smaku, analizując bolesne kompromisy (trade-offs), jakie musiał podjąć projektant.
4. Observer (Lead Critic & Final Editor): Końcowy etap kontroli jakości. Filtr, który usuwa zbędne informacje, waliduje format JSON i generuje ostateczny plik wyjściowy.

Taste DNA i Design Map

Wynikiem działania narzędzia są dwa kluczowe pliki: .md oraz .json, które zawierają:

• Design Map: Kompletny zestaw tokenów (kolory, typografia, odstępy, zaokrąglenia, głębia).
• Taste DNA: Cztery fundamenty opisujące logikę projektu. Każdy element Taste DNA zawiera: Trigger (wyzwalacz), Decision (decyzję), Reason (powód), Evidence (dowód z DOM) oraz kluczowy Trade-off (kompromis).

Jak używać taste? (How to Use)

Wdrożenie taste w swoim workflow jest proste i wymaga jedynie trzech kroków. Narzędzie świetnie współpracuje z Claude Code oraz Gemini CLI.

Instrukcja Krok po Kroku:

1. Klonowanie repozytorium: Sklonuj narzędzie do katalogu umiejętności Claude: git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

2. Instalacja Playwright MCP: Zainstaluj niezbędny silnik do renderowania stron (Chromium): claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

3. Uruchomienie analizy: Zrestartuj Claude Code i uruchom komendę na dowolnym adresie URL: /taste https://linear.app

Przypadki Użycia (Use Case)

Narzędzie taste zostało zaprojektowane z myślą o płynnej integracji z najpopularniejszymi narzędziami AI dla programistów i projektantów. Twoje AI otrzymuje gotowy plik z kontekstem, który może wykorzystać w kolejnych sesjach pracy.

• Cursor: Automatyczne generowanie reguł w .cursor/rules/{domain}-taste.mdc.
• Windsurf: Tworzenie instrukcji w .windsurf/rules/{domain}-taste.md.
• Claude Code: Dopisuje sekcję Design Taste do pliku CLAUDE.md.
• GitHub Copilot: Integracja poprzez .github/copilot-instructions.md.
• Narzędzia No-Code i Low-Code: Wsparcie dla v0 (Vercel), Lovable, Bolt oraz Figma Make.

FAQ – Najczęściej Zadawane Pytania

Czym różni się taste od zwykłego inspektora CSS? Zwykły inspektor podaje wartości liczbowe. taste analizuje relacje między nimi i wyciąga wnioski na temat intencji projektanta oraz systemowych reguł, tworząc tzw. Taste DNA.

Jakie konkretne dane wyjściowe otrzymam w Design Map? Otrzymasz szczegółowy system kolorów (np. Page background, Surface, Text primary), pełną typografię (wagi, tracking, line-height), jednostki odstępów, promienie zaokrągleń (border radius) oraz parametry głębi i cieni.

Czy taste wymaga skomplikowanej konfiguracji? Nie, wystarczy sklonować repozytorium i połączyć je z Playwright MCP. Po tej krótkiej konfiguracji narzędzie działa za pomocą jednej prostej komendy /taste.

Dlaczego kompromisy (trade-offs) są tak ważne w analizie taste? Ponieważ każdy wybitny projekt to rezygnacja z czegoś na rzecz czegoś innego. Zrozumienie, co projektant poświęcił (np. czystą czerń na rzecz głębi kolorystycznej), pozwala AI na replikację stylu w sposób inteligentny, a nie mechaniczny.