O czym jest ten film
- Dlaczego projekty generowane przez AI wyglądają identycznie i skąd bierze się efekt „AI slopu”.
- Jak w Claude Design założyć własny system projektowy (design system) i po co w ogóle to robić.
- Wykorzystanie gotowej „skill” do połączenia Claude’a z Higgsfield, żeby wygenerować logotypy, zdjęcia i tekstury dla marki.
- Etap wywiadu: Claude sam dopytuje o markę, zanim cokolwiek zaprojektuje.
- Wgranie wygenerowanych materiałów z powrotem do systemu projektowego, tak by stał się wielokrotnego użytku.
- Zbudowanie strony na bazie gotowego systemu — jednym promptem.
- „Handover”: eksport projektu z Claude Design i przeniesienie go do Claude Code po większe możliwości.
- Koncepcja „jednego ruchomego elementu” — jednej efektownej animacji, która wyróżnia projekt.
- „UI sniping” — podbieranie gotowych komponentów z 21st.dev, Aceternity UI i React Bits jako inspiracji.
- Ponowne użycie systemu projektowego do zupełnie innych zadań, np. animowanych grafik do materiałów wideo.
Redakcyjne tłumaczenie
Problem: wszystko wygląda tak samo
Jeśli kiedykolwiek miałeś wrażenie, że każdy projekt zrobiony w Claude wygląda dokładnie tak samo — nie zwariowałeś. Większość takich projektów wygląda jak „AI slop”, bo powstaje bez właściwego systemu. W tym materiale pokażę nowy system projektowy w Claude, który pozwala tworzyć piękne projekty: grafiki, strony, cokolwiek chcesz — i to w pięciu prostych krokach, które wykona nawet kompletny początkujący.
Sedno problemu jest takie: każda strona, którą projektuje Claude, powstaje z tych samych systemów i tych samych promptów. Jak to przerwać? Zaczynamy od zbudowania bardzo prostego systemu projektowego. Dzięki temu dostajesz powtarzalne projekty, które za każdym razem wyglądają dobrze — niezależnie od tego, co akurat robisz.
Krok 1: zbudowanie systemu projektowego
Wchodzisz do Claude’a i w lewym dolnym rogu klikasz „Design”. Otwiera się Claude Design. Pierwsza rzecz, którą trzeba zrobić, to zbudować system projektowy — czyli po prostu zestaw reguł, których nasza AI będzie się trzymać.
W Claude Design można budować praktycznie wszystko: projekty aplikacji mobilnych, slajdy, dokumenty, wireframe’y. Dla przykładu: wgrałem tam cały swój system i w jednym prompcie dostałem gotowe grafiki utrzymane dokładnie w moim stylu.
Żeby zbudować system, schodzisz na dół, klikasz „Design systems”, potem „Create design system” i „Create”. Ten system odblokuje ci później mnóstwo rzeczy, bo będziesz go używać przy wszystkim, co zbudujesz w przyszłości.
Trzeba dodać trochę informacji. Można podpiąć repozytorium GitHub i wgrać pliki. Ale załóżmy, że pracujemy z klientem — powiedzmy z restauracją serwującą burgery — i nie chcemy produkować wszystkich materiałów ręcznie. Jest na to bardzo dobry sposób.
Podłączenie Higgsfielda i generowanie materiałów marki
Bierzesz gotową „skill” (link w opisie filmu) i wklejasz jej treść do Claude’a. To jest ten krok, który większość ludzi pomija — po prostu wydają polecenie „zaprojektuj” i potem dziwią się, że wychodzi generycznie.
(Informacja dodatkowa: „skill” w ekosystemie Claude’a to spakowany zestaw instrukcji i skryptów, który model wczytuje i wykonuje jak gotową procedurę.)
Skill łączy Claude’a z Higgsfieldem przez CLI. Higgsfield pozwala generować obrazy i wideo — a niedługo wychodzi tam nowy model 2.5, który jest znakomity. Skill zajmie się całą obsługą połączenia, gdy tylko będziesz mieć konto.
(Informacja dodatkowa: w transkrypcie nazwa modelu jest zniekształcona; chodzi o jeden z generatorów wideo dostępnych w Higgsfieldzie.)
Teraz Claude przeprowadza z nami wywiad, żeby zbudować możliwie najlepszy system. Pyta: jaki to produkt albo biznes? Odpowiadam: produkt to restauracja z burgerami, nie mamy jeszcze nazwy — niech będzie coś w stylu „Smashburger”. Klimat: zabawny, energetyczny, premium, wysokiej klasy burgery. Nie mamy jeszcze produktów flagowych, więc na potrzeby demonstracji wymyślamy pięć burgerów. Czego unikać? Wszystkich oklepanych klisz.
Po kilku wymianach zdań dostajesz finalny prompt systemowy. Pokażę taki, który przygotowałem wcześniej — dla „Smash and Grab Burger Co”. Ten prompt każe Claude’owi zbadać paletę barw, przejrzeć parametry i koszty, a po potwierdzeniu — wygenerować materiały. Efektem jest kompletny pakiet projektowy: bogate logotypy, zdjęcia, wszystko, czego marka potrzebuje.
Jeśli nie masz żadnych grafik ani logo, nie musisz nic dodawać — ale jeśli masz, znacząco poprawia to wynik. Korzyść jest taka, że decydujesz raz, a potem używasz tego systemu w kółko, nie myśląc już o niczym.
Krok 2: budowanie wewnątrz systemu
Teraz chcemy zbudować stronę na bazie tego systemu. Claude wygenerował mi już wszystkie obrazy i pliki. Mogę je przejrzeć: mam serię logotypów do wyboru, mam ujęcia typu ciągnący się ser, wielkiego pięknego burgera. Wygląda to naprawdę świetnie — dlatego warto sięgać po najlepsze modele. Wszystko to jest zapisane w prompcie, więc można po prostu z tego korzystać.
W kroku drugim schodzisz na dół i dodajesz te pliki: klikasz „Browse” i wgrywasz wszystko, co powstało w kroku pierwszym. Jeśli pracujesz z istniejącą marką, możesz jej materiały zescrapować Firecrawlem albo po prostu wgrać ręcznie.
(Informacja dodatkowa: Firecrawl to usługa, która pobiera zawartość stron internetowych w formacie przyjaznym modelom językowym.)
Wchodzisz kolejno do folderów. Zawartość zależy oczywiście od marki — u mnie są składniki, są nawet pakiety tekstur: „czarny dym”, „przypalona stal”. Skill zarządza tym wszystkim.
Na koniec kopiujesz opis marki — skill też go dostarcza, jest to wyjaśnienie, co właściwie próbujesz osiągnąć. Wklejasz go jako notkę, edytujesz, jeśli trzeba, i klikasz „Continue to generation”. To zajmie około pięciu minut i polecam użyć do tego modelu Claude Fable — to najmocniejszy i najbardziej zdolny model, a mocne modele kochamy w stu procentach.
Gdy skończy, zjedź na dół — zobaczysz projekty, systemy projektowe i szablony. Klikam w „Design systems” i otwieram ten, który zbudowałem wcześniej: system „Smash and Grab Burger Co”. Wszystko jest opisane, wszystkie wgrane obrazy marki są na miejscu. To jest teraz uniwersalny zasób, którym można się dzielić z kimkolwiek. Można też edytować uprawnienia dostępu. A kiedy dajesz mu jakikolwiek feedback, sam go wdraża.
Na start dajemy prompt: „Zbuduj mi piękną stronę wykorzystującą materiały dla tego biznesu burgerowego. Dodaj animacje przewijania, zrób co trzeba i spraw, żeby wyglądała świetnie”. I zobaczcie, co Claude Design z tym zrobił. Wzbogaciliśmy to obrazami z Higgsfielda, cała paleta barw została zbudowana, są wszystkie nasze burgery. To dopiero pierwsza iteracja — a można z niej zrobić milion rzeczy. Jest patelnia, burger, ser, wszystko czego chcemy, w jednej stronie. Robię się głodny, ale rozumiecie ideę.
Krok 3: przekazanie projektu do Claude Code
Trzeci poziom to zabranie tego, co zbudowaliśmy w Claude Design, do Claude Code. Brzmi skomplikowanie, ale to dosłownie dwa kliknięcia, a odblokowuje sporo możliwości.
Nazywam to „handoverem”. Zawsze pamiętaj: Claude Code potrafi wszystko to, co Claude Design. Claude Design korzysta z Claude Code — ma tylko trochę dodatkowych systemów wokół.
Załóżmy, że mamy naszą stronę i chcę dodać więcej animacji. Klikam „Share”, wybieram eksport projektu — można wybrać HTML projektu, opublikować jako artefakt do udostępnienia innym albo skopiować link. My wybieramy „Project archive”, klikamy „Export” i zapisujemy do folderu Pobrane.
Potem przechodzę do Claude Code, otwieram nową kartę i piszę: „Zapoznaj się z tym i otwórz mi to na localhoście”. Localhost to po prostu wytworne określenie miejsca, w którym możemy podejrzeć plik na własnym komputerze. Wybierasz ten zip, klikasz „Open” i puszczasz w ruch. I mamy naszą stronę.
Możemy teraz zrobić z tego piękną, interaktywną stronę 3D — z dokładnie tego samego materiału. Można też wyeksportować sam system projektowy, żeby udostępnić go zespołowi. Ja mam już na przykład system projektowy do swoich filmów. Otwierasz go w nowej karcie, klikasz „Share”, eksportujesz jako archiwum projektu — i gotowe. A potem mówisz Claude’owi: „Właśnie pobrałem system projektowy Smash and Grab, to ostatnia rzecz, jaką ściągnąłem. Zaglądaj do niego, kiedy projektujesz dla mnie na tej stronie”.
Krok 4: „jeden ruchomy element”
Rzecz, o której nikt nie mówi przy projektowaniu: jeden strzał nie wystarcza. Chodzi o iterację i dokładanie właściwych elementów. Chcemy mieć w tej stronie coś, co zapiera dech — i podniesie ją na zupełnie nowy poziom.
Nazywam to zasadą jednego ruchomego elementu. Myśl o tym jak o ozdobie: jednej efektownej rzeczy, która sprawia, że strona albo materiał się wyróżnia. Na innej stronie, zbudowanej dokładnie w tym samym systemie, zrobiłem tak samo — jest tam przepiękna animacja na scroll. Powstała za pierwszym podejściem i wygląda fantastycznie.
Problem w tym, że można na naukę tego wydać mnóstwo pieniędzy i czasu. Ja wydałem. Kiedy zaczynałem, nie miałem wąsów — a potem już były. Tyle czasu w to włożyłem. Dlatego można sobie ten czas oszczędzić, korzystając ze skilla — konkretnie skilla do stron 3D (link w opisie).
Wgrywasz skilla i dajesz prompt w stylu: „Użyj poniższego skilla. Zadaj mi pytania i stwórz piękne animowane wideo 3D do osadzenia w tej stronie — użyj grafik, zdjęć i stylu tej marki”. Fajne jest to, że AI naprawdę dopytuje: jak ma to wyglądać, jak chcesz to zmontować, i tak dalej. Dzięki temu da się zbudować coś ładnego.
Pyta na przykład o rodzaj łuku animacji. Jeśli nie wiesz — po prostu zapytaj, co wybrać. Będziemy używać Higgsfielda: sposobów jest wiele, ale u mnie ten daje najlepsze wyniki, testowałem kilka.
Do wyboru: hero ze scroll-scrubbingiem, hero z autoodtwarzaniem w tle albo osobna sekcja. Wybierzmy osobną sekcję — myślę, że to będzie ładne. Ta konkretna to scroll-scrub. Pierwsza opcja to zwykle coś zapętlonego: albo rozwija się w miarę przewijania, albo po prostu stoi i chodzi w pętli, tak że pierwsza i ostatnia klatka są praktycznie identyczne.
(Informacja dodatkowa: scroll-scrub to technika, w której postęp animacji jest sterowany pozycją przewinięcia strony, a nie upływem czasu.)
Potem dostajesz rekomendowaną długość klipu. To wynik masy prób i błędów, żebyście nie musieli ich powtarzać — polecam około 25 sekund.
„UI sniping”: podbieranie gotowych komponentów
Mały trik: coś, co nazywam „UI snipingiem”. To całkowicie w porządku — chodzi o piękne animacje interfejsu, które świetnie wyglądają. Dam wam trzy adresy z wewnątrz.
21st.dev jest świetny — można tam przeszukiwać przyciski. To nie jest materiał sponsorowany, po prostu uważam, że to jest przepiękne. Znajdujesz coś, co ci się podoba. Po lewej stronie masz filtr „najczęściej pobierane”, więc widzisz, co jest popularne. Na przykład klasyczny przycisk albo tamta karuzela z podglądem — wygląda naprawdę dobrze. I to samo da się zrobić z burgerami: kopiujesz kod, wracasz do Claude Code i mówisz: „Zainstaluj to, ale podmień obrazy na burgery”.
Druga sprawa to shadery — Aceternity UI. Ten shader zniekształcający widzieliście pewnie wszędzie. To po prostu kod. Możemy go pobrać i wpiąć do naszej strony albo systemu projektowego.
Trzecie miejsce to reactbits.dev — trochę nowsze, bardziej odważne, gładsze, bardziej premium w klimacie.
Chodzi o to, żeby przeglądać, znaleźć to, co ci się podoba, i po prostu opowiedzieć o tym Claude’owi. A jeśli z jakiegoś powodu nie da się tego pobrać, zrób zrzut ekranu i powiedz: „Podoba mi się ten projekt, odtwórz go”. Możesz nawet wskazać całą stronę i powiedzieć: „Podoba mi się ten styl i klimat, zróbmy coś podobnego”. Ale masz już przecież swój system projektowy, więc to służy wyłącznie jako inspiracja.
I proszę — Claude skończył pracę. Zjedźmy na dół. Spójrzcie na jakość tego burgera. Zjadłbym to teraz. Sposób, w jaki to wjeżdża od góry, jest po prostu nieprzyzwoicie dobry. Można też zrobić, żeby całość zjeżdżała z góry na dół.
A na dole — wyobraźcie sobie, że macie coś takiego dla klienta. „Który burger wybieram? The Getaway? The Double Cross?”. To oczywiście zmyślone burgery, ale widać różnicę.
Krok 5: ponowne użycie systemu do czegokolwiek
To prowadzi nas do kroku piątego. Wracamy do Claude’a: kiedy chcemy cokolwiek stworzyć, możemy po prostu wybrać nasz system projektowy.
Powiedzmy, że chcę zrobić animację — bo animacje są świetne. Mógłbym ją zrobić w systemie burgerowym, ale chcę czegoś innego. Schodzę do wyboru systemu projektowego i czyszczę wybór. Fajne jest to, że mogę zamiast tego wgrać PDF, którego używam — klikam plus, „Attach file” i dodaję plik. To jest właściwie deck w HTML-u. Wszystkie systemy projektowe są w porządku, ale załóżmy, że podoba mi się ten i chcę część tego stylu przenieść do filmu.
Piszę więc: „Zanimuj to zdanie: »Claude Design jest wyjątkowy. Pozwoli ci budować piękne strony z animowanymi wideo 3D i dynamicznymi komponentami UI«. Rozbij to na trzy sekcje”. Potem jeszcze modyfikuję podejście: „Popraw ten prompt tak, żeby wynik był lepszy”. Rezultat jest zdecydowanie lepszy — bierzemy go. Ustawiam Fable 5 i wysyłam.
Po drodze drobiazg: plik nie chciał się załadować, więc wgrałem go ponownie. Jeśli waży ponad 50 megabajtów, nie przejdzie.
To jest coś, czego używam na co dzień. Zbudowałem system projektowy w stylu, który naprawdę lubię, i przekazałem go swojemu montażyście — on dorzuca fragmenty transkryptu z filmu i wpina je w ten szablon. Uważam, że to świetne rozwiązanie, bo wygląda pięknie.
Ale jak z większością rzeczy: trzeba najpierw dobrze ustawić projekt. Im więcej czasu poświęcisz z góry na to, żeby design był dopracowany, tym bardziej ci się to opłaci. Jeśli uda się dobrze ustawić sam system projektowy, potem możesz zrobić wszystko. Na przykład przy Glido, naszym startupie text-to-speech, spędziliśmy sporo czasu, żeby pliki były poprawne — dzięki temu kiedy budujemy prezentacje albo cokolwiek robimy w aplikacji, wszystko czerpie z dokładnie tego samego systemu marki.
(Informacja dodatkowa: Glido to wspominany przez autora startup zajmujący się syntezą mowy.)
Iteracja i ocena wyniku
Claude skończył animację. Zobaczmy, co wyszło — odtwarzam. To naprawdę dobre. Nie jest źle. Podoba mi się minimalistyczny styl.
Co bym poprawił: trochę mocniej wyeksponował tekst. Prawdopodobnie przeredagowałbym prompt: „Chcę widzieć tylko ładne komponenty, nie potrzebuję mnóstwa etykiet”. Krótkie teksty wyjaśniające dodałyby wartości, ale nie mogą być czymś, w co użytkownik musi się wpatrywać. Nie zmuszaj użytkownika do myślenia. Nie każ mu wydatkować zbyt dużo energii poznawczej na zrozumienie, co widzi. Wytnij zbędne elementy i uprość całość.
Ja będę mówił w tle, a to mają być po prostu ładne grafiki, które wspierają to, co opowiadam. Idea jest więc taka: sterujemy modelem, dajemy mu feedback — ale efekt wygląda pięknie, a możliwości projektowych jest naprawdę dużo.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Powtarzalny system projektowy zamiast promptowania od zera
Na czym polega: „AI slop” bierze się stąd, że każde zapytanie startuje z tego samego, domyślnego zestawu reguł. System projektowy w Claude Design to zapisany zbiór reguł marki, który model stosuje przy każdym kolejnym zadaniu.
Jak stosować: Zanim zaczniesz cokolwiek generować, poświęć jedną sesję na zbudowanie systemu — decydujesz raz, korzystasz wielokrotnie.
Na co uważać: System jest tak dobry, jak informacje, które w niego włożysz. Pusty system z ogólnikami da równie ogólnikowe wyniki jak brak systemu.
2.Wywiad przed generowaniem
Na czym polega: Zamiast wydać polecenie „zaprojektuj”, autor pozwala Claude’owi zadać serię pytań o produkt, klimat marki, produkty flagowe i rzeczy do uniknięcia.
Jak stosować: Wprost poproś model, żeby przeprowadził z tobą wywiad, zanim wygeneruje efekt. Odpowiadaj konkretnie — „premium, energetyczny” działa lepiej niż „ładny”.
Na co uważać: Pytanie „czego unikać?” jest kluczowe. Jeśli nie wymienisz klisz, model po nie sięgnie, bo są statystycznie najbardziej prawdopodobne.
3.Materiały wizualne generowane z zewnętrznego modelu
Na czym polega: Skill spinający Claude’a z Higgsfieldem przez CLI pozwala wygenerować logotypy, zdjęcia produktowe i tekstury dla wymyślonej marki bez ręcznej pracy.
Jak stosować: Zastosuj to przy pitchach, mockupach i markach, które jeszcze nie mają materiałów. Wygenerowane pliki wgrywasz z powrotem do systemu projektowego.
Na co uważać: To wymaga osobnego, płatnego konta w usłudze zewnętrznej. Przy realnym kliencie z istniejącą marką lepiej użyć jego prawdziwych materiałów — generowanie ich od nowa rozjedzie identyfikację.
4.Sprzężenie zwrotne: wynik wraca do systemu
Na czym polega: Materiały wygenerowane w kroku pierwszym są wgrywane do systemu projektowego w kroku drugim, razem z opisem marki. Dopiero wtedy system staje się kompletny.
Jak stosować: Traktuj generowanie materiałów i budowę systemu jako jedną pętlę, nie dwie osobne czynności. Bez wgrania plików system nie ma z czego korzystać.
Na co uważać: Pliki większe niż 50 MB nie przejdą przez upload — kompresuj zawczasu.
5.Handover z Claude Design do Claude Code
Na czym polega: Claude Design działa na Claude Code, tylko z dodatkową warstwą. Eksport projektu jako archiwum i otwarcie go w Claude Code odblokowuje pełną swobodę pracy z kodem.
Jak stosować: Zbuduj wersję pierwszą wizualnie w Claude Design, a potem przenieś ją do Claude Code na wszystko, co wymaga edycji kodu, dodatkowych bibliotek czy lokalnego podglądu.
Na co uważać: Po przeniesieniu tracisz wygodne UI systemu projektowego — musisz jawnie wskazać Claude Code, gdzie leży wyeksportowany system, żeby się nim kierował.
6.Jeden strzał nie wystarcza
Na czym polega: Autor podkreśla, że jakość bierze się z iteracji, a nie z jednego doskonałego promptu. Pierwszy wynik to zawsze wersja robocza.
Jak stosować: Planuj minimum trzy rundy: generowanie, ocena, korekta konkretnych elementów. Feedback dawaj precyzyjny („mniej etykiet, mocniejszy nagłówek”), nie ogólny („zrób lepiej”).
Na co uważać: Iteracja kosztuje czas i tokeny. Ustal z góry, co uznasz za wersję gotową, żeby nie polerować w nieskończoność.
7.Zasada jednego ruchomego elementu
Na czym polega: Jedna efektowna animacja — „ozdoba” — decyduje o tym, czy strona wygląda wyjątkowo. Nie chodzi o animowanie wszystkiego.
Jak stosować: Wybierz jeden punkt strony (najczęściej sekcję hero) i tam ulokuj popisowy efekt. Autor poleca osadzoną animację 3D około 25-sekundową i tryb scroll-scrub.
Na co uważać: Animacja jest ciężka do wczytania i łatwo przesadzić. Więcej ruchomych elementów nie daje lepszego efektu — daje chaos i wolniejszą stronę.
8.„UI sniping” jako źródło inspiracji, nie fundament
Na czym polega: Gotowe komponenty z 21st.dev, Aceternity UI i React Bits można skopiować jako kod albo zrzut ekranu i kazać Claude’owi wpiąć je w projekt, podmieniając treść na własną.
Jak stosować: Filtruj po najczęściej pobieranych, żeby zobaczyć aktualne trendy. Kopiujesz kod, wklejasz do Claude Code i mówisz, co podmienić.
Na co uważać: Jak sam autor zaznacza — to tylko inspiracja. Skoro masz już system projektowy, komponent trzeba dopasować do niego, a nie odwrotnie. Sprawdź też licencję każdej biblioteki przed użyciem komercyjnym.
9.Ten sam system obsługuje zupełnie inne formaty
Na czym polega: Autor wykorzystuje swój system projektowy nie tylko do stron, ale też do animowanych grafik wstawianych w filmy na YouTube — montażysta dostaje gotowy szablon i wkleja w niego fragmenty transkryptu.
Jak stosować: Po zbudowaniu systemu wypisz wszystkie formaty, w których publikujesz (strona, prezentacja, grafiki do wideo, dokumenty) i przepuść je przez ten sam system.
Na co uważać: Możesz też wgrać alternatywny system jako plik (np. deck HTML), gdy dane zadanie nie pasuje do głównej marki — pamiętaj wtedy wyczyścić wybór systemu, żeby style się nie zmieszały.
10.Projektuj tak, żeby użytkownik nie musiał myśleć
Na czym polega: Przy ocenie wyniku autor kieruje się prostą regułą: żaden element nie powinien wymagać wysiłku poznawczego ani mrużenia oczu. Woli minimalizm i mocne nagłówki od gęstwiny etykiet.
Jak stosować: Po każdej generacji zadaj sobie pytanie, co można usunąć. Krótkie teksty wyjaśniające zostaw, ale w czytelnym rozmiarze.
Na co uważać: Modele mają skłonność do dorzucania nadmiaru etykiet i dekoracji. Upraszczanie musisz zlecić wprost — samo z siebie się nie wydarzy.