O czym jest ten film
- AI świetnie pisze kod, ale samo nie zaprojektuje ładnego interfejsu — w całości wygenerowany design ma charakterystyczne, rozpoznawalne wady.
- Autor pokazuje niespójność własnej aplikacji Pluto (ładny landing page, chaotyczny panel) i wskazuje przyczynę: brak systemu projektowego i tokenów.
- Tłumaczy dwa pojęcia: system projektowy jako wspólny zbiór decyzji wizualnych oraz tokeny jako „zmienne” zastępujące surowe wartości (16 px → spacing-medium).
- Korzyści z tokenów: tryb ciemny jednym ruchem oraz centralne wprowadzanie zmian, bez ręcznego polowania na kody kolorów.
- Cały proces ma pięć ogniw: zbierz inspiracje → wygeneruj system w Claude Design → dopracuj go → prześlij do Claude Code → buduj, dorzucając mikroanimacje z bibliotek komponentów.
- Źródła inspiracji: zakładki na X (zbierane w aplikacji GatherOS), galeria Mobbin oraz przykładowa strona family.co.
- System projektowy da się wygenerować ze zrzutu ekranu jednej strony jednym promptem; poprawki wprowadza się, rysując na podglądzie i wydając krótkie polecenia.
- Bez własnej inspiracji fundamentem może być gotowy plik design.md (np. Vercla) — ale trzeba go przestroić pod siebie, inaczej strona będzie nieodróżnialna od tysięcy innych.
- Całe strojenie wykonuje się w systemie projektowym przed przeniesieniem do kodu; wtedy jeden prompt buduje spójny landing, stronę logowania i panel.
- Na koniec interfejs ożywia się komponentami z bibliotek (np. BUI), każąc agentowi oprzeć ich wygląd na tokenach systemu.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Nie pozwól, by AI projektowało „na czuja”
Na czym polega: AI zbuduje działającą aplikację, ale estetyka, którą modele serwują same z siebie, ma rozpoznawalne cechy — dziwne obramowania, przypadkowe detale. Takiego interfejsu nie trzeba analizować, widać go od razu.
Jak stosować: AI traktuj jako wykonawcę kodu i komponentów, a decyzje wizualne trzymaj poza modelem — w systemie projektowym, który narzucasz maszynie.
Na co uważać: pozostawione bez nadzoru AI wygeneruje interfejs „poprawny”, ale nieodróżnialny od tysięcy innych generowanych stron.
2.Niespójny wygląd to objaw — chorobą jest brak wspólnych reguł
Na czym polega: gdy każdy ekran powstaje osobno, przyciski mają różne promienie, a panel niczym nie przypomina strony głównej. Winne nie jest AI, tylko brak jednego zbioru reguł.
Jak stosować: zanim zaczniesz budować kolejne widoki, ustal wspólny zestaw komponentów, kolorów i typografii — i pilnuj, żeby wszystkie ekrany z niego korzystały.
Na co uważać: naprawianie niespójności „w locie”, podpowiedziami typu „zaokrąglij to tu, tam przyciemnij”, po pewnym czasie prowadzi do labiryntu wyjątków.
3.Tokeny projektowe: decyzje zapisane jako zmienne
Na czym polega: zamiast zaszywać wartości (16 px, konkretny kod koloru) używa się nazw decyzyjnych — spacing-medium, color-brand-primary. Wartość żyje w jednym miejscu, a nie w stu plikach.
Jak stosować: przy nowym projekcie zacznij od zdefiniowania tokenów; narzędzia agentowe chętnie się do nich stosują, bo dostają jednoznaczną instrukcję wyglądu.
Na co uważać: mieszanie tokenów z surowymi wartościami w kodzie rozwala całą ideę — jeden wyjątek od reguły szybko zaczyna się mnożyć.
4.Poprawka w jednym miejscu naprawia całość
Na czym polega: tokeny czynią tanim to, co dawniej boli: tryb ciemny to podmiana wartości tokenów, a nie polowanie na każdy przycisk z osobna; to samo dotyczy zmiany kolorów marki.
Jak stosować: gdy planujesz dark mode lub rebranding, zaprojektuj go tak, żeby odbywał się wyłącznie na poziomie tokenów.
Na co uważać: komponenty omijające tokeny (np. z zaszytym na stałe kolorem) przy zmianie motywu będą wyglądać źle — i to na nie pierwsze spada podejrzenie.
5.Inspiracje zbieraj stale i trzymaj w jednym miejscu
Na czym polega: dobre pomysły pojawiają się na X, w galeriach typu Mobbin czy na przypadkowych stronach; bez systemu zbierania przepadają. Autor używa zakładek, które spływają do aplikacji GatherOS.
Jak stosować: załóż jeden magazyn na zrzuty, ikony i fragmenty — i wrzucaj tam wszystko od ręki, od pierwszego dnia.
Na co uważać: kolekcja bez przeglądania nie ma wartości — przed startem projektu przejrzyj zbiór i wybierz jedną, wyrazistą inspirację jako bazę.
6.System projektowy wygenerujesz jednym promptem
Na czym polega: materiałem wystarczy pełny zrzut strony-wzorca; prompt prosi o system, o komponenty z niego korzystające i o listę tokenów — wszystko na jednej stronie.
Jak stosować: zrób zrzut całej strony (np. wbudowaną funkcją przeglądarki Zen), wklej go do Claude Design i zamów system wraz z komponentami i tokenami w jednym dokumencie.
Na co uważać: wynik to szkic, nie kopia — model nie odwzoruje strony jeden do jednego i nie to jest celem.
7.Poprawki najprościej wprowadzać, rysując po ekranie
Na czym polega: zamiast opisywać problem słowami, zaznaczasz go na podglądzie narzędziem do rysowania i wydajesz krótkie polecenie: „usuń to”, „wyrównaj tekst w plakietce”, „zmień kolor”.
Jak stosować: przejrzyj wygenerowany system, zakreśl wszystko, co Ci przeszkadza, i zgłoś poprawki jednym poleceniem — kilka naraz.
Na co uważać: nie każda usterka da się opisać jednoznacznie; czasem szybciej będzie zażądać ponownego wygenerowania elementu niż drobiazgowego łatania.
8.Fundament może być zapożyczony — charakter musi być Twój
Na czym polega: bez własnej inspiracji punktem wyjścia może być publiczny plik z zasadami projektu, np. vercel.com/design.md.
Jak stosować: wklej plik do narzędzia, każ zbudować na nim system, a potem przestawiaj kolory, odstępy i detale pod swój gust.
Na co uważać: przejęcie cudzych zasad bez zmian sprawi, że Twoja strona będzie wyglądać jak wszystkie pozostałe — AI domknie braki gustem „uśrednionym”.
9.Całe strojenie zrób, zanim system trafi do kodu
Na czym polega: przeniesiony do repozytorium system staje się prawem — agent buduje kolejne strony zgodnie z nim. Poprawki wymusza się wtedy w systemie, a nie na pojedynczych widokach.
Jak stosować: krąż między podglądem a poprawkami, aż będziesz zadowolony; dopiero potem użyj funkcji „wyślij do Claude Code” i buduj ekrany jednym promptem.
Na co uważać: łatanie gotowych widoków z pominięciem systemu odtwarza pierwotny problem — aplikacja znów robi się niespójna.
10.Mikroanimacje bierz z bibliotek, spójność czerp z tokenów
Na czym polega: gotowe biblioteki komponentów (np. BUI) oferują sprężyste akordeony, elegancko wysuwane panele czy karty pochylające się pod kursorem.
Jak stosować: przekaż agentowi adres lub kod komponentu wraz z zastrzeżeniem: „użyj tego elementu, ale oprzyj jego wygląd na tokenach mojego systemu”.
Na co uważać: animacje wyciągnięte z biblioteki bez podpięcia pod tokeny szybko zaczną gryźć się z resztą interfejsu.
Redakcyjne tłumaczenie
AI zbuduje Ci wszystko — poza ładnym wyglądem
Nigdy nie było tak łatwo budować z AI. Dzisiejsze modele i narzędzia wokół nich pozwalają stworzyć naprawdę dopracowany produkt praktycznie w całości maszynie. Na design to, niestety, nie działa. Wystarczy rzut oka na aplikację internetową albo mobilną, żeby poznać interfejs zaprojektowany od początku do końca przez AI — czuć go: te dziwne obramowania, te charakterystyczne potknięcia. Brzydką robotę AI ty i ja rozpoznajemy z daleka. W tym odcinku pokażę mój sposób pracy, dzięki któremu design wychodzi spójny i dobrze wygląda.
Co znaczy „spójny” — lekcja z własnej aplikacji
Pokażę to na aplikacji Pluto, nad którą siedzę od dwóch miesięcy i której premiery nie mogę się doczekać. Landing page wyszedł nieźle: porządna sekcja hero, po kliknięciu odpala się wideo, najechanie na przycisk wywołuje wybuch emotikonów, a sam przycisk ma ten szklany, metaliczny poblask. Jest tryb jasny, jest ciemny — fajne rzeczy. Chciałbym wierzyć, że to strona ładna i wyjątkowa.
A potem wchodzę w panel — i nie ma on ze stroną główną nic wspólnego. Nawet w samym panelu bywa różnie: przycisk „nowy agent” jest mały i lekko zaokrąglony, a w czacie przyciski mają dużo większe promienie. Krótko mówiąc, moja aplikacja jest niespójna. Powód jest prozaiczny: projektując ją, nie zbudowałem systemu projektowego i nie używałem tokenów projektowych. Zrozumienie tych dwóch rzeczy jest kluczowe dla całego procesu, który za chwilę pokażę.
Dwa pojęcia, na których stoi cały proces
System projektowy (design system) to jedna, wspólna wykładnia wszystkich decyzji wizualnych: mieszczą się w nim komponenty interfejsu, wytyczne i identyfikacja marki — kolory, teksty, wszystko, co się na to składa. Sednem systemu — zwłaszcza dla kogoś, kto buduje aplikację z pomocą AI, czyli praktycznie dla dewelopera — są tokeny. Token to nic innego jak konkretna decyzja projektowa zapisana w formie zmiennej. Zamiast zapisywać padding jako „16 pikseli”, a kolor jako ciąg szesnastkowy, mówisz spacing-medium i color-brand-primary. Decyzja dostaje nazwę, a wartość mieszka w jednym miejscu.
Po co to komu? Google podaje dwa argumenty. Pierwszy: motywy rozwiązywane globalnie. Z tokenami dodanie trybu ciemnego robi się banalne — podmieniasz wartości, a zmiana sama rozchodzi się po całym produkcie. Jeśli zbudowałeś stronę domyślnie jasną i chcesz dorzucić ciemną, bez tokenów przekonasz się, że część przycisków i plakietek nie przełącza się jak trzeba — właśnie dlatego, że ich wygląd nie był nigdzie zdefiniowany centralnie.
Drugi argument: zmiany wprowadzane w jednym miejscu. Gdy marka zmienia kolor główny, nikt — ani projektanci, ani deweloperzy — nie musi ręcznie przeszukiwać projektu i podmieniać kodów kolorów. W Pluto, gdybym chciał zmienić zaokrąglenie przycisków, musiałbym pamiętać o ręcznej poprawie w każdym miejscu osobno. Systemu nie mam, tokenów nie mam — i to mnie pęta. Dla projektantów to naturalny żywioł; dla nas, nieprojektantów, zrozumienie tej wartości to podstawa.
Krok 1: Zbierz inspiracje
Skąd je brać? Pierwsze miejsce to X. Mam tam wyselekcjonowany feed: deweloperzy, ludzie z AI, trochę piłki nożnej, trochę treści chrześcijańskich, sporo designu. Gdy coś mi się spodoba, zapisuję w zakładkach. Ostatnio na przykład strona Jacka — pozdrawiam, stary, podobno niedługo ślub. Trochę dziwnie jest zapisywać coś takiego, ale cóż — zapisuję. Wszystkie zakładki spływają mi potem do aplikacji GatherOS, którą zrobił projektant. (Informacja dodatkowa: GatherOS — narzędzie zbierające zakładki z X w jednym, przeszukiwalnym miejscu.) Mam więc jeden magazyn na inspiracje — na przykład taką animowaną ikonkę GIF, która mi się spodobała, i inne drobiazgi z X.
Drugie miejsce to Mobbin. Nie płacę za subskrypcję, choć ją oferują, a i tak jest w tym mnóstwo świetnych przykładów: ekrany wprowadzające użytkownika w aplikację, sekcje hero, panele. Naprawdę wszystko. Klikam w kategorię stron, przeglądam — zdarzają się perełki — i mogę daną sekcję zapisać, a jeśli nie chcę płacić, po prostu robię zrzut ekranu. Tyle na temat pierwszego kroku: zbieraj inspiracje.
Konkretna strona, którą dziś użyję jako bazy do zbudowania systemu projektowego, to family.co — witryna aplikacji-kryptoportfela. Nie chodzi mi o krypto; po prostu uwielbiam, jaka jest radosna, urocza i bajkowa, a przy tym utrzymana w dobrym smaku.
Krok 2: Budujemy system projektowy w Claude Design
Do tego użyjemy Claude Design — narzędzie, które wyszło kilka tygodni temu i do tworzenia systemów projektowych jest po prostu znakomite; sam siedzę w nim ciężko od paru dni. (Informacja dodatkowa: Claude Design — nowe narzędzie do projektowania interfejsów w ekosystemie Claude.)
Otwieram family.co w przeglądarce Zen — fajna rzecz w Zen jest taka, że ma wbudowaną funkcję zrzutu całej strony. Robię zrzut, pobieram obraz, przechodzę do Claude Design, klikam „start with a file”, wskazuję plik i piszę prompt:
„Please create a design system with the attached page. Please do create components using the design system and display the tokens. I want this displayed on one page.”
Krótko mówiąc: proszę o system zbudowany na załączonej stronie, o komponenty, które z niego korzystają, i o wypisanie tokenów — wszystko na jednym ekranie, żebyśmy zobaczyli wygenerowany system w całości. Klikam „start project” i czekamy.
Przerwa na sponsora — najpierw Mark Cuban
Póki agent pracuje, dwa słowa. Claude Design jest świetny do systemów projektowych. A wiesz, co jeszcze jest świetne? Sponsor dzisiejszego odcinka. Zanim go przedstawię, puszczę fragment, w którym Mark Cuban tłumaczy, jak najlepiej zarabiać w erze AI:
„Przerobiłem każdą technologię, każdy jej etap — a to bije wszystko na głowę. Tyle że wdrożenie tego w firmie to zupełnie inna historia. Jak miałem 24 lata, wchodziłem do firm, które w życiu nie widziały komputera klasy PC, i tłumaczyłem im, po co to komu. A oni na to: »Panie, przecież mam recepcjonistkę, mam sekretarkę, nigdy w życiu tego nie będę potrzebował«. Moim biznesem było pomóc im to wdrożyć tak, żeby zyskać przewagę. Takich integratorów będzie mnóstwo. Własnym dzieciom — mają 15, 19, 21 lat — gdy pytają, co robić, mówię: naucz się wszystkiego o AI, ale jeszcze bardziej o tym, jak wdrażać je w firmach.”
(Informacja dodatkowa: Mark Cuban — amerykański miliarder i inwestor, znany m.in. z programu „Shark Tank”.)
I tu się zatrzymajmy: „naucz się, jak wdrażać AI w firmach”. Ja właśnie tym zajmuję się na co dzień — prowadzę product studio i konsulting AI, głównie dla firm średnich i dużych. Nasza strona jest brzydka, bo jesteśmy zajęci zarabianiem pieniędzy. A jeśli pytasz, jak zacząć w tej branży — tu wchodzi Scrimba, platforma edukacyjna dla osób, które chcą wejść do inżynierii, zwłaszcza w czasach AI. Ich ścieżka „AI engineer” to jeden z najlepszych kursów, jakie mają. Powiem tak: każdy rozdział tej ścieżki to coś, co moje studio wdrażało u klientów. Chcesz budować agentów dla firm? Nie szukaj dalej. Chcesz zrozumieć MCP od strony technicznej? Nie szukaj dalej. Link zostawiam w opisie.
Pierwsza wersja systemu: co dokładnie dostajesz
Mamy pierwszą wersję. Claude nazwał ją family design system — po family.co rzecz jasna. Widzimy kolory: kilka odcieni niebieskiego, odcienie czerni, akcenty w stylu naklejek, kolory semantyczne — jak wyglądają powodzenie, ostrzeżenie, błąd, informacja. Dalej typografia: jaki font, jak wygląda w różnych rozmiarach — display, H1, H2, H3 i tak dalej. Potem odstępy, promienie zaokrągleń i przykładowe komponenty: przycisk, plakietki (ta z „new” wygląda koszlawo — poprawimy), pola i kontrolki, avatary. Panie i panowie — to jest system projektowy. Można prosić o kolejne elementy, dialog, formularz i tak dalej — tutaj możesz się wyszaleć do woli.
Jedno jeszcze, na co zwróć uwagę: to nie jest kopia strony jeden do jednego. I nie ma być — AI obecnie nie potrafi wiernie odtworzyć zrzutu ekranu. Jest za to dobre w czymś innym: daje solidny szkic systemu, który dopracowujesz pod siebie.
Poprawki: rysujesz po ekranie i wydajesz krótkie polecenia
Na przykład te drobne kropki, którymi system naśladuje konfetti z family.co — nie lubię ich. Klikam „markup”, czyli narzędzie do rysowania po podglądzie, zakreślam wszystkie miejsca, których chce się pozbyć, i piszę: „Please remove this from the design system”. Nie chcę żadnych losowych confetti — i AI je usuwa. Podobnie logo: nie jestem fanem, to niech zniknie. Nie chcę, żeby AI projektowało mi logo — wygląda bardzo „po AI”. Zaznaczam. Jeszcze jedna poprawka: „Please fix the alignment of the text in this badge”. I tak właśnie wygląda budowanie systemu projektowego: siedzisz w Claude Design i doprowadzasz go do własnego gustu, element po elemencie.
Nie masz inspiracji? Pożycz fundament
A co, gdy nie masz strony, na której chciałbyś oprzeć system? Podam przykład. Pod adresem vercel.com/design.md znajdziesz system projektowy Vercla — domyślnie dla motywu jasnego, ale możesz przełączyć na ciemny. Kopiujesz całość i masz bazę, na której budujesz dalej. Nie po to, żeby bezmyślnie kopiować — po to, żeby mieć fundament, który potem stroisz dokładnie pod siebie. Bo jeśli zlecisz AI zaprojektowanie wszystkiego od zera, bez żadnego wkładu z Twojej strony, Twoja strona będzie wyglądać jak wszystkie inne. Ja natomiast ufam, że każdy z nas ma swój indywidualny smak — i tym smakiem, przy pomocy AI, zbudujemy design, który grzeje.
Konkretnie: kopiuję cały plik, otwieram nową kartę w Claude Design i piszę „Build me a design system using the design.markdown file I’ve attached below”, wklejam treść, wysyłam — i widzimy system projektowany wprost z tego pliku.
Dopieszczanie: dosyp komponentów
Wracam do pierwotnego systemu. Plakietka poprawiona, logo usunięte — podoba mi się. Teraz chcę więcej komponentów:
„Can you create for me a dialogue component, a form component, and any other component that I might have missed that is important for a design system?”
Wygląd mi odpowiada, ale zależy mi, żeby system był bogatszy — bo gdy przeniosę go potem do Claude Code, agent będzie dokładnie wiedział, jak wszystko ma wyglądać i działać. Gdzie jesteśmy w procesie? System stworzony, komponenty i tokeny wygenerowane, teraz stroimy pod siebie. Zostańcie do końca, bo pokażę, jak składamy to wszystko w całość z AI.
Pogaduchy, póki agent pracuje
Skoro AI pracuje, pogadajmy. Ktoś ogląda mistrzostwa świata? Dajcie znać w komentarzach, komu kibicujecie. Z meczu Wybrzeża Kości Słoniowej z Niemcami jestem zawiedziony — Afrykanie mogli wygrać, a szkoda była ogromna. Szwecja dostająca łomot od Holandii to było piękne widowisko — mogłem patrzeć i patrzeć. Egipt–Nowa Zelandia? Mecz świetny, a ten powrót Egiptu to było coś szalonego. A jeśli kibicujecie Messiemu i Argentynie — wypiszcie się z kanału. Żartuję, nie róbcie tego. Zbliżamy się do stu tysięcy subskrypcji, więc jeśli oglądacie — zasubskrybujcie.
Druga rzecz: tęsknicie za „Fav 5”? (Informacja dodatkowa: „Fav 5” — potoczna nazwa modelu, do którego autor ma sentyment; w chwili nagrania jest niedostępny, a autor narzeka na obecne wersje — Opusa 4.8 i GPT-5.5.) Te dwa, trzy dni z „Fav 5”… coś wspaniałego. I jeśli ktoś uważa, że to praktycznie to samo co Opus 4.8, to znaczy, że zbudował w nim aplikację z listą zadań albo prawie go nie używał. Ja siedzę na nim przy dużych, starych bazach kodu — przenoszę je na nowoczesne technologie, część na Rusta, część na Effect — i po prostu pięknie się to robi. Model rozumie, o co ci chodzi. I jest szybki. Tęsknię; mam nadzieję, że go przywrócą, i to nie tylko dla ludzi w Stanach — bo jestem Kanadyjczykiem i musiałbym się przenieść ekspresem. A tymczasem przed nami GTA 6, nowy Spider-Man, nowi Avengers — 2026 zapowiada się wybornie.
I najważniejsze: jeśli właśnie przechodzicie przez coś trudnego, jest jedna rzecz, którą zawsze możecie zrobić — sięgnąć po Pismo i pokrzepić się nim. Przeczytam wam fragment. W Liście do Hebrajczyków 13,5 jest napisane: „Nie miłujcie pieniędzy. Zadowalajcie się tym, co macie. Sam Bóg przecież powiedział: »Nie zostawię cię nigdy ani cię nie opuszczę«”. Dlatego możemy z ufnością mówić: „Pan jest moim pomocnikiem — nie ulęknę się. Cóż może mi uczynić człowiek?”. Bądźcie pokrzepieni.
Nowe komponenty na stole
Są! Dialog — bardzo czysty. Formularz — bardzo, bardzo czysty. Alerty i powiadomienia — czysto. Może się wydawać, że kolory są trochę „po AI” — to zmienisz dokładnie tak samo jak wszystko inne: zaznaczasz na ekranie i wydajesz polecenie. Są pola wyboru, przełączniki, menu rozwijane, podpowiedzi i kroki. Jako całość — system wygląda dobrze. I możesz kręcić przy nim do woli: nie podoba się odstęp — każ agentowi poprawić odstępy; nie podobają się kolory — każ poprawić kolory. Z jednym zastrzeżeniem, bardzo ważnym: gdy system trafi już do Claude Code albo innego agenta, nie zmieniasz go tam. Wszystkie poprawki robisz tutaj, w narzędziu projektowym — dopiero potem go przenosisz.
A tymczasem w drugiej karcie rośnie system Vercla na podstawie tamtego pliku — i on również może posłużyć jako fundament, warstwa bazowa. Czyli: inspiracją może być strona jak family.co, zrzut znaleziony na X albo w Mobbin, ale równie dobrze gotowy plik design.md — Vercla czy inny. Baza, a potem Twój smak.
Krok 3: Budujemy aplikację jednym promptem
Skoro system jest gotowy do przeniesienia, stawiam szybko projekt SvelteKit — nazywam go Svelte Design, opcje minimalne, TypeScript, NPM dla prostoty. SvelteKit to mój framework. Chcę, żeby AI zbudowało landing page, stronę rejestracji i logowania oraz panel — a my będziemy obserwować, czy trzyma się systemu i czy wszystko jest spójne.
Wchodzę do katalogu projektu i odpalam Claude Code w trybie pomijania zgód — bo tak się teraz żyje. (Informacja dodatkowa: tryb „dangerously skip permissions” sprawia, że agent nie pyta o potwierdzenie kolejnych operacji — wygodnie, ale tylko wtedy, gdy dobrze wiesz, co zlecasz.)
Wracam do Claude Design, klikam „Share”, potem „Send to Claude Code”. Narzędzie generuje gotowy prompt — kopiuję go, wklejam w terminalu, zatwierdzam. Zobaczcie, co się dzieje: agent używa MCP Claude Design, żeby zaimportować projekt; wypisuje jego zawartość, czyta metadane i znajduje family design system. Plik okazuje się za duży, więc agent wyciąga pełną treść z zapisanego wyjścia — po prostu czyta plik z definicją systemu, wdroży go, a potem stworzy nasze trzy strony. Ma już pełny obraz: rozpoznaje family design system i wylicza — sekcja hero, tokeny kolorów, typografia, odstępy, promienie, cienie, duży zestaw komponentów: przyciski, plakietki, pola, avatary, lista tokenów, karta salda, dialog, formularz. Daliśmy mu wszystko, czego potrzebuje, żeby zbudować spójny i czysty landing, panel i stronę rejestracji. Rozpoznaje projekt Svelte — i rusza do roboty.
Wynik: trzy strony, jedna estetyka
Na landing page’u agent wstawił stronę-podgląd całego systemu — i to dobry znak: znaczy, że go rozumie, a wszystkie komponenty wyglądają identycznie. Teraz jedno polecenie:
„So, now that you understand the design system, please build out a landing page. I want you to build out an auth page with sign-in and sign-up, and I want you to build a dashboard page.”
Odpalam tryb „ultra code”, żeby zrobił wszystko za jednym zamachem. I zauważcie: nie kazałem mu używać systemu projektowego. On już siedzi w kodzie projektu — więc całość, landing, logowanie i panel, wyjdzie jednolita.
Claude Code skończył. Otwieramy nową kartę: landing page, strona logowania i rejestracji, panel. Nie twierdzę, że to piękny design — pokazuję, że jeden prompt dał spójne komponenty wszędzie. Agent trzymał się kolorów, fontu, odstępów, wszystkiego. Tym sposobem mogę konsekwentnie budować aplikację o jednolitym wyglądzie. A sznyt — czyli to, żeby było naprawdę ładnie — zdobywasz na stronie systemu: wracasz tam i z powrotem, poprawiasz. Bywają miejsca, w których AI nie odda systemu w stu procentach — i wtedy egzekwujesz swoje. Ale oto rzecz: skoro masz system, naprawa jednego elementu naprawia całość. Zmiana robi się wszędzie. Strona logowania jest spójna z landingiem, choć dorzucił tam te przyciski-konfetti — każę Claude Code je usunąć. I tak to jest o niebo lepszy punkt startowy niż „zaokrąglij mi to tu, a tam przyciemnij”, bo od takich podpowiedzi powstaje aplikacja pokiereszowana jak mój Pluto.
Ostatni szlif: mikroanimacje z bibliotek
Na koniec coś, co tę całość ożywia: biblioteki komponentów. Kilka podlinkuję w opisie. Ostatnio trafiłem na BUI i wystarczy tak prosty element jak akordeon — widzicie tę animację, tę sprężynkę, ten podskok? Albo wysuwany panel, który elegancko wyjeżdża w lewo albo w prawo. Albo karta, która pochyla się pod kursorem. Mnóstwo fajnych drobiazgów, mikroanimacji. Korzystanie jest dziecinnie proste: kopiujesz kod i podajesz agentowi, albo po prostu dajesz mu link i mówisz „dodaj ten komponent, ale oprzyj jego wygląd na moim systemie projektowym”. Efekt: fajne animacje od ręki, a wygląd nadal zgodny z Twoimi tokenami.
Podsumowanie: cały proces w pigułce
Zbierz inspiracje. Zbuduj system projektowy w Claude Design i każ wygenerować komponenty wraz z tokenami. Dopracuj go pod siebie — tu spędzisz najwięcej czasu. Na koniec buduj z AI. I niech to nie będzie kopiowanie losowej strony: family.co posłużyło mi dziś jako podstawa, ale chodzi o znalezienie własnej inspiracji, potraktowanie jej jako punktu wyjścia i dorzucenie od siebie swojego charakteru i stylu. A ponieważ pracujemy z AI, wszystko musi być uporządkowane i czyste — a najlepszym sposobem na to jest system projektowy z tokenami. To jest mój workflow. Mam nadzieję, że ma sens. Dajcie znać w komentarzach, co jeszcze pokazać i czy o czymś zapomniałem. Dzięki, że oglądaliście. Jestem Ross — do zobaczenia w kolejnym odcinku. Cześć!