O czym jest ten film
- Autor, który otwarcie przyznaje, że nie jest projektantem, pokazuje strony zbudowane wyłącznie z AI: swoje portfolio, produkt Pluto (dostępny w becie pod adresem beta.hirepluto.ai) oraz strony firmowe — bez napisania ani jednej linijki kodu.
- Teza wyjściowa: w oprogramowaniu „oceniamy książkę po okładce”, a projektowanie to czucie i klimat, nie matematyka — dlatego AI samo z siebie ładnego interfejsu nie stworzy. Trzeba dać modelowi system projektowania.
- Niezbędny stack: Paper (alternatywa Figmy obsługiwana przez MCP), dowolny agent kodujący (autor pracuje w T3 Code) i narzędzie do zrzutów ekranu.
- Krok 1 — inspiracja: serwis Mobbin agregujący dobrze zaprojektowane strony i aplikacje, plus obserwowanie projektantów na X; wybierasz kilka wzorców, np. stronę Devina.
- Krok 2 — system projektowania: zrzut ekranu wzorca i prompt „odtwórz tę stronę wraz z jej systemem projektowania w Paperze przez MCP”. Po około pół godzinie agent ma rozpisane kolory, króje pisma, odstępy, cienie i układy.
- Krok 3 — strona główna: agent buduje landing page według systemu, co do joty. To dopiero kopia, punkt wyjścia do dalszej pracy.
- Krok 4 — iteracje: uwagi zostawiane komentarzami wprost na makiecie plus komenda „załatw wszystkie komentarze”; podmiana generycznych obrazków, dodanie koloru (np. podświetlanie składni), łączenie dwóch systemów w nowy styl.
- Kolejność zmian: najpierw poprawiasz stronę główną, dopiero potem każesz zaktualizować system — na „gołym” systemie nie widać efektu, bo nieprojektant nie ma wytrenowanego oka.
- Krok 5 — eksploracja: na dopracowanym systemie jeden prompt wystarcza, by dostać kilka wariantów podstron (widoki bankowości w Plutem, dashboardy). Autor zawsze prosi o wiele wersji, nigdy o jedną.
- Modele: najlepiej w trzymaniu się systemu i instrukcji radzi sobie Claude (Opus 5.5); inne modele też się sprawdzają, o ile pracują na systemie. Bez systemu efekt zawsze jest rozpoznawalnie „AI-owy”. W środku materiału blok sponsora.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Bez systemu projektowania AI zawsze „śmierdzi” sztucznością
Na czym polega: Według autora modele są dobre w pilnowaniu reguł, a słabe w czuciu estetyki. Jeśli każesz im projektować „od zera, ładnie”, dostaniesz generyczną mieszankę trendów. Jeśli dasz im zestaw reguł wizualnych — trzymają się go znakomicie.
Jak stosować: Zanim poprosisz o jakikolwiek ekran, najpierw wyciągnij lub stwórz system projektowania (paleta, krój pisma, siatka odstępów, komponenty) i w każdym prompcie rozkazująco odwołuj się do niego — także przy drobnych podstronach.
Na co uważać: Największy błąd to prompt w stylu „zaprojektuj nowocześnie i elegancko”. Bez odwołania do systemu każdy model, nawet najlepszy, wróci do swojego bezpiecznego, wyświechtanego wyglądu.
2.Zaczerpnij wzorzec i każ AI rozłożyć go na system
Na czym polega: Zamiast wymyślać zasady od zera, robisz zrzut ekranu ładnej strony i każesz agentowi ją „rozebrać”: odtworzyć makietę i wypisać jej przepis — kolory, fonty, odstępy, cienie, głębię, układy.
Jak stosować: Zbierz dwa–trzy wzorce z Mobbin lub X, najlepiej ze swojej niszy. Prompt wzorcowy: „Stwórz projekt w Paperze przez MCP. Odtwórz tę stronę wraz z jej systemem projektowania”. Skopiowaną stronę potem usuń — zostaje ci sam system jako baza.
Na co uważać: To wciąż kopiowanie cudzego designu jeden do jednego. Traktuj je jako fundament do iteracji, nigdy jako finalny produkt. Pierwsze podejście może potrwać — u autora zabrało 28 minut.
3.System testuj na stronie głównej, nie na sucho
Na czym polega: Nieprojektant nie umie sobie wyobrazić, jak zmiana tokena w dokumencie systemu przełoży się na ekran. Dlatego najpierw powstaje landing page zbudowany według systemu — i dopiero na nim uczysz się patrzeć.
Jak stosować: Po utworzeniu systemu każ zbudować stronę główną. Oceniasz ją, poprawiasz ją, a dopiero gdy jesteś z niej zadowolony, każesz agentowi zsynchronizować system.
Na co uważać: Pokusa edytowania samego systemu „na ślepo” jest duża, bo wydaje się bardziej „inżynierska”. Efekt zobaczysz jednak dopiero na stronie, więc kolejność jest jedna: najpierw strona, potem system.
4.Zmiany zgłaszaj komentarzami wprost na makiecie
Na czym polega: Zamiast opisywać poprawki słowami w rozmowie z agentem, klikasz w konkretny element projektu i zostawiasz notkę, np. „podoba mi się ta karta, ale chcę więcej oddechu i zaokrąglone rogi”.
Jak stosować: Po rundzie przeglądu wracasz do agenta z krótką komendą: „załatw wszystkie komentarze, które zostawiłem w projekcie”. Runda za rundą strona zbliża się do twojego gustu.
Na co uważać: Komentarze pisz konkretnie: właściwość plus oczekiwany efekt. Ogólniki typu „niech będzie ładniej” agent zinterpretuje po swojemu — i wróci z czymś zupełnie innym.
5.Pierwsze poprawki to obrazki i kolor
Na czym polega: Najtańszy zysk wizualny po zbudowaniu landinga to podmiana generycznych grafik (można je generować w samym Paperze) oraz dodanie koloru tam, gdzie jest płasko — np. podświetlanie składni w blokach kodu zamiast czarnego tekstu.
Jak stosować: Przejrzyj stronę pod kątem elementów „z generatora” i monochromatycznych fragmentów. W kolejnej iteracji każ podmienić grafiki i ożywić kolorystykę — na start wystarczą akcenty, nie cała nowa paleta.
Na co uważać: Wygenerowane obrazki łatwo zdradzają „robota” i bywają niespójne stylistycznie. Podmieniaj selektywnie i sprawdzaj, czy nowa grafika pasuje do reszty strony.
6.Łącz systemy projektowe jak składniki
Na czym polega: W Paperze system z jednego projektu można skopiować i wkleić do drugiego. Autor łączy na przykład system swojego portfolio z systemem produktu i każe agentowi stworzyć z nich trzeci, nowy styl.
Jak stosować: Gdy jeden system nie do końca „ten”, doklej drugi i poproś o syntezę plus nową stronę główną. Wynikiem ma być jeden spójny system — nie kolaż.
Na co uważać: Mieszanie na poziomie samych stron (bez scalenia systemów) prowadzi do eklektyzmu: każda podstrona wygląda inaczej. Zawsze domykaj taką operację aktualizacją scalonego systemu.
7.Na gotowym systemie podstrony powstają jednym promptem
Na czym polega: Cała ciężka robota jest zrobiona raz. Potem przychodzi „eksploracja”: agent generuje kilka układów tej samej podstrony — np. widoki sald bankowych pogrupowane po walutach, po bankach albo z podsumowaniem.
Jak stosować: Używaj sformułowania „zrób eksplorację tej strony: przetestuj różne układy w ramach naszego systemu”. Daj agentowi dostęp do kodu aplikacji, żeby wiedział, jakie dane ma właściwie pokazać.
Na co uważać: Eksploracja działa tylko na dopracowanym systemie. Na niedopracowanym dostaniesz warianty do poprawiania w nieskończoność — i wrażenie postępu bez realnego efektu.
8.Zawsze proś o wiele wersji, nigdy o jedną
Na czym polega: Autor konsekwentnie zamawia warianty — palety kolorów, wersje jasną i ciemną, różne ujęcia strony — a potem wybiera i kasuje resztę („do diabła z pomarańczowym”).
Jak stosować: Przy kluczowych decyzjach (kolor bazowy, krój pisma, tryb jasny–ciemny) każ wygenerować na przykład trzy wersje i dopiero wybierz, zanim zainwestujesz w dalszą budowę.
Na co uważać: Nadmiar wariantów rozmywa decyzję i zaśmieca projekt. Po wyborze usuń odrzucone wersje, żeby nie pływały potem w systemie i nie kusiły do cofania ustaleń.
9.Model ma znaczenie — ale mniej niż system
Na czym polega: Według autora najlepszy w projektowaniu jest Claude, konkretnie Opus 5.5, bo najlepiej słucha instrukcji i trzyma się reguł. Astra i modele OpenAI też się sprawdzą — o ile każesz im pracować na systemie.
Jak stosować: Do pracy projektowej wybieraj model o najlepszym „słuchu” na polecenia, a w promptach zawsze odwołuj się do systemu. Wtedy różnice między modelami topnieją.
Na co uważać: Rynek modeli zmienia się z miesiąca na miesiąc — przetestuj dostępne opcje na własnym systemie, zanim uznasz, który pracuje ci „najładniej”. Bez systemu nawet najlepszy model da generyczny wynik.
10.Gust nie bierze się z pierwszego prompta
Na czym polega: Z jednej próby nie dostaniesz niczego idealnego — autor mówi to wprost i radzi wybić sobie to z głowy. Własny styl rodzi się z kolejnych rund poprawek, a samo trzymanie się workflow trenuje oko.
Jak stosować: Zaplanuj wiele rund na wiele dni. Każda runda: popraw stronę, potem zaktualizuj system. Po kilku projektach zauważysz, że masz ulubione fonty, odstępy i stopień zaokrąglenia — czyli własny język wizualny.
Na co uważać: Iterowanie bez aktualizowania systemu rozjeżdża spójność całego produktu. A iterowanie bez końca i bez terminu — to najprostsza droga do porzucenia projektu.
Redakcyjne tłumaczenie
Projektowanie to ostatnia twierdza człowieka
Projektowanie to jedna z tych dziedzin, których sztuczna inteligencja wciąż nie rozgryzła — i moim zdaniem nigdy nie rozgryzie. Bo design to mniej matematyka, a bardziej czucie: emocje, klimat, pewne „to coś”. Mówi się, żeby nie oceniać książki po okładce, ale w przypadku oprogramowania oceniamy ją wyłącznie po okładce. Skoro tak jest, ty i ja — choć żadne z nas nie jest projektantem — musimy nauczyć się projektować. W tym materiale pokażę, jak przy pomocy AI zaprojektowałem całkiem niezłe strony, zaprezentuję efekty i rozpiszę mój warsztat krok po kroku, żebyś mógł powtórzyć to samo. Jeśli dotrwasz do końca, wyjdziesz z tego lepszym projektantem — nawet jeśli, tak jak ja, projektantem nie jesteś.
Co zaprojektowałem bez pisania kodu
Otwieram Paper i pokazuję kilka rzeczy, które ostatnio zaprojektowałem. Zacznę od prostszego przykładu: odświeżone portfolio — czysto, elegancko, czarno-biało. Teraz coś z cięższego kalibru: Pluto dostało świeży wygląd. Jest wersja jasna, ale wiem, że większość z was jej nie lubi, więc od razu przełączam na ciemną — elegancki krój pisma, przemyślane odstępy. Do tego animacja; pokażę wersję na żywo, bo produkt jest w becie pod adresem beta.hirepluto.ai. Na stronie głównej widać animację, która wyjaśnia, jak wszystko działa: potwierdzasz, przechodzisz dalej, gotowe. W samym produkcie też sporo się dzieje: urocza postać kręcąca się po interfejsie, zgrabny czat, odpowiedzi pojawiające się naprawdę płynnie. Moim obecnym faworytem jest kreator wyspecjalizowanych agentów — popatrz, jakie to urocze. Po utworzeniu agenta dzieje się cała sekwencja.
I teraz najważniejsze: wszystko, co widzieliście, powstało z pomocą AI. Nie napisałem ani jednej linijki kodu i nie jestem projektantem. Oczywiście, da się to jeszcze poprawiać — ale sam fakt, że ktoś bez umiejętności projektowych był w stanie to stworzyć, jest niesamowity. I jeszcze jeden przykład: przebudowa strony jednej z moich firm. Zauważ, że powoli wypracowuję własny styl — bo iteruję swoje projekty małymi krokami.
Czego potrzebujesz na start
Potrzebujesz dwóch rzeczy. Po pierwsze, Paper — alternatywy dla Figmy, bardzo przyjaznej AI; to obecnie jedno z moich ulubionych narzędzi. Po drugie, narzędzia do zrzutów ekranu — swoje zrobiłem sam, metodą vibe codingu. Nieistotne, jakim; ważne, żebyś w prosty sposób mógł robić screeny. To warunek konieczny.
(Informacja dodatkowa: Paper to narzędzie do projektowania interfejsów konkurencyjne wobec Figmy; MCP — Model Context Protocol — to standard, przez który agenty AI sterują zewnętrznymi narzędziami, tutaj budują makietę bezpośrednio w Paperze.)
Krok 1: Znajdź inspirację
Idź na X, obserwuj ludzi, obserwuj projektantów. Ale jest serwis, który polecam szczególnie: mobbin.com. Kiedyś sponsorowali jeden z moich filmów — ten materiał nie jest przez nich sponsorowany, po prostu szczerze lubię ich produkt. Agregują dobrze zaprojektowane strony i aplikacje w jednej kolekcji, mają nawet własny serwer MCP, więc możesz przeglądać i zbierać pomysły do swojej aplikacji. Przykład: Devin — ich strona wygląda pięknie. Znajdź kilka witryn, które ci się podobają i które chcesz przerobić. Albo inaczej: masz aplikację jak ta — jeden z moich pobocznych projektów — i chcesz ją przeprojektować. Wchodzisz na Mobbin, szukasz aplikacji z tej samej niszy, a nawet z zupełnie innych, i czerpiesz inspirację. Masz wzorce? Krok pierwszy zaliczony.
Krok 2: Zbuduj system projektowania
To najważniejsza część całego procesu, a robi się ją tak prosto: robisz zrzut ekranu strony, która ci się podoba — ja zrobiłem screen Devina — i wpisujesz w swoim środowisku agenta (ang. harness; ja używam T3 Code w wersji nocnej i bardzo sobie chwalę) taki prompt:
„Stwórz projekt w Paperze przez MCP. Odtwórz tę stronę wraz z jej systemem projektowania.”
Paper udostępnia MCP, dzięki czemu twój agent może budować rzeczy bezpośrednio w tym narzędziu. Kazanie to trwało — możesz zobaczyć w nagraniu — 28 minut. Po drodze Paper zbudował cały system projektowania: wypisał komponenty, wyjaśnił odstępy, użyty krój pisma, przerwy między sekcjami i elementami interfejsu. Dostajemy kompletny zestaw: kolory, fonty, odstępy, układy, cienie, głębię — wszystko rozpisane za nas. Efekt jest taki, że wszystko, co lubimy w cudzej stronie, zostaje wyciągnięte i udokumentowane w postaci przepisu opisującego, jak ta strona jest skonfigurowana. I na tym właśnie polega system projektowania.
Kazałem agentowi zbudować jeszcze stronę główną według tego systemu — i widać, że trzyma się go co do joty, budując coś, co już wygląda na gotowe do wdrożenia. Ale uwaga: to wciąż nie jest nasz cel, bo to zwykłe kopiowanie jeden do jednego. Teraz będziemy na tym pracować i pokażę ci proces.
Przerwa na sponsora: Firecrawl i Alexandria
Zanim przejdę dalej: pieluchy są drogie, a moje dziecko przerabia je w zawrotnym tempie — dla dobra dziecka usłyszmy chwilę o dzisiejszym sponsorze.
(Informacja dodatkowa: transkrypt automatyczny zniekształca nazwę sponsora; z opisu wynika, że mowa o Firecrawl i jego produkcie Alexandria.)
Wyobraź sobie, że mamy 75 milionów dolarów. Ty i ja bylibyśmy pewnie na plaży na Santorini albo w Hollywood, popijając mojito bez alkoholu, może wynajęlibyśmy lambo i palili gumy na parkingu,顺便 bez ubezpieczenia. Kiedy zaproponowałem to znajomym z Firecrawl, oni zamiast tego wypuścili porządny produkt: Alexandrię. Na początek gratulacje — firma właśnie pozyskała 75 milionów. Ale opowiedzmy o Alexandrii. Nie, to nie jest AI-dziewczyna. To katalog dla twoich agentów AI — a pokażę zamiast opowiadać. Łączysz agenta z potrzebnym mu źródłem: dane firmowe, katalogi produktów, kontrakty rządowe, kod i dokumentacja. Agent po prostu dostaje lepsze dane. Firecrawl już wcześniej ułatwił dostęp do sieci, ale to nie znaczy, że dane w sieci są prawdziwe — w końcu każdy z nas może publikować, co chce. Alexandria to biblioteka wiedzy. Przykład: przeszukujesz katalog Shopify; ja korzystam z katalogu finansowego — mnóstwo informacji, które pozwalają mi podejmować lepsze decyzje, zamiast kupować losowe opcje, bo ktoś coś wrzucił na Twitterze. Informacje są na żywo, posegregowane w kategorie, a dostęp dla agenta nadaję jednym kliknięciem. Kategorii jest mnóstwo: rejestry publiczne i dane rządowe, informacje o firmach, handel, miejsca, finanse, podróże, ludzie, oferty pracy, wiadomości, restauracje, aplikacje, modele AI, sport — dla sportowych maniaków i miłośników zakładów. Nie zabrakło też rzeczy dla deweloperów: narzędzia, social, zdrowie, analityka internetowa, badania — mówimy o pracach naukowych. Możesz dosłownie wyposażyć agenta we wszystkie potrzebne informacje. A jeśli czegoś nie ma w katalogu, Firecrawl przeszuka partnerów, ludzi i inne agenty, żeby to dla ciebie znaleźć. Modele będą coraz mądrzejsze, ale potrzebują właściwych danych. Link znajdziesz w opisie. Wracamy do tematu.
Krok 3: Strona główna według systemu
Mamy inspirację, mamy system projektowania. Po jego utworzeniu dostaniesz najpewniej zakładkę z komponentami i zakładkę z fundamentami. Strona główna powstała, bo o nią poprosiłem — i zauważ, z jaką dokładnością agent trzyma się przy tym systemu. Tym samym mamy za sobą krok trzeci: zbuduj stronę główną według systemu.
Krok 4: Iteruj stronę, potem doprecyzuj system
To najważniejszy krok — tak, wiem, krok drugi też był najważniejszy, ale ten jest ważniejszy. Iterujesz stronę główną i poprawiasz system projektowania. Pokażę przykłady. Wejdźmy w Plutem: w lewej zakładce jest wersja „Pluto grayscale”. To była pierwotna odsłona strony — praktycznie bez koloru, czysta czerń i biel. Powiedziałem agentowi: „chcę zbadać dodanie koloru”. Dostałem kilka wariantów, kilka iteracji, i w końcu stanęło na tym: widzisz niebieskie akcenty, kolorowe elementy, kolorowe przyciski. To samo zrobiliśmy z trybem jasnym.
A oto sposób na iterowanie, który w Paperze kocham najbardziej: narzędzie do zostawiania komentarzy. Cokolwiek napiszesz w uwadze, możesz potem wrócić do agenta i powiedzieć: „załatw wszystkie komentarze, które zostawiłem”. Dam ci przykład z życia. Widzisz te karty? Odstęp między brzegiem a obrazkiem był dość ciasny. Podszedłem, kliknąłem i napisałem: „podoba mi się ta karta, ale chciałbym trochę więcej oddechu i zaokrąglone rogi”. Potem kazałem agentowi wdrożyć tę opinię — i dostałem tę wersję. Dlatego tak ważne jest, żeby po zbudowaniu strony głównej zacząć zgłaszać poprawki.
Po pierwsze, najprostsza rzecz: podmień obrazki. Te są zresztą podejrzanie podobne do tych u Devina albo po prostu wygenerowane na ślepo — nowe możesz stworzyć w samym Paperze. Po drugie, dodaj trochę koloru. Na przykład tutaj kod jest zwykłym czarnym tekstem, a powinien mieć kolory sygnalizujące składnię i tak dalej. Czyli: praca na stronie.
Świetnym sposobem na iterowanie jest dokładanie kolejnych inspiracji. Kolejna z moich stron to mieszanka portfolio i Pluta: wziąłem system projektowania z portfolio — w Paperze można go po prostu skopiować w jednym projekcie i wkleić do drugiego, to naprawdę wygodne narzędzie — i kazałem agentowi połączyć oba systemy i zbudować nową stronę. Zasada jest taka: system musi istnieć, z systemu budujesz stronę główną, stronę poprawiasz, a gdy osiągniesz wersję, która ci się podoba, każesz agentowi zaktualizować system. Nie poprawiaj samego systemu — bo ty i ja nie mamy oka, które zobaczy na surowym dokumencie, jak to będzie wyglądać na prawdziwej stronie. Dlatego najpierw budujemy stronę główną: na niej widzimy efekt, ją poprawiamy, a dopiero potem poprawiamy system. Jeśli jesteś projektantem, ta rada cię nie dotyczy. Ale jeśli nie jesteś — a skoro oglądasz, to pewnie nie jesteś — to właśnie tak musimy pracować. Iteruj więc stronę i aktualizuj system. Runda za rundą, dzień po dniu; to zajmie czas.
Krok 5: Eksploracja
Gdy system i wygląd są w punkcie, w którym ci odpowiadają, przychodzi eksploracja — moim zdaniem najpiękniejsza część. Przykład: w Plutem można podłączyć konto bankowe, a układ tej strony po prostu mi się nie podobał, był brzydki. Powiedziałem agentowi: „zrób eksplorację strony bankowości” — a to znaczy: przetestuj różne układy i projekty w ramach naszego systemu. Zobacz, co wymyślił. Wersja pierwsza, „bilans”: salda różnych walut. „Rejestr po bankach”: wszystko pogrupowane według banków. Kolejna: krótkie podsumowanie. Te różne style powstały po jednym prompcie — a jednym promptem zdołały być tylko dlatego, że wcześniej odrobiłem całą ciężką robotę przy systemie projektowania i jego dopracowaniu. I co najfajniejsze: gdy system i strona główna są gotowe, tworzenie pozostałych stron staje się banalnie proste. Pokazuję. Wracam do T3 Code i piszę: „Zbuduj dashboard produktu w projekcie w Paperze przez MCP. Masz dostęp do kodu, więc wiesz, co aplikacja potrafi; korzystając z systemu projektowania i stworzonej strony głównej, zaprojektuj produkt — dashboard”. Przyznaję, okropny prompt. Ale zobaczysz, jak po kilku minutach agent zaprojektuje coś pięknego na bazie tego systemu.
Póki się to gotuje, chcę jeszcze raz mocno nacisnąć na dwa pierwsze kroki: inspirację i system projektowania. Nie wyobrażasz sobie, ile mam różnych projektów — robię nawet miniatury do filmów. I zawsze, gdy spodoba mi się jakaś strona, po prostu wklejam ją w całości do projektu i każę agentowi stworzyć system projektowania. Przykład: podoba mi się ta aplikacja i jej system. Usuwam stronę główną, bo chodzi mi o sam system. Odpalam osobny wątek i mówię: „Wejdź w projekt Gitbook w Paperze przez MCP i zmień system projektowania. Chcę różne wersje — kolorem bazowym jest pomarańczowy, resztę lubię, ale pomarańczowego nie znoszę. Stwórz wersje z innymi kolorami”. I o to chodzi: mam bazowy system i mogę go teraz stroić. Nie podoba mi się jeden kolor? A może krój pisma? Może stopień zaokrąglenia przycisków? To jest twój punkt odniesienia — i to na nim operujesz.
Na czym polega magia tego warsztatu? Robię — oczywiście znacznie scrappiej — to, co robią zawodowi projektanci. Tworzymy system projektowania, czyli język wizualny. Stroimy go pod siebie. Budujemy kilka wersji beta strony i sprawdzamy, czy nam odpowiadają. Poprawiamy stronę. Z tymi wnioskami wracamy i aktualizujemy system. A potem tym systemem budujemy wszystkie pozostałe strony. W Plutem teraz dosłownie mówię: zrób kolejną stronę. I tyle. Oto inna wersja strony finansów — to stan pusty (tzw. empty state, ekran bez danych), a to odłączanie konta bankowego. Widzisz, co daje zbudowanie systemu raz i jego nieustanne dopracowywanie: mogę zaprojektować dowolnie wiele ładnych, spójnych stron w kilka minut. A to dashboard, który agent właśnie tworzy dla mojego projektu Bezel Computer — popatrz na te zaokrąglenia i odstępy. Kocham, gdy elementy są tak ciasno złożone. I znowu: dlatego, że trzyma się systemu. Mogę to dalej stroić, a po zmianach każę agentowi zaktualizować system — i w ten sposób system staje się naprawdę mój.
Skoro ty i ja nie jesteśmy projektantami, potrzebujemy punktu zaczepienia — bazowego systemu, na którym budujemy. Można też łączyć systemy po kilka; robiłem to. A jeśli będziesz trzymać się tego warsztatu, z czasem zaczniesz budować własny smaczek, własny gust, ulubione fonty i ulubione odstępy. Reasumując: znajdź wzorce, zbuduj system, zbuduj stronę główną według systemu, iteruj stronę; po iteracjach doprecyzuj system, żeby stał się wspólnym językiem, a potem zacznij eksplorację — budować kolejne strony i kolejne zakątki produktu. Nigdy nie budowałbym jednej wersji. Zamawiaj u AI wiele wersji.
Jaki model do projektowania
Może zastanawiasz się, na jakim modelu pracuję: na Claude od Anthropic, konkretnie Opus 5.5. Szczerze mówiąc, modele Claude są po prostu najlepsze w projektowaniu. Używałem wcześniej też Astry. Dopóki masz system projektowania i każesz modelowi się go trzymać, modele OpenAI też dadzą radę. Psuje się wtedy, gdy każesz projektować bez systemu — wychodzi coś, co śmierdzi AI. Opus, zwłaszcza 5.5, jest natomiast znakomity w pilnowaniu systemu i instrukcji.
(Informacja dodatkowa: Astra to autonomiczny agent programistyczny, konkurencyjny wobec klasycznych „harnessów” typu T3 Code.)
Pamiętasz, jak wcześniej kazałem agentowi przygotować różne wersje kolorystyczne systemu? Bazowo był pomarańczowy, a teraz mamy wersję niebieską. Agent pracuje też nad systemem Devina, budując część produkcyjną tej witryny — bardzo czysto i ładnie, choć w tych kolorach wciąż czuć AI-owość. I właśnie tu wchodzi ciągła iteracja i nieustanne strojenie. Z pierwszego prompta nie dostaniesz niczego idealnego — wybij to sobie z głowy. Potrzebne są kolejne rundy poprawek. Ale im więcej iterujesz, tym bardziej rozwijasz gust, tym lepiej ci to wychodzi i tym łatwiej przychodzi. Zobacz: mam kilka wariantów systemu. Wiesz co? Do diabła z pomarańczowym — usuwam go. Ten kolor („tide”) i niebieski bardzo mi leżą. Fioletowego nawet nie potrzebuję — mogę skasować. I o to chodzi w iteracji. A może nie podoba mi się font? Może przyciski są zbyt mocno zaokrąglone? Buduję stronę główną, poprawiam stronę główną, a potem każę poprawić system.
Trzymaj się tego warsztatu, bo wytrenuje ci głowę do budowania języków projektowych i systemów — do myślenia projektowo. Znajdź wzorce: zrób zrzut ekranu, wklej go do nowego projektu w Paperze. Zbuduj system projektowania. Zbuduj stronę główną według systemu. Iteruj stronę. Po iteracjach zaktualizuj system. Rozpocznij eksplorację. A na samym końcu pozostaje już tylko powiedzieć agentowi: „zbuduj tę aplikację”. I to tyle. Tak właśnie projektuje się ładnie wyglądające aplikacje z AI jako nieprojektant. Ufam, że ten materiał ci pomoże — omówiłem każdy zakamarek, jaki przyszedł mi do głowy. Pytania zostaw w komentarzach i daj znać, czy chcesz więcej takich filmów. Byliście świetni. Jestem Ross — dziękuję, że oglądaliście, i do zobaczenia następnym razem. Łapka, komentarz, subskrypcja. Cześć.