Claude Design od pomysłu do strony w sieci — checklista · Zasób

To jest wersja do trzymania pod ręką. Otwierasz ją w trakcie pracy w Claude Design, odhaczasz kroki po kolei i na każdym etapie zerkasz na licznik sesji. Reguła, która wraca w każdym punkcie: myślenie i planowanie rób tam, gdzie jest tanie; samo budowanie zostaw narzędziu, które robi to najlepiej.

0. Zanim klikniesz — co musisz mieć

Sprawdź, że masz plan płatny: Pro, Max albo zespołowy lub firmowy. Claude Design nie działa na planie darmowym — z darmowego musisz przejść wyżej, żeby w ogóle wejść do narzędzia.
Zapamiętaj, że im droższy plan, tym większą pulę pracy dostajesz w danym oknie czasowym; w tańszym planie dojdziesz odpowiednio krócej.
Przyjmij do wiadomości, jak działa limit sesji: praca zużywa tokeny (token to fragment tekstu, z grubsza kawałek słowa), a im więcej i bardziej złożone rzeczy budujesz, tym szybciej zbliżasz się do końca puli.
Załóż z góry, że zużycie bywa wyższe, niżbyś chciał — i że jeden projekt nie powinien wyczerpać limitu. O to dba kolejność kroków poniżej.

1. Wymyśl markę poza Claude Design

Koncepcję marki opracowujesz w zwykłym czacie Claude, nie w Claude Design. Burza mózgów to długa rozmowa — w Claude Design zżerałaby limit sesji bez pożytku.

Otwórz zwykły czat Claude i zacznij od polecenia w rodzaju: „Tworzę nową markę, będę z niej robił prezentację, logo, wytyczne i stronę — pomóż mi wymyślić spójną koncepcję”.
Doprowadź rozmowę do jednego dokumentu — opisu marki — który zawiera komplet: produkt, odbiorcę, profile klientów, misję, pozycjonowanie, filary marki, ton wypowiedzi oraz tożsamość wizualną (paletę czterech głównych kolorów i wstępne wytyczne typograficzne).
Ustal logo w tym samym czacie: poproś o profesjonalny, minimalistyczny znak, opisz markę, odbiorcę i paletę, wybierz wariant i poproś o drobne korekty.
Wejdź do Claude Design dopiero wtedy, gdy masz gotowy opis marki i gotowe logo. Nie wcześniej.

Jeśli markę już masz, ten krok pomijasz — przejdź do kroku 2 i wskaż istniejące materiały.

2. Zbuduj system marki — fundament, od którego zaczynasz

System marki (design system) to zestaw zasad marki w jednym miejscu: kolory, typografia, logo, styl przycisków. Kiedy raz powstanie, wszystko, co później zbudujesz, wygląda spójnie. Zbuduj go porządnie, bo to twoja specyfikacja na wszystkie przyszłe projekty.

Wejdź do zakładki z systemami marki i kliknij utworzenie nowego.
Podaj nazwę i krótki opis firmy; opcjonalnie wskaż repozytorium kodu oraz pliki z logo i innymi materiałami.
Jeśli markę już masz: wskaż istniejącą stronę, jej adres albo repozytorium — narzędzie przejrzy czcionki, kolory i kształt przycisków i ułoży z nich system. Bądź wybiórczy: podaj kluczowe elementy (logo, paletę, typografię, ewentualnie kilka przycisków), bo każdy dodatkowy materiał zżera tokeny. Całego repozytorium nie oddawaj, chyba że naprawdę siedzi w nim coś istotnego.
Daj narzędziu czas — przetrawienie materiału i ułożenie spójnej specyfikacji potrafi zająć nawet kilkanaście minut i pochłonąć zauważalną porcję tokenów.

Przejrzyj i popraw, zanim zatwierdzisz

Obserwuj na bieżąco, co narzędzie buduje, i zatrzymaj je, gdy zbacza z kursu — taniej przerwać i nakierować od nowa, niż pozwolić mu zbudować cały zły wariant.
Przejdź po kolei elementy, które pokazuje (znak, wariant z napisem, hasło, paletę, typografię, przykładową makietę) i każdy albo zatwierdź, albo zgłoś uwagę.
Zarezerwuj sobie na ten przegląd spokojną chwilę — to nie jest etap do przeklikania w pośpiechu.
Sprawdź licznik po zbudowaniu samego systemu marki: w jednym podejściu, przy umiarkowanej ilości materiału, było to około sześciu procent puli w najwyższym planie. W tańszym planie zje proporcjonalnie więcej.

3. Zbuduj cztery rzeczy: prezentację, stronę, prototyp i film

Wspólny mechanizm jest zawsze ten sam: najpierw przygotuj plan w zwykłym czacie, potem wejdź do Claude Design tylko po to, żeby zbudować, i poprawiaj małymi krokami.

Prezentacja ofertowa (pitch deck)

W zwykłym czacie poproś o strukturę prezentacji i krótkie badanie rynku: „Chcę zrobić prezentację dla inwestorów dla marki X; mam już jej opis; dobuduj do niego strukturę slajdów i zrób krótkie badanie rynku”.
Zatrzymaj narzędzie, jeśli samo zacznie rysować slajdy: „Nie buduj jeszcze prezentacji — daj mi tylko zarys”.
Wróć do Claude Design, wybierz tryb prezentacji, wskaż system marki i nadaj nazwę projektowi.
Wklej gotowy zarys (zwykle setki linijek) i poproś: „Mam opis marki, mam ten zarys, zbuduj na tej podstawie prezentację dla inwestorów”.
Trzymaj slajdy oszczędne w tekście — to materiał, który ktoś będzie omawiał na głos.
Iteruj techniką „zaznacz i skomentuj”: zaznacz element wprost na podglądzie i dopisz krótki komentarz (np. „to logo ma być większe”). Narzędzie wstrzyknie zrzut zaznaczenia i poprawi dokładnie ten fragment — precyzyjniej i taniej niż mglista prośba.
Sprawdź licznik: po systemie marki i tej prezentacji zużycie sięgnęło około jednej trzeciej puli w najwyższym planie.

Strona internetowa

(Opcjonalnie) Zrób szkic układu (wireframe): w trybie szkicu narzędzie dopyta, ile koncepcji naszkicować (np. trzy), jak surowe mają być (wybierz wariant pośredni), jaki klimat i do kogo mówisz. Przy prostej stronie ten etap bywa zbędny — wtedy buduj od razu w pełnej jakości; wireframe przydaje się głównie przy aplikacji albo przy wyborze kierunku dla logo czy opakowania.
Albo ustal układ rysunkiem: kliknij nowy szkic, narysuj prostokątem ramy strony, mniejszymi prostokątami w różnych kolorach oznacz sekcje i podpisz je („pasek nawigacji”, „tekst nagłówka”, „podtytuł”, „tu wideo w tle”, „przycisk akcji”).
Jeśli chcesz tło wideo: przygotuj pomysł, opis sceny i prompty (osobno na obraz, osobno na animację) w zwykłym czacie, wygeneruj materiał w narzędziu do obrazu i wideo, a w Claude Design tylko go osadź. Wskaż plik, poproś, żeby grał w tle w pętli, a tekst nagłówka siedział obok niego, i wklej kilkanaście linijek opisu marki oraz wskazówek co do brzmienia tekstu.
Dopieść stronę przez panel zmian (tweaks): przełącz ton (pamiętaj, że ciemny zmieni też wideo), dobierz teksturę tła, akcent kolorystyczny, przyciemnienie wideo, rytm sekcji, ramkę kadru.
Pilnuj zasady jedna zmiana na raz.

Prototyp aplikacji mobilnej

W zwykłym czacie poproś o pełną specyfikację aplikacji jako „dokument wymagań” — opis, jak ma wyglądać i działać, ekran po ekranie (bywa to ponad osiemset linijek).
Wróć do Claude Design, załóż nowy projekt, przełącz się na właściwy system marki i powiedz wyraźnie, że budujesz pod telefon, nie pod komputer.
Wklej całą specyfikację i puść w ruch; odpowiedz na pytania narzędzia (jak ułożyć ekrany, jak bardzo ma być klikalne, czy chcesz przełącznik trybu jasnego i ciemnego, ile wariantów układu).
Przetestuj tryb ciemny — zieleń marki bywa w nim bardziej wyrazista, a cienie i detale układają się ładniej.
Zrób co najmniej jedną rundę poprawek — po niej prototyp wyraźnie nabiera głębi (pełnej aplikacji w pół godziny nie zaprojektujesz).

Film promocyjny

Załóż projekt typu animacja, wskaż system marki i opis.
Dla lepszego efektu dorzuć osobny zestaw zasad do tworzenia animacji (gotowy plik z instrukcją) i sprecyzuj brief: format poziomy, około dwudziestu–trzydziestu sekund, szybkie tempo, cel — ogłosić markę i co robi, a na końcu wyraźne wezwanie do zapisu na bezpłatny okres próbny.
Jeśli pierwszy efekt jest „grzeczny”, zażądaj więcej życia: „za mało się dzieje, opowiedz historię, dodaj ruchu i grafiki, to ma być duży dzień — ogłaszamy aplikację i zapraszamy ludzi”.
Aby oszczędzić limit, podaj adres ciekawej animacji — narzędzie pobierze stronę, podejrzy jej kod i wplecie podobną scenę bez budowania efektu od zera.
Drobne korekty rób metodą „zaznacz i skomentuj”: zakreśl miejsce („nie podoba mi się to ostre zakończenie, dodaj płynne przejście”) i wyślij.
Sprawdź licznik: cztery rzeczy razem z systemem marki zajęły w sumie około 95% puli w najwyższym planie — niczego nie doszlifujesz do perfekcji w jednej sesji.

4. Opublikuj stronę

Tu projekt przestaje być podglądem na ekranie i staje się stroną pod prawdziwym adresem. Przejdź ścieżkę po kolei.

Przenieś projekt z Claude Design do Claude Code (narzędzia, w którym Claude pracuje z plikami i kodem na twoim komputerze): kliknij udostępnianie i albo pobierz projekt jako ZIP, albo wybierz „przekaż do Claude Code” i wklej gotowe polecenie.
Wyślij projekt do prywatnego repozytorium na GitHubie: poproś Claude Code, żeby utworzył repozytorium i tam wysłał projekt. Jeśli robisz to pierwszy raz, załóż darmowe konto na github.com i poproś Claude Code o połączenie.
Zanim cokolwiek wyślesz, każ Claude Code sprawdzić, czy strona działa lokalnie — łatwo to przeoczyć w pośpiechu.
Połącz repozytorium z Vercelem (usługą, która hostuje stronę, czyli udostępnia ją w internecie): załóż darmowe konto (najprościej logując się tym samym kontem GitHub), dodaj nowy projekt, wskaż repozytorium, kliknij import i wdrożenie.
Odbierz prawdziwy adres — po jakichś sześćdziesięciu sekundach dostajesz adres kończący się na .vercel.app, który możesz komuś podać. Własną domenę podłączysz później, też rozmawiając z narzędziem.

Jeśli zobaczysz błąd 404

Nie panikuj — nic nie zepsuło się na zawsze.
Wróć do Claude Code i opisz sytuację po ludzku: „Wysłałem to na GitHub, zsynchronizowałem z Vercelem, a po otwarciu dostaję błąd 404 — co to znaczy i jak to naprawić?”.
Typowa przyczyna: Vercel szuka pliku startowego o nazwie index.html, a twój plik nazywa się inaczej. Claude Code zmieni nazwę, wyśle poprawkę na GitHub, Vercel sam ją podchwyci — i strona zadziała.

Praca na co dzień po publikacji

Poprawki rób lokalnie, u siebie — widzisz je tylko ty. Gdy któraś ci się podoba, poproś Claude Code, żeby wysłał zmiany na GitHub; Vercel sam je podchwyci i po jakichś trzydziestu sekundach zaktualizuje stronę.
Przed uznaniem strony za skończoną kliknij podgląd prezentacji, przejdź ją i sprawdź, czy przyciski prowadzą tam, gdzie powinny.

5. Wyrób nawyki, które rozciągają limit

To nie lista zakazów, tylko nawyki, które wydłużają twoją pulę.

Pokaż, nie opisuj. Dawaj konkret: zrzuty ekranu, zaznaczone wprost elementy, dorysowane wskazówki, gotowe regulatory z panelu zmian. Im precyzyjniej wskażesz, tym mniej rund poprawek — a poprawki to największy pożeracz tokenów.
Poprawiaj małymi kawałkami. Nie ładuj jednego polecenia z pięcioma zmianami naraz. Trzymaj się zasady jeden wymiar wizualny na polecenie: w jednej prośbie zajmij się układem albo kolorem, albo typografią — nie wszystkim hurtem.
Zbuduj jeden system marki, nie pięć. Zbuduj go dobrze i udostępnij zespołowi. Gdy zmienisz przycisk, logo czy kolor, podmieniasz to w jednym miejscu — w systemie — a nie w każdym projekcie z osobna.
Dobieraj model do etapu. Zostaw mocny Opus 4.7 tam, gdzie planujesz albo robisz poważniejsze zmiany. Do samego budowania i drobnych poprawek przełącz się na lżejszy Sonnet 4.6 (radzi sobie dobrze przy jasnym opisie, a oszczędza limit). Do najdrobniejszych korekt jest jeszcze lżejszy Haiku.
Zaczynaj nową rozmowę, gdy stara się rozrośnie. Długie wątki zaśmiecają kontekst i zużywają więcej puli. Narzędzie samo podpowiada, kiedy nowa rozmowa pozwoli odzyskać kontekst — wyeksportuj wtedy gotowy fragment i pracuj dalej na świeżo.
Eksportuj, gdy taniej zrobić coś gdzie indziej. Narzędzie wyprowadzi projekt do HTML, PowerPointa, Figmy czy Canvy. Jeśli zostaje ci poprawka, którą ręcznie zrobisz w pięć sekund (choćby podmiana psutego logo na slajdzie), zrób ją tam, zamiast tracić minuty i tokeny w Claude Design.

Na co uważać

Logo bywa „poprawiane”. Gdy wgrasz gotowy plik PNG ze znakiem, narzędzie czasem próbuje go zmienić i psuje. Reaguj konkretnie: „Wgrałem logo jako PNG, zostaw je dokładnie takie, jakie jest, nie zmieniaj go”. Z prostym logo z liter zwykle nie ma kłopotu; problem pojawia się przy ozdobnych znakach z drobnymi detalami.
Strona jest budowana pod ekran komputera. Claude Design i Claude Code nie dopasowują układu do telefonu automatycznie. Otwórz stronę u siebie, naciśnij F12 (narzędzia dla twórców strony) i przełącz podgląd na widok telefonu — zwykle zobaczysz, że na małym ekranie układ się rozjeżdża. Poproszone, narzędzia poprawią układ pod mobilne, nie psując wersji na komputer.
Pilnuj licznika na bieżąco, nie po fakcie. Sam system marki to kilka procent puli nawet w najdroższym planie, a komplet czterech projektów dochodzi w okolice jej wyczerpania. Świadomie decyduj, co warto budować w narzędziu, a co taniej przygotować wcześniej w zwykłym czacie.
Nie burz mózgów w Claude Design. Każda rozmowa-planowanie tam zżera limit bez pożytku — przenoś ją do zwykłego czatu.

Jedna myśl na koniec: iteracja jest sednem tej pracy. Nic nie wychodzi idealnie za pierwszym razem i nie musi. Plan dopracuj tam, gdzie to tanie; buduj tam, gdzie to się opłaca; poprawiaj małymi krokami i pilnuj licznika. Twój pierwszy projekt nie musi wyjść idealnie — wystarczy, że wyjdzie na świat.