Jak nauczyć agentów AI tworzyć dopracowane interfejsy

Jeśli kiedykolwiek poprosiłeś Cursor lub Claude Code o zbudowanie menu rozwijanego lub modala, prawdopodobnie zauważyłeś coś dziwnego. Kod działa, przyciski się klikają, ale wszystko wygląda trochę topornie. Elementy pojawiają się z absurdalnym opóźnieniem, obramowania kart są rysowane ciągłymi ciemnymi liniami, a dla prostej powiadomienia toast model sięga po porzuconą bibliotekę sprzed pięciu lat.

Modele językowe radzą sobie całkiem nieźle z logiką komponentów, ale nie mają zmysłu estetycznego. Wybierają parametry, które pojawiają się jako pierwsze w ich danych treningowych. Rezultatem jest generyczny szum interfejsu.

Emil Kowalski, który wcześniej kierował pracami nad animacjami i interfejsami w Vercel i Linear, stworzył repozytorium emilkowalski/skills. To zestaw gotowych instrukcji dla agentów AI, które uczą sieci neuronowe budowania bardziej dopracowanych układów.

Dlaczego agenci potrzebują zasad projektowych

Zauważyłeś kiedyś, że AI animuje pojawianie się okien w niewłaściwych momentach? Częstym błędem jest stosowanie funkcji easingu ease-in dla elementów wchodzących na ekran. W rzeczywistości przychodzące elementy powinny zaczynać szybko i zwalniać na końcu (ease-out), w przeciwnym razie interfejs sprawia wrażenie ospałego.

To samo dotyczy szczegółów układu. Sieci neuronowe często używają ciągłego obramowania tam, gdzie potrzebny jest półprzezroczysty box-shadow, lub wymyślają rozwiązania od nowa zamiast korzystać ze sprawdzonych bibliotek.

Małe błędy się sumują. Rezultatem jest UI, który wygląda tandetnie. Zestaw umiejętności Emila sprawia, że sieć neuronowa sprawdza podstawowe zasady inżynierii projektowej przed przekazaniem gotowego kodu.

Jak zainstalować instrukcje

Instalacja wykorzystuje narzędzie CLI skills:

npx skills@latest add emilkowalski/skills

Po uruchomieniu agent sieci neuronowej uzyskuje dostęp do bazy wiedzy na temat ruchu, proporcji i wyboru narzędzi frontendowych.

Co zawiera repozytorium

W środku znajduje się zestaw instrukcji w formacie Markdown, podzielonych według zadań.

Weryfikacja i poprawa animacji

Instrukcje review-animations i improve-animations sprawiają, że agent przeprowadza rygorystyczny audyt kodu. Model szuka pominiętych funkcji easingu, nadmiernie długich opóźnień i niedbałych transformacji. Zamiast losowych poprawek, agent tworzy plan optymalizacji krok po kroku, który następnie sam wykonuje.

Zasada find-animation-opportunities pomaga znaleźć miejsca, gdzie animacja jest faktycznie potrzebna, i jawnie zabrania dodawania ruchu tam, gdzie tylko przeszkadzałby użytkownikowi.

Słownik Apple i wytyczne

Aby pomóc sieci neuronowej zrozumieć dokładnie, jakiego rodzaju mikroiinterakcji potrzebujesz, przydaje się animation-vocabulary. Zawiera precyzyjne terminy do opisywania animacji.

Osobny plik apple-design zawiera zaadaptowane dla sieci zasady interfejsu Apple z przeszłych konferencji WWDC. Pomagają odtworzyć to responsywne wrażenie UI.

Wybór bibliotek i prototypowanie

Jeśli poprosisz model o zbudowanie niestandardowego toasta lub menu rozwijanego, albo napisze sto linii kruchecego kodu, albo zainstaluje bibliotekę od dawna nie wspieraną. Zasada pick-ui-library zmusza AI do korzystania wyłącznie ze sprawdzonych rozwiązań, na których faktycznie polegają zespoły produktowe.

Do szybkich eksperymentów jest prototype. Ta umiejętność generuje kilka wariantów tego samego elementu UI na raz i dodaje przełącznik na górze, aby można je było porównać w czasie rzeczywistym.

Dla kogo to jest

Jeśli codziennie używasz Cursor, Claude Code, Windsurf lub podobnych agentów CLI do pracy frontendowej, to repozytorium zaoszczędzi mnóstwo czasu na ręcznych poprawkach CSS. Nie będziesz już musiał ręcznie zmieniać ease-in na cubic-bezier i tłumaczyć modelowi, dlaczego ciągłe obramowanie wygląda źle w trybie ciemnym.