O czym jest ten film
- Claude Design — narzędzie do projektowania stron, aplikacji, animacji, dokumentów i prezentacji — dostał dużą aktualizację; film przechodzi przez wszystkie nowe funkcje.
- Nowy interfejs użytkownika oraz dostęp do narzędzia zarówno z przeglądarki (claude.ai), jak i z aplikacji desktopowej.
- Zużycie Claude Design wchodzi teraz w ogólny limit subskrypcji Claude’a, zamiast osobnych, bardzo skąpych kredytów.
- Nowa funkcja tworzenia design systemu — także na podstawie repozytorium GitHub.
- Gotowe szablony: prototyp, slajdy, dokument, wireframe, animacja.
- Praktyczne zastosowanie autora: generowanie kilku wariacji jednej sekcji strony (np. Hero) i przenoszenie najlepszej do Claude Code.
- Rozbudowany tryb edycji ręcznej (Simple / Pro / kod) — próba zbliżenia się do Figmy.
- Komentarze na projekcie i zbiorcze zastosowanie wszystkich zmian naraz, by oszczędzać limity.
- Eksport do ZIP, Canvy, Lovable, Gammy, Miro, Replit czy Claude Code.
- Ocena autora: ciekawe narzędzie i alternatywa, ale nie „game changer” — dobrze łączy się z Claude Code.
Redakcyjne tłumaczenie
Wprowadzenie: co się zmieniło
Claude Design — czyli narzędzie do projektowania stron, aplikacji, tworzenia animacji, dokumentów i prezentacji — właśnie dostał jedną ze swoich większych aktualizacji. W tym krótkim materiale przejdziemy przez wszystkie nowe funkcje: co dokładnie da się tutaj zrobić. Pokażę też kilka moich własnych, ciekawych zastosowań — może kogoś z was to do czegoś zainspiruje.
Najłatwiej dostać się do Claude Design bezpośrednio z aplikacji claude.ai — wchodzimy w zakładkę „Design”. Tak samo działa to, jeśli macie aplikację pobraną na komputer: teraz dodali możliwość pracy lokalnie, klikając „Design”. Jak wolicie — to jedno i to samo.
Przede wszystkim zmienił się interfejs. Nowy UI jest trochę przyjemniejszy niż poprzednia wersja. Dziwi mnie jednak, że firma taka jak Anthropic, wyceniana na miliardy dolarów i tworząca produkt dla projektantów, nie potrafi zadbać o detale — zobaczcie, jak mało jest przestrzeni między górną krawędzią a pierwszym nagłówkiem. Mogę się czepiać, ale przez jakiś czas byłem projektantem i po prostu strasznie mnie to razi; jest tu za mało powietrza. Nie przywiązujmy się jednak do tego i zobaczmy, jak funkcjonalność samego produktu może nam pomóc.
Druga rzecz: od teraz korzystanie z tej aplikacji wchodzi w ogólny limit naszej subskrypcji Claude’a. Wcześniej kredyty na Claude Design były osobne i śmiesznie niskie — jeśli ktoś chciał faktycznie coś zrobić, po prostu nie mógł. Teraz wszystko mieści się w jednej subskrypcji, choć oczywiście przez to szybciej zużywamy ogólne limity.
Design system — projektowy fundament
Pierwszą świetną funkcją jest możliwość tworzenia design systemu. Mam już jeden stworzony dla siebie, ale jeśli chcemy zrobić nowy, klikamy plusik.
Jeśli nie wiecie, czym jest design system: najprościej mówiąc to system projektowy, dzięki któremu wszystkie wasze strony, podstrony, aplikacje, prezentacje i dokumenty są utrzymane w tym samym, brandowym stylu. Jeśli chcemy inny styl, tworzymy osobny design system. Dzięki temu nie musimy za każdym razem od nowa tłumaczyć, jak coś ma finalnie wyglądać, ani załączać inspiracji — wszystko jest z góry ustalone.
Design system możemy stworzyć bezpośrednio z poziomu Claude Code. Pracując nad projektem, wywołujemy komendę /design sync, która — jeśli mamy odpowiednie komponenty — zsynchronizuje i przygotuje gotowy system projektowy. Można go też stworzyć bezpośrednio. Ja tak właśnie zrobiłem: w moim Claude Code nie było odpowiednich komponentów, więc wybrałem opcję „create here” i wkleiłem link do mojego repozytorium na GitHubie. Tak było najprościej.
(Informacja dodatkowa: GitHub to platforma do przechowywania i współdzielenia projektów z kodem — autor porównuje ją do „Google Drive dla osób tworzących projekty programistyczne”, gdzie łatwo dzielić się plikami, współpracować i śledzić zmiany.)
Chodzi o mój projekt Cloudmaster, do którego serdecznie was zapraszam. Mam go wgranego na GitHub — kopiuję link, wracam do Claude Design i wklejam. Muszę być oczywiście połączony z GitHubem, ale to nic trudnego. Na samej górze repozytorium opisałem własnymi słowami, czym to dokładnie jest: że to warsztaty i kurs z Claude’a dla nieprogramistów, przedsiębiorców i tak dalej. Wpisałem „test”, żeby to później wyłączyć, i przeszedłem do generowania.
Generowanie — mimo że deklarowano około 5 minut — trwało nieco dłużej, ale efekt jest naprawdę świetny. Znajdziemy go pod zakładką „Design Systems”. Na podstawie samego repozytorium narzędzie stworzyło pełen zestaw zasad projektowych — na razie jest to tekst, ale zaraz zobaczycie też efekt na żywo — dotyczących tego, jak mają wyglądać moje komponenty, czcionka, kolory i cała strona. Wyciągnęło to wyłącznie z folderu, który mu wysłałem: w środku jest na przykład moja strona, którą narzędzie przeanalizowało, wypisało reguły i „przetłumaczyło” na swój język. Dzięki temu wszystkie przyszłe prezentacje, strony i aplikacje przestrzegają tych reguł.
Jeśli macie swój określony styl, na początku polecam po prostu stworzyć taki design system. Nie trzeba do tego załączać repozytorium z GitHuba — to nie jest obowiązkowe — ale znacznie ułatwia sprawę, także przy innych projektach i przy korzystaniu z Claude Code. Jeśli GitHub jest dla was nowością, warto zgłębić temat.
Szablony i konkretne zastosowanie
Mamy już gotowy design system i wybraliśmy go z listy rozwijanej jako styl referencyjny. Co dalej? Możemy wybrać jeden z gotowych szablonów:
- Prototyp — strona, w którą da się klikać.
- Slajdy — prezentacja.
- Dokument.
- Wireframe — szkielet strony, bez większego designu, pokazujący samą funkcjonalność: co gdzie jest i co się gdzie klika.
- Animacja — na przykład filmik sprzedażowy dla warsztatów.
Na nasze potrzeby wybieram prototyp. Widzę mnóstwo filmów na YouTubie, gdzie ktoś tworzy stronę dla fikcyjnej kawiarni — to tak oderwane od rzeczywistości, że aż mi przykro. Ja jestem regularnym użytkownikiem Claude Code i większość rzeczy robię właśnie tam, więc zastanawiałem się, co sensownego można zrobić w Design. Otóż mogę wygodnie tworzyć wariacje różnych rzeczy, zamiast robić to za każdym razem w Claude Code. Testuję tu kilkanaście propozycji, jak mogłaby wyglądać jedna sekcja mojej strony, a potem najlepszą kopiuję i wdrażam w Claude Code. To — przynajmniej dla mnie — bardzo fajne zastosowanie.
Podczas pracy zwykle wybieram też swoje repozytorium na GitHubie, żeby narzędzie odnosiło się stricte do tej konkretnej strony. Następnie wysyłam wcześniej przygotowany prompt: chcę cztery wariacje nowej odsłony sekcji Hero.
(Informacja dodatkowa: sekcja Hero to pierwsza, najważniejsza sekcja strony — z głównym nagłówkiem, podtytułem i przyciskiem.)
Tłumaczę, jak moim zdaniem mogłoby to wyglądać, i proszę o wygenerowanie. Na końcu wybieram model. Do wyboru jest Fable 5 (który — w momencie nagrywania — jutro znika, więc gdy to oglądacie, może go już nie być), Opus 4.8 oraz Sonnet. Zwykle korzystam z Sonnetu albo Opusa 4 — co ciekawe, w Claude Design Sonnet radzi sobie bardzo przyzwoicie, więc tym razem zostaję przy nim.
Jeszcze jedna ważna uwaga: w Design możemy teraz wybierać narzędzia i konektory, z którymi się łączymy. Jeśli chcielibyśmy stworzyć dedykowane zdjęcia czy filmy na stronę, możemy połączyć się na przykład z Higgsfieldem lub innym rozwiązaniem generującym grafikę i wideo — Claude sam ich nie tworzy. Dzięki temu materiały będą osadzone bezpośrednio na stronie. Sam obecnie z Higgsfielda nie korzystam, ale widziałem poradniki innych — działa to dobrze.
(Informacja dodatkowa: Higgsfield [w transkrypcie „Hixfield”] to zewnętrzne narzędzie do generowania obrazów i wideo AI.)
Wynik i edycja ręczna
Po wysłaniu promptu, na otwartym płótnie, które możemy swobodnie przewijać, mamy cztery różne wersje sekcji Hero. Nie oceniajmy dziś, czy są ładne — załóżmy, że coś mi się w którejś nie podoba.
Klikam „Edit” i tu widać kolejną nowość: możemy teraz dużo więcej edytować bezpośrednio. Twórcy najwyraźniej próbują nadgryźć rynek Figmy — oprogramowania do projektowania. Figma jest oczywiście bardziej zaawansowana, ale sporo da się już wyklikać samodzielnie, bez wysyłania promptu. Jeśli nie podoba mi się jakiś przycisk, mogę go zmienić ręcznie.
Po lewej stronie mamy zakładki Simple, Pro oraz kod — możemy więc zmienić coś bezpośrednio w kodzie. Na razie zostańmy w Simple, bo daje w zasadzie wszystkie potrzebne funkcje; Pro oferuje więcej kontroli nad tym, jak wszystko wygląda (jeśli tworzyliście kiedyś strony, będziecie wiedzieć, o co chodzi — można podglądać divy i to, jak są w sobie zagnieżdżone).
W trybie Simple zmieńmy dla przykładu kolor tła na bielszy, poprawmy nieco przezroczystość — drobna zmiana, ale dodaje klimatu. Możemy też zmienić border, czyli obramowanie. I gotowe — zmieniliśmy to ręcznie, bez promptowania i tłumaczenia, o co dokładnie nam chodzi. Tak samo możemy edytować tekst. Naprawdę sporo da się zrobić samodzielnie.
Komentarze i zbiorcze zmiany
To jeszcze nie wszystko — możemy dodawać komentarze. Sam mechanizm to nic odkrywczego, ale pokażę fajny trik. Załóżmy, że nie podoba nam się coś większego, czego sami byśmy nie zmienili — na przykład przeskakująca animacja, którą chcielibyśmy mieć bardziej płynną. Zamiast od razu wysyłać to do Claude’a, dodaję komentarz. Przechodzę dalej: nie podoba mi się przycisk, więc klikam go i dopisuję, że chcę, aby był niebieski.
Gdy zbiorę już wszystkie komentarze, mówię Claude’owi: „zastosuj wszystkie zmiany, które zostawiłem ci w komentarzach”. Wtedy przechodzi przez nie wszystkie naraz, a nie pojedynczo — dzięki czemu nie musi za każdym razem generować strony od nowa i palić kredytów. Bardzo przydatny trik.
Jest jeszcze zakładka służąca podsuwaniu pomysłów — jeśli nie potrafimy wyrazić, co chcemy uzyskać, możemy poprosić o „szalone pomysły”. Ja jednak wolę opisywać dokładnie, czego oczekuję.
Eksport do innych narzędzi
Bardzo ważna funkcja: eksport. Projekt możemy wyeksportować bezpośrednio do folderu ZIP, do Claude’a, do Canvy oraz wielu innych narzędzi — Lovable, Gamma, Miro czy Replit, gdzie moglibyśmy dalej „vibe’ować” kod. Zaczynamy tworzyć tutaj, korzystając z subskrypcji Claude’a, a gdy mamy coś, co ma ręce i nogi, przenosimy to na przykład do Lovable, żeby zbudować bazę danych i pełną, funkcjonalną aplikację. Tu tylko projektujemy, a we właściwym narzędziu wdrażamy.
Prezentację możemy przenieść do Canvy, a przy współpracy z Claude Code — z powrotem do Claude Code. Mimo wszystko chyba najłatwiej wyeksportować projekt do folderu ZIP, który później odpalimy w Claude Code, w Kodeksie, w Hermesie czy gdziekolwiek pracujemy.
Animacje i prezentacje
Możemy też tworzyć animacje. Pokażę jedną, którą stworzyłem — prompt był bardzo prosty: dodałem swoją stronę i zaznaczyłem, że chcę porównanie kursów i warsztatów. Sonnet przygotował animację, która trochę nie dała rady — na dole się ucinała. To pokazuje drobną różnicę w stosunku do Opusa, który przygotował znacznie lepszą wersję. Można tu dodać własne zdjęcia, lektora, a całość pobrać i dowolnie edytować. Jak na jedno prymitywne polecenie — „stwórz animację omawiającą, czym są warsztaty plus kurs, a czym sam kurs z naszej strony, zrób to w naszym stylu” — wynik jest naprawdę przyzwoity.
Claude Design to również przyzwoite miejsce, by zacząć prezentację. Możemy poprosić o szablon albo zarys tematów, a potem wyeksportować to do Canvy — pod przyciskiem „Share” klikamy „Send to” i wysyłamy. Z prezentacją działa to najlepiej, a drobne poprawki wprowadzimy już ręcznie w Canvie.
Podsumowanie
Podsumowując: to na pewno ciekawe narzędzie i jakaś alternatywa. Nie twierdzę, że to „game changer”, że wszystko zmienia i że projektanci mogą się żegnać i iść pod most — absolutnie nie. Chciałem po prostu pokazać, co jest możliwe i co się zmieniło. Może komuś rozpaliłem żarówkę, może komuś przyda się to w przepływie pracy. Da się to fajnie połączyć z Claude Code, tak jak robię to ja. Myślę, że warto obserwować to narzędzie.
(Informacja dodatkowa: na końcu autor zaprasza na swoje warsztaty i kurs z Claude Code w ramach projektu Cloudmaster — z przedsprzedażą do 14 lipca — oraz do darmowego newslettera.)
10 najważniejszych takeaways — z kontekstem zastosowania
1.Claude Design mieści się teraz w jednej subskrypcji
Na czym polega: Zużycie Claude Design nie jest już rozliczane osobnymi, skąpymi kredytami — wchodzi w ogólny limit subskrypcji Claude’a, dzięki czemu realnie da się coś zbudować.
Jak stosować: Jeśli wcześniej odbiła się wam ściana pustych kredytów, wróćcie do narzędzia — teraz realnie wystarczy limitu na kilka projektów.
Na co uważać: To ten sam pool co reszta Claude’a, więc intensywna praca w Design szybciej wyczerpie ogólny limit, którego potrzebujecie też do Claude Code czy czatu.
2.Design system jako fundament spójności
Na czym polega: Możesz zdefiniować raz kolory, czcionki i komponenty, a wszystkie kolejne strony, prezentacje i animacje będą trzymać ten sam brandowy styl bez powtarzania instrukcji.
Jak stosować: Zanim zaczniesz generować pojedyncze projekty, stwórz design system — zaoszczędzi ci to promptowania „ma wyglądać tak jak…” przy każdym nowym materiale.
Na co uważać: Jakość wygenerowanych reguł zależy od tego, co podasz na wejściu — jeśli źródło jest niespójne stylistycznie, system utrwali ten bałagan.
3.Generowanie design systemu z repozytorium GitHub
Na czym polega: Narzędzie potrafi przeanalizować twoje repozytorium (lub komendę /design sync w Claude Code) i samodzielnie wyciągnąć zasady projektowe z istniejącej strony.
Jak stosować: Wgraj projekt na GitHub, opisz własnymi słowami, czym jest, wklej link i pozwól narzędziu zbudować system — to najszybsza droga, gdy masz już gotowy styl.
Na co uważać: Wymaga połączenia z GitHubem i nie jest obowiązkowe; generowanie trwa dłużej niż deklarowane ~5 minut, więc nie planuj tego „na już”.
4.Wariacje sekcji zamiast projektowania od zera
Na czym polega: Autor używa Design głównie do generowania kilku wariantów jednej sekcji (np. Hero), by potem najlepszą wersję przenieść do Claude Code.
Jak stosować: Poproś o 4 wariacje konkretnej sekcji w jednym promptcie, wybierz najlepszą i skopiuj ją do docelowego środowiska — szybciej niż iterować w samym edytorze kodu.
Na co uważać: To workflow dla osób już pracujących w Claude Code; jeśli nie kopiujesz wyników dalej, zostajesz z ładnymi makietami bez wdrożenia.
5.Wybór modelu ma znaczenie dla jakości
Na czym polega: Do generowania można wybrać model (Sonnet, Opus 4.8, a chwilowo Fable 5). W Design Sonnet radzi sobie zaskakująco dobrze, ale przy animacjach Opus dał wyraźnie lepszy efekt.
Jak stosować: Do stron i sekcji zacznij od Sonnetu (taniej), a przy trudniejszych zadaniach jak animacje sięgnij po Opusa.
Na co uważać: Sonnet potrafi „nie dać rady” — w przykładzie animacja ucinała się na dole; dostępność modeli się zmienia (Fable 5 był wycofywany w dniu nagrania).
6.Ręczna edycja bez promptowania (Simple / Pro / kod)
Na czym polega: Nowy tryb edycji pozwala klikać zmiany bezpośrednio — kolor tła, przezroczystość, obramowanie, tekst — w trybach Simple, Pro i w kodzie, zbliżając narzędzie do Figmy.
Jak stosować: Drobne poprawki rób ręcznie w trybie Simple zamiast opisywać je Claude’owi — to szybsze i nie zużywa limitów. Do zaawansowanej kontroli nad układem przełącz się na Pro lub kod.
Na co uważać: To wciąż nie Figma — do naprawdę zaawansowanego projektowania możliwości są ograniczone.
7.Komentarze + zbiorcze zastosowanie zmian oszczędzają limity
Na czym polega: Zamiast wysyłać każdą poprawkę osobno, zostawiasz komentarze na projekcie, a potem jednym poleceniem każesz Claude’owi zastosować je wszystkie naraz.
Jak stosować: Przy większych zmianach (których nie zrobisz ręcznie) zbieraj uwagi jako komentarze i uruchom je razem — Claude regeneruje stronę raz, nie przy każdej poprawce.
Na co uważać: Ma to sens dla zmian „strukturalnych” (np. płynność animacji); pojedyncze drobiazgi i tak szybciej zmienisz ręcznie.
8.Eksport do wielu narzędzi jako most do wdrożenia
Na czym polega: Projekt można wyeksportować do ZIP, Canvy, Lovable, Gammy, Miro, Replit czy Claude Code i tam kontynuować pracę lub wdrożyć aplikację.
Jak stosować: Traktuj Design jako etap koncepcyjny: doprowadź projekt do sensownego stanu, a bazę danych i pełną funkcjonalność zbuduj już w Lovable czy Replit. Prezentacje eksportuj do Canvy.
Na co uważać: Autor sugeruje, że dla dalszej pracy z kodem najpewniejszy jest zwykły eksport ZIP, który uruchomisz w dowolnym środowisku (Claude Code, Kodeks, Hermes).
9.Konektory do zewnętrznej generacji grafiki i wideo
Na czym polega: W Design można podłączyć konektory (np. Higgsfield) do generowania zdjęć i filmów, których sam Claude nie tworzy — materiały trafiają bezpośrednio na stronę.
Jak stosować: Jeśli potrzebujesz dedykowanych obrazów lub wideo na projektowanej stronie, podłącz odpowiedni konektor przed generowaniem, by osadzić je od razu.
Na co uważać: Autor sam z tego nie korzysta na co dzień — opiera się na poradnikach innych, więc zweryfikuj jakość i koszty konkretnego zewnętrznego narzędzia.
10.Realistyczna ocena: przydatny dodatek, nie rewolucja
Na czym polega: Zdaniem autora to ciekawe, przyzwoite narzędzie i alternatywa, ale nie „game changer” — najlepiej sprawdza się jako uzupełnienie Claude Code.
Jak stosować: Włącz Design do swojego przepływu jako miejsce na szybkie eksperymenty i wariacje, a nie jako zamiennik pełnoprawnego narzędzia projektowego.
Na co uważać: Detale UI samego narzędzia bywają niedopracowane (za mało „powietrza” w interfejsie), a jakość zależy od modelu i wejścia — nie oczekuj gotowych, produkcyjnych projektów bez poprawek.