Poradnik Claude Design: Jak stworzyć landing page bez kodowania

Fikcyjna marka do ćwiczeń: CircleBack

Na potrzeby tego poradnika wymyśliliśmy markę CircleBack: „jedyne narzędzie do automatycznych odpowiedzi na e-maile, które szanuje to, jak bardzo jesteś zajęty”. CircleBack samo wysyła przypomnienia w wątkach, na które nikt nie odpisał handlowcowi. Działa według trzech reguł, każda kolejna jest bardziej natarczywa:

• Wątki starsze niż 72 godziny ➔ „Circling back on this!” (Wracam do tematu!)
• Wątki starsze niż 7 dni ➔ „Just bumping this to the top of your inbox” (Przypominam się, żeby wiadomość była na górze skrzynki)
• Wątki starsze niż 14 dni ➔ „Is this still on your radar?” (Czy to nadal aktualne?)

Aplikacja łączy się też z CRM, czyli programem do obsługi klientów, i zapisuje tam automatyczne wiadomości tak, jakby handlowiec wysłał je sam. Dzięki temu handlowiec wyrabia normę kontaktów bez żadnego wysiłku. To oczywiście parodia, ale sposób projektowania, który pokażemy, sprawdza się też w zupełnie poważnych projektach.

Krok 1: Konfiguracja systemu projektowania (Design System)

W Claude Design każdy projekt zaczyna się od systemu projektowania (Design System). To zestaw zasad wyglądu marki: kolory, kroje pisma, styl tekstów i gotowe elementy, takie jak przyciski. Claude uczy się ich raz, a potem stosuje na każdej podstronie, którą tworzy. Nie musisz więc w każdym poleceniu przypominać, jak ma wyglądać Twoja marka.

Jak to ustawić:

1. Kliknij przycisk „Create a design system” u góry głównego ekranu. Otworzy się formularz konfiguracji.
2. W polu „Company name and blurb” (nazwa firmy i krótki opis) wklej opis marki CircleBack z poprzedniej sekcji.
3. Pomiń pola na repozytorium GitHub i plik z Figmy (.fig). Przydają się zespołom, które chcą, żeby Claude przejął ich gotowe style. My zaczynamy od zera.
4. W sekcji „Add fonts, logos and assets” wgraj plik PDF z wytycznymi marki (możesz pobrać gotowy: Circleback Brand Guide PDF). Są w nim kolory, kroje pisma i opis tego, jakim językiem marka pisze. Claude oprze się wyłącznie na tym pliku.
5. Kliknij Generate. Claude przeczyta PDF i przygotuje cały system projektowania. Zajmie to około 5 minut.

Krok 2: Przegląd i korekta systemu projektowania

Kiedy Claude skończy, pokaże ekran do sprawdzenia wyniku. System jest podzielony na 5 grup i 19 sekcji. Obejmują kroje pisma, kolory, odstępy, gotowe elementy (przyciski, tabele, formularze) i język marki (Voice).

Porównaj to, co przygotował Claude, z plikiem PDF marki. W każdej sekcji masz dwie możliwości:

• Looks good (wygląda dobrze): wybierz, jeśli wszystko zgadza się z wytycznymi marki.
• Needs work... (wymaga poprawek): wybierz, jeśli coś się nie zgadza, i napisz dokładnie, co zmienić. „Zrób to lepiej” nie wystarczy. Napisz na przykład: „Nagłówki mają wyglądać jak w gazecie. Zamiast Courier użyj wyrazistego kroju szeryfowego.”

Kroki 3 i 4: Uruchomienie prototypu strony głównej

Kiedy zatwierdzisz i opublikujesz system projektowania, kliknij przycisk „New design”. Claude poprosi o kilka ustawień nowego projektu. Wybierz je tak:

• Project type: Prototype (prototyp, dobry wybór dla pojedynczego landing page).
• Project name: CircleBack Homepage
• Design system: Circleback Design System (system, który przed chwilą powstał).
• Fidelity: wybierz High fidelity (wysoka szczegółowość). Claude przygotuje wtedy od razu dopracowany projekt, a nie czarno-biały szkic.

Krok 5: Wysłanie dokładnego briefu (Build Prompt)

Teraz najważniejszy krok: wysyłamy Claude'owi Build Prompt, czyli bardzo dokładny brief. Opisuje on stronę sekcja po sekcji i ustala zasady układu, animacji oraz tego, jak strona reaguje na kliknięcia. Zawiera też listę zakazów.

Skopiuj cały poniższy brief i wklej go do czatu w projekcie CircleBack:

# Circleback Homepage // Build Prompt 

**Mission:** Ship the production marketing homepage for Circleback. Long-scroll, fully interactive, brutalist. Brand system is loaded. Honor it strictly.
**Reader:** A head of sales who just spent 45 minutes guilty about their unanswered inbox. They should land on this page and feel relief, not pressure.

---

## Layout principles
- Asymmetric, left-aligned, max-width 1280px with 80px gutters.
- Visible 1px vertical grid lines at the page margins in `#222`.
- Section padding: 128px vertical on desktop, 64px on mobile.
- 0px border-radius. Everywhere. No exceptions.
- Hairline borders only. No drop shadows.
- Sticky terminal-style nav that fades in after 600px scroll.

---

## Sections (in order)

**01 // HERO**
Massive Courier New display headline: `STOP FORGETTING / TO FOLLOW UP.`
Subhead in Helvetica: `Three perfectly-timed nudges. Then it lets it rest.`
One primary CTA, lime background, no border-radius: `→ Start circling back`.
Beneath the CTA, an animated terminal line with a blinking lime cursor that types-and-deletes through real follow-up phrases on a 2.5s loop: `circling back on this...`, `just bumping this to the top...`, `is this still on your radar?`.

**02 // THE PROBLEM**
A single brutal stat rendered massive: `73% of pipeline dies in the silence.`
Below it in smaller mono: `// Source: every salesperson, ever.`
A 3px lime accent rule running down the left margin of this section.

**03 // HOW IT WORKS**
Three numbered steps in a horizontal three-column grid. Each step in a bordered card: `01_CONNECT` (your inbox), `02_CONFIGURE` (your cadence), `03_WALK_AWAY`.
Each card gets a custom geometric SVG icon drawn in code. Lime numbers, white labels.

**04 // THE CADENCE** *(scroll-triggered animation)*
Build a horizontal SVG timeline that draws itself as the section scrolls into view. Three lime dot markers positioned at 72h / 7d / 14d. As each marker activates, a small follow-up email preview card slides in from the right with real draft copy in Circleback voice. Use `IntersectionObserver` with a 0.3 threshold. Sharp 150ms transitions, no spring physics.

**05 // FEATURES**
Four-column grid: Smart Cadence, Tone Matching, CRM Logging, Polite Auto-Pause. Each card has a custom geometric SVG icon drawn in code (do NOT use icon libraries), a one-sentence description, and a small `// see how` link that expands an inline detail block on click.

**06 // TRY IT** *(the showcase moment — use `window.claude.complete`)*
Interactive widget titled `// GENERATE A FOLLOW-UP`. Two inputs: recipient name, days since last contact. One `// EXECUTE` button. On click, call `window.claude.complete` with a system prompt that produces a Circleback-voice follow-up email (warm, dry, considerate, under 80 words, no exclamation marks) and stream the response into a terminal-style output panel with a blinking lime cursor while generating. This is the killer demo. Make it work flawlessly.

**07 // PRICING**
Three tiers in horizontal cards: Solo Circler ($19/mo), Team Circler ($49/seat), Enterprise Circle of Life (Contact us). Working monthly/annual toggle that smoothly count-up-animates the prices on switch. Middle tier highlighted with a 2px lime border. Each tier lists three features in mono.

**08 // SOCIAL PROOF**
One large dry pull-quote from a fictional Head of Sales: *"I haven't manually written 'just bumping this' in eight months. I am free."* Below it, a strip of six fictional B2B company names rendered as monospace text in lime, no actual logos.

**09 // FOOTER CTA**
Quiet repeat of the primary CTA. Below that, a terminal-style footer that looks like an active CLI session: lime `$` prompt, a fake `circleback --status` command, and output showing made-up live stats (`47,281 follow-ups sent this week / 0 awkward conversations`). At the very bottom, a metadata row in Courier 8pt: DOCUMENT / BUILD / DEPLOYED / VERSION.

---

## Motion spec
- All transitions: 150ms `cubic-bezier(0.4, 0, 0.2, 1)`.
- No spring physics. No bounce. No fade delays over 200ms.
- Cuts beat fades for state changes.
- Scroll-triggered animations via `IntersectionObserver`, threshold 0.3.

---

## Do NOT
- Use any color outside the brand palette (`#0A0A0A`, `#F5F5F5`, `#D4FF00`, `#FF2E92`, `#9A9A9A`).
- Use any rounded corners or drop shadows.
- Use stock illustrations or images of people.
- Use any icon library. Draw every icon as inline SVG.
- Use Inter, Roboto, or any Google Font. Courier New for display, Helvetica for body. Period.
- Add "Powered by AI" badges, sparkle icons, or any ✨ emoji anywhere.

---

## Done looks like
A homepage that a brutalist front-end studio in Berlin would ship for a real YC company in 2026. It should feel like it was built by the same people who built linear.app or vercel.com, except they're selling deeply earnest follow-up software with a completely straight face.

Po wysłaniu briefu Claude zabiera się do pracy. Cała strona będzie gotowa po około 2–3 minutach.

Krok 6: Poprawki przez rozmowę na czacie

Kiedy strona się wczyta, zobaczysz działający prototyp w surowym stylu, który projektanci nazywają brutalizmem: ostre krawędzie, cienkie linie siatki, animowane okno terminala, oś czasu przypomnień z suwakiem i formularze, które da się wypełnić.

Teraz najwygodniejsza część pracy z Claude Design. Żeby coś zmienić, nie musisz zaglądać do kodu ani szukać warstw jak w programie graficznym. Piszesz na czacie zwykłymi zdaniami:

Krok 7: Narzędzia do poprawek bezpośrednio na projekcie

Czat to nie jedyny sposób na poprawki. Nad podglądem strony są 4 narzędzia, którymi zmieniasz projekt bezpośrednio:

• Tweaks (drobne poprawki): zaznacz element i wpisz krótkie polecenie, na przykład „zmień kolor tła na czarny”. Claude wprowadzi zmianę w kilka sekund, bez osobnej rozmowy na czacie.
• Comment (komentarze): przypnij komentarz do wybranego elementu. Przydaje się jako lista spraw do załatwienia albo do zbierania uwag od zespołu.
• Edit (edycja tekstu): najszybszy sposób, żeby poprawić literówkę albo podmienić tekst. Klikasz w tekst i wpisujesz nowy, bez udziału AI.
• Draw (rysowanie): zakreśl pędzlem fragment strony i napisz, co ma się tam zmienić. Claude odczyta Twój rysunek i poprawi wskazane miejsce.

Krok 8: Eksport i przekazanie projektu do Claude Code (Handoff)

Kiedy strona wygląda tak, jak chcesz, kliknij przycisk Share (udostępnij) w prawym górnym rogu. Możesz tam utworzyć link do podglądu albo pobrać projekt jako PDF, PPTX lub archiwum .zip. Najważniejsze są jednak dwie inne opcje:

• Export as standalone HTML: tworzy jeden plik HTML, w którym są już wszystkie style i skrypty. Wgrywasz go na dowolny hosting i strona działa od razu.
• Handoff to Claude Code: przekazuje projekt prosto do programisty. Claude przygotuje polecenie, które wklejasz w terminalu, w folderze swojego projektu, przy uruchomionym Claude Code (to narzędzie Anthropic do pisania kodu). Claude Code połączy się z Twoim projektem w Claude Design, pobierze jego opis i sam zbuduje z niego komponenty, czyli osobne części strony, takie jak nagłówek, cennik czy formularz. Zrobi to w Twoim kodzie, na przykład w projekcie Astro albo React. Wygląd zostaje taki sam jak w makiecie.

Komentarz praktyka: co dzieje się z eksportem po zamknięciu Claude Design

Warsztat powyżej to tłumaczenie materiału Benjamina Arda. Kończy się tam, gdzie kończy się zadanie narzędzia do projektowania: masz ładną makietę i plik do pobrania. Tę część napisałem już sam, po zrobieniu w ten sposób własnego projektu. Najwięcej pytań pojawia się właśnie tutaj, po kliknięciu Export as standalone HTML. Niżej piszę, czego w tym pliku nie ma, kiedy to nie przeszkadza, a kiedy przeszkadza bardzo.

Eksport HTML to makieta, nie strona internetowa

Wygląd jest naprawdę dobry, więc nie o niego chodzi. Brakuje tego, czego narzędzie do projektowania wyglądu po prostu nie robi. Tę listę sprawdzam za każdym razem, zanim wgram stronę na serwer:

• Formularz niczego nie wysyła. Pola, etykiety i przycisk są, ale formularz nie jest podłączony do serwera, nie ma ochrony przed spamem ani zgody na przetwarzanie danych. Strona wygląda, jakby działała, a zapytania klientów do nikogo nie docierają. To najdroższy błąd z tej listy, bo zauważysz go dopiero po kilku tygodniach bez żadnej wiadomości.
• Obrazy zostają takie, jakie wgrałeś. Nie ma lżejszych formatów WebP ani AVIF, nie ma mniejszych wersji na telefon, zwykle nie ma też podanych wymiarów. Przez to strona wolno ładuje się na telefonie, a układ przeskakuje podczas wczytywania. Jedno duże zdjęcie z góry strony zapisane jako PNG potrafi ważyć więcej niż cała reszta strony.
• Nie ma niczego, czego potrzebuje wyszukiwarka. Brakuje opisu strony dla Google (opis meta), obrazka do podglądu w mediach społecznościowych i mapy strony. Nie ma też adresu kanonicznego, czyli wskazania, który adres strony jest właściwy, ani danych strukturalnych, czyli opisu strony zapisanego tak, żeby rozumiała go wyszukiwarka. Brakuje wreszcie pliku robots.txt, który mówi wyszukiwarkom, co wolno im czytać. Google może taką stronę znaleźć, ale nie wie, jak ją opisać w wynikach ani do jakich zapytań ją dopasować.
• Teksty są przykładowe. Nagłówki dobrze brzmią, ale nie mówią nic o tym, czego szuka Twój klient. W makiecie to nie wada, bo ona ma pokazać układ. Zanim strona ruszy, ktoś musi jednak napisać teksty, które odpowiadają na to, co ludzie wpisują w Google.
• Nie ma statystyk odwiedzin ani zgody na pliki cookie. Bez statystyk nie wiesz, czy ktokolwiek na stronę wchodzi. Statystyki bez baneru zgody to z kolei kłopot prawny. Trzeba dodać jedno i drugie.
• Nie ma panelu do edycji treści. Żeby zmienić cenę, godziny otwarcia albo poprawić literówkę, trzeba edytować plik HTML i wgrać go od nowa. Po pół roku zwykle kończy się to tak, że strony nikt już nie aktualizuje.
• Nie ma strony błędu 404, przekierowań ani nagłówków bezpieczeństwa. Nagłówki bezpieczeństwa to ustawienia serwera, które chronią stronę przed częścią ataków. To wszystko drobiazgi do czasu, aż zmienisz adres którejś podstrony albo ktoś sprawdzi zabezpieczenia Twojej strony.

Handoff do Claude Code załatwia mniej, niż się wydaje

Przekazanie projektu do Claude Code to najlepsza funkcja w całym narzędziu. Wyręcza w najbardziej żmudnej pracy: dzieli jeden plik na komponenty w Twoim projekcie i zachowuje wygląd. Wcześniej zajmowało to kilka dni.

Zostają jednak trzy sprawy, od których zależy, czy strona zarabia. Claude Code nie zdecyduje o układzie treści: co ma być na górze, co niżej, a czego na stronie nie powinno być wcale. Nie napisze tekstów pod konkretne zapytania, bo nie wie, czego szukają Twoi klienci. Nie podejmie też decyzji technicznych: jaki hosting, jaka domena, jak przyspieszyć stronę i jak ma działać formularz. Narzędzie robi dziś około osiemdziesięciu procent pracy, którą widać na ekranie. Układ treści, teksty i decyzje techniczne zostają dla Ciebie.

Kiedy eksport naprawdę wystarczy i nie warto nikomu płacić

Robię strony na zlecenie, więc tym bardziej powiem to wprost: czasem wyeksportowany plik w zupełności wystarczy i szkoda wydawać pieniądze na cokolwiek więcej.

• Strona jednorazowego wydarzenia, która ma działać trzy tygodnie i nie musi być widoczna w Google.
• Prototyp do sprawdzenia pomysłu na dwudziestu osobach, którym i tak sam wyślesz link.
• Materiał na rozmowę z inwestorem albo z zespołem, zamiast slajdów.
• Podgląd pomysłu, który pokazujesz wykonawcy, zamiast opisywać go słowami. To zresztą najlepszy załącznik do briefu na stronę internetową: jeden plik zastępuje trzy strony opisu i pozwala uniknąć większości nieporozumień.

Wystarczy odpowiedzieć na jedno pytanie: czy ta strona ma przyciągać nieznajomych z wyszukiwarki, czy tylko służyć ludziom, którym sam wysyłasz link? W drugim przypadku eksport wystarczy. W pierwszym nie, bo w wyeksportowanym pliku nie ma niczego, czego potrzebuje wyszukiwarka.

Ile kosztuje przerobienie makiety na działającą stronę

Pojedynczy landing page z działającym formularzem, poprawnym tytułem i opisem, lżejszymi obrazami i statystykami odwiedzin kosztuje zwykle od kilkuset do około dwóch tysięcy złotych. To mniej niż projekt od zera, bo wygląd jest już gotowy. Jeżeli dochodzi panel do samodzielnej edycji treści, kilka wersji językowych albo połączenie z systemem rezerwacji lub sprzedaży, cena jest taka jak za pełny projekt strony. Koszty z podziałem na etapy, a także przypadki, w których nie warto zamawiać strony, opisałem we wpisie ile kosztuje strona internetowa. Co wchodzi w zakres pojedynczego landing page, zobaczysz w ofercie landing page.

Nie wiesz, czy zlecić to freelancerowi, czy agencji? Wady i zalety obu opisałem we wpisie freelancer czy agencja interaktywna. Piszę tam też o własnym błędzie przy takiej decyzji.

Makieta to nie to samo co strona dla Twojej branży

Jeszcze jedno, co zwykle wychodzi kilka dni po publikacji makiety. Uniwersalny landing page dobrze wygląda w każdej branży, ale w żadnej nie odpowiada na pytania, które klienci zadają przed kontaktem. Fotograf potrzebuje galerii, która nie spowalnia strony. Restauracja potrzebuje menu, które da się zmienić z telefonu. Gabinet weterynaryjny w ogóle nie może opublikować cennika, bo zabrania tego ustawa. Narzędzie do projektowania o tym nie wie, bo nie zna Twojej branży. Opisałem to osobno dla kilku branż:

• Strona internetowa dla fotografa
• Strona internetowa dla przedszkola i żłobka
• Strona internetowa dla restauracji
• Strona internetowa dla salonu kosmetycznego
• Strona internetowa dla warsztatu samochodowego
• Strona internetowa dla gabinetu weterynaryjnego
• Strona internetowa dla fizjoterapeuty
• Strona internetowa dla biura rachunkowego
• Strona internetowa dla szkoły językowej

Ten sam podział pracy sprawdza się także poza stronami internetowymi: AI wykonuje żmudną część, a decyzje podejmuje człowiek. Wdrożenia z liczbami opisałem w dziale automatyzacja procesów.

Najczęstsze pytania o Claude Design

To pytania, które dostaję najczęściej po tym poradniku. Jeżeli Twojego tu nie ma, napisz do mnie.

Podsumowanie

Jeszcze kilka lat temu droga od słownego opisu do gotowego, ładnego landing page, który dobrze wygląda także na telefonie, zajmowała od kilku dni do kilku tygodni. Potrzebny był projektant, grafik i programista. W Claude Design zrobiliśmy to w niecałą godzinę.

Tego narzędzia najłatwiej nauczyć się w praktyce. Załóż konto na claude.ai, przygotuj swój pierwszy system projektowania i zbuduj własną stronę.