taste-skill — jak nauczyć Claude Code dobrego gustu

Poproś dowolny model o landing page, a dostaniesz to samo: fioletowy gradient, font Inter, wyśrodkowany nagłówek nad rozmytą siatką i trzy identyczne karty „features". To nie przypadek — to domyślna estetyka, do której LLM-y ciążą, gdy nie mają lepszego pomysłu. taste-skill to skill do Claude Code (i innych agentów), który tę domyślność wyłącza.

Z tego artykułu dowiesz się:

• Czym jest AI-slop i po czym poznać, że frontend wygenerowała AI
• Jak taste-skill zmienia sposób myślenia agenta — brief, pokrętła, pre-flight check
• Czy to realnie działa — pokazuję test na 4 różnych briefach

Problem: każda strona z AI wygląda tak samo

Domyślny output modelu ma charakterystyczny „zapach". Fiolet i niebieskie poświaty jako akcent. Inter na slate-900. Wyśrodkowany hero bez prawdziwego obrazka. Trzy równe kafle. Długa pauza (—) wciśnięta wszędzie jako „elegancki" separator. Każdy z tych elementów z osobna jest niewinny — razem tworzą wzór, który każdy widział już tysiąc razy.

Ta sama sekcja, dwa światy. Po lewej domyślny AI-slop, po prawej ten sam komunikat przepuszczony przez taste-skill:

Różnica nie jest kosmetyczna. Po prawej zniknął fioletowy glow, hero ma realny wizual i asymetryczny split, trzy identyczne karty zamieniły się w jeden szeroki kafel plus dwa mniejsze, a puste hasła („powerful, seamless, intuitive") zastąpiły konkretne obietnice.

Jak taste-skill myśli

Skill nie jest zbiorem stylów do wklejenia. To procedura decyzyjna, którą agent przechodzi zanim napisze pierwszą linię CSS. Żadna reguła nie odpala się automatycznie — najpierw brief, potem tylko to, co pasuje.

1. Brief — agent czyta typ strony, słowa-klucze o vibie, odbiorcę i istniejące assety marki.
2. Design Read — zanim cokolwiek wygeneruje, formułuje jedno zdanie: „czytam to jako landing B2B dla technicznego kupca, język Linear-minimalist, w stronę Geist + wstrzemięźliwy motion". To zdanie ustawia całą resztę.
3. Trzy pokrętła — o nich za chwilę.
4. Mapa design systemu — jeśli brief pasuje do realnego systemu (Fluent, Material, Carbon, Radix), agent instaluje oficjalny pakiet zamiast odtwarzać go ręcznie.
5. Dyrektywy — korekta biasu: jeden akcent, anti-center, motion tylko umotywowany, a11y i dark mode.
6. Pre-flight check — mechaniczna checklista przed wysyłką. Fail wraca do poprawki.

Kluczowe jest to, że Design Read jest jawny. Agent musi nazwać, co robi, zanim to zrobi — to sam w sobie odcina odruchowe sięganie po domyślną estetykę.

Trzy pokrętła sterują całą bryłą

Sercem skilla są trzy zmienne. Ustawia się je raz, na początku, a każda późniejsza decyzja o layoucie, ruchu i gęstości jest przez nie bramkowana:

To nie jest gadżet. Ta sama treść przy trzech różnych wartościach DESIGN_VARIANCE daje trzy zupełnie inne bryły layoutu — od spokojnej symetrii po rozjechaną kompozycję:

Pokrętła wywodzą się z Design Read. Brief „minimalist / clean / Linear-style" zjeżdża z variance do 5-6 i motion do 3-4. Brief „agency / Awwwards / experimental" podbija oba do 9-10. Brief „public-sector / trust-first" schodzi do 3-4, bo tam liczy się zaufanie, nie fajerwerki. Agent nie pyta użytkownika o edycję pliku — nadpisania dzieją się w rozmowie.

12 AI Tells — czego skill zakazuje

Najbardziej praktyczna część skilla to lista „AI Tells": konkretnych wzorców, które zdradzają, że output zrobiła maszyna. Każdy ma zakaz (✕) i alternatywę (✓):

Kilka, które widać najczęściej:

• AI-purple glow → jeden nasycony akcent na neutralnej bazie, zero poświat.
• Inter + slate-900 → font dobrany do marki (Geist, Outfit, Space Grotesk).
• Eyebrow spam — mała etykieta nad KAŻDĄ sekcją → maksymalnie 1 eyebrow na 3 sekcje.
• Em-dash jako ozdoba → zwykła kropka lub przecinek. Ten akurat skill banuje długą pauzę całkowicie.
• Trzy równe karty → bento z rytmem, różne rozmiary.
• Fake screenshot z divów → realny zrzut albo wygenerowany obraz.
• Zmyślone liczby („92%", „4.1×") → realne dane albo jawne oznaczenie jako mock.

Pre-flight check jest mechaniczny, nie uznaniowy. Agent liczy instancje eyebrow i jeśli jest ich więcej niż sufit(liczba_sekcji / 3) — output nie przechodzi. Szuka znaku — — jeśli jest, fail. Sprawdza kontrast CTA względem tła (WCAG AA) i domknięcie dokumentu HTML. Dopiero czysta checklista pozwala na ship.

Czy to działa? Test na 4 briefach

Reguły to jedno, output to drugie. Sprawdziłem skill na czterech różnych typach interfejsu, każdy dostał wariant pasujący kontekstem, każdy generował jeden samodzielny plik HTML. Efekt — cztery wyraźnie odrębne estetyki z jednego frameworka:

Landing i cennik dostały główny wariant, portfolio — minimalistyczny, a data-heavy dashboard — brutalistyczny. Żadne z demo nie ma fioletowej poświaty ani trzech równych kart. To ten sam skill, cztery różne czytania briefu.

Instalacja

taste-skill (autor: Leonxlnx, licencja MIT) instaluje się jak każdy skill do agenta:

npx skills add Leonxlnx/taste-skill

Repozytorium zawiera cztery warianty: główny taste-skill, minimalist-skill, brutalist-skill oraz image-to-code-skill. Jeśli chcesz izolacji — trzymać skill tylko w jednym projekcie zamiast globalnie w ~/.claude/skills — możesz ręcznie sklonować repo, skopiować wybrane pliki SKILL.md do lokalnego .claude/skills/ i usunąć klon. Harness Claude Code wykrywa lokalne skille automatycznie.

Potem po prostu opisujesz, co chcesz zbudować, a agent sam przechodzi całą procedurę — od Design Read po pre-flight check.

Podsumowanie

• taste-skill to anti-slop framework — zamiast domyślnej estetyki AI (fiolet, Inter, trzy karty, em-dash) agent czyta brief i świadomie sięga poza kliszę,
• mechanika jest jawna — Design Read w jednym zdaniu, trzy pokrętła (variance / motion / density), 12 nazwanych AI Tells i mechaniczny pre-flight check,
• realnie zmienia output — cztery różne briefy dały cztery odrębne estetyki, żadna z „zapachem" generatora,
• instalacja jedną komendą — npx skills add Leonxlnx/taste-skill i Claude Code dostaje dobry gust.

Damian Ślimak. Twój Nawigator w chaosie AI.