Impeccable: słownik projektowy dla twojego harnessu AI

Wygeneruj UI dowolnym narzędziem AI, a rozpoznasz je natychmiast: gradient od fioletu do błękitu, ciasny padding, sprężynujący easing, ciemna poświata na karcie. Frontendy AI wyglądają wszystkie tak samo — nie dlatego, że modele mają zły gust, ale dlatego, że nie mają słów na hierarchię, kontrast i powściągliwość. Poproś o „lepsze odstępy”, a dostaniesz zgadywankę.

Impeccable, autorstwa Paula Bakausa, to język projektowy, który naprawia problem słownictwa po obu stronach. Daje twojemu agentowi 23 wywoływalne polecenia i daje tobie te same terminy, więc możesz poprosić dokładnie o to, czego chcesz — typeset na nagłówki, quieter na tę sekcję, colorize strategicznie — zamiast to opisywać i mieć nadzieję. Działa wewnątrz twojego repo i poleruje kod, który już masz; nie generuje równoległego systemu projektowego od zera.

Co wyniesiesz z tego rozdziału

Dlaczego UI generowane przez AI zbiegają się do tego samego wyglądu i co naprawia wspólny słownik
Jak zainstalować Impeccable i uruchomić jego jednorazową konfigurację
23 polecenia pogrupowane według tego, do czego służą
Live Mode do iteracji w przeglądarce oraz CLI detect do CI
Kiedy sięgnąć po Impeccable, a kiedy po szerszy potok projektowy

Instalacja

Z katalogu głównego projektu:

npx impeccable skills install

Pokazuje wykryte foldery harnessów, pozwala dostosować providerów i pyta, czy zainstalować lokalnie w projekcie, czy globalnie. Następnie uruchom jednorazową konfigurację wewnątrz swojego narzędzia AI:

/impeccable init

init zbiera kontekst projektowy i zapisuje PRODUCT.md oraz DESIGN.md — pliki, które osadzają każde późniejsze polecenie w intencji twojego produktu i twoich decyzjach projektowych.

23 polecenia

Każde polecenie wywołuje się jako /impeccable <polecenie> <cel>. Mapują się jeden-do-jednego na dyscypliny projektowe, i o to właśnie chodzi — nazywasz dyscyplinę, zamiast opisywać objaw.

Konfiguracja i przechwycenie

Polecenie	Robi
`init`	Jednorazowa konfiguracja: zbierz kontekst, zapisz `PRODUCT.md` / `DESIGN.md`
`document`	Wygeneruj `DESIGN.md` z istniejącego kodu
`extract`	Wyciągnij komponenty i tokeny do systemu projektowego

Planowanie i budowa

Polecenie	Robi
`shape`	Zaplanuj UX/UI przed jakimkolwiek kodem
`craft`	Pełny przepływ kształtuj-potem-buduj z iteracją wizualną

Przegląd

Polecenie	Robi
`critique`	Przegląd projektowy UX: hierarchia, klarowność, rezonans
`audit`	Sprawdzenia techniczne: a11y, wydajność, zachowanie responsywne
`polish`	Końcowy przebieg i gotowość do wysyłki

Zmień charakter

Polecenie	Robi
`bolder`	Wzmocnij nudny, nieśmiały projekt
`quieter`	Stonuj zbyt głośny
`distill`	Sprowadź do esencji
`delight`	Dodaj momenty radości
`overdrive`	Dodaj technicznie nadzwyczajne efekty

Napraw jedną dyscyplinę

Polecenie	Robi
`typeset`	Fonty, hierarchia, rozmiary
`colorize`	Wprowadź strategiczny kolor
`animate`	Dodaj celowy ruch
`layout`	Odstępy i rytm wizualny
`clarify`	Popraw teksty UX
`adapt`	Dostosuj do różnych urządzeń
`optimize`	Poprawki wydajności
`harden`	Obsługa błędów, i18n, przepełnienie tekstu, przypadki brzegowe
`onboard`	Przepływy pierwszego uruchomienia i puste stany
`live`	Tryb wariantów wizualnych — iteruj w przeglądarce

Live Mode

/impeccable live zamienia iterację w sesję przeglądarkową względem twojego serwera deweloperskiego. Wybierasz element, zostawiasz komentarz i podmieniasz warianty, które zapisują się z powrotem do plików źródłowych przez hot-module reload frameworka. To różnica między „opisz zmianę i ponownie przeczytaj diff” a „wskaż rzecz i wypróbuj trzy wersje”.

CLI detect: bramka anty-slop do CI

Niezależnie od poleceń harnessu Impeccable dostarcza deterministyczny detektor — 44 reguły, bez LLM, bez klucza API — który możesz uruchomić gdziekolwiek:

npx impeccable detect src/
npx impeccable detect index.html
npx impeccable detect https://example.com
npx impeccable detect --json .

Wyłapuje dwie rodziny problemów: slop AI (fioletowe gradienty, sprężynujący easing, ciemne poświaty, ramki bocznych zakładek) oraz problemy ogólnej jakości projektowej (zbyt długie linie, ciasny padding, małe cele dotykowe, pomijane poziomy nagłówków). Ponieważ jest deterministyczny i emituje JSON plus kody wyjścia, wpada prosto w sprawdzenie PR — bramka build, która zawodzi, gdy generowany UI zaczyna wyglądać na generowany.

Kiedy po nie sięgnąć

Twój UI zbudowany przez AI jest funkcjonalny, ale generyczny i chcesz kierować konkretnymi poprawkami bez uczenia się dyrektorowania sztuką w prozie.
Chcesz deterministyczną bramkę jakości projektowej w CI (detect).
Polerujesz istniejący kod i potrzebujesz, by zmiany dziedziczyły twoje tokeny i komponenty, a nie z nimi walczyły.

Dla pełnej metodologii od projektu do kodu — makieta, prototyp, system projektowy, implementacja — Impeccable wpasowuje się w etapy budowy i polerowania czteroetapowego potoku projektowego, zamiast go zastępować. A tam, gdzie Impeccable audytuje projekt, shadcn/improve audytuje architekturę — to komplementarne skille.

Co dalej

Potok projektowy Czteroetapowy przepływ makieta → prototyp → system → kod, w który wpina się Impeccable.

shadcn/improve Odpowiednik Impeccable nastawiony na audyt architektury zamiast projektu.

Najlepsze skills do frontendu Połącz Impeccable ze skillami frameworków, żeby AI pisało aktualny React, Vue czy Svelte.

Grill Me i Grill With Docs Impeccable wyostrza, jak to wygląda; grillowanie wyostrza, co budujesz -- agent przepytuje cię, zanim powstanie kod.