Poradnik Claude Design: Jak stworzyć landing page bez kodowania

Fikcyjna marka, realny problem: Poznaj CircleBack

Do celów tego samouczka stworzyliśmy markę CircleBack — „jedyne narzędzie do automatycznych odpowiedzi e-mail, które szanuje to, jak bardzo jesteś zajęty”. Narzędzie automatycznie odpowiada na zakurzone wątki mailowe w skrzynce handlowców za pomocą trzech predefiniowanych, eskalujących reguł:

• 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" (Podbijam wątek na górę skrzynki)
• Wątki starsze niż 14 dni ➔ "Is this still on your radar?" (Czy ten temat jest wciąż na Twoim radarze?)

Dodatkowo aplikacja posiada integrację z CRM, która loguje te automatyczne wiadomości jako prawdziwą aktywność handlowca (outreach), co pozwala realizować wyśrubowane cele aktywności przy zerowym wysiłku. Choć to parodia, proces projektowania, przez który przejdziemy, ma zastosowanie w 100% poważnych przedsięwzięciach komercyjnych.

Krok 1: Konfiguracja Systemu Projektowania (Design System)

W Claude Design każdy projekt zaczyna się od zdefiniowania Systemu Projektowania. Claude uczy się kolorów, krojów pisma, głosu marki oraz komponentów raz, aby następnie stosować je konsekwentnie na każdej generowanej podstronie. Dzięki temu nie musisz w każdym prompcie przypominać o brandingu.

Jak to skonfigurować:

1. Kliknij przycisk „Create a design system” u góry panelu głównego. Trafisz na ekran konfiguracji.
2. W polu „Company name and blurb” (Nazwa firmy i opis) wklej powyższy, krótki zarys marki CircleBack.
3. Pomiń pola dotyczące repozytorium GitHub i pliku Figma (`.fig`). Są one przydatne dla zespołów, które chcą, aby Claude przepisał ich istniejące style, ale dziś startujemy od czystej karty.
4. W sekcji „Add fonts, logos and assets” prześlij plik PDF z wytycznymi marki (możesz pobrać przygotowany plik Circleback Brand Guide PDF). Plik ten zawiera pełną specyfikację kolorów, typografii oraz głos marki. Będzie on dla Claude jedynym źródłem prawdy.
5. Kliknij Generate. Claude zacznie analizować dokument PDF i tworzyć kompletny system wizualny. Proces ten potrwa około 5 minut.

Krok 2: Przegląd i Korekta Systemu Projektowania

Po ukończeniu generowania Claude zaprezentuje Ci ekran weryfikacji. System dzieli się na 5 grup i 19 osobnych sekcji obejmujących typografię, całą paletę barw, marginesy, komponenty (przyciski, tabele, formy) oraz głos marki (Voice).

Porównaj wygenerowane elementy z plikiem PDF marki. W każdej sekcji masz dwie opcje:

• Looks good (Wygląda super) — jeśli wszystko jest zgodne z brand bookiem.
• Needs work... (Wymaga poprawek) — jeśli coś odbiega od normy. Wpisz wówczas dokładną instrukcję. Unikaj ogólników typu „zrób to lepiej”. Napisz zamiast tego: „Krój nagłówków powinien mieć bardziej redakcyjny, edytorski charakter — użyj szeryfowego fontu o silnej osobowości zamiast Courier.”

Kroki 3 & 4: Uruchomienie Prototypu Strony Głównej

Po zatwierdzeniu i opublikowaniu systemu projektowania kliknij przycisk „New design”. Zostaniesz poproszony o skonfigurowanie projektu. Wypełnij go następująco:

• Project type: Prototype (Prototyp — idealny dla pojedynczego landing page).
• Project name: CircleBack Homepage
• Design system: Circleback Design System (Twój świeżo stworzony system).
• Fidelity: Kliknij High fidelity (Wysoka szczegółowość). Dzięki temu Claude wygeneruje od razu w pełni dopracowany, gotowy produkcyjnie design zamiast czarno-białego szkicu.

Krok 5: Wysłanie Briefu Wdrożeniowego (Build Prompt)

Teraz nadchodzi kluczowy moment: wysyłamy Claude'owi tzw. Build Prompt. Jest to maksymalnie precyzyjny, techniczny brief rozpisujący strukturę strony sekcja po sekcji, wyznaczający rygorystyczne zasady układu (layout), interakcji, animacji oraz twarde zakazy.

Skopiuj i wklej poniższy, kompletny prompt do czatu w swoim 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 tego promptu Claude rozpocznie pracę. Generowanie kompletnej, zaawansowanej i brutalistycznej strony potrwa około 2-3 minut.

Krok 6: Iteracja i Edycja Strony przez Konwersację

Gdy strona zostanie w pełni wyrenderowana, zobaczysz jej działający prototyp: rygorystyczny brutalizm, 1px linie siatki, animowany terminal, harmonogram cadencji z suwakiem i interaktywne formularze.

Teraz zaczyna się najwygodniejsza część pracy z Claude Design. Aby dokonać zmian, nie musisz grzebać w kodzie CSS ani szukać warstw. Po prostu **piszesz na czacie** naturalnym językiem:

Krok 7: Narzędzia Bezpośrednio na Płótnie (On-Canvas Tools)

Rozmowa na czacie to nie jedyna droga do wprowadzania zmian. Na górze kanwy znajdziesz 4 niezwykle precyzyjne narzędzia bezpośredniej edycji wizualnej:

• Tweaks (Korekty) — Zaznacz element i wpisz prostą dyrektywę (np. „zmień kolor tła na czarny”), a Claude zaaplikuje ją w kilka sekund bez tworzenia nowego wątku czatu.
• Comment (Komentarze) — Przypnij komentarz bezpośrednio do elementu. Idealne do tworzenia list TODO dla siebie lub oznaczania uwag podczas pracy w zespole.
• Edit (Edycja Treści) — Najszybszy sposób na zmianę literówek lub zamianę tekstów. Klikasz w dowolny blok tekstowy i po prostu wpisujesz nowe słowa. Bez AI, bezpośrednio.
• Draw (Rysowanie) — Możesz zaznaczyć lub zakreślić pędzlem dany obszar na stronie i napisać: „tutaj zmień to i to”. Claude odczyta Twoją adnotację graficzną i dostosuje wskazany element.

Krok 8: Eksport oraz Magiczne Handoff do Claude Code

Gdy strona wygląda perfekcyjnie, kliknij przycisk Share (Udostępnij) w prawym górnym rogu. Znajdziesz tam standardowe opcje, takie jak generowanie linku podglądu, pobieranie pliku PDF, PPTX lub paczki `.zip`. Kluczowe są jednak dwa wyjścia produkcyjne:

• Export as standalone HTML — Generuje jeden, niezwykle czysty i spójny plik HTML, w którym zaszyte są wszystkie skrypty i style. Możesz wrzucić go bezpośrednio na dowolny serwer lub hosting i strona zacznie działać w sekundy.
• Handoff to Claude Code — Absolutna rewolucja w integracji na linii Designer-Developer. Claude wygeneruje dla Ciebie dedykowaną, precyzyjną komendę terminalową. Wklejasz ją w konsoli swojego lokalnego projektu (gdzie masz otwartą sesję z CLI Claude Code). Claude Code połączy się bezpośrednio z Twoim projektem w chmurze Claude Design, pobierze specyfikację, przeanalizuje plik i automatycznie zaimplementuje idealnie ostylowane komponenty w Twoim lokalnym kodzie (np. w projekcie Astro czy React).

Podsumowanie: Czas na Twój Ruch

Jeszcze kilka lat temu przejście od opisu słownego do w pełni zakodowanego, responsywnego landing page o wysokiej estetyce zajmowało od kilku dni do tygodni (obejmując pracę UX-owca, grafika i frontendowca). Z Claude Design zamknęliśmy ten proces w niecałą godzinę.

Najlepszy sposób na opanowanie tego narzędzia to po prostu wejście w interakcję. Zarejestruj się na `claude.ai`, stwórz swój pierwszy system i spróbuj zbudować coś niezwykłego. Dobra zabawa gwarantowana!