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.