/ Narzędzie
Czym jest Claude Design i czym różni się od czatu
Claude Design to tryb pracy, w którym zamiast pojedynczej odpowiedzi w oknie rozmowy dostajesz kanwę — powierzchnię z wieloma widokami projektu naraz. Opisujesz, co ma powstać, a narzędzie rysuje gotowy układ, który możesz przewinąć, kliknąć i poprawić na trzy sposoby: zdaniem w rozmowie, komentarzem wstawionym bezpośrednio w projekcie albo ręczną edycją elementu na kanwie.
Różnica względem zwykłej rozmowy z Claude jest prosta i warto ją zrozumieć od razu, bo decyduje o tym, czy w ogóle potrzebujesz tego narzędzia. W czacie powstaje artefakt — jeden podgląd, jedna strona, jedna decyzja naraz. Opisałem ten tryb w tekście o tym, co przy stronie firmowej zrobisz w samym czacie. Claude Design dokłada do tego rzecz, której artefakt nie ma: zapamiętany system projektowy, który obowiązuje w każdym kolejnym projekcie w organizacji.
Do jednorazowej strony wizytówki czat wystarczy. Do marki, która przez rok ma wyglądać tak samo na stronie, w ofercie PDF i na Facebooku, potrzebny jest system. O tym jest cały ten tekst.
/ Problem
Dlaczego pierwsza wersja zawsze wygląda jak z AI
Bo nie dałeś modelowi żadnego ograniczenia. Polecenie w rodzaju „zrób stronę dla mojej firmy” nie zawiera ani jednej decyzji projektowej, więc model musi podjąć je wszystkie sam — a przy braku wskazówek wybiera to, co widział najczęściej. Stąd biorą się fioletowo-niebieskie gradienty, trzy kafle z ikonkami pod nagłówkiem i zaokrąglone karty na białym tle. To nie jest usterka narzędzia, tylko dokładnie to, o co je poproszono.
Wniosek jest praktyczny: poprawa nie polega na wymyśleniu lepszego jednego zdania. Polega na dostarczeniu ograniczeń w dwóch miejscach — w opisie tego, co ma powstać, i w opisie tego, jak to ma wyglądać. Pierwsze to brief, drugie to system projektowy. Reszta tekstu to cztery kroki, w których powstają oba.
/ Krok 1
Brief, którego nie musisz pisać sam
Nie musisz. I to jest miejsce, w którym większość osób odpada niepotrzebnie — na myśl o pisaniu wielostronicowej specyfikacji, której nigdy w życiu nie pisały. Wystarczy jeden akapit własnymi słowami; o resztę dokumentu poproś model, a potem go popraw.
Najlepszy przykład tego podejścia jest jawny. Sergei Chyrkov, projektant prowadzący kanał o pracy z AI, udostępnił publiczne repozytorium całego projektu razem z briefem. Zaczęło się od jednego akapitu (tłumaczenie moje):
Zbuduj jednostronicową, dopracowaną wizualnie stronę marki pizzy, w której najważniejsza jest interaktywna zabawa typu przeciągnij i upuść — użytkownik układa własną pizzę, przeciągając składniki na spód, a potem potwierdza i składa zamówienie. Strona ma być wesoła, szybka i dawać satysfakcję, jak mini-gra osadzona na stronie reklamowej.
Ten akapit nie zawiera ani jednej decyzji projektowej — mówi tylko, co ma powstać i jakie ma robić wrażenie. Rozbudowanie go do briefu autor zlecił modelowi w Claude Code i w repozytorium widać efekt: pierwsza sekcja gotowego dokumentu to dokładnie ten akapit, a pod nim osiem kolejnych, których autor już nie układał.
Warto zobaczyć, co przychodzi z powrotem, bo ta struktura przenosi się na dowolną branżę:
| Sekcja briefu | Co w niej jest |
|---|---|
| Podsumowanie | Jednym akapitem: co powstaje i jakie ma robić wrażenie. |
| Cel | Co odwiedzający ma zrobić. Nie „ładna strona”, tylko „zamówić wycenę”. |
| Struktura strony | Sekcje po kolei, od góry do dołu, z zawartością każdej. |
| Wymagania funkcjonalne | Co ma działać i jak się zachować przy dotyku, na telefonie, przy błędzie. |
| Kierunek wizualny | Nastrój i paleta opisane słowami. |
| Treści | Konkretne dane albo wyraźna zgoda na dane przykładowe. |
| Poza zakresem | Czego świadomie nie robimy. |
Sekcja „poza zakresem” jest tą, którą wszyscy pomijają, i tą, która oszczędza najwięcej czasu. W przywołanym briefie wyklucza ona płatności, konta użytkowników i zapisywanie zamówień — bez tego model dołożyłby logowanie i koszyk, bo „strona sklepu zwykle je ma”. W małej firmie ta sekcja brzmi zwykle: bez sklepu, bez bloga, bez logowania, bez wielu języków.
I tu jest cały haczyk zlecania briefu. Model wypełni każdą sekcję, także te, o których nic mu nie powiedziałeś — a wypełni je tym, co zwykle bywa w takich dokumentach. Dlatego dostajesz dokument do poprawienia, nie do zatwierdzenia. Trzy miejsca, w których warto go przeczytać uważnie:
- Poza zakresem — model nie wie, czego nie chcesz. To jedyna sekcja, którą musisz podyktować sam.
- Cel — czy naprawdę chodzi o telefon, wypełniony formularz, wizytę w lokalu? Domyślnie wpisze coś ogólnego.
- Treści — nazwy usług, ceny, terminy, liczby. Sprawdź je co do jednej, zanim ruszysz dalej.
Uwaga na dane
Jeśli nie podasz cen, model je wymyśli — i będą wyglądały wiarygodnie. Widziałem to w podglądzie kreatora wyceny opisanym w tekście o Claude: stawki za metr bieżący wyglądały jak z cennika stolarni, a wzięły się wyłącznie z modelu. Albo podaj prawdziwe liczby w briefie, albo zaznacz, że są przykładowe i wymagają podmiany przed publikacją.
/ Krok 2
Skąd wziąć inspirację i gdzie przebiega granica
Dokumentacja Claude wymienia wprost, z czego można zbudować system projektowy, i lista jest szersza, niż większość osób zakłada: repozytorium kodu z biblioteką komponentów, zrzuty ekranu, gotowe pliki projektowe, prezentacja PowerPoint lub PDF oddające charakter marki, wreszcie pojedyncze materiały — logo, paleta barw, próbka typografii. Dokumentacja zaznacza przy tym, że wystarczy jedno źródło, choć przy kilku wynik jest lepszy.
To znaczy, że zwykły zrzut ekranu strony, która Ci się podoba, jest pełnoprawnym materiałem wejściowym. Miejsca, w których takie strony się znajduje, są znane: serwisy z wyróżnionymi projektami jak Awwwards, biblioteki interfejsów jak Mobbin, Dribbble i Pinterest. Najbardziej użyteczne bywa jednak coś innego — dwie lub trzy strony z Twojego otoczenia, które naprawdę Ci się podobają, bo one już są dopasowane do tego, jak wygląda rynek Twojego klienta.
Granica, o której nikt nie pisze
I tu potrzebne jest zdanie, którego w poradnikach o tym sposobie pracy zwykle brakuje. Inspiracja i odtworzenie to nie to samo, a różnica ma skutki prawne.
Po stronie bezpiecznej jest kierunek wizualny: temperatura kolorów, poziom kontrastu, rytm odstępów, charakter krojów pisma, to, czy animacje są miękkie czy sprężyste. Tak pracują projektanci od zawsze i nikt nie ma do tego wyłączności. Po stronie ryzykownej jest odtworzenie konkretnego układu razem z jego sekcjami, ilustracjami, ikonami i tekstami — to już korzystanie z cudzej pracy, a w przypadku zdjęć i ilustracji także z cudzych licencji.
Praktyczny sprawdzian mieści się w jednym pytaniu. Postaw obie strony obok siebie i zapytaj kogoś z zewnątrz, co widzi. Jeśli odpowie „to jest ta sama strona w innych kolorach” — poszło za daleko. Jeśli odpowie „obie są ciepłe i spokojne” — jesteś dokładnie tam, gdzie trzeba.
Jest też powód czysto praktyczny, żeby nie kopiować. Układ cudzej strony jest dopasowany do jej treści i jej oferty. Przeniesiony na Twoje usługi zwykle zostawia puste sekcje, które trzeba czymś wypełnić — i tak powstają te akapity o pasji i indywidualnym podejściu, których nikt nie czyta.
Nazwij słowami, co Ci się podoba. Nie „podoba mi się ta strona”, tylko „kremowe tła zamiast czystej bieli”, „bardzo duże, ciasno złożone nagłówki”, „cienie ciepłe, nie szare”. To właśnie te zdania przenoszą się do systemu — a nie sam obrazek.
/ Krok 3
Co to właściwie jest system projektowy
Zestaw reguł, nie obrazek. Dokumentacja Claude opisuje, co powstaje po przesłaniu materiałów: paleta kolorów z barwami podstawowymi, uzupełniającymi i akcentowymi, typografia z krojami, rozmiarami i grubościami, komponenty w rodzaju przycisków, kart i elementów nawigacji oraz zasady układu — siatka i odstępy.
Brzmi abstrakcyjnie, dopóki się tego nie zobaczy. We wspomnianym publicznym repozytorium system jest rozbity na siedem osobnych plików i to jest najlepsze wytłumaczenie pojęcia, jakie znam:
| Plik | Co ustala |
|---|---|
| kolory | Pełna paleta z odcieniami, osobno barwy marki i osobno neutralne tła. |
| typografia | Rozmiary od nagłówka głównego po najdrobniejszy podpis, grubości, odstępy między wierszami. |
| odstępy | Jedna skala — 4, 8, 12, 16, 24 piksele i dalej — używana wszędzie zamiast liczb z palca. |
| zaokrąglenia | Promienie narożników, od ledwie widocznego po pełną pigułkę. |
| ruch | Czasy trwania i krzywe animacji, żeby wszystko przyspieszało i zwalniało tak samo. |
| cienie | Poziomy uniesienia elementów nad tłem. |
| kroje | Konkretne kroje pisma i ich zamienniki, gdy główny się nie wczyta. |
Najciekawsze w tych plikach są komentarze, bo to w nich siedzą prawdziwe decyzje. Przy barwach neutralnych stoi uwaga, że mają być ciepłe, nigdy szaroniebieskie. Przy cieniach — że mają być ciepłe i o niskim kontraście, nigdy neutralnie czarne. To są reguły, nie wartości. I to jest cała różnica między systemem a paletą kolorów: system to decyzje już podjęte, żeby nie podejmować ich ponownie przy każdym kolejnym materiale.
Kiedy dostaniesz wygenerowany system, przejrzyj go, zanim czegokolwiek z nim zrobisz. Szuka się dwóch rzeczy: elementów, które nie pasują do marki (bo model wziął je z inspiracji zamiast od Ciebie), i takich, których zwyczajnie brakuje — najczęściej jest to kolor komunikatu o błędzie i wygląd stanu pustego.
/ Krok 4
Zastosuj system, a potem użyj go ponownie
Zastosowanie systemu do istniejącego projektu to jedno polecenie — prośba o przerysowanie strony zgodnie z zapisanymi regułami. Efekt bywa zaskakujący, bo zmienia się wszystko naraz i strona przestaje wyglądać jak wersja domyślna.
Ale prawdziwy zwrot z tej pracy jest gdzie indziej i to jest najczęściej pomijana część całego podejścia. Ten sam system obsługuje wszystko, co firma pokazuje na zewnątrz. Menu w lokalu, ulotka, oferta w PDF, grafiki na Facebooka i Instagrama, prezentacja dla klienta — każde z nich wychodzi w tych samych kolorach, z tym samym krojem pisma i tym samym charakterem, bo powstaje z tego samego zestawu reguł.
Warto zobaczyć, ile to realnie oszczędza. Bez systemu każdy materiał jest osobną decyzją podejmowaną od nowa, zwykle przez inną osobę i w innym miesiącu. Po roku firma ma pięć wersji własnej czerwieni, trzy kroje pisma i logo w czterech rozmiarach — i nikt nie umie powiedzieć, która wersja jest ta właściwa. Spójność nie bierze się z dyscypliny, tylko z tego, że decyzje są zapisane w jednym miejscu.
/ Produkcja
Od kanwy do działającej strony — czego projekt jeszcze nie załatwia
Tu zaczyna się część, o której poradniki milczą, a którą znam z własnej pracy: strona, którą właśnie czytasz, powstała z kanwy Claude Design. Przebudowałem ją w sierpniu 2026 roku i mogę powiedzieć konkretnie, co kanwa dała, a czego nie.
Dała bardzo dużo: spójny system kolorów działający w wersji jasnej i ciemnej, gotowe układy podstron, rytm odstępów i typografię, których nie musiałem wymyślać. To realna oszczędność tygodni pracy.
Nie dała natomiast niczego z poniższej listy — a to jest właśnie ta część, która dzieli „projekt wygląda na skończony” od „strona działa”:
- Adresy podstron. Kanwa przełącza widoki po swojemu; prawdziwa strona potrzebuje osobnego adresu dla każdej podstrony, żeby dało się je linkować i żeby trafiły do Google.
- Działający formularz. Projekt pokazuje pola i przycisk. To, gdzie trafia zgłoszenie i czy w ogóle dociera, jest osobnym zadaniem.
- Klauzula informacyjna RODO. Pod formularzem zbierającym dane osobowe musi być informacja o przetwarzaniu. Żaden generator jej nie dołoży, bo nie wie, kto jest administratorem.
- Warstwa dla wyszukiwarek. Tytuły, opisy, mapa witryny, dane strukturalne, obrazek do udostępniania w mediach społecznościowych.
- Wydajność i dostępność. Rozmiary obrazów, kontrast tekstu, obsługa z klawiatury.
Jest jeszcze jedna rzecz, której się nie spodziewałem, a która kosztowała najwięcej czasu: przeniesienie projektu do kodu potrafi zepsuć rzeczy, z którymi w projekcie było wszystko w porządku. W tej przebudowie natrafiłem na sytuację, w której reguła stylu zapisana poza właściwą warstwą po cichu wygrywała z regułą nadaną bezpośrednio przyciskowi. Skutek: napis na przycisku wezwania do działania był niewidoczny. W projekcie na kanwie wyglądał poprawnie i nic nie zapowiadało problemu.
Morał nie brzmi „nie warto”. Brzmi: zaplanuj etap wdrożenia jako osobną pracę, a nie jako eksport pliku. Sam eksport Claude Design obsługuje szeroko — paczka ZIP, PDF, prezentacja PowerPoint, samodzielny plik HTML, przekazanie projektu do Claude Code, a także wysyłka do Canvy, Miro, narzędzi Adobe i Vercela. Żadna z tych dróg nie obejmuje jednak domeny ani hostingu; to samo ograniczenie opisywałem przy stronie robionej w czacie i wygląda ono identycznie także tutaj. Inaczej rozwiązuje to Lovable, które hosting ma wbudowany — kosztem tego, że projekt żyje wewnątrz jednej usługi.
Obrazy generowane przez AI
Jeżeli dołożysz do strony ilustracje wygenerowane przez model, warto wiedzieć, kiedy trzeba je oznaczyć, a kiedy nie. Materiały marketingowe własnej firmy nie podlegają obowiązkowi z artykułu 50 aktu o sztucznej inteligencji — rozpisałem to razem z oficjalnymi unijnymi ikonami w tekście o oznaczaniu treści AI.
/ Warunki
Plany, limity i znane ograniczenia
Zanim zaplanujesz na tym pracę, kilka twardych faktów z dokumentacji producenta.
Dostępność. Claude Design działa w planach Pro, Max, Team i Enterprise i pozostaje w wersji beta. W planach Enterprise jest domyślnie wyłączony, więc w większej organizacji trzeba najpierw poprosić administratora o włączenie. Plan Pro kosztuje 17 dolarów miesięcznie przy płatności rocznej albo 20 dolarów przy miesięcznej.
Limit użycia. To jest fakt, który zaskakuje najczęściej: praca w Claude Design liczy się do tego samego limitu, z którego korzystają czat, Claude Code i Cowork. Nie ma osobnej puli na projektowanie. Każde przerysowanie kanwy jest pracą modelu, więc długa sesja nad jednym projektem zużywa limit szybciej, niż sugerowałaby liczba wysłanych wiadomości.
Jak liczone są limity i dlaczego kończą się w środku pracy
Mechanika jest inna, niż podpowiada intuicja — to nie jest pula wiadomości na miesiąc. Limity są dwa i działają równolegle:
- Limit sesji — odnawia się co pięć godzin. To o niego rozbija się dłuższa praca nad jednym projektem.
- Limit tygodniowy — odnawia się o stałej porze przypisanej do konta. Producent prowadzi przy tym osobny licznik tygodniowy dla Opusa, a osobny dla pozostałych modeli.
Na tempo zużycia wpływa, słowami dokumentacji, długość i złożoność rozmów, używane funkcje, wybrany model oraz ustawiony poziom wysiłku — czyli to, jak głęboko model ma się nad zadaniem zastanawiać. Oba te ustawienia widać na pierwszym zrzucie w tym tekście: na dole panelu rozmowy stoi „Opus 5” i „Medium”. Najmocniejszy model przy każdym przerysowaniu kanwy to najkrótsza droga do wyczerpania sesji — i właśnie dlatego Opus ma własny licznik.
Piszę o tym z doświadczenia, bo projekt pokazany w tym tekście wyczerpał limit sesji w trakcie budowania systemu projektowego. Nic nie przepadło — projekt czekał na kanwie — ale trzeba było odczekać do odnowienia limitu i dokończyć go w kolejnej sesji. Wniosek praktyczny: jeżeli planujesz taką pracę na konkretny dzień, nie zakładaj, że zrobisz ją w jednym posiedzeniu. Rozłóż ją na dwie sesje albo pracuj na słabszym modelu tam, gdzie nie potrzebujesz najlepszego.
W ustawieniach konta są paski postępu obu limitów. Warto na nie spojrzeć przed dłuższą sesją, a nie w jej trakcie.
Znane ograniczenia, wymienione wprost przez producenta:
- Narzędzie działa tylko w przeglądarce i w aplikacji na komputer — nie na telefonie.
- Jednoczesna praca kilku osób nad jednym projektem bywa zawodna.
- Przy bardzo dużych repozytoriach kodu pojawiają się opóźnienia.
- Komentarze potrafią się nie zachować.
- Jakość wyniku zależy od jakości źródła, na podstawie którego zbudowano system.
To ostatnie zamyka koło. Cała ta metoda opiera się na tym, że dostarczasz dobre ograniczenia — brief, który wyklucza to, czego nie chcesz, i materiały, które naprawdę oddają kierunek. Narzędzie nie naprawi za Ciebie źle postawionego zadania; wykona je znacznie szybciej.
Jeżeli wolisz nie przechodzić przez etap wdrożenia samodzielnie — projekt z kanwy, wdrożenie po mojej stronie, z formularzem, klauzulą informacyjną i warstwą pod wyszukiwarki — zobacz, jak pracuję.
