O czym jest ten film
- Autor porządkuje pracę z Claude Design w siedem poziomów zaawansowania, gdzie każdy kolejny rozwiązuje ograniczenie poprzedniego.
- Poziom 1 to „wpisz prompt i gotowe” — działa, ale daje efekt identyczny jak u wszystkich innych użytkowników tego samego narzędzia.
- Poziom 2 polega na briefowaniu modelu jak dyrektora artystycznego: konkretne instrukcje plus zrzuty ekranu z referencjami wizualnymi, a potem iteracja.
- Poziom 3 to zbudowanie własnego systemu projektowego z gotowego, udanego projektu — paleta, typografia, ruch, zasady — i wyeksportowanie go jako pliku.
- Poziom 4 rozciąga ten jeden system na całą firmę: prezentacje, e-maile, materiały sponsorskie, media społecznościowe.
- Poziom 5 dołącza zewnętrzne generatory obrazu i wideo, żeby wyjść poza odtwarzanie cudzych wzorców i tworzyć własne, unikalne zasoby.
- Poziom 6 dodaje ruch: animacje HTML, wykresy, obiekty 3D, interaktywne elementy.
- Poziom 7 łączy Claude Design z Claude Code i Supabase, żeby zbudować działającą aplikację produkcyjną z logowaniem i bazą danych.
- Przewijający się przez cały materiał wątek: nigdy nie akceptuj pierwszego wyniku — pięć do dziesięciu rund poprawek to norma.
- Autor wielokrotnie odwołuje się do oszczędności — projekty, za które płacił tysiące dolarów, powstają dziś w kilka promptów.
Redakcyjne tłumaczenie
Wstęp: siedem poziomów
Spędziłem setki godzin na projektowaniu w Claude i chcę przeprowadzić was przez siedem poziomów pracy z Claude Design. Czego się spodziewać na każdym z nich, jakich kosztownych błędów unikać i jak odblokować kolejny, żeby móc zaprojektować dosłownie wszystko: strony internetowe, grafiki, prezentacje, pełne aplikacje — a potem zamienić to w spójny system, który odtworzycie w kilka minut. Nawet jeśli nigdy w życiu niczego nie projektowaliście.
Poziomów jest siedem i każdy kolejny jest mocniejszy od poprzedniego — one się na siebie nakładają. Przy każdym pokażę wam dokładnie, co dzięki niemu oszczędzacie. Pod koniec tego filmu znajomi będą myśleć, że jesteście jakimś geniuszem projektowania albo że trzymacie w piwnicy zespół grafików.
Poziom 1: „wpisz i jedź”
Na tym poziomie po prostu korzystacie z Claude Design. Otwieracie claude.ai w przeglądarce, schodzicie do lewego dolnego rogu i klikacie „design”. Otwiera się wam centrum dowodzenia projektami.
Użytkownik poziomu pierwszego wpisuje po prostu prompt w rodzaju: „Cześć, zrób mi makietę interfejsu dla firmy odzieżowej produkującej koszulki z misiami”. Klikacie „UI mock-up”, wybieracie system projektowy, wybieracie model — Fable 5 jest najmocniejszy z dostępnych, ale możecie zejść niżej, tak samo jak z poziomem wysiłku — i wysyłacie.
(Informacja dodatkowa: „poziom wysiłku” to ustawienie określające, ile obliczeń model przeznacza na rozumowanie przed odpowiedzią — więcej wysiłku oznacza zwykle lepszy wynik, ale dłuższe oczekiwanie).
A przy okazji, jeśli trafiliście tu pierwszy raz — jestem Jack. Zbudowałem startup e-commerce z ogromną bazą klientów, a teraz skaluję własny startup AI i dzielę się tutaj tym, co naprawdę działa.
Kiedy wyślecie prompt, zawsze dostaniecie kilka pytań doprecyzowujących. W tym scenariuszu opisujecie, o co chodzi: koszulki z misiami. Jaki to typ interfejsu? Zdecyduj za mnie. Wersja desktopowa wystarczy — choć oczywiście chcecie, żeby była zoptymalizowana pod mobile. Kto jest grupą docelową? Claude Design prowadzi was przez ten proces krok po kroku. Nazwa marki: powiedzmy Teddy — piękna nazwa. Odpowiadacie po kolei na pytania. Fajne jest to, że możecie już na tym etapie dorzucić logo. Przechodzę przez to jak typowy użytkownik: kobieta, przytulanki, cel — eksploracja pomysłu. Kiedy skończycie, klikacie „continue” w prawym dolnym rogu.
To jest poziom pierwszy. Zwykły interfejs czatu, żadnych bajerów, absolutne minimum. Ale jeśli oglądacie ten film i faktycznie używacie Claude Design, jesteście już przed 99,9 procenta ludzi, którzy w ogóle nie wiedzą, że to narzędzie istnieje — nie mówiąc o korzystaniu z niego.
Claude odsyła nam gotową stronę. Wykorzystał istniejącą paletę kolorów, ale wszyscy się zgodzimy, że na tym etapie wymaga to jeszcze pracy. Mimo to jest lepiej, niż gdybyśmy w ogóle nie użyli systemu projektowego. W lewym dolnym rogu możemy to poprawiać.
Kluczem do wyjścia z poziomu pierwszego jest zrozumienie, że pierwsza strona, którą dostaniecie, będzie taka sama jak u wszystkich innych — jeśli używacie tych samych systemów i tych samych promptów. Dostaniecie generyczną papkę z fioletowym gradientem, o ile nie podacie konkretów. Ale i tak oszczędzacie setki dolarów w porównaniu z zamówieniem takiej strony na Upworku. Ludzie sprzedają za setki i tysiące dolarów strony, które zbudujecie w Claude Design. Jeśli jednak chcecie projektować naprawdę jak projektant, musicie wykorzystać to, co daje poziom drugi.
(Informacja dodatkowa: Upwork to duża międzynarodowa platforma zlecania pracy freelancerom).
Poziom 2: brief jak dla dyrektora artystycznego plus iteracja
Na poziomie drugim briefujemy model tak, jakbyśmy briefowali dyrektora artystycznego. Dajemy mu nie tylko bardzo konkretne wytyczne, ale też inspiracje wizualne dobrane pod nasz projekt. Wyobraźcie sobie, że macie projektanta i zamiast powiedzieć „zbuduj mi to coś”, dajecie mu precyzyjne instrukcje i pokazujecie piękne projekty znalezione gdzie indziej, żeby miał się na czym oprzeć.
Powiedzmy, że projektujemy aplikację mobilną. Usuwam na chwilę system projektowy. Prompt brzmi: aplikacja do śledzenia nawyków, w stylu Notiona, i ma wyglądać przepięknie.
Zanim jednak zaczniemy promptować, przeszukujemy serwisy z inspiracjami. Pinterest jest świetny — pokazuje mnóstwo różnych aplikacji i możecie znaleźć taką, która rezonuje z waszym gustem. Spójrzcie na te projekty, są naprawdę znakomite. Podoba mi się ten konkretny — klikam w obrazek, robię zrzut ekranu, wracam do Claude Design i wrzucam go do rozmowy.
Warto sprawdzić też inne serwisy. Awwwards jest piękny, jeśli chodzi o nagradzane strony internetowe. Godly jest fantastyczny, kiedy szukacie naprawdę wyrazistych projektów. Mobbin to kolejny bardzo dobry adres. No i Land-book. Linki wrzucę pod filmem. Wszystko zależy oczywiście od tego, co budujecie.
(Informacja dodatkowa: Awwwards, Godly, Mobbin i Land-book to katalogi z przykładami projektów interfejsów i stron — Mobbin specjalizuje się w zrzutach ekranów z aplikacji mobilnych, Land-book w landing page’ach).
Piszę więc: „Użyj poniższego obrazu jako referencji przy budowie tej aplikacji. Chcę tylko jedną stronę”. I wysyłam.
Poziom drugi ma dwie części. Pierwsza to właśnie inspiracja wizualna. Widzę, jak na moich oczach powstaje interfejs. Uwielbiam ten aspekt pracy. Projektowanie jest najbardziej niedocenianym elementem każdej twórczości. Realnie wpływa na to, jak ludzie postrzegają produkt i ile są gotowi za niego zapłacić. A to, jak robicie jedną rzecz, jest tym, jak robicie wszystko — dlatego uważam projektowanie za tak istotne. Popatrzcie tylko na różnicę: to jest wynik bez referencji, a to z referencją. Przepaść.
Druga część poziomu drugiego polega na zrozumieniu, że jedna sekcja to za mało. Trzeba iterować — jak przy wszystkim. Wracam więc i dodaję uwagi. Efekt jest nawet interaktywny, co jest fajne. Piszę: „Kiedy zaznaczę wszystkie przyciski, chcę, żeby posypało się konfetti. Chcę też zobaczyć różne ekrany, a każdy ekran ma mieć inny kolor u góry” — żółty, niebieski, zielony. Wysyłam.
Koniecznie prowadźcie z Claude Design normalną rozmowę tam i z powrotem, aż będziecie naprawdę zadowoleni z wyniku. Po chwili schodzę niżej, klikam i sprawdzam: czy jest konfetti? Jest. Przeglądam poszczególne ekrany. To naprawdę dobre, jestem pod wrażeniem. Jedno, co bym zmienił, to kontrast między czernią a niebieskim — poza tym to bardzo dobry punkt wyjścia.
Zasada poziomu drugiego brzmi: nigdy nie próbuj załatwić tego jednym strzałem. Ty reżyserujesz, a potem iterujesz. Ten poziom oszczędza jeszcze więcej pieniędzy, bo jakość projektu jest nieporównywalnie wyższa. Jeśli macie zapamiętać z tego filmu jedną rzecz: iteracja i referencje wizualne są potwornie niedowykorzystywane.
Ale to rodzi jeden problem: budowanie każdej rzeczy od zera jest nie tylko wolne, ale też nieodtwarzalne. Dlatego na poziomie trzecim zaczynamy budować system projektowy.
Poziom 3: własny system projektowy
Pomyślcie o tym tak: brak systemu projektowego to jak zatrudnianie innego wykonawcy do każdego projektu. Wyobraźcie sobie, ile to kosztuje czasu i ile się przy tym marnuje. Z systemem projektowym mamy jednego projektanta o jednym, jasno określonym sposobie pracy — to oszczędza czas i daje spójność.
Powiedzmy, że mamy aplikację, której wygląd nam się podoba. Ekran z podsumowaniem miesiąca wygląda naprawdę ostro, a powstał z jednego promptu.
Przechodzę do opcji udostępniania. Mały trik: mogę opublikować to jako artefakt. Dostanę publiczny adres URL, który wyślę zespołowi z pytaniem, co o tym sądzą. Publikujecie to w sieci i kopiujecie link.
Chcę jednak, żebyście zrobili coś innego: wejdźcie w udostępnianie, wybierzcie project.html, pobierzcie całość jako archiwum projektu i kliknijcie eksport. Zapiszcie plik. Potem wracacie na stronę główną, schodzicie na sam dół i klikacie „utwórz system projektowy”.
Teraz opisujemy, czym się zajmujemy: jesteśmy aplikacją do śledzenia produktywności. Dalej pojawia się prośba o dodanie fontów, logotypów i materiałów. Wgrywacie tam plik, który przed chwilą pobraliście. Kiedy dodacie wszystkie notatki, klikacie „przejdź do generowania”, a potem „generuj”. W tym momencie powstaje wasz system projektowy.
Na tym etapie możecie dorzucić logotypy i cokolwiek innego. Jeśli pracujecie z klientami — bierzecie ich logo i ich typografię. Bardzo przydatny serwis to coolors.co. Przy moim pierwszym startupie technologicznym, tym z pierwszej setki w Wielkiej Brytanii, właśnie tam wygenerowaliśmy paletę marki. Naciskacie spację, kolory się losują, blokujecie te, które wam pasują, i losujecie dalej. Narzędzie jest całkowicie darmowe i świetnie nadaje się do szukania inspiracji. Ale prawdziwy trik polega na tym, żeby znaleźć już istniejące, sprawdzone palety kolorów i z nich skorzystać — są dobrze zestrojone i nie musicie wymyślać koła na nowo.
Efekt wygląda tak: cały system projektowy Streak Mind. Ma źródła, fundamenty treści, transformacje wizualne, znaki rysowane odręcznie. Uwzględnił dosłownie wszystko. Mamy paletę kolorów, mamy nawet opisane animacje. Jest naprawdę piękny. A jeśli chcę coś zmienić albo dorzucić kolejne obrazy, po prostu wrzucam je w lewym dolnym rogu.
Każda firma tego potrzebuje. To coś, na co przedsiębiorstwa wydają tysiące dolarów, a wy uzyskujecie jakość na poziomie profesjonalnego projektanta kilkoma promptami i właściwym procesem.
Kiedy skończycie rozmowę i dopracujecie system, przejdźcie do udostępniania w prawym górnym rogu i wyprowadźcie go poza to środowisko — na własny komputer. Wybieracie project.html, archiwum projektu, klikacie eksport. Macie teraz gotowy system projektowy. Każdy kolejny efekt będzie zgodny z waszym gustem. To jeden plik, którego użyjecie wszędzie.
Problem polega na tym, że sam ten system odnosi się w zasadzie tylko do strony albo aplikacji, którą zaprojektowaliśmy. I tu wchodzimy na poziom czwarty.
Poziom 4: system projektowy dla całej firmy
Wyobraźcie sobie, że mamy uniwersalny system projektowy. Robimy mnóstwo rzeczy: piszemy e-maile, tworzymy prezentacje, mamy CV, prowadzimy rozmowy rekrutacyjne. Możemy wziąć ten jeden system i rozprzestrzenić go wszędzie jak szarańczę. Jest w naszym YouTubie, jest na Instagramie i jest natychmiast rozpoznawalny — bo to wasz system.
Wracam do Claude, wybieram system projektowy Streak Line. Fajne jest to, że narzędzie samo podsuwa pomysły na wykorzystanie. Klikam na „zestawienia kolorów i typografii” i piszę: „Zbadaj zestawienia kolorystyczno-typograficzne dla tego systemu i popraw je”. Wysyłam.
Poza tym pomyślcie o wszystkich rzeczach, które robicie w firmie. Najważniejsza kategoria to prezentacje. Piszę: „Zrób slajdy o produktywności”. Można też robić e-maile — pokażę, jak to wygląda. Napisałem tylko: „Zaprojektuj mi maila”.
Pierwsza rzecz to deck sponsorski. Popatrzcie, ile to daje z jednego strzału. Zrozumiał kolorystykę, schemat, zbudował gotowe slajdy. Ale pewnie chcemy jeszcze coś poprzestawiać. Piszę więc: „Na każdym slajdzie zadbaj o to, żeby wysokość kolorowego pola była taka sama. Chcę też, żeby żaden blok tekstu nie był dłuższy niż dwa zdania. I na każdym slajdzie ma być coś atrakcyjnego wizualnie”. Na pierwszym slajdzie żółty jest za nisko. Wracamy więc do rozmowy — pamiętacie poziom drugi, iteracja — i budujemy szablon.
A teraz mail powitalny. To jest naprawdę świetne. Powiedziałem tylko: „Zbuduj mi to”. Zadał kilka pytań i zrobił. Da się to jeszcze mocno poprawić, ale zwróćcie uwagę, jak bardzo trzyma się marki. Możemy dyskutować dalej, dodać logo, zrobić cokolwiek.
I wreszcie zestawienia kolorów z typografią, o których mówiłem przy systemie projektowym. Zobaczcie, jaka szczegółowość. Mamy różne poziomy nagłówków. „Po nalaniu kawy napiszę jedno zdanie” — uwielbiam to. Ten żółty okrąg wymaga jeszcze dopracowania, ale rozumiecie już, jakie rzeczy da się zbudować, kiedy iterujemy i prowadzimy rozmowę.
Wracam do decku sponsorskiego i widać, że uwzględnił moje uwagi. Chodzi wam przede wszystkim o spójność. Nie bójcie się pięciu, dziesięciu rund poprawek, żeby dojść do stanu, z którego jesteście naprawdę zadowoleni.
Macie teraz cały system załadowany i gotowy. Zbudowaliście go raz i od tej pory każda prezentacja, każdy mail wychodzą w tej samej estetyce. Ja wydałem kiedyś jakieś cztery tysiące dolarów na samą sekwencję mailową. W przeszłości wydałem w moich firmach tysiące dolarów na zaprojektowanie sekwencji e-maili i tego, jak mają wyglądać wizualnie. Claude Design daje umiejętności projektowe ludziom, którzy wcześniej nigdy nie projektowali — i to jest niesamowite.
Ma jednak jedno ograniczenie, które rozwiązuje dopiero poziom piąty.
Poziom 5: zewnętrzna siła ognia — generowanie obrazu i wideo
Na poziomie piątym wprowadzamy to, co nazywam zewnętrzną siłą ognia. To już nie jest sama inspiracja — to tworzenie czegoś od podstaw. Wyobraźcie sobie projektanta, który potrafi tylko odtwarzać to, co zobaczył. Byłby dobry, ale gdybyśmy chcieli czegoś naprawdę unikalnego, dopasowanego do naszej marki, bylibyśmy mocno ograniczeni. Mówię o generowaniu obrazu i wideo.
W praktyce możecie użyć dowolnej platformy. Ja lubię Higgsfield, bo ma świetny interfejs i po prostu dobrze działa. Piszę: „Zaprojektuj mi logo dla mojej aplikacji do produktywności. Ma wyglądać pięknie”. Polecam model Nano Banana 2 Pro, GPT Image 2 też jest dobry — możecie wybrać dowolny. Wybieracie proporcje. 4K to lekka przesada, przy tym zadaniu wolę 2K. I generuję cztery warianty.
(Informacja dodatkowa: Higgsfield to komercyjna platforma agregująca generatory obrazu i wideo różnych dostawców; „Nano Banana” to potoczna nazwa modelu obrazowego Google).
Ale można pójść o krok dalej — i tak właśnie robię większość generowania. Wchodzę w sekcję MCP i CLI. Możecie skopiować konfigurację i podpiąć to bezpośrednio w Claude Code. Link wrzucę pod filmem. Mówicie: „Połącz się z Higgsfield CLI”, otwiera się nowa strona, logujecie się i jesteście gotowi. Potem: „Użyj CLI i zbuduj mi pięć różnych projektów”. Wgrałem tylko system projektowy i dostałem pięć wariantów, z których każdy jest ciekawy. Który jest najlepszy? Ten — bezdyskusyjnie. Zapisuję obrazek i mam gotowe logo.
(Informacja dodatkowa: MCP, czyli Model Context Protocol, to standard podłączania zewnętrznych narzędzi i usług do modeli — dzięki niemu Claude może samodzielnie korzystać z API takiej platformy).
Na tym polega korzyść z podpinania zewnętrznych systemów pod własny system projektowy. Tu chodziło o logo, ale w praktyce można to zrobić dla czegokolwiek. Podoba mi się też ten miś — zapiszę go, bo zauważyłem, że obecność zwierzęcia w identyfikacji naprawdę pomaga w budowaniu marki i w marketingu.
Dzięki generowaniu obrazu i wideo budujecie strony, które wyglądają tak. Wszystkie te animacje powstały z jednego promptu. Zatrzymują scrollowanie, da się je zoptymalizować pod mobile, mają własny krój pisma — to przenosi Claude Design na inny poziom. Tu drugi przykład, strona Monolith — wyciszam ją, bo ma dźwięk. Dokładnie ten sam proces. Scrollujecie i po prostu tworzycie zasoby, strony, filmy i obrazy, które podnoszą odbiór całości. A tę stronę zbudowałem, korzystając z generowania wideo w Higgsfield — trzyma spójny, wyrazisty styl. I wszystko to da się zrobić wewnątrz Claude.
Łącząc systemy projektowe z zewnętrzną siłą ognia, dostajecie obrazy i projekty, jakich nie uzyskacie, korzystając wyłącznie z Claude. Co prowadzi nas do poziomu szóstego.
Poziom 6: ruch — animacje, wykresy, 3D
Poziom szósty otwiera cały świat możliwości w treściach. Chodzi o nadanie rzeczom ruchu. To mogą być piękne animacje HTML, mogą być trójwymiarowe sfery. To jest naprawdę potężne.
Żeby się do tego dostać, wchodzicie do Claude Design, wybieracie swój system i możecie na przykład stworzyć obiekt 3D — świetnie sprawdzi się na stronie. Możecie też, i to jest jedna z moich ulubionych opcji, poprosić o animację. Piszecie: „Stwórz mi piękną animację HTML wyjaśniającą siłę nawyków i to, jak zmieniają się w czasie”. Klikacie „go”.
Oto coś, co zbudował wcześniej. Małe działania każdego dnia: wypij wodę, przeczytaj kilka stron, ruszaj się przez dwadzieścia minut. Jesteś o jeden procent lepszy każdego dnia — i to się kumuluje. Zbudował do tego naprawdę fajny wykres. Trzydzieści siedem procent lepiej w rok. I oto twoja seria. Świetny wynik jak na jeden strzał — powiedziałem tylko „zbuduj mi coś losowego”.
(Informacja dodatkowa: chodzi o popularną regułę „1 procent lepszy każdego dnia” — poprawa o 1% dziennie przez rok daje wzrost o około 37 razy; autor mówi tu o wartości pokazanej w animacji).
Zbudował mi też makietę 3D. To mogą być sfery, może być cokolwiek. Tu inny przykład: zaprojektował hipersferę, w pełni interaktywną. Możecie wstawić ją na stronę. Albo wyobraźcie sobie trójwymiarowe znaczniki, które pojawiają się w aplikacji, kiedy ktoś osiągnie określoną liczbę zaliczonych dni. To wszystko da się zrobić w systemach Claude Design.
Powód, dla którego przy generowaniu obrazów lubię pracować przez Claude, jest taki, że łącząc Claude z generatorem obrazu, dostajemy lepsze myślenie i lepsze prompty. Dlatego traktuję Claude jako silnik inteligencji projektowej, a coś w rodzaju Higgsfield jako wykonawcę obrazów i filmów.
To jeszcze jeden przykład ruchu, zaprojektowany wczoraj — widać, że radzi sobie z animacją 3D. Stylów jest mnóstwo, wszystko zależy od tego, co budujecie. Nadając rzeczom ruch, tworzymy strony, filmy i treści, które sprawiają wrażenie żywych — dokładnie takie, jakie widzicie w moich materiałach.
Został jeszcze jeden poziom.
Poziom 7: pełne aplikacje produkcyjne
Większość ludzi nigdy nie wychodzi poza poziom pierwszy albo w ogóle nie zaczyna tej drogi. Ale poziom siódmy to szczyt — moment, w którym rzecz przestaje być tylko ładna i staje się faktycznie używalna. Mówimy o pełnych aplikacjach produkcyjnych, zbudowanych z wykorzystaniem wszystkiego, co dotąd omówiliśmy.
Łączymy Claude Design z Claude Code, żeby budować aplikacje produkcyjne, które świetnie wyglądają i mają bazę danych — klienci mogą zakładać konta, my możemy wysyłać im maile, w zasadzie możemy zrobić cokolwiek sobie wymyślimy.
Potrzebne będą dwie rzeczy: Claude i Supabase. Supabase to warstwa, która realnie umożliwia zbudowanie projektu. Nie musicie być mistrzami SQL-a, bo podłączamy Claude do Supabase i pozwalamy im wspólnie zbudować cały backend przechowywania danych.
(Informacja dodatkowa: Supabase to otwartoźródłowa platforma backendowa oparta na bazie PostgreSQL, oferująca uwierzytelnianie, przechowywanie plików i API — bywa opisywana jako alternatywa dla Firebase. Autor w nagraniu wymawia jej nazwę jako „Superbase”).
Sam z tego korzystam, na przykład przy oprogramowaniu, które zbudowałem dla mojej społeczności — czymś w rodzaju mapy drogowej z postaciami, analizą profilu użytkownika i całą masą dodatków. Używam tego praktycznie wszędzie i naprawdę działa to bezproblemowo.
Trik polega na skorzystaniu z czegoś, co nazywa się agent skills od Supabase. Link wrzucę pod filmem — to prompt i przewodnik, które chciałbym mieć, kiedy sam zaczynałem z Supabase. Kopiujecie całość, wchodzicie do Claude i wklejacie.
(Informacja dodatkowa: „skills” to spakowane zestawy instrukcji i dokumentacji, które model wczytuje do kontekstu, żeby poprawnie korzystać z konkretnego narzędzia).
Możecie też podłączyć Supabase bezpośrednio w Claude. Jeśli chcecie budować cokolwiek produkcyjnego, musicie mieć system bazodanowy dostępny wewnątrz Claude. Pokażę, jak łatwe to jest. Schodzicie na dół, klikacie „connectors”, potem „manage connectors”, wyszukujecie Supabase, klikacie — otworzy się nowe okno przeglądarki i połączycie konto. Widzicie, że to daje Claude możliwość zrobienia w Supabase wszystkiego, czego projekt może wymagać.
Teraz prompt: „Stwórz mi stronę logowania z panelem administracyjnym opartym na Supabase. Trzymaj się poniższego systemu projektowego. Załóż nową tabelę w Supabase. Zbuduj stronę z sekcją logowania. Dodaj formularz, w którym użytkownicy podają imię, e-mail, dochód i informacje dodatkowe, a wszystko ma być dostępne po zalogowaniu”.
Na czym polegają te umiejętności Supabase i po co je instalowaliśmy? Opisują one Claude’owi, jak Supabase działa. Dzięki temu Claude przestaje zgadywać — faktycznie rozumie całą infrastrukturę, a to znaczy, że potrafi postawić aplikację, która zapamiętuje dane, dosłownie jednym promptem. Do tego wgrywamy nasz system projektowy.
I mamy naprawdę fajną stronę rejestracji z misiem, którego wcześniej wygenerowałem. Wpisujemy dane — może to być lista oczekujących. Wypełniam: Alex Streak, przedział dochodowy 250 tysięcy i więcej, stanowisko: dyrektor do spraw kawy, kraj: Zjednoczone Emiraty Arabskie. Coś jeszcze? Tak, nawyk, który najbardziej chcę utrzymać, to codzienna wdzięczność. Wybieram hasło i klikam „zarezerwuj miejsce”. Jesteśmy na liście.
Sprawdźmy, czy da się zalogować. Klikam „zaloguj się”, mamy osobne strony logowania i rejestracji. Wpisuję e-mail i hasło, klikam „zaloguj”. Wraca komunikat o nieprawidłowych danych — dlatego, że domyślnie po utworzeniu formularza system wymaga potwierdzenia adresu e-mail. To ustawienie w Supabase. Możecie je wyłączyć z poziomu Claude, mówiąc: „wyłącz automatyczne potwierdzanie”. Przy testowaniu bardzo się to przydaje. To zabezpieczenie: sprawia, że rejestrujący się musi potwierdzić, że to naprawdę on. Łatwo je wyłączyć — możecie poprosić Claude albo zrobić to sami.
Pokażę, jak to wygląda w panelu, bo warto wiedzieć. W Supabase wybieracie projekt, klikacie „authentication” po lewej, potem „sign in and providers”. Widzicie listę dostawców, w tym e-mail. Jest tam opcja „confirm email” — odznaczacie ją i zapisujecie zmiany. Tyle. Choć przy pracy z Claude w zasadzie nie musicie tam zaglądać.
Wracamy i logujemy się ponownie. I proszę — jesteśmy w środku. Dyrektor do spraw kawy, Zjednoczone Emiraty Arabskie, imię, wszystkie dane na miejscu. Wszystko zbudowane na umiejętnościach Supabase.
Ale prawdziwa siła tych umiejętności ujawnia się gdzie indziej. Projekt i funkcjonalność aplikacji to jedno, a jej bezpieczeństwo to zupełnie inna sprawa. Kolejna rzecz, którą możemy zrobić, to uruchomić doradców bazy danych Supabase i zobaczyć, co zgłaszają. To również część tej umiejętności — pomaga chronić to, co trzymacie w Supabase. Popatrzcie: ostrzeżenie bezpieczeństwa, wyłączona ochrona przed wyciekłymi hasłami. Jedna uwaga wydajnościowa. Brak luk w zabezpieczeniach na poziomie wierszy. To daje wam realną kontrolę.
(Informacja dodatkowa: „bezpieczeństwo na poziomie wierszy” (RLS) to mechanizm PostgreSF-a ograniczający dostęp użytkownika do konkretnych rekordów w tabeli — bez niego dane wszystkich użytkowników mogą być dostępne dla każdego zalogowanego).
Możecie potem powiedzieć: „Świetnie, przeprowadź mnie krok po kroku, jak to naprawić, i wskaż wszystko inne, co mogłem przeoczyć”. Claude rozumie, jak to działa.
To wszystko mógłby być formularz rejestracji dla waszej firmy, z waszą marką, waszym projektem, dokładnie takim, jakiego chcecie.
Zakończenie
Omówiliśmy siedem poziomów Claude Design. Ale to wszystko niewiele znaczy, dopóki nie mamy agentowego systemu operacyjnego, który prowadzi naszą firmę i nasze życie osobiste — a tego, jak go zbudować, nauczymy się w kolejnym filmie.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Pierwszy wynik zawsze jest generyczny — i to jest cecha, nie błąd
Na czym polega: Jeśli używasz tego samego narzędzia i podobnego promptu co wszyscy, dostaniesz projekt statystycznie najbardziej „bezpieczny” — autor nazywa to papką z fioletowym gradientem. To punkt startowy, nie efekt końcowy.
Jak stosować: Traktuj pierwszą odpowiedź jak szkic od stażysty. Zaplanuj z góry, że po niej nastąpi co najmniej kilka rund poprawek, i nie oceniaj narzędzia po tym, co zobaczysz w pierwszej minucie.
Na co uważać: Pokusa publikacji pierwszego wyniku jest największa właśnie wtedy, gdy nie masz doświadczenia projektowego — bo nie widzisz, co jest z nim nie tak. Poproś kogoś z zewnątrz o rzut oka, zanim cokolwiek wypuścisz.
2.Referencja wizualna daje większy skok jakości niż lepszy prompt
Na czym polega: Zrzut ekranu z projektem, który ci się podoba, wrzucony do rozmowy, zmienia wynik bardziej niż jakiekolwiek doprecyzowanie opisu słowami. Autor pokazuje to jako najostrzejszą różnicę w całym materiale.
Jak stosować: Zanim napiszesz prompt, przejrzyj Pinterest, Awwwards, Godly, Mobbin lub Land-book, wybierz jeden konkretny projekt i wrzuć jego zrzut z krótką instrukcją, czego dokładnie z niego chcesz (układ? kolorystyka? typografia?).
Na co uważać: Referencja to inspiracja, nie licencja. Jeśli budujesz coś komercyjnego, nie kopiuj cudzej identyfikacji na tyle blisko, żeby dało się rozpoznać źródło. Wskazuj też, którą warstwę projektu masz na myśli — inaczej model może przejąć akurat tę, na której ci nie zależy.
3.Iteracja to metoda pracy, nie ratowanie nieudanego promptu
Na czym polega: Autor stawia zasadę: nigdy nie próbuj załatwić projektu jednym strzałem. Pięć do dziesięciu rund uwag to normalny proces dochodzenia do wyniku, z którego jesteś zadowolony.
Jak stosować: Zgłaszaj poprawki pojedynczo i konkretnie — „na pierwszym slajdzie żółte pole jest za nisko”, „zwiększ kontrast między czernią a niebieskim” — zamiast prosić o ogólne „zrób to ładniej”.
Na co uważać: Przy długich rozmowach łatwo zgubić wcześniejsze ustalenia. Kiedy dojdziesz do wersji, która ci odpowiada, wyeksportuj ją, zanim zaczniesz kolejną rundę eksperymentów.
4.System projektowy zamienia jednorazowy projekt w powtarzalny standard
Na czym polega: Bez systemu każdy projekt jest jak zatrudnienie innego wykonawcy. System projektowy to jeden zestaw zasad — paleta, typografia, ruch — którym objęte są wszystkie kolejne materiały.
Jak stosować: Kiedy dojdziesz do projektu, który naprawdę ci się podoba, wyeksportuj go jako archiwum projektu, a potem użyj opcji tworzenia systemu projektowego i wgraj ten plik jako punkt wyjścia.
Na co uważać: System zbudowany z jednego projektu odziedziczy jego ograniczenia — jeśli aplikacja miała tylko ciemne tło, system może nie mieć wariantu jasnego. Zawczasu dorzuć logotypy, fonty i wszystkie warianty, których będziesz potrzebować.
5.Wyeksportuj system poza środowisko czatu
Na czym polega: Autor konsekwentnie każe pobierać zarówno gotowe projekty, jak i sam system projektowy jako plik na dysk, zamiast zostawiać je w rozmowie.
Jak stosować: Udostępnianie → project.html → archiwum projektu → eksport. Ten jeden plik wgrywasz potem do dowolnej nowej rozmowy, do Claude Code albo do zewnętrznego generatora obrazów.
Na co uważać: Plik zawiera całą waszą identyfikację — jeśli pracujesz na materiałach klienta, traktuj go jak dokument poufny. To samo dotyczy publikacji projektu jako artefaktu: dostajesz publiczny URL, więc nie rób tego z niepublikowanymi materiałami.
6.Jeden system, wszystkie kanały firmy
Na czym polega: Ten sam system projektowy obsługuje prezentacje, e-maile, decki sponsorskie, materiały społecznościowe i CV. Efekt to natychmiastowa rozpoznawalność.
Jak stosować: Zrób listę wszystkich formatów, które twoja firma faktycznie produkuje, i przepuść każdy z nich przez system, budując po jednym szablonie. Zbudowane raz, działa przy każdym kolejnym materiale.
Na co uważać: Spójność ma sens tylko wtedy, gdy system jest dobry. Jeśli przeniesiesz na całą firmę projekt, który nie jest dopracowany, powielisz błąd we wszystkich kanałach. Poświęć więcej czasu na sam system niż na pierwszy szablon.
7.Claude jako mózg projektowy, zewnętrzny generator jako ręka
Na czym polega: Autor rozdziela role: Claude odpowiada za myślenie i formułowanie promptów, zewnętrzna platforma (u niego Higgsfield) generuje obrazy i wideo. Twierdzi, że ta kombinacja daje lepsze efekty niż generowanie w oderwaniu.
Jak stosować: Podłącz generator przez MCP albo CLI do Claude Code, wgraj system projektowy i poproś o kilka wariantów naraz — na przykład pięć wersji logo — a potem wybierz.
Na co uważać: To dokłada kolejną płatną subskrypcję do stosu. Autor wspomina, że sam ma nielimitowany dostęp, co nie jest typową sytuacją — policz koszt generowania, zanim wbudujesz to w stały proces.
8.Ruch to osobna dźwignia, nie ozdobnik
Na czym polega: Animacje HTML, wykresy i obiekty 3D powstają z jednego promptu i sprawiają, że materiał wygląda na żywy. Autor pokazuje animację wyjaśniającą kumulowanie się nawyków, zbudowaną bez żadnego przygotowania.
Jak stosować: Wykorzystaj to tam, gdzie masz do wyjaśnienia mechanizm rozłożony w czasie — wzrost, proces, porównanie przed i po. Animacja tłumaczy to lepiej niż akapit tekstu.
Na co uważać: Ruch szybko staje się szumem. Jeden dobrze wybrany element działa; strona pełna animacji męczy i spowalnia ładowanie, zwłaszcza na urządzeniach mobilnych.
9.Do produkcji potrzebujesz bazy danych podpiętej do modelu
Na czym polega: Poziom siódmy to Claude Design plus Claude Code plus Supabase. Podłączenie bazy przez konektor sprawia, że model potrafi postawić rejestrację, logowanie i przechowywanie danych w ramach jednego promptu.
Jak stosować: Zainstaluj umiejętności Supabase, podłącz konektor w ustawieniach Claude, wgraj system projektowy i opisz w jednym promptcie tabelę, formularz i sekcję dostępną po zalogowaniu.
Na co uważać: Autor pokazuje wyłączanie potwierdzania adresu e-mail jako wygodę przy testach — to jest zabezpieczenie przed podszywaniem się i zaśmiecaniem bazy. Jeśli wyłączysz je do testów, włącz z powrotem przed uruchomieniem czegokolwiek publicznego.
10.Uruchom audyt bezpieczeństwa, zanim wypuścisz aplikację
Na czym polega: Umiejętności Supabase pozwalają uruchomić wbudowanych doradców bazy danych, którzy zgłaszają problemy bezpieczeństwa i wydajności — u autora wyszła wyłączona ochrona przed wyciekłymi hasłami.
Jak stosować: Po zbudowaniu aplikacji poproś o uruchomienie doradców, a potem o przeprowadzenie cię krok po kroku przez naprawę każdego zgłoszenia i wskazanie tego, co mogłeś przeoczyć.
Na co uważać: Automatyczny audyt wykrywa typowe błędy konfiguracji, a nie błędy logiki twojej aplikacji. Zielony wynik nie oznacza, że aplikacja jest bezpieczna — szczególnie sprawdź samodzielnie, czy zabezpieczenia na poziomie wierszy faktycznie oddzielają dane poszczególnych użytkowników.