Turn Claude into a Design Genius... Just Watch

2026-08-12 Jack Roberts AI zagraniczne tutorial waga 4/5 19 min czytania

Trzy techniki podnoszenia jakości projektów generowanych przez Claude: biblioteki wzorców, pętla krytyków i lokalny „design OS”. Dla twórców i założycieli robiących strony, maile i grafiki bez działu designu.

Robocza publikacja redakcyjna na podstawie publicznego transkryptu YouTube. Źródło: YouTube.

O czym jest ten film

  1. Dlaczego wytwory AI są rozpoznawalne na pierwszy rzut oka — pięć typowych „sygnałów zdradzieckich”: typografia, obrazy, hierarchia, kolor i odstępy.
  2. Teza wyjściowa: modele projektują źle, bo nigdy nie zobaczyły, jak wygląda naprawdę dobry projekt — trzeba im go pokazać.
  3. Poziom pierwszy: korzystanie z serwisu z ponad dwoma tysiącami rozłożonych na części projektów (paleta, typografia, tokeny, zmienne CSS/Tailwind) jako materiału wejściowego dla Claude’a.
  4. Demonstracja: zbudowanie strony sprzedażowej fikcyjnych „titanium protein shakes” w estetyce systemu projektowego Apple, z obrazami wygenerowanymi wyłącznie z promptu.
  5. Drugie, praktyczniejsze zastosowanie: bezlitosne porównanie własnej strony z wzorcem (tu: Linear) i wygenerowanie interaktywnego raportu różnic w HTML.
  6. Poziom drugi: „pętla projektowa” (design loop) — Claude powołuje kilku krytyków-subagentów i iteruje, aż projekt spełni zadane kryteria.
  7. Przykład zastosowania pętli: przerobienie zrzutu ekranu kampanii mailowej Apple na gotowy, działający HTML e-mail dla własnego produktu — w jednym podejściu.
  8. Domknięcie obiegu: wysyłka gotowego maila przez warstwę uwierzytelniającą (Zapier) zamiast osobnego łączenia integracji w każdym narzędziu AI.
  9. Poziom trzeci: własny lokalny „system operacyjny do projektowania” — wybór dostawcy generowania obrazów, podgląd kosztów, biblioteka wszystkich plików graficznych na dysku z wyszukiwaniem semantycznym.
  10. „Przepisy stylu” (style recipes) — zapisane zestawy referencji, które pozwalają generować spójne wizualnie materiały, np. miniatury na kanał.

Redakcyjne tłumaczenie

Wojna z „AI slopem”

Pokażę wam, jak zamienić Claude’a w geniusza projektowania i raz na zawsze rozprawić się z potworem zwanym „AI slopem” (Informacja dodatkowa: „AI slop” to potoczne określenie masowo generowanych, tanio wyglądających treści i grafik — polskim odpowiednikiem byłaby „sieczka z AI”). Posłużą do tego trzy proste, ale mocne techniki, które pozwolą wam osiągać poziom jakości zawodowego projektanta w zasadzie w dowolnym materiale — szybko i bez kosztownych błędów. Jeśli jeszcze nie macie, weźcie tę piękną kawę i zaczynamy.

Wojna z sieczką z AI oficjalnie się rozpoczęła i zapraszam was do tej krucjaty. Chcemy zamienić Claude’a w geniusza projektowania i zniszczyć slop. Odpowiemy na trzy pytania. Po pierwsze: czym właściwie jest wybitne projektowanie i jak umożliwić Claude’owi korzystanie z niego, żebyśmy razem zbudowali coś świetnego. Po drugie: jak zastosować to na czymś realnym — mam kilka pomysłów. I po trzecie, to najbardziej mnie ekscytuje: jak dać Claude’owi przewagę systemową. Buduję to od kilku dni, więc pokażę wam dokładnie, o co mi chodzi.

Jedna rzecz do zapamiętania — tłumaczył to Mike: modele tworzą złe projekty, bo nigdy nie widziały, jak wygląda dobry czy świetny projekt. Musimy więc realnie zobaczyć, co zrobili ludzie, żeby zrozumieć, czym jest doskonałe projektowanie — niezależnie od tego, czy pracujecie w aplikacji Claude, czy w całym ekosystemie projektowym wokół niego.

Dlaczego sieczkę widać na kilometr

Zanim pokażę pierwszą rzecz, są dwie sprawy, które musicie wiedzieć. Zapiszcie je sobie na czole albo chociaż na kartce.

Dlaczego slop jest tak łatwo rozpoznawalny? Moja teoria jest prosta: przestał wyglądać źle, ale nie przestał być rozpoznawalny. Chodzi o to, że pojawiają się pewne charakterystyczne sygnały, które widać wszędzie. Jest ich dosłownie pięć: typografia, obrazy, hierarchia, kolor i odstępy. To klasyczne znaki szczególne.

Wniosek jest oczywisty: jeśli damy Claude’owi taki sam prompt jak wszyscy inni, dostaniemy taki sam wynik jak wszyscy inni. Pytanie brzmi więc: jak sprawić, żeby Claude myślał jak prawdziwy projektant i zbudował coś naprawdę pięknego?

Poziom pierwszy: pokazać modelowi, jak wygląda doskonałość

Poziom pierwszy to w gruncie rzeczy pewna świetna strona, która zawiera ponad dwa tysiące projektów pokazujących, jak wygląda doskonałość. Jest tam Wispr Flow, Structured, mnóstwo różnych projektów — Phantom, Linear, cokolwiek chcecie.

Co ciekawe, kiedy kliknę na przykład w Slush, widzę ich stronę. To przepiękny projekt. Ale nie tylko to — serwis przy każdym z tych dwóch tysięcy projektów robi coś jeszcze: wyciąga rozszerzony widok hierarchii projektowej. Po lewej mam objaśnienie, mam paletę kolorów, mam typografię — mam wszystko, czego mógłbym chcieć, i jeszcze więcej. Rzeczy, za które klienci płacą bardzo duże pieniądze. Niżej jest jeszcze więcej: konfiguracja Tailwinda, zmienne CSS, tokeny projektowe. Można to po prostu wziąć i użyć.

(Informacja dodatkowa: tokeny projektowe to nazwane, wielokrotnego użytku wartości — kolorów, odstępów, rozmiarów pisma — stanowiące podstawę spójnego systemu projektowego).

Zrobimy z tym dwie rzeczy, żeby pokazać, jak potężne to jest. Pierwsza to zwykła demonstracja możliwości. Zrobimy w tym celu coś klasycznego — coś, co powiedziano w każdym filmie o projektowaniu, jaki widzieliście: to nie pomarańcza, nie banan, to jabłko. Przyjrzymy się systemowi projektowemu Apple i pokażę, jak wziąć tę estetykę i przenieść ją na dowolny inny materiał. Wystarczy do tego jedna bardzo prosta rzecz.

Zaznaczam: ci ludzie nie są sponsorem tego filmu ani nic z tych rzeczy. Po prostu ich znalazłem, uznałem, że są znakomici, i zawsze dzielę się z wami rzeczami, które naprawdę dowożą.

A przy okazji, jeśli jesteście tu nowi — nazywam się Jack. Zbudowałem i wyprowadziłem na rynek startup technologiczny z ogromną liczbą klientów, a teraz buduję własny startup AI i pokazuję na tym kanale rzeczy, które faktycznie działają. Zaczynając od tej naprawdę fajnej historii z projektowaniem.

Demonstracja: strona w estetyce Apple

Wchodzicie do Claude’a i robicie tak: wklejacie materiał i dajecie prompt mniej więcej taki: „Cześć. Chcę, żebyś wykorzystał tę architekturę projektową i zbudował mi piękną stronę sprzedającą titanowe shake’i proteinowe. Zrób to tak, żeby wyglądało zjawiskowo. Możesz wygenerować obrazy, jeśli są potrzebne”. Bam. Wciskamy enter i pozwalamy mu działać.

I mamy stronę. Odświeżam. Nie oczekuję, że będzie idealna, ale widać inspirację projektową. Najlepsze projekty powstają w iteracjach. Zobaczcie — wygenerował butelki na białko. Podoba mi się ten układ w stylu bento. Jest zrobiony w dwóch liniach, moim zdaniem czysto. To bym trochę poprawił. „Sześć wykończeń, jedna obręcz” — to jest naprawdę porządne. Pamiętajcie: nie dałem mu ani jednego obrazu. Wszystko powstało z samego promptu. Kolory: chalk, sky, citrus, amber, teal i graphite. Ja poszedłbym w citrus albo sky — dajcie znać w komentarzach, co wybralibyście wy. Dalej mamy zbliżenie, rozbicie na elementy, cztery smaki. Widać podstawy. Jak na prompt, który mu dałem, uważam, że jest całkiem nieźle — i doskonale widać, jaki efekt daje ten styl.

Zastosowanie praktyczne: bezlitosne porównanie z wzorcem

To jest fajne, ale jest drugie zastosowanie, które będzie dla was od razu bardziej użyteczne: wzięcie swojej istniejącej strony. Na przykład mojej — Glider, czyli startupu, który założyłem z kilkoma twórcami z obszaru AI. Jestem nim naprawdę podekscytowany. Powiedzmy, że podoba mi się, jak wygląda, ale chciałbym podnieść poziom. Mamy za tym pełny system projektowy.

Znajdźmy zatem coś takiego jak Linear. Linear ma tak dobrą stronę, że jak raz zrozumiecie, dlaczego jest dobra, wszystko nabierze sensu. To klasyczne SaaS-owe dark mode. Wszystko po prostu do siebie pasuje. Wszystko jest czyste i dobrze wyważone, ma dobrą paletę kolorów.

I tu sedno: co innego wiedzieć, że coś działa, a co innego umieć to nazwać. Czasem po prostu czujemy, że wygląda dobrze, ale nie umiemy wyjaśnić dlaczego. A to Claude’owi nic nie daje.

Robimy więc tak: wchodzimy do tego serwisu, mamy tam Linear i całą resztę, kopiujemy link, przechodzimy do Claude’a i dajemy taki prompt: „Chciałbym, żebyś na podstawie poniższej strony przeanalizował tę witrynę i porównał ją z moją. Chcę, żebyś był bezlitosny” — bezlitosne AI to jedyne AI, jakie lubimy — „w zrozumieniu różnic projektowych i tego, jak mogę poprawić swoją pod względem estetyki”. Podaję adres mojej strony, podaję adres strony, która mi się podoba, i dodaję: „To jest system projektowy. Możesz też wejść bezpośrednio na stronę Linear. Korzystaj ze zrzutów ekranu. Wynik chcę dostać jako piękne zestawienie w HTML. Zwięźle i prosto”.

Zobaczcie, co dostałem. Link do całego tego skillu zostawię pod filmem. W lewym górnym rogu mamy Glider i Linear. Wygląda przepięknie. Kiedy przewijam, pojawia się ta zielona linia — uwielbiam takie detale, jestem królem detali. Znalazł trzy duże luki: światło międzyliterowe jest zbyt luźne, nie ma drabiny wysokości (Informacja dodatkowa: „elevation ladder” to uporządkowana skala cieni i warstw, która buduje wrażenie głębi interfejsu), a grafika w sekcji głównej konkuruje z samym produktem. Ciekawe. Poproszę o więcej szczegółów.

Świetne jest to, że dorzucił nawet interaktywny suwak pokazujący różnicę. Zobaczcie: to jest światło międzyliterowe Glidera — stoimy tu sami jak palec — ale można przeciągnąć suwak i zobaczyć wartości pośrednie aż do miejsca, w którym jest Linear. Widać różnicę. To drobiazgi, których sami byśmy nie nazwali. Aha, chodzi o promień zaokrąglenia narożników. Aha, chodzi o interlinię. O światło międzyliterowe. O ilość pustej przestrzeni. O hierarchię. O mnóstwo różnych rzeczy naraz.

A raport rozkłada to sekcja po sekcji: cienie, częstotliwość użycia koloru akcentowego, słownik promieni zaokrągleń, wartości zestawione obok siebie, grubości krojów wystawowych. Jest niesamowity. Zbudowaliśmy dla Glidera system projektowy, którego używamy w prezentacjach, na stronie i w aplikacji — to nam bardzo pomoże. Wysłałem to zespołowi od razu: „Chłopaki, musimy to natychmiast obejrzeć”. Kolory kopiuje się kliknięciem w wartość heks. To paleta Glidera. Jest znakomita i możecie zrobić to samo dla własnych marek.

Nie twierdzę, że Linear to szczyt projektowania — ale to firma warta miliard dolarów i ma przepiękną stronę. Krok do wykonania: znajdźcie w tym serwisie strony, które uważacie za fantastyczne, i przepuśćcie przez porównanie choćby kilka z nich. Twórcy odwalili naprawdę dobrą robotę, warto się tym pobawić, a teraz wchodzą jeszcze w kolejne typy podstron — bardzo pomocne.

Poziom drugi: pętla projektowa

Strony to jednak tylko jeden wymiar projektowania. Drugie pytanie brzmi: jak wykorzystać to do innych rzeczy? Pokażę wam najpotężniejszą technikę projektową, na jaką natrafiłem. Nazywam ją pętlą projektową; jej odkrywca nazwał ją „gauntlet loop”. Wrzucę link do filmu na ekranie, świetnie tłumaczy, jak to działa.

Idea jest taka, że każemy Claude’owi zbudować coś znakomitego. Mamy tu zasób udostępniony przez George’a Harleya — dzięki! — który zebrał mnóstwo pięknych kampanii mailowych w HTML. Są tam wielkie marki: Apple ogłaszające premierę, Figma, cała reszta. Tylko jest problem. Projekt to jedno, ale jak przejść od obrazka do czegoś, czego naprawdę mogę użyć? Odpowiedzią jest pętla projektowa.

Robimy więc tak: znajdujemy projekt, który uważamy za świetny. Powiedzmy, że podoba nam się ten od Apple. Zjeżdżamy w dół, robimy zrzut ekranu, kopiujemy do schowka i wklejamy do Claude’a. Mówię: „Użyj /design-loop”.

Pętla działa w prosty sposób — skill też wrzucę pod filmem. Dajecie modelowi punkt odniesienia: „chcę, żebyś projektował tak jak to”. Claude powołuje wtedy kilku agentów. Jeden pełni rolę krytyka i krąży w pętli, przechodząc przez kolejne etapy i poziomy walidacji. Pierwszy może pytać: czy to trafia w brief? Drugi: czy projekt jest naprawdę dobry? Trzeci może odpowiadać za siłę oddziaływania wizualnego. Powstają więc trzy różne subagenty i całość krąży w pętli, dopóki wynik nie osiągnie zamierzonego poziomu.

Technika to jedno, ale liczy się wynik. Poleciłem: „Odtwórz dla mnie tę zapowiedź premiery w HTML tak, żeby po wklejeniu do maila wyglądała pięknie. To premiera GLD na Windows. Zwróć szczególną uwagę na jasność, klimat i energię”. To był mój prompt. To dostałem w odpowiedzi — za jednym podejściem, dokładnie w takiej formie. Napisałem GWD26, Glider Windows Day, 12 listopada 2026. To niesamowite, że zrobił to w jednym strzale. A ponieważ to HTML, możemy to wysłać naszej publiczności i zrobić z tym, co chcemy. Taka jest siła tej pętli. Na jej bazie możemy zbudować własne systemy projektowe albo cokolwiek innego.

Drugi przykład to materiał Anthropiku: „Welcome to the Claude platform”. Powiedziałem: zrób to samo z tym. I dostałem „Welcome to the [nasza] platform”, wraz z pomarańczowym akcentem w stylu Anthropiku i przyciskiem „odbierz swój klucz API”. Znowu — nie chodzi o to, żeby to po prostu wziąć i użyć, tylko o pokazanie, jaka to siła. Możecie powiedzieć: „ustal, co tu działa, ale zmień A, B i C” albo „potraktuj te cztery rzeczy jako inspirację i zaadaptuj je”. Macie wtedy własne materiały zbudowane w tym systemie.

Domknięcie obiegu: od HTML do wysłanego maila

Problem w tym, że mail w HTML to jedno, ale jeśli nie umiemy go wysłać, to mamy kłopot. Pokażę więc, jak doprowadzić rzecz do końca. Powiedzmy, że chcę to komuś wysłać. Przerzucam materiał do Claude Code i po prostu przygotowuję z tego wiadomość.

Mówię: „Cześć, użyj mojego połączenia z Zapierem, żeby wziąć HTML, który przed chwilą stworzyliśmy, i przygotować wersję roboczą maila do mnie albo wysłać go do mnie. Dorzuć jakiś losowy temat”.

Dlaczego używam do tego Zapiera? To moja warstwa uwierzytelniająca. Wyjaśnię, co mam na myśli. W Claude można podłączyć wszystkie swoje narzędzia — ale problem polega na tym, że musicie zrobić to osobno w każdej aplikacji: w Codeksie, w Antigravity, w agencie Hermes i tak dalej. Jeśli podłączycie się do Zapiera, korzystacie z tych samych integracji wszędzie. Osobiście lubię też to, że mam dzięki temu dostęp do rzeczy takich jak Skool, gdzie działa moja społeczność. Przy okazji: za dwa tygodnie robimy spotkanie w Budapeszcie, chętnie się z wami zobaczę i napiję dobrej kawy na żywo.

Używam więc integracji z Zapierem, żeby coś wysłać. I dostaję tego maila. Zobaczcie — jest przepiękny. Czy przycisk działa? Sprawdźmy. Klikam i… proszę bardzo, jesteśmy w społeczności, gdzie dzieje się mnóstwo świetnych rzeczy. Jestem pod wrażeniem. Możecie to zbudować i połączyć wszystko ze wszystkim. Link do Zapiera zostawię pod filmem.

Poziom trzeci: system operacyjny do projektowania

To prowadzi nas płynnie do poziomu trzeciego, na który czekam najbardziej. Poziom trzeci zadaje pytanie: czy możemy dać modelowi całe środowisko do pracy? Jeden silnik, jedno pudełko?

A jeśli brzmi to dla was jak chiński, wrzucę link do pełnego kursu Claude Code — przechodzi przez to wszystko: systemy projektowe, budowanie, korzystanie ze wszystkich funkcji, strony, systemy pamięci, wszystko, co możecie sobie wyobrazić, łącznie z rzeczami, których nie pokazuję na YouTubie. Do tego spotkania na żywo i mnóstwo dziejących się rzeczy. Naprawdę warto.

Poziom trzeci to system operacyjny do projektowania. Zbudowałem go wewnątrz swojego własnego „systemu operacyjnego” opartego na Claude. Mamy tam oczywiście systemy pamięci, czaty i całą resztę, ale Design OS jest naprawdę fajny — i zaraz pokażę dlaczego.

Duża część projektowania to zdolność generowania obrazów i wideo. To rozwiązanie pozwala wybrać dostawcę: Higgsfield, Kie AI, OpenRouter, OpenAI i inne sekcje, jeśli chcecie. Powiedzmy, że wybieram jedno i wpisuję: „piękny springer spaniel w wersji wątrobiano-białej z shakiem proteinowym obok”. Wrzucam to, schodzę niżej, wybieram proporcje 16:9, rozdzielczość 2K w zupełności wystarczy, dwa obrazy. Wybieram też model — niech będzie Nano Banana 2. Zbudowałem to zresztą tak, że pokazuje, ile kredytów albo pieniędzy kosztuje każde generowanie. Klikam i system to buduje. I proszę: mam pięknego springera z shakiem proteinowym obok. Peakway protein. Uważam, że to jest chore w dobrym sensie. Jest jeszcze druga wersja, też świetna. Uwielbiam tego psa.

Biblioteka: własne archiwum z wyszukiwaniem po treści

Ale pokażę wam najfajniejszą rzecz i powód, dla którego to wszystko jest tak ważne. Wiemy już, że ten system robi mnóstwo dobrego: można z nim rozmawiać, jest pulpit, widać zużycie i wydatki, podpowiada, co poprawić, bo codziennie lokalnie przegląda wasze rozmowy i sugeruje nowe skille. Ma miliard funkcji — grafy wiedzy, całą tę resztę. Sporo o tym mówiłem na kanale.

Ale oto dlaczego część projektowa jest tak potężna. Jest tu biblioteka — funkcja, którą chciałbym, żeby dodało Apple, a nie dodało. Po kliknięciu w bibliotekę widzicie każdy obraz na własnym komputerze. Najbardziej lubię to, że mogę w niej wyszukiwać. Wpisuję na przykład „burger”, enter — i pokazuje mi każdy obraz burgera na moim komputerze. I nie chodzi o to, że słowo „burger” jest w metadanych: zaindeksowałem to naprawdę tanim modelem, więc łatwo znajduję swoje rzeczy. To wszystkie burgery, jakie mam. Można by pomyśleć, że kocham burgery.

To po prostu potwornie pomocne. Klikam w obraz, kopiuję do czatu, wklejam gdzie chcę — mam go w przeglądarce. Mogę użyć go wszędzie, skopiować, pobrać, zrobić z nim, co chcę. Ratuje życie. Mogę filtrować po obrazach i wideo, a skanowanie aktualizuje bibliotekę. Ta idea — własny system operacyjny do projektowania, działający lokalnie i mający dostęp do wszystkich waszych obrazów i wideo — oszczędza godziny zastanawiania się „gdzie ja to, do licha, znalazłem”.

Przepisy stylu: spójność wizualna na zawołanie

Druga fajna rzecz: mogę wejść na przykład w Kie AI, mam tam Nano Banana 2 i mogę korzystać z systemów projektowych, co bardzo ułatwia generowanie. Zobaczcie ten mały element na dole. Po kliknięciu można stworzyć nowy przepis stylu.

Powiedzmy, że mam swój kanał na YouTubie i chcę spójny styl. Podoba mi się określony format miniatur. W systemie projektowym po prostu go opisuję. Nazywam to „Jack thumbnail” albo „Jack design” — jeden już mam zbudowany niżej. Wpisuję opis tego, czym to jest, a potem dorzucam obrazy dla dowolnego stylu, który chcę utrwalić. To bardzo wygodne.

I teraz: wychodzę, schodzę niżej, klikam „Jack design”. To po prostu zestaw moich zdjęć z opisami. Mogę powiedzieć: „zamień przedmiot na obrazie na gigantyczny shake proteinowy”. Proste. Dwa obrazy, 16:9, 2K. Kosztuje mnie to dwanaście centów. Generuję i system buduje. I proszę — projekt z gigantycznym shakiem proteinowym. To miniatura filmu, który wychodzi za jakieś pół godziny. Bardzo wygodne.

To znaczy, że jeśli macie styl wizualny firmy i chcecie go wpleść w strony czy cokolwiek innego, robi się to znacznie prościej. Zbudowałem to dla społeczności, bo sam to uwielbiam i faktycznie chcę tego używać. Jeśli chcę zachować spójne miniatury i zmienić tylko jeden fragment, wybieram po prostu „Jack design”, „Jack thumbnail style one”, „Jack sky image” — cokolwiek. I mamy drugi projekt, który wygląda znakomicie. Możliwość podpięcia różnych usług, jak Higgsfield czy OpenAI, przy jednoczesnym dostępie do własnej lokalnej biblioteki, jest po prostu bardzo korzystna. Link do tego OS-u w społeczności zostawię pod filmem, razem z całą resztą dodatków.

I to by było na tyle — nauczyliśmy się, jak zamienić Claude’a w geniusza projektowania. Kolejna rzecz to opanowanie jednej z najpotężniejszych umiejętności, czyli pętli projektowej, którą przejdziemy razem w tym filmie.

10 najważniejszych takeaways — z kontekstem zastosowania

1.Sieczkę z AI zdradza pięć konkretnych wymiarów

Na czym polega: Generowane projekty przestały wyglądać źle, ale nie przestały być rozpoznawalne. Powtarzalne sygnały pojawiają się w pięciu miejscach: typografii, obrazach, hierarchii, kolorze i odstępach.

Jak stosować: Zanim ocenisz wygenerowany projekt „na oko”, przejdź te pięć wymiarów po kolei jako listę kontrolną i przy każdym nazwij konkretnie, co jest nie tak. Dopiero taka nazwana lista nadaje się na prompt poprawkowy.

Na co uważać: To lista diagnostyczna, nie recepta. Poprawienie pięciu wymiarów usuwa rozpoznawalność, ale samo z siebie nie tworzy jeszcze wyrazistego, własnego charakteru.

2.Ten sam prompt daje ten sam wynik, co u wszystkich

Na czym polega: Jeśli podasz model bez materiału odniesienia, dostaniesz jego wartość domyślną — tę samą, którą dostaje każdy inny.

Jak stosować: Zawsze dołączaj konkretny punkt odniesienia: zrzut ekranu, adres strony, paletę, tokeny. Różnicę robi materiał wejściowy, nie sprytniejsze sformułowanie polecenia.

Na co uważać: Referencja to nie licencja. Kopiowanie systemu projektowego cudzej marki jeden do jednego w materiałach komercyjnych jest ryzykowne — traktuj wzorzec jako inspirację i punkt kalibracji.

3.Biblioteki rozłożonych na części projektów jako źródło materiału

Na czym polega: Serwis pokazany w filmie udostępnia przy każdym z ponad dwóch tysięcy projektów gotową analizę: paletę, typografię, tokeny, konfigurację Tailwinda i zmienne CSS.

Jak stosować: Zamiast wklejać sam zrzut ekranu, wklejaj gotowe tokeny i wartości. Model dostaje wtedy liczby zamiast wrażeń, więc rezultat jest powtarzalny między kolejnymi generacjami.

Na co uważać: Wartości wyciągnięte z cudzej strony są dopasowane do jej treści i gęstości informacji. Przeniesione bez korekty na inny typ produktu — na przykład ze sklepu na dokumentację — potrafią rozjechać cały układ.

4.Porównanie własnej strony z wzorcem jako najszybszy zwrot z inwestycji

Na czym polega: Zamiast budować od zera, prosisz model o bezlitosne porównanie swojej strony z wybranym wzorcem i wskazanie różnic. W przykładzie wyszły trzy: zbyt luźne światło międzyliterowe, brak drabiny cieni i grafika główna konkurująca z produktem.

Jak stosować: Podaj dwa adresy, dopisz „bądź bezlitosny”, poproś o korzystanie ze zrzutów ekranu i o wynik jako zwięzły raport HTML. Efekt można od razu przekazać zespołowi.

Na co uważać: Model chętnie zgłosi kosmetyczne różnice na równi z poważnymi. Sam zdecyduj, które z nich wynikają z twojej marki, a nie z niedopatrzenia — inaczej upodobnisz się do wzorca aż do utraty rozpoznawalności.

5.Wartość leży w nazwaniu tego, co i tak czujesz

Na czym polega: Sedno techniki: zwykle widzimy, że coś wygląda dobrze, ale nie umiemy powiedzieć dlaczego. Model zamienia to wrażenie w konkret — promień zaokrągleń, interlinia, ilość pustej przestrzeni.

Jak stosować: Używaj tych analiz również jako narzędzia nauki, nie tylko produkcji. Po kilku porównaniach zaczniesz sam nazywać różnice i będziesz pisał lepsze prompty od pierwszego strzału.

Na co uważać: Nazwanie różnicy to nie to samo co jej uzasadnienie. Model powie „letter spacing jest za luźne”, ale nie zawsze wyjaśni, czy w twoim kontekście to faktycznie problem.

6.Pętla projektowa: kilku krytyków zamiast jednego przebiegu

Na czym polega: Claude powołuje kilka subagentów-krytyków o rozdzielnych rolach — zgodność z briefem, jakość projektu, siła oddziaływania wizualnego — i iteruje, aż wynik przejdzie wszystkie bramki.

Jak stosować: Definiuj krytyków jako rozłączne kryteria, a nie warianty tego samego pytania. Trzy niezależne perspektywy wyłapują błędy, których jedna nie zauważy, a do tego dają jasne kryterium zatrzymania pętli.

Na co uważać: Każda iteracja to realny koszt tokenów i czasu. Ustaw limit rund i konkretny próg akceptacji, bo bez tego pętla potrafi krążyć nad drobiazgami.

7.Od zrzutu ekranu do działającego HTML-a

Na czym polega: Piękne kampanie mailowe dostępne są jako obrazy — pętla projektowa zamienia je w kod, który da się realnie wysłać. W przykładzie mail powstał w jednym podejściu.

Jak stosować: W prompcie nazwij nie tylko układ, ale i cechy jakościowe: jasność, klimat, energię. Zaznacz też docelowe medium („ma wyglądać dobrze po wklejeniu do maila”), bo determinuje ono dopuszczalne konstrukcje HTML.

Na co uważać: HTML w mailu ma dużo bardziej restrykcyjne wsparcie niż w przeglądarce. Zanim wyślesz cokolwiek na listę, przetestuj wiadomość w kilku klientach pocztowych — podgląd w przeglądarce nic tu nie gwarantuje.

8.Jedna warstwa uwierzytelniająca zamiast integracji w każdym narzędziu

Na czym polega: Zamiast podłączać te same usługi osobno w Claude, Codeksie, Antigravity i pozostałych narzędziach, autor podpina wszystko raz przez Zapiera i korzysta z tego samego zestawu wszędzie.

Jak stosować: Jeśli pracujesz na kilku agentach naraz, rozważ jednego pośrednika integracji jako punkt wejścia — oszczędza to powtarzalnej konfiguracji i porządkuje uprawnienia.

Na co uważać: Pojedynczy punkt uwierzytelnienia to również pojedynczy punkt awarii i szerokie uprawnienia w jednym miejscu. Ograniczaj zakres dostępu do faktycznie potrzebnych usług.

9.Lokalna biblioteka mediów z wyszukiwaniem po treści

Na czym polega: Autor zaindeksował wszystkie obrazy na swoim komputerze tanim modelem, więc może je wyszukiwać po tym, co na nich jest, a nie po nazwach plików i metadanych.

Jak stosować: Jeśli tracisz czas na szukanie własnych materiałów, indeksowanie treściowe jest jedną z najtańszych możliwych usprawnień — do opisywania obrazów wystarczy najmniejszy dostępny model.

Na co uważać: Opisy generowane automatycznie bywają niedokładne, a indeks trzeba odświeżać po dodaniu nowych plików. Traktuj wyszukiwarkę jako pomoc, nie jako kompletny katalog.

10.Przepisy stylu dają spójność bez powtarzania promptu

Na czym polega: Zapisany zestaw referencji i opisów („Jack design”) pozwala generować kolejne materiały w tym samym stylu, zmieniając tylko jeden element — na przykład podmieniając przedmiot na miniaturze.

Jak stosować: Zbuduj taki przepis dla każdego powtarzalnego formatu, który produkujesz: miniatur, grafik do postów, nagłówków. Spójność wizualna bierze się z wielokrotnego użycia tego samego zapisanego stylu, nie z pamiętania, co się wpisało poprzednim razem.

Na co uważać: Generowanie kosztuje — w filmie dwie grafiki 16:9 w 2K to dwanaście centów. Przy produkcji seryjnej warto mieć podgląd kosztu przed kliknięciem, tak jak zbudował to autor.