Claude Design w praktyce: jak projektować interfejsy z pomocą AI?

Czym jest Claude Design od Anthropic?

Claude Design to stosunkowo nowe narzędzie Anthropic Labs do tworzenia pracy wizualnej w rozmowie z Claude. W skrócie, wygląda to tak, że opisujesz w czacie, co chcesz zbudować, Claude generuje projekt na canvasie, a potem dopracowujesz go rozmową, komentarzami przypiętymi do konkretnych elementów albo bezpośrednią edycją. Pozwala w ten sposób sprawnie stworzyć prototypy makiet, landing page'y, prezentacji i one-pagerów.

Dodam jeszcze, że stworzony prototyp może zawierać działające interakcje, takie jak wybór terminu, walidację pola czy przejście do kolejnego ekranu. Oczywiście każdą z nich trzeba zamówić i sprawdzić.

W dniu premiery Anthropic wymienił sześć typowych zastosowań tego narzędzia, czyli możemy tworzyć: klikalne prototypy do testów z użytkownikami, makiety funkcji dla product managerów, szybkie eksploracje kierunków wizualnych, prezentacje, materiały marketingowe (landing page'e, grafiki do mediów społecznościowych) oraz tak zwany frontier design, czyli prototypy z głosem, wideo, shaderami, 3D i wbudowanymi funkcjami AI.

Design system w Claude Design: od czego zacząć?

Przy istniejącej marce zacznij od design systemu, ponieważ bez niego model musi sam dobrać kolory, typografię i wzorce komponentów, co utrudnia zachowanie spójności. Anthropic pisze to wprost w przewodniku dla administratorów planów Team i Enterprise i zaleca, żeby konfigurację systemu powierzyć doświadczonemu projektantowi, zanim dostęp dostanie reszta zespołu.

Import design systemu z kodu, plików i materiałów marki

Źródłem może być wszystko, co niesie Twoją identyfikację wizualną:

• kod: repozytorium z biblioteką komponentów (np. w React), z którego Claude czyta komponenty i style,
• prototypy i pliki projektowe: zrzuty ekranu, przepływy, istniejące projekty,
• prezentacje i dokumenty: nawet dobrze zaprojektowany plik PPTX lub PDF wystarczy, żeby wyciągnąć kolory, układy i typografię,
• pojedyncze zasoby: logo, pliki palet, próbki krojów.

Jedno źródło wystarczy do rozpoczęcia pracy, a kolejne materiały powinny uzupełniać kontekst i przedstawiać tę samą wersję identyfikacji. Na tej podstawie Claude generuje UI kit, czyli paletę, typografię, komponenty (przyciski, karty, nawigację) i wzorce układu, czyli odstępy i siatkę. Przetestuj nowe ustawienia na projekcie testowym (np. landingu usługi lub klasycznym dashboardzie), a dopiero po weryfikacji poprawności wyników włącz publikację i ustaw stworzony schemat jako domyślny system organizacji. Od tego momentu wszystkie nowe projekty będą automatycznie inicjalizowane na bazie Twojej konfiguracji.

Trzy rzeczy mają największy wpływ na jakość i warto o nich pamiętać:

Prawdziwe przykłady są lepsze niż specyfikacja. Gotowy landing page mówi o charakterze marki więcej niż sama paleta kolorów.

Jakość importu bezpośrednio zależy od jakości materiałów źródłowych i jest to oficjalnie wskazane ograniczenie. Bałagan w strukturze kodu lub niekompletny plik źródłowy bezpośrednio przełożą się na jakość wygenerowanego interfejsu. Najlepszą praktyką jest zapewnienie tokenom jednego źródła prawdy.

/* jedno miejsce na tokeny */
@import 'tailwindcss';
 
@theme {
  --color-ink: #1c2230;
  --color-paper: #f7f8fa;
  --color-brand: #1f5f8b;
  --color-accent: #d9480f;
  --font-display: 'Literata', serif;
  --font-body: 'Figtree', sans-serif;
  --radius-control: 0.5rem;
}

Powyższy kod przedstawia konfigurację tokenów dla Tailwind CSS 4, przy czym warto wziąć pod uwagę, że sama deklaracja rodziny czcionek w zmiennych nie pobiera automatycznie plików fontów — ich wczytanie i optymalne ładowanie należy skonfigurować osobno. Podobnie zdefiniowane palety kolorów wymagają weryfikacji dostępności poprzez przetestowanie współczynnika kontrastu dla konkretnych par tekstu i tła. O tym, jak zbudować taki system na zmiennych @theme z Tailwind CSS 4, CVA i Radix UI, pokazuję w artykule o design systemie w Next.js od zera.

Duże repozytoria podłączaj przez Claude Code, ponieważ przy bardzo dużych projektach przeglądarka potrafi zwolnić, dlatego Anthropic zaleca synchronizację design systemu komendą /design-sync z poziomu Claude Code (szczegóły niżej).

Jak rozpoznać i uniknąć generycznego wyglądu projektów AI

Przy przeglądzie projektu warto zadać pytanie, czy dobór środków wizualnych wynika z briefu. Poniższe przykłady to lista kontrolna stylistyki, by w ten sposób uniknąć czegoś, co się przyjęło jako AI-slop:

• kremowe tło, kontrastowy szeryf w nagłówkach i terakotowy akcent, czyli paleta łudząco podobna do interfejsu samego Claude,
• prawie czarne tło z jednym jaskrawym akcentem, zwykle kwaśną zielenią albo cynobrem,
• „gazetowy” układ z cienkimi liniami, zerowym zaokrągleniem i gęstymi kolumnami,
• zestaw kart SaaS: treść pocięta na identyczne zaokrąglone karty z tym samym miękkim cieniem i gradientem w roli ozdobnika,
• szablonowe detale: etykieta wersalikami nad każdym nagłówkiem, metadane rozdzielane kropkami, strzałka doklejona do każdego przycisku, numeracja 01 / 02 / 03 przy treściach, które wcale nie są sekwencją.

Oczywiście, każda z tych decyzji projektowych może mieć swoje uzasadnienie. Problem pojawia się w momencie, gdy poszczególne elementy trafiają do interfejsu przypadkowo i bezrefleksyjnie, więc nie są efektem świadomej decyzji projektowej. Jeśli otrzymany brief pozostawia pole do interpretacji, przejmij inicjatywę i narzuć spójny kierunek dla projektu.

Claude Design może też zostać wykorzystany do audytu. Musisz go poprosić o wypisanie wszystkich domyślnych założeń przyjętych w projekcie oraz przedstawienie dla każdego z nich konkretnej alternatywy, ściśle dopasowanej do specyfiki branży klienta. W ten sposób możesz uzyskać bardzo różne pomysły i nie bój się eksperymentować. Czasami, by dojść do jakiegoś sensownego wniosku trzeba kilku iteracji.

Jak pisać prompty do Claude Design? Przykład z rezerwacją wizyty

Warto trzymać się dobrych praktyk, w których skuteczny prompt ma cztery elementy, które wymienia sama dokumentacja, czyli: cel (co budujesz), układ (jak rozmieścić elementy), treść (jakie informacje pokazać) i odbiorcę (kto będzie z tego korzystał). To, o czym naprawdę warto pamiętać, to dwa kolejne elementy, jako ważne uzupełnienie, czyli stany interfejsu i ograniczenia.

Poniżej pokazuję dwa podejścia, zacznijmy od prostego prompta, jako porównanie:

Zrób ładny ekran rezerwacji wizyty dla fizjoterapeuty.

I druga, bardziej właściwa wersja:

Cel: ekran rezerwacji wizyty dla sieci czterech gabinetów fizjoterapii.
Odbiorcy: pacjenci 35–70 lat, głównie na telefonie, często po urazie —
liczy się czytelność i duże pola dotyku.
Układ: mobile-first (360 px), potem desktop (1280 px).
Kroki: gabinet → rodzaj wizyty → termin → dane → potwierdzenie.
Treść: prawdziwe nazwy usług i ceny z załączonego cennika, bez lorem ipsum.
Stany: ładowanie kalendarza, brak wolnych terminów, błąd walidacji
numeru telefonu, termin zajęty w trakcie rezerwacji, błąd sieci, potwierdzenie.
Dane pacjentów: wyłącznie fikcyjne. Terminy i zapis wizyty symulowane;
widoczna informacja „Demo — nie rezerwuje prawdziwej wizyty”.
Ograniczenia: komponenty z naszego design systemu, kontrast minimum
WCAG AA, bez karuzel i animacji wejścia sekcji.
Pokaż trzy różne warianty kroku „termin”. Resztę ekranów zrobimy
po wyborze kierunku.

Oczywiście ten drugi prompt działa znacznie lepiej i to z kilku powodów. Rzeczywiste treści natychmiast weryfikują, czy układ interfejsu zachowa spójność przy długich nazwach usług. Z kolei uwzględnienie stanów brzegowych wymusza zaprojektowanie scenariuszy pomijanych w etapach prototypowania, które ujawniają się w środowisku produkcyjnym. Na koniec, prośba o warianty tylko jednego kroku sprawia, że porównujesz rzeczywiste alternatywy, zamiast przeglądać trzy wersje całego procesu, które różnią się wszystkim naraz.

Sam przepływ od wyboru gabinetu do potwierdzenia to klasyczny formularz wielokrokowy. Jak trzymać w nim stan i walidować kolejne kroki już w kodzie, opisuję w artykule o wielokrokowym formularzu w Next.js.

Pamiętaj też o kilku dodatkowych zasadach:

• Pisz treść w języku produktu. Polskie teksty bywają wyraźnie dłuższe od angielskich, a odmiana potrafi rozepchnąć przycisk, który z angielskim placeholderem wyglądał idealnie.
• Dołączaj kontekst. Zrzuty ekranu obecnej strony, projekty konkurencji, dokumenty z treścią. W ogłoszeniu premiery Anthropic opisuje też narzędzie web capture, które pobiera elementy bezpośrednio z Twojej strony, żeby prototyp wyglądał jak prawdziwy produkt.
• Zaczynaj prosto. Najpierw układ i treść, a potem interakcje, przypadki brzegowe i dopracowanie. Claude dobrze reaguje na przyrostowe prośby.
• Myśl o responsywności od początku. Napisz wprost, czy projekt ma działać na telefonie, tablecie i desktopie, czy tylko na jednym z nich. Przykładowy prompt wyżej zaczyna od 360 px, zgodnie z podejściem mobile first.

Jak poprawiać projekt w Claude Design: czat, komentarze czy edycja na canvasie?

Pierwszy wygenerowany projekt to dopiero początek, ponieważ rzeczywista wartość powstaje na etapie ciągłej iteracji, a oficjalna dokumentacja wyznacza trzy główne ścieżki wprowadzania poprawek:

Przy premierze Anthropic pokazywał też suwaki, które Claude generuje pod konkretny projekt, żeby na żywo stroić odstępy, kolory i układ, a potem prosić o zastosowanie zmiany w całym projekcie. W iteracji najwięcej daje precyzyjne określenie, czego potrzebujesz, np. „zmniejsz paddingi albo marginesy formularza o wartość x px” albo „przesuń przycisk o wartość x px w lewo”. Poza tym dwie techniki warto mieć z tyłu głowy:

• Rozgałęzianie kierunków. Gdy chcesz spróbować czegoś zupełnie innego bez utraty obecnej wersji, napisz np.: „Zapisz to, co mamy, i spróbuj zupełnie innego podejścia”, a przed dalszymi zmianami sprawdź, czy poprzedni wariant jest nadal dostępny.

• Claude jako recenzent. Poproś o przegląd dostępności, kontrastu, hierarchii informacji i ogólnej użyteczności. Jest to dobry pierwszy filtr.

Jak przekazać projekt z Claude Design do Claude Code?

Projekt wygenerowany w Claude Design można skierować na trzy różne ścieżki. Pierwsza to standardowy eksport do plików zewnętrznych, czyli archiwum ZIP, dokumentów PDF i PPTX lub samodzielnego pliku HTML. Druga polega na natywnej integracji z narzędziami partnerskimi, takimi jak Adobe Experience Manager, Canva, Gamma, HubSpot, Miro, Netlify, Vercel czy Wix. Z punktu widzenia dewelopera budującego aplikację we własnym środowisku najważniejsza jest jednak ścieżka trzecia, a jest nią bezpośrednie przekazanie kodu do narzędzia Claude Code (uruchamianego lokalnie w terminalu lub w wersji webowej).

Co dołączyć do eksportu: brief dla agenta kodującego

Sprawdź otrzymane pliki, zanim oprzesz na nich instrukcję wdrożenia. Dokumentacja opisuje przekazanie projektu do agenta kodującego, ale to nie znaczy, że eksport będzie zawierał pełną historię rozmowy ani wszystkie uzasadnienia decyzji. W związku z powyższym przygotuj krótką specyfikację, na przykład design-handoff/brief.md, która zawiera:

• Wybrany wariant i ekrany, które należą do zakresu wdrożenia.

• Najważniejsze decyzje oraz ich powody: co odrzuciliście i dlaczego.

• Stany błędu, ładowania, pustego wyniku i sukcesu.

• Rozróżnienie między symulacją a integracją, którą trzeba zaimplementować.

• Komponenty do wykorzystania oraz warunki akceptacji.

Taka notatka zachowuje swoją wartość użytkową również w kolejnych iteracjach i rozmowach z agentem i jest dobrym miejscem na uzasadnienie wyboru, który możemy w przyszłości modyfikować już pod zmienione założenia.

Prompt wdrożeniowy dla Claude Code: przykład w Astro i Next.js

Najpewniejsza ścieżka przy istniejącym projekcie wygląda tak: wyślij paczkę do lokalnego agenta albo pobierz ją jako ZIP, umieść w katalogu roboczym repozytorium i uruchom tam Claude Code z instrukcją w rodzaju:

Zaimplementuj projekt z katalogu design-handoff/ w tym repozytorium.
Najpierw przeczytaj design-handoff/brief.md i sprawdź zawartość eksportu.
 
Stack: Astro + TypeScript (strict), Tailwind v4, tokeny w src/styles/global.css.
 
Komponenty: używaj istniejących z src/components/ui/. Nowy komponent twórz
tylko wtedy, gdy nie ma odpowiednika; uzasadnij tę decyzję.
 
JavaScript: sekcje statyczne jako czyste komponenty .astro, bez JS.
Kalendarz wymagający JS od początku: wyspa z client:load. Formularz opieraj
na natywnym HTML; walidację i zapis wykonuj także na serwerze.
 
HTML: jeden H1, landmarki header/main/footer, etykiety wszystkich pól.
 
Media: obrazy przez astro:assets, fonty self-hosted z kompletem polskich znaków.
 
Gotowe, gdy: brak poziomego przewijania na 360/768/1280 px, kontrast WCAG AA, widoczny focus i przejście procesu samą klawiaturą.
 
Testy zapisu: konflikt terminu, błąd sieci i ponowienie bez duplikatu wizyty.

W Next.js (App Router) zasady są analogiczne: Server Components domyślnie, 'use client' tylko tam, gdzie jest interakcja, obrazy przez next/image, fonty przez next/font. Przy samodzielnym hostowaniu czcionek należy zweryfikować rzeczywisty zakres obsługiwanych znaków oraz reguły unicode-range. Do poprawnego wyświetlania polskiego tekstu niezbędne są zazwyczaj zestawy latin i latin-ext.

W Astro client:load uruchamia hydratację od razu, a client:visible czeka na pojawienie się komponentu w obszarze widoku. Drugą dyrektywę zostaw dla mniej pilnych interakcji poza pierwszym ekranem; przetestuj też zachowanie przed załadowaniem JavaScriptu. Uzgodnioną specyfikację warto wersjonować razem z kodem. Surowy eksport i rozmowy przejrzyj przed dodaniem do repozytorium: usuń zbędne załączniki i dane, których zespół nie powinien utrwalać.

Synchronizacja design systemu komendą /design-sync

Jeśli wolisz pracować z terminala, podłącz serwer MCP Claude Design do Claude Code:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

Komenda /design w Claude Code: projektowanie w terminalu

W aktualnej dokumentacji Claude Code /design tworzy artboardy na jednym canvasie i publikuje go jako artefakt typu Design:

/design trzy warianty ekranu ustawień konta: profil, powiadomienia, płatności

Wymagane są Claude Code 2.1.265 lub nowszy oraz sesja z dostępem do artefaktów. Samo posiadanie odpowiedniej wersji CLI nie wystarczy: sesje uwierzytelnione kluczem API nie publikują artefaktów, a polityka organizacji może wyłączać tę funkcję.

Artefakt otwierasz w przeglądarce na komputerze i porównujesz warianty. Po zaznaczeniu elementu na artboardzie możesz go zmienić, a edycje zapisują się automatycznie. Każdy artboard wyeksportujesz też do PNG lub PDF. Wybrany wariant przekazujesz następnie do implementacji z własnymi kryteriami odbioru. Publikacja canvasu nie jest wdrożeniem aplikacji. Wskaż istniejące komponenty w prompcie lub CLAUDE.md i po zmianach uruchom testy repozytorium.

Czego Claude Design nie sprawdzi: dostępność, Core Web Vitals i SEO

Claude Design odpowiada za to, jak interfejs wygląda i działa w prototypie, ale już za to, jak zachowa się w wyszukiwarce, na słabym telefonie i z czytnikiem ekranu, odpowiadasz Ty. W tym miejscu zaczyna się praca dewelopera.

Jeśli chcesz wiedzieć, jak mierzyć i poprawiać LCP, INP i CLS już po wdrożeniu, opisuję to w przewodniku po Core Web Vitals.

Testy odbioru formularza rezerwacji

W prototypie zasymuluj poniższe sytuacje. W aplikacji powtórz je z testowym API i bazą danych, aby sprawdzić rzeczywisty zapis.

Automatyczny audyt dostępności traktuj jako jeden z etapów kontroli. Przejdź cały formularz klawiaturą i czytnikiem ekranu. Pamiętaj, że wynik Lighthouse nie zastępuje danych o rzeczywistych interakcjach użytkowników, w szczególności INP.

Kiedy wdrożyć Claude Design w zespole i co z Figmą?

Wdrożenie warto zacząć od jednego prostego, reprezentatywnego zadania. Może to być na przykład moduł wyboru terminu w istniejącym formularzu. Ocena rzeczywistej przydatności rozwiązania wymaga zestawienia czasu potrzebnego na uzyskanie ostatecznie zaakceptowanego wariantu, liczby wymaganych iteracji po przekazaniu projektu do przeglądu oraz zakresu kodu wymagającego bezpośrednich zmian. Należy przy tym pamiętać, że sam czas wygenerowania wstępnej wersji stanowi jedynie ułamek procesu i w niewielkim stopniu odzwierciedla rzeczywisty koszt wdrożenia funkcji w środowisku produkcyjnym.

Jeśli zespół zatwierdza projekty w Figmie, zasady przekazywania prac ustal jeszcze przed rozpoczęciem zadań. Aktualnie Claude Design nie oferuje bezpośredniego eksportu do Figmy, a tryb współtworzenia projektu przez wiele osób jednocześnie działa w ograniczonym zakresie.

Trzeba pamiętać, że wdrożenie dodatkowego narzędzia ma sens tylko wtedy, gdy usprawnia konkretny etap prac i nie zmusza projektanta do odtwarzania całego interfejsu od zera. Dobierając narzędzia do budowy MVP, przeanalizuj osobno sposób obsługi danych, logiki biznesowej oraz samej procedury wdrożenia.

Claude Design: cena, limity i ograniczenia bety

Dostęp. Claude Design nie jest dostępny w darmowym planie, a w becie obejmuje plany Pro, Max, Team i Enterprise. W Enterprise jest domyślnie wyłączony, dopóki właściciel organizacji nie włączy go w ustawieniach, w sekcji Organization settings > Artifacts.

Zużycie. W planach z limitami Claude Design korzysta ze wspólnej puli z czatem, Claude Code i Cowork, podczas gdy dodatkowe użycie jest płatne. Enterprise rozliczany według zużycia nalicza koszty według standardowych stawek API, z limitami wydatków organizacji, grup lub użytkowników.

Udostępnianie. Projekt jest domyślnie prywatny, a udostępniasz go z prawem do podglądu, komentowania albo edycji. Zakres udostępniania zależy od planu i ustawień organizacji, dlatego jeśli jesteś freelancerem, który chce pokazać projekt klientowi z zewnątrz, najpewniej wyeksportujesz go do PDF, jako HTML albo przez konektor (na przykład na podgląd w Vercel).

Znane ograniczenia bety według dokumentacji Claude Design:

• Komentarze inline czasem nie pojawiają się na stronie (widać je w widoku komentarzy)

• Bardzo duże repozytoria mogą spowalniać przeglądarkę, dlatego lepiej podłączać je przez Claude Code

• Przy błędzie „chat upstream error” pomaga otwarcie nowej karty czatu w tym samym projekcie

• W aplikacjach mobilnych projekt obejrzysz, ale edycja na canvasie i zmiana udostępniania wymagają przeglądarki lub aplikacji desktopowej

• Edycja wieloosobowa działa w ograniczonym zakresie
• Brak historii wersji
• Import design systemu jest tak dobry jak jego źródło

Zasady wykorzystania danych opisują osobne dokumenty dla kont konsumenckich i produktów komercyjnych.

Proces pracy z Claude Design krok po kroku: od briefu do wdrożenia

Czy Claude Design jest przydatnym narzędziem? Jak najbardziej tak, ale musimy być świadomi, do czego najlepiej służy, a czego nie jest w stanie zastąpić. Rozsądny proces dla freelancera albo małej firmy, która buduje strony internetowe, powinien wyglądać moim zdaniem tak:

1. Brief z prawdziwą treścią. Zbieramy teksty, cennik, zdjęcia i informacje o odbiorcach, jeszcze zanim otworzysz Claude Design.
2. Design system. Przy istniejącej marce zaimportuj repozytorium albo materiały, a przy nowej zacznij od kilku świadomie wybranych tokenów (czterech, pięciu kolorów i jednego lub dwóch krojów), zamiast pozwalać AI wybierać domyślnie.
3. Trzy kierunki. Poproś o warianty najważniejszego ekranu, a nie całego serwisu.
4. Iteracja. Wybrany kierunek dopracuj komentarzami i edycją na canvasie, a samą strukturę zmieniaj w czacie.
5. Akceptacja klienta. Wyeksportuj PDF do dyskusji albo HTML jako klikalny podgląd.
6. Przekazanie do wdrożenia. Paczka do Claude Code w repozytorium, z własną instrukcją wdrożenia, czyli stos technologiczny, komponenty, definicja ukończenia.
7. Kontrola jakości. Dostępność, Core Web Vitals, SEO i prawdziwe teksty na wąskim ekranie sprawdzasz, zanim cokolwiek trafi na produkcję. Kolejność działań przy samej publikacji rozpisuję w planie uruchomienia strony bez strat w SEO.

Tak przygotowany proces powinien sprawdzić się w boju, jednocześnie eksperymentuj z promptami i pamiętaj, by możliwie jak najwięcej danych doprecyzować. Inaczej AI będzie działało „po swojemu”, co często nie kończy się dla projektu najlepiej.