Taste Skill: biblioteka anty-slop skilli frontendowych

Landing page wygenerowany przez AI rozpoznasz w sekundę: gradient od fioletu do błękitu, trzy równe karty funkcji, eyebrow 001 · Capabilities, em-dash w każdym nagłówku, fałszywy dashboard zbudowany ze stylizowanych divów. Model nie ma złego gustu. Ma gust przeciętny, a przeciętność to właśnie tryb porażki — na każdej decyzji cofa się do najczęstszego wzorca w danych treningowych.

Taste Skill atakuje to od frontu. To biblioteka przenośnych plików SKILL.md, które ładują ograniczenia projektowe do kontekstu agenta zanim napisze linijkę kodu, więc generowanie jest sterowane, zamiast czyszczenia wyniku po fakcie. Hasło projektu: „Less slop, designs pop”.

Migawka researchu

Zweryfikowane 21 lipca 2026 względem Leonxlnx/taste-skill (MIT, około 65 700 gwiazdek i 4 500 forków na GitHubie, utworzone w lutym 2026), strony projektu oraz frontmatteru SKILL.md każdego skilla pobranego ze źródła. Flagowy skill jest w wersji v2 (eksperymentalnej) — to gruntowne przepisanie z 2026 roku, które jest domyślną instalacją, ale wciąż się zmienia. Za wiążącą uznawaj wersję, którą faktycznie instaluje twój harness.

Wersja skrócona

• Taste Skill to zestaw plików z instrukcjami, a nie model, serwer MCP ani CLI. Wpina się w każdy harness, który czyta pliki skilli.
• Flagowiec (design-taste-frontend) czyta twój brief, wnioskuje kierunek projektowy, ustawia trzy pokrętła, mapuje na prawdziwy system projektowy, gdy taki pasuje, generuje, a potem uruchamia twardą listę kontrolną pre-flight.
• Jego siłą jest długa, konkretna lista zakazów „AI Tells” — konkretne wzorce, które sprawiają, że wygenerowane UI wygląda na wygenerowane.
• Jest ograniczony do powierzchni marketingowych: landing page, portfolio, redesigny. Wyraźnie nie do dashboardów, tabel danych, wieloetapowego UI produktowego czy natywnego mobile.
• Bundle dostarcza 13 skilli — warianty soft, minimalistyczny, brutalistyczny, redesign, image-to-code i generowania obrazów — więc możesz zainstalować jedną estetykę zamiast całości.
• Jest opiniotwórczy do tego stopnia, że nadpisuje twój styl domowy, jeśli mu nie powiesz inaczej, a v2 to pre-release zmieniający się w miejscu. Wdrażaj świadomie.

Gdzie stoi obok Impeccable

Dokumentacja omawia już Impeccable, a oba rozwiązują ten sam problem z przeciwnych końców. Impeccable daje tobie i twojemu agentowi wspólne słownictwo — 23 polecenia (typeset, quieter, colorize), które poprawiają kod, który już masz, i dziedziczą twoje istniejące tokeny. Taste Skill zamiast tego ogranicza generowanie z góry: nie uczy się twojego systemu projektowego, narzuca jeden kierunek z twardymi regułami i bramką pre-flight.

Sięgnij po Taste Skill, gdy generujesz nową powierzchnię z briefu i chcesz, żeby nie wyglądała szablonowo już przy pierwszym podejściu. Sięgnij po Impeccable, gdy masz działające UI i chcesz skierować konkretne, nazwane usprawnienia bez art-directingu w prozie. One się komponują: generuj z gustem, potem poleruj słownictwem.

Co wyniesiesz z tego rozdziału

• Jak działa pipeline v2: inferencja briefu, trzy pokrętła, mapa systemu projektowego i check pre-flight
• Komenda instalacyjna dla twojego harnessu i po który z 13 skilli sięgnąć
• Lista zakazów anty-slop oraz jedna reguła w niej, która cię ugryzie
• Gdzie Taste Skill pomaga, gdzie nie i jak go nadpisać, gdy walczy z twoim stylem domowym

Instalacja

Taste Skill instaluje się przez CLI skills, to samo narzędzie używane dla każdego innego skilla w tej sekcji. Nie ma nic do konfigurowania — agent czyta plik na początku sesji.

Claude Code

Zainstaluj flagowy skill v2 (domyślny) z terminala:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Albo zainstaluj cały bundle (wszystkie 13 skilli):

npx skills add Leonxlnx/taste-skill

Skille projektowe lądują w .claude/skills/<name>/SKILL.md; skille osobiste w ~/.claude/skills/. Claude Code ładuje pełny SKILL.md tylko wtedy, gdy uzna skill za istotny.

Repo dostarcza też manifest pluginu Claude Code, więc możesz dodać go jako marketplace:

/plugin marketplace add Leonxlnx/taste-skill

Cursor

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Skille projektowe instalują się do wspólnego katalogu open-standard .agents/skills/<name>/SKILL.md; skille globalne w ~/.cursor/skills/. Cursor czyta oba.

Codex

Wskaż Codex jawnie flagą -a codex:

npx skills add Leonxlnx/taste-skill -a codex

Codex współdzieli katalog .agents/skills/ z Cursorem i czyta skille osobiste z ~/.codex/skills/. Jeśli jesteś konkretnie na Codeksie, wariant gpt-taste jest pod niego dostrojony.

Wskazówka

Nazwa instalacyjna name: we frontmatterze skilla nie jest nazwą katalogu w repo. Flagowiec mieszka w skills/taste-skill/, ale instaluje się jako design-taste-frontend. Z --skill używaj nazw instalacyjnych z tabeli poniżej, a nie nazw folderów.

Aby przypiąć oryginalne v1 (identyczne co do bajta z wydaniem sprzed przepisania), podaj jego nazwę instalacyjną:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

Poza Claude Code, Cursorem i Codeksem projekt deklaruje kompatybilność z Gemini CLI, Antigravity, AI Studio, v0, Lovable, OpenCode, OpenClaw, Windsurf i Copilotem — wszystkim, co czyta SKILL.md.

Jak działa v2

Flagowe v2 to SKILL.md liczący 1200 linii, zorganizowany jako pipeline, który agent przechodzi po kolei. Etapy, które mają znaczenie:

1. Inferencja briefu (§0). Przed jakimkolwiek kodem agent czyta sygnały z twojej prośby — rodzaj strony, słowa-klimaty, referencje, odbiorcę, ograniczenia — i wypuszcza jednolinijkowy „Design Read”. Jeśli brief jest niejednoznaczny, zadaje jedno pytanie, zamiast zgadywać. To dyscyplina anty-default: nazwij kierunek przed generowaniem, żeby wynik nie był statystyczną średnią.

2. Ustaw trzy pokrętła (§1). Każda decyzja o układzie, ruchu i gęstości w dół pipeline’u jest bramkowana trzema wartościami.

3. Zmapuj brief na system projektowy (§2). Jeśli brief czyta się jako nazwany system, użyj oficjalnego pakietu. Jeśli czyta się jako estetyka, użyj standardów webowych i uczciwie oznacz implementację.

4. Generuj względem domyślnego stacku, dyscypliny układu i listy zakazów.

5. Uruchom check pre-flight (§14). Twarda lista kontrolna. Każdy punkt musi uczciwie przejść, zanim praca zostanie uznana za skończoną — blokady spójności, kontrast, dyscyplina hero, ruch-zadeklarowany-ruch-pokazany.

Trzy pokrętła

Pokrętła to rdzeń konfiguracji. Bazowo 8 / 6 / 4, nadpisywane konwersacyjnie (nie edytujesz pliku):

• DESIGN_VARIANCE (1-10) — 1 = idealna symetria, 10 = artystyczny chaos
• MOTION_INTENSITY (1-10) — 1 = statyczne, 10 = kinowe / fizyka
• VISUAL_DENSITY (1-10) — 1 = galeria sztuki, 10 = kokpit / upakowane dane

Skill wnioskuje wartości pokręteł z briefu:

Sygnał w briefie	VARIANCE	MOTION	DENSITY
minimalistyczny / czysty / spokojny / editorial / w stylu Linear	5-6	3-4	2-3
premium konsumencki / w stylu Apple / luksusowy / brandowy	7-8	5-7	3-4
zabawny / dziki / Dribbble / Awwwards / eksperymentalny	9-10	8-10	3-4
landing page / portfolio / strona marketingowa (domyślnie)	7-9	6-8	3-5
trust-first / sektor publiczny / regulowany / krytyczny dla a11y	3-4	2-3	4-5

I trzyma tabelę presetów dla typowych powierzchni:

Zastosowanie	VARIANCE	MOTION	DENSITY
Landing (SaaS, mainstream)	7	6	4
Landing (agencja / kreatywny)	9	8	3
Portfolio (projektant / studio)	8	7	3
Portfolio (deweloper)	6	5	4
Editorial / blog	6	4	3
Usługa sektora publicznego	3	2	5

Mapa systemu projektowego

Zamiast wymyślać wygląd dla każdego briefu, §2 kieruje do prawdziwych systemów. Gdy brief nazywa lub implikuje Material, Fluent, Carbon, Polaris, Atlassian, Primer, GOV.UK, USWDS, Bootstrap, Radix, shadcn lub Tailwind, skill sięga po oficjalny pakiet i wskazuje na kanoniczną dokumentację (appendix wymienia komendy instalacyjne i źródła per system). Gdy brief jest zamiast tego estetyką — glassmorfizm, bento, brutalizm, editorial, aurora, typografia kinetyczna — buduje na standardach webowych i uczciwie oznacza implementację. Apple Liquid Glass jest, co ważne, udokumentowany jako webowa aproksymacja, a nie oficjalny pakiet, więc agent nie deklaruje wierności, której nie może dostarczyć.

Lista zakazów anty-slop

Sekcja 9, „AI Tells”, to miejsce, gdzie skill zarabia na swoją nazwę. Zakazuje konkretnych wzorców, które znaczą wygenerowane UI, pogrupowanych kategoriami. Reprezentatywny wycinek:

• Wizualne: gradienty AI-purple i mesh, ciemne poświaty na kartach, dekoracyjne kropki statusu, ręcznie klepane dekoracyjne ilustracje SVG.
• Układ: rzędy trzech równych kart funkcji, border-t + border-b na każdym wierszu długiej listy, powtarzanie tego samego układu lewo/prawo w kolejnych sekcjach (wymaga co najmniej 4 różnych rodzin układów na 8 sekcji).
• Treść: numerowane eyebrowy sekcji (001 · Capabilities), etykiety wersji w hero (BETA, V0.6), chyba że to prawdziwy launch produktu, fałszywe podpisy photo-credit, paski locale/pogody (Lisbon, working with founders), wskazówki scrollowania (↓ scroll).
• Podróbki: fałszywe UI produktowe z divów — listy zadań, dashboardy i terminale ze stylizowanych divów podane jako prawdziwe.

Narzuca też blokady spójności: jeden kolor akcentu na całą stronę, jeden system zaokrągleń narożników, jeden motyw strony (bez przeskoków jasny/ciemny w środku). Dyscyplina hero jest twarda: nagłówek ≤ 2 linie, podtekst ≤ 20 słów, główne CTA widoczne bez scrollowania, nawigacja w jednej linii ≤ 80px wysokości.

Zakaz em-dashy cię zaskoczy

Najczęściej egzekwowaną regułą v2 (§9.G) jest całkowity zakaz em-dashy i en-dashy gdziekolwiek na stronie — nagłówki, tekst główny, podpisy, alt text, etykiety przycisków. W testach projektu to był najczęściej łamany Tell, bo modele nieustannie sięgają po —. Użyj myślnika lub przebuduj zdanie.

Warto wiedzieć: to koliduje z częstymi stylami domowymi (w tym tego serwisu, który używa --). Jeśli twój głos marki celowo używa em-dashy, będziesz musiał nadpisać tę regułę — zobacz Gdy walczy z twoim stylem domowym.

Dyscyplina ruchu

Dla animacji v2 standaryzuje na Motion (motion/react, rebranding Framer Motion) i dostarcza trzy kanoniczne szkielety kodu, które agent kopiuje zamiast improwizować:

• Sticky-stack — przypięte karty, które układają się w stos w miarę scrollowania (GSAP ScrollTrigger, pin: true, scrub: true).
• Horizontal-pan — przypięte scrollowanie poziome na ustaloną odległość.
• Scroll-reveal stagger — lżejszy reveal whileInView tylko w Motion, do prostych przypadków.

Zakazuje wzorców, które sprawiają, że animacja scrollowa jest szarpana i niemożliwa do utrzymania w Reakcie: surowego window.addEventListener('scroll'), matematyki scrolla trzymanej w stanie Reacta i pętli requestAnimationFrame dotykających stanu. useReducedMotion() jest obowiązkowe dla wszystkiego powyżej MOTION_INTENSITY 3, a jest reguła „ruch zadeklarowany, ruch pokazany” — jeśli strona reklamuje wysoki ruch, ale faktycznie nie animuje, obniż pokrętło i wyślij czyste statyczne. Gwarancje wydajności ograniczają animację wyłącznie do transform i opacity.

13 skilli

Bundle to rodzina. Zainstaluj całość albo wybierz jedną estetykę. Zwróć uwagę, że nazwa instalacyjna różni się od nazwy folderu:

Nazwa instalacyjna (użyj z --skill)	Status	Czym jest
design-taste-frontend	v2 eksperymentalny (domyślny)	Flagowiec: inferencja briefu, pokrętła, mapa systemu projektowego, pre-flight
design-taste-frontend-v1	legacy	Oryginał, zachowany identyczny co do bajta dla wstecznej kompatybilności
gpt-taste	stabilny	Ostrzejszy wariant GPT/Codex: struktura AIDA, wymuszona wariancja układu, GSAP
redesign-existing-projects	stabilny	Modernizacja istniejącej strony zaczynająca od audytu (dowolny framework CSS)
high-end-visual-design	stabilny	„Soft”: drogo wyglądające UI, łagodniejszy kontrast, ruch sprężynowy
minimalist-ui	stabilny	Editorial, styl Notion/Linear: ciepły monochrom, płaskie bento, bez gradientów
industrial-brutalist-ui	stabilny	Szwajcarska typografia + estetyka terminala, sztywne siatki, ekstremalny kontrast skali
full-output-enforcement	stabilny	Anty-truncation: zakazuje kodu-placeholderów, wymusza pełne generowanie
stitch-design-taste	stabilny	Most do Google Stitch: eksportuje przyjazny agentowi DESIGN.md
image-to-code	stabilny	Image-first: generuj klatki referencyjne, analizuj, potem implementuj tak, by pasowały
imagegen-frontend-web	stabilny	Klatki referencyjne — jeden osobny obraz na sekcję, nigdy skompresowana plansza
imagegen-frontend-mobile	stabilny	Koncepty ekranów iOS/Android w mockupach telefonu (tylko obrazy, bez kodu)
brandkit	stabilny	Tablice tożsamości marki: systemy logo, palety, systemy typograficzne

Wskazówka

Prompt do skopiowania po instalacji flagowca:

„Używając taste-skill (design-taste-frontend), zbuduj landing page dla [produkt]. Zacznij od podania jednolinijkowego Design Read i trzech wartości pokręteł, które ustawiasz, oraz powiedz, na który system projektowy (jeśli w ogóle) mapuje się brief. Potem wygeneruj stronę i uruchom check pre-flight z §14, raportując każdy punkt jako pass lub fail, zanim skończysz.”

Protokół redesignu

Dla istniejących stron redesign-existing-projects (i §11 flagowca) otwiera detekcją trybu — Greenfield, Preserve albo Overhaul — i audytuje, zanim czegokolwiek dotknie. Jego najbardziej użytecznym wkładem jest lista „nigdy nie zmienia po cichu”: struktura URL, etykiety nawigacji, nazwy pól formularzy, wordmark marki i copy prawne są poza zasięgiem redesignu, chyba że poprosisz wprost. To ta gwarancja, która nie pozwala promptowi „zrób to ładniej” po cichu zepsuć twojego routingu albo tekstu compliance.

Gdy walczy z twoim stylem domowym

SKILL.md to zwykły plik markdown w twoim projekcie. Aby nadpisać regułę — zakaz em-dashy, preferencję zestawu ikon, domyślne pokrętło — wklej krótki projektowy style guide na górę pliku; instrukcje wyżej w pliku mają pierwszeństwo. Tak samo mówisz mu o głosie marki, kolorze akcentu albo o tym, że konkretna sekcja jest wyłączona.

Dwa uczciwe ograniczenia, które trzeba zaplanować:

• v2 to pre-release zmieniający się w miejscu. Poprawki lądują w dowolnym wydaniu eksperymentalnym, a nie ma przypięcia wersji poza furtką v1. Przypnij design-taste-frontend-v1, jeśli potrzebujesz stabilnego, niezmiennego zachowania.
• Jest ograniczony do powierzchni marketingowych. §13 wyraźnie stawia dashboardy, tabele danych, wieloetapowe formularze, edytory kodu, natywne mobile i UI współpracy w czasie rzeczywistym poza zakresem. Skierujesz go na nie i jesteś poza tym, do czego został napisany.

Taste Skill vs Impeccable vs pipeline projektowy

	Taste Skill	Impeccable	Pipeline projektowy
Kształt	Pliki skilli	Skill + CLI + Live Mode	Czteroetapowy workflow modeli
Kiedy	Generowanie nowej powierzchni	Poprawianie UI, które już masz	Pełne od briefu do kodu, nowa powierzchnia
Mechanizm	Ograniczenia ładowane przed generowaniem	Nazwane polecenia + bramka detect w CI	Model obrazu -> reasoning -> narzędzie projektowe -> agent kodujący
Uczy się twojego systemu?	Nie — narzuca kierunek	Tak — dziedziczy twoje tokeny	Produkuje system jako efekt uboczny
Najlepszy do	„Nie pozwól, by wyglądało szablonowo”	„Napraw tę konkretną rzecz”	„Ściśnij projekt + build w jedną sesję”

Nawarstwiają się: uruchom pipeline, by ukształtować i zbudować, wygeneruj frontend z ograniczeniami Taste Skill, potem poleruj słownictwem Impeccable.

Gdzie iść dalej

Impeccable: słownik projektowy Odpowiednik audytująco-poprawiający -- 23 polecenia, które usprawniają kod, który już masz, i dziedziczą twoje tokeny.

Pipeline projektowy Czteroetapowy workflow makieta -> prototyp -> system -> kod, w który wpasowuje się etap generowania Taste Skill.

Najlepsze skille do frontendu Sparuj Taste Skill ze skillami frameworkowymi, żeby AI pisało też aktualny, idiomatyczny React, Vue albo Svelte.

Instalowanie i zarządzanie skillami Pełne CLI skills: install, update, list, remove i gdzie mieszkają pliki dla każdego agenta.