# Jak stworzyć własny design system w Claude Design: od moodboardu do animowanej maskotki

> Kompletny przewodnik po budowaniu firmowego systemu designu w Claude Design: selekcja referencji, generowanie 4 koncepcji, tokenizacja, testy i animowana maskotka SVG.

Współczesne generowanie interfejsów przez sztuczną inteligencję często boryka się ze zjawiskiem „dryfu wizualnego”: za każdym razem, gdy prosisz model o nowy ekran lub materiał promocyjny, proponuje on przypadkowe odcienie, niespójne marginesy i niepasujące fonty. Produkt traci swoją tożsamość i przypomina niespójną układankę.

**Claude Design** od Anthropic diametralnie zmienia ten stan rzeczy. To wyspecjalizowane środowisko projektowe stworzone do projektowania i utrwalania kompletnych design systemów: od globalnych tokenów (palet, siatek, typografii) po interaktywne komponenty UI i animowane maskotki marki.

W tym praktycznym poradniku inżynieryjnym przejdziemy przez cały proces: od analizy światowych referencji i generowania czterech kontrastujących koncepcji na interaktywnym płótnie 2×2, aż po tokenizację, synchronizację z kodem za pomocą Claude Code oraz stworzenie animowanej maskotki SVG.

> [!NOTE]
> Design system w Claude Design nie jest statyczną makietą w Figmie; to aktywny, wykonywalny zbiór reguł i tokenów. Po zapisaniu Claude automatycznie stosuje zatwierdzone kolory, promienie zaokrągleń i typografię do każdego nowego promptu, bloku kodu czy materiału marketingowego.

---

## 1. Czym jest Claude Design i dlaczego reguły projektowe są kluczowe

Design system stanowi jedyne źródło prawdy (Single Source of Truth) dla tożsamości wizualnej Twojej marki. Określa on:

- **Tokeny kolorów:** barwy podstawowe, pomocnicze, tła, powierzchni i dostępne kontrasty semantyczne.
- **Hierarchię typograficzną:** rodziny fontów, skale proporcji, wysokości linii i grubości.
- **Geometrię i odstępy:** siatkę bazową (np. 4px/8px), promienie zaokrągleń (border-radius) i cienie (elevation).
- **Wielokrotnego użytku komponenty UI:** przyciski, pola formularzy, karty, okna modalne i paski nawigacji.
- **Zasady ruchu i interakcji:** krzywe mikrointerakcji, stany najechania kursorom i animacje maskotki.

Bez ustalonego systemu generatywna AI za każdym razem wymyśla interfejs na nowo. Z aktywnym design systemem Claude tworzy spójne materiały już za pierwszym podejściem, oszczędzając godziny ręcznych poprawek w programach wektorowych.

---

## 2. Dobór referencji wizualnych: wyodrębnianie DNA marki

Zanim otworzysz generator lub wpiszesz pierwszy prompt, stwórz solidną bazę referencyjną. Nie ograniczaj się do przeglądania „ładnych stron”: badaj tożsamość marki, typografię, siatki modułowe i motion design jako oddzielne warstwy inżynieryjne.

> [!TIP]
> Aby zgłębić kierunki estetyczne, sprawdź nasz podręcznik [50 stylów designu wizualnego dla design systemów i UI/UX](/pl/guides/prompts/50-design-styles-for-better-prompting), w którym omawiamy przekład stylów (od Bauhausu po Neo-Brutalizm) na konkretne tokeny interfejsu.

### 2.1. Branding, identyfikacja i kierunki estetyczne

Zasoby pomagające określić ogólny charakter marki, temperaturę barwową i tonację typograficzną.

| Źródło | Zastosowanie praktyczne | Link |
| :--- | :--- | :--- |
| **50 Design Styles** | Analiza 50 stylów: Art Déco, Japandi, Brutalizm, Bauhaus itp. | [Poznaj 50 stylów →](https://uxplanet.org/50-design-styles-every-designer-should-know-for-better-prompting-56c09d55db62) |
| **Pinterest** | Moodboardy, tekstury materiałów, palety i schematy oświetlenia | [Otwórz Pinterest →](https://www.pinterest.com/) |
| **Behance** | Kompleksowe analizy identyfikacji wizualnej i brand booki | [Otwórz Behance →](https://www.behance.net/) |
| **Brand New** | Krytyczne analizy światowych rebrandingów od UnderConsideration | [Czytaj Brand New →](https://www.underconsideration.com/brandnew/) |
| **Rebrand Gallery** | Katalog odświeżonych logotypów, palet barw i par fontów | [Zobacz Rebrand Gallery →](https://www.rebrand.gallery/) |
| **Recent Design** | Najświeższe trendy w projektowaniu graficznym, UI i motion | [Odkrywaj Recent Design →](https://recent.design/) |

### 2.2. Web design, strony marketingowe i landing page

Do planowania makrokompozycji, rytmu czytania, hierarchii i modułów konwersji.

| Platforma | Specjalizacja | Link |
| :--- | :--- | :--- |
| **Awwwards** | Awangardowy web design, eksperymentalne interfejsy i WebGL | [Otwórz Awwwards →](https://www.awwwards.com/) |
| **Land-book** | Skuteczne strony docelowe i prezentacje produktów cyfrowych | [Otwórz Land-book →](https://land-book.com/) |
| **One Page Love** | Wzorcowe architektury jednostronicowe i minimalistyczne serwisy | [Przeglądaj One Page Love →](https://onepagelove.com/inspiration) |
| **Curated Design** | Strony skrupulatnie podzielone według branż i stylów wizualnych | [Otwórz Curated Design →](https://curated.design/) |
| **Landing Love** | Nagrania wideo przewijania, płynne przejścia i animacje | [Oglądaj Landing Love →](https://www.landing.love/) |
| **Saaspo** | Wzorce UI dla produktów SaaS, cenniki i procesy onboardingu | [Otwórz Saaspo →](https://saaspo.com/) |
| **SaaSFrame** | Lejki konwersji marketingowej i architektury interfejsów B2B | [Odkryj SaaSFrame →](https://saasframe.io/) |
| **WebInspoo** | Katalog SaaS z filtrowaniem według palet barwnych i technologii | [Odwiedź WebInspoo →](https://webinspoo.com/) |

### 2.3. Dedykowane sekcje i moduły konwersji

Inspiracje do dopracowania konkretnego bloku strony, gdy ogólny styl został już ustalony.

| Moduł / Katalog | Zastosowanie | Link |
| :--- | :--- | :--- |
| **Navbar Gallery** | Nagłówki: paski pływające, mega-menu i nawigacja mobilna | [Zobacz menu →](https://www.navbar.gallery/) |
| **Supahero** | Sekcje Hero z mocnymi komunikatami wartości i przyciskami CTA | [Odkrywaj sekcje Hero →](https://supahero.io/) |
| **Unsection** | Dedykowane bloki: dowody społeczne, tabele porównawcze i opinie | [Otwórz Unsection →](https://www.unsection.com/) |
| **Footer Design** | Stopki stron: nawigacja wielopoziomowa, prawa autorskie i odznaki | [Zobacz stopki →](https://www.footer.design/) |
| **CTA Gallery** | Moduły zapisu i wezwania do działania o wysokiej konwersji | [Przeglądaj CTA →](https://www.cta.gallery/) |
| **404s Design** | Kreatywne podejścia do stron błędu 404 zatrzymujące użytkownika | [Kolekcja 404 →](https://www.404s.design/) |
| **One Page Love (OG)** | Banery podglądu społecznościowego dla kart Open Graph | [Zobacz banery OG →](https://onepagelove.com/og) |

### 2.4. Siatki modułowe i układy Bento Grid

Strukturyzacja treści poprzez asymetryczne kafelki i kontrolowane odstępy.

| Narzędzie | Opis | Link |
| :--- | :--- | :--- |
| **Bento Grids** | Asymetryczne siatki w stylu Bento Box do prezentacji funkcji | [Odkryj Bento Grids →](https://bentogrids.com/) |
| **Griddy** | Interaktywne środowisko do nauki właściwości CSS Grid | [Uruchom Griddy →](https://griddy.io/) |
| **One Page Love Sections** | Kompozycje sekcji pochodzące z realnych produktów cyfrowych | [Zobacz sekcje →](https://onepagelove.com/sections) |

### 2.5. Komponenty UI, tokeny i otwarte design systemy

Elementy wielokrotnego użytku: przyciski, pola formularzy, karty i dokumentacja tokenów.

| Biblioteka | Wartość | Link |
| :--- | :--- | :--- |
| **Astryx by Meta** | Oficjalny otwartoźródłowy design system Mety stworzony z myślą o agentach AI | [Dokumentacja Astryx →](https://astryx.atmeta.com/) |
| **21st.dev** | „npm dla design engineerów”: komponenty UI z gotowymi promptami dla AI | [Otwórz 21st.dev →](https://21st.dev/) |
| **Refero** | Katalog ponad 30 000 realnych ekranów aplikacji na iOS i web | [Eksploruj Refero →](https://refero.design/) |
| **Refero Styles** | Wzorcowe systemy designu z gotowymi tokenami i formatem `DESIGN.md` | [Otwórz Refero Styles →](https://styles.refero.design/) |
| **VantaUI** | Zestawy komponentów UI, stany interaktywne i pliki Figmy | [Odkryj VantaUI →](https://www.vantaui.com/) |
| **Component Gallery** | Kompletny przegląd komponentów interfejsu skatalogowany według realnych design systemów | [Eksploruj Component Gallery →](https://component.gallery/) |
| **ButtonCraft** | Kolekcja przycisków CSS ze stylami i efektami najechania | [Otwórz ButtonCraft →](https://www.buttoncraft.co/) |
| **OpenBridge** | Otwarty system projektowy dla mostków morskich i przemysłu | [Dokumentacja OpenBridge →](https://www.openbridge.no/) |

> [!TIP]
> Katalog **Refero Styles** oraz system **Astryx Mety** to wzorcowe źródła wiedzy dla Claude'a: ich struktura reguł i tokenów łatwo przekształca się w plik `DESIGN.md`, bezbłędnie interpretowany przez modele Claude 3.5 i 3.7.

### 2.6. Mikrointerakcje, animacje i 3D

| Zasób | Obszar | Link |
| :--- | :--- | :--- |
| **React Bits** | Ponad 60 animowanych komponentów dla Reacta: shadery, typografia, loadery | [Otwórz React Bits →](https://reactbits.dev/) |
| **21st.dev** | Interaktywne mikroanimacje i bloki UI gotowe do wdrożenia (Framer Motion) | [Przeglądaj 21st.dev →](https://21st.dev/) |
| **Amicro** | Lekkie mikrointerakcje i płynne przejścia komponentów React | [Otwórz Amicro →](https://amicro.dev/) |
| **ThreeUI** | Elementy interfejsu 3D i interaktywne płótna WebGL dla stron www | [Zobacz ThreeUI →](https://threeui.com/browse) |
| **Paper Shaders** | Tła z shaderami WebGL i generatywne efekty wizualne w przeglądarce | [Zobacz Paper Shaders →](https://shaders.paper.design/) |
| **60fps Design** | Płynne schematy ruchu, zmiany stanów i reakcje na kliknięcie | [Otwórz 60fps →](https://60fps.design/) |
| **Design Spells** | Dyskretne mikrointerakcje, naturalne gesty i efekty hover | [Otwórz Design Spells →](https://designspells.com/) |
| **Mesh3D Gallery** | Interaktywne sceny 3D w przeglądarce, shadery WebGL i Three.js | [Przeglądaj galerię 3D →](https://www.mesh3d.gallery/) |

### 2.7. Systemy typograficzne i palety

| Narzędzie | Przeznaczenie | Link |
| :--- | :--- | :--- |
| **Google Fonts** | Biblioteka krojów z pełną obsługą znaków diakrytycznych | [Katalog Google Fonts →](https://fonts.google.com/) |
| **Fontpair** | Sprawdzone zestawienia krojów dla nagłówków i tekstu ciągłego | [Pary fontów →](https://www.fontpair.co/) |
| **Coolors** | Generator palet barw i weryfikator dostępności kontrastu WCAG | [Uruchom Coolors →](https://coolors.co/) |

### 2.8. Złota formuła przygotowania referencji

Nie zalewaj Claude'a dziesiątkami niesortowanych linków. Optymalny zestaw referencji zawiera:

- **2–3 przykłady tożsamości:** temperatura barw, ton wypowiedzi i charakter pisma.
- **2–3 kompletne serwisy:** podejście do przestrzeni negatywnej i hierarchia.
- **2–3 kluczowe komponenty:** geometria przycisków, pola tekstowe i karty.
- **1–2 referencje dynamiki:** zaokrąglenia, cienie i płynność przejść.
- **3 kluczowe określenia marki:** np. *„technologiczny, surowy, monochromatyczny premium”*.

---

## 3. Inicjalizacja design systemu w Claude Design

W Claude istnieją dwie ścieżki konfiguracji nowego systemu:

1. **W ustawieniach obszaru roboczego:** Przejdź do `Settings` → `Design systems` → kliknij `New design system`.
2. **Bezpośrednio z poziomu czatu:** Kliknij ikonę `+` obok pola wprowadzania → wybierz `Design system` → `New design system`.

```mermaid
graph LR
    A[Start] --> B{Tryb tworzenia}
    B -->|Od zera / Bez kodu| C[Using Claude]
    B -->|Istniejący kod| D[Using Claude Code]
    C --> E[Przesłanie referencji i briefu]
    D --> F[Skanowanie tokenów CSS / Tailwind]
    E --> G[Interaktywne płótno 2x2]
    F --> G
```

### Wybór trybu: Using Claude a Using Claude Code

- **Using Claude:** Najlepszy do projektowania marki lub interfejsu od podstaw. Wgrywasz zrzuty ekranu, moodboardy lub opisy tekstowe, a Claude buduje propozycję wizualną.
- **Using Claude Code:** Dedykowany zespołom posiadającym istniejące repozytorium. Agent terminalowy analizuje konfigurację Tailwinda, zmienne CSS i komponenty React, pobierając aktualne tokeny.

> [!IMPORTANT]
> Przy projektach wielojęzycznych pamiętaj o weryfikacji pełnego zestawu glifów w Google Fonts, aby uniknąć problemów z renderowaniem znaków (FOUT/FOIT) w środowisku produkcyjnym.

---

## 4. Eksploracja estetyki: generowanie 4 kontrastujących koncepcji

Najczęstszym błędem jest zbyt wczesne definiowanie ostatecznych tokenów. Profesjonalny proces wymaga fazy dywergencji przed zamknięciem założeń.

Poproś Claude'a o stworzenie **czterech diametralnie różnych kierunków wizualnych** zaprezentowanych na jednym interaktywnym płótnie (siatka 2×2), na bazie identycznej treści próbnej.

### Główny prompt #1: Eksploracja stylistyczna i koncepcje

```markdown
Działaj jako główny dyrektor artystyczny projektujący firmowy design system w Claude Design.

Nie twórz od razu ostatecznego systemu projektowego. Twoim pierwszym celem jest przedstawienie czterech zasadniczo odmiennych kierunków stylistycznych do wyboru.

Kontekst marki:
- Nazwa i branża: [Podaj nazwę i profil działalności]
- Grupa docelowa: [Opisz profil kluczowego użytkownika]
- 3 cechy marki: [Przykład: inżynieryjny, minimalistyczny, monochromatyczny premium]
- Elementy obowiązkowe: [Logo, wiodący odcień lub wymagania historyczne]
- Czego bezwzględnie unikać: [Przykład: dziecinnych pasteli, jaskrawych neonów, sztampowych gradientów]

Analiza referencji:
Przejrzyj załączone materiały i linki. W trzech zwięzłych zdaniach podsumuj wspólne mianowniki (balans palety, skala fontów, gęstość siatki). Użyj ich wyłącznie jako inspiracji, bez kopiowania cudzych prac.

Cztery kontrastujące kierunki:
Stwórz 4 wyraziste koncepcje: jasna vs ciemna, ciepła vs chłodna, z szeryfami (Serif) vs geometryczny bezszeryfowy (Sans-serif).

Dla każdego wariantu przedstaw:
1. Nazwę koncepcyjną (2–3 słowa) i zwięzłe uzasadnienie estetyczne.
2. Parę fontów z Google Fonts z pełną obsługą znaków diakrytycznych (Nagłówek + Treść).
3. Paletę 5–6 barw w precyzyjnych kodach HEX.
4. Dwa identyczne obiekty testowe: [Przykład: desktopowa sekcja Hero + karta produktu].

Wymagania techniczne:
Umieść wszystkie 4 warianty na jednym płótnie w siatce 2x2, każdy na osobnym Artboardzie. Zachowaj pełną edytowalność kształtów wektorowych, tekstów i ramek.

Zatrzymaj się i poczekaj na mój wybór lub uwagi przed przejściem do fazy tokenizacji.
```

Zestawienie w siatce 2×2 umożliwia obiektywne porównanie harmonii barw i czytelności typografii. Możesz wybrać jedną opcję lub polecić połączenie krojów z pierwszej koncepcji z kolorystyką trzeciej.

---

## 5. Tokenizacja i finalizacja design systemu

Gdy kierunek wizualny zostanie zatwierdzony, przetłumacz go na uporządkowaną specyfikację tokenów i komponentów wielokrotnego użytku.

### Główny prompt #2: Specyfikacja tokenów i komponentów

```markdown
Wybieram Koncepcję nr [Podaj numer] z następującymi modyfikacjami: [Przykład: zamiana szarości tła na cieplejszy odcień grafitu].

Na tej podstawie wygeneruj kompletny design system w Claude Design.

Specyfikacja musi zawierać następujące działy:
1. Colors (Tokeny kolorystyczne):
   - Primary, Secondary, Background, Surface, Muted, Accent, Error i Success.
   - Dokładne wartości HEX wraz z rolami semantycznymi i uwagami o kontraście WCAG AA.
2. Typography:
   - Rodziny krojów Google Fonts.
   - Skalę typograficzną (H1, H2, H3, H4, Body Large, Body, Caption) z wartościami w px/rem, wysokościami linii i interlinią.
3. Spacing & Layout:
   - Tokeny odstępów oparte na skali 4px/8px (space-1 = 4px, space-2 = 8px ... space-16 = 64px).
   - Maksymalne szerokości kontenerów i siatki responsywne (12 kolumn desktop, 4 kolumny mobile).
4. Geometry & Elevation:
   - Promienie zaokrągleń (radius-sm, radius-md, radius-lg, radius-full).
   - Grubości obrysów oraz poziomy cieni (elevation tokens).
5. Core UI Components:
   - Button (Primary, Secondary, Ghost, Destructive) w stanach Default, Hover, Active i Disabled.
   - Pole tekstowe, karta, odznaka (badge) i okno modalne.
6. Wytyczne dla zasobów:
   - Pola ochronne logotypu i zasady obróbki zdjęć.

Sformatuj dokumentację jako przejrzysty plik DESIGN.md oraz strukturę drzewiastą tokenów. Wymuś ścisłe trzymanie się wybranego stylu bez nawiązań do odrzuconych wariantów.
```

### Kluczowe narzędzie: Usage Notes

W Claude Design zawsze uzupełniaj sekcję **Usage Notes**. Działa ona jako dyrektywa systemowa, wskazująca Claude'owi, kiedy i jak stosować dany styl. Na przykład:

- *„Akcentujący żółty (#FFC700) jest zarezerwowany wyłącznie dla głównego przycisku CTA; nigdy nie może być tłem karty.”*
- *„Nagłówki sekcji muszą być zapisywane wersalikami (UPPERCASE) z kerningiem 0.05em.”*

Zasady te eliminują halucynacje wizualne w kolejnych konwersacjach.

### Ekosystem DESIGN.md: bazy tokenów i generatory AI

Aby uniknąć żmudnego ręcznego pisania specyfikacji lub szybko zaimportować istniejącą stronę do Claude Design, korzystaj z wyspecjalizowanych narzędzi ekosystemu `DESIGN.md`:

| Narzędzie | Zakres możliwości | Link |
| :--- | :--- | :--- |
| **getdesign.md** | Baza gotowych plików `DESIGN.md` znanych serwisów sformatowana dla agentów AI | [Otwórz getdesign.md →](https://getdesign.md/) |
| **designmd.me** | Generator tokenów AI: wklejasz adres URL dowolnej witryny i pobierasz plik `DESIGN.md` | [Uruchom designmd.me →](https://designmd.me/) |
| **designmd.ai** | Otwarty katalog setek darmowych systemów projektowych dla Cursora i Claude Code | [Odkrywaj designmd.ai →](https://designmd.ai/) |

---

## 6. Testy obciążeniowe na realnych formatach

Zanim wdrożysz system w całym zespole lub podłączysz do kodu, sprawdź jego odporność na trzech zróżnicowanych nośnikach.

### Główny prompt #3: Weryfikacja spójności międzyformatowej

```markdown
Wykorzystując zdefiniowany właśnie design system, przygotuj trzy różne materiały dla naszej marki:

1. Główny ekran desktopowy (Sekcja Hero z paskiem nawigacji, ofertą i przyciskiem akcji).
2. Slajd prezentacji (Wykres kluczowych wskaźników, wizualizacja danych i wniosek końcowy).
3. Baner do mediów społecznościowych (Kwadrat 1080x1080 zapowiadający nową funkcję).

Kryteria:
- Wszystkie trzy nośniki muszą dzielić identyczny, natychmiast rozpoznawalny język wizualny.
- Trzymaj się ściśle zatwierdzonych tokenów: barw, skali typograficznej, zaokrągleń i marginesów.
- Zweryfikuj czytelność tekstów oraz kontrast WCAG AA dla każdego elementu.
```

> [!TIP]
> **Wzorcowe źródła do weryfikacji formatów:**
> - Do oceny slajdu prezentacji użyj [Deck Gallery](https://deck.gallery/) — katalogu wzorcowych pitch decków czołowych startupów technologicznych.
> - Do testu banera w mediach społecznościowych sprawdź [Posts Design](https://posts.design/) — inspirującą kolekcję postów, karuzeli i zapowiedzi produktowych.

Jeśli na slajdzie tekst wyda się zbyt drobny, a w poście społecznościowym kolor akcentujący zdominuje przekaz, nie poprawiaj grafiki ręcznie. Zmień token źródłowy w systemie, a wszystkie powiązane widoki zaktualizują się kaskadowo.

---

## 7. Praca w nowych projektach i synchronizacja z Claude Code

Po zapisaniu Twój design system jest natychmiast widoczny w całym obszarze roboczym Claude.

### Uruchamianie w standardowych czatach
Aby zastosować reguły w nowej rozmowie, kliknij ikonę `+` przy polu tekstowym → wybierz `Design system` → zaznacz zapisany system. Każde kolejne zapytanie o kod React, responsywny mailing czy widok panelu będzie przestrzegać wprowadzonych reguł.

### Synchronizacja z repozytorium przez komendę `/design-sync`
Dla programistów pracujących z agentem terminalowym **Claude Code**, połączenie makiety z kodem wymaga tylko jednego polecenia:

```bash
/design-sync
```

Ta operacja:
- Pobiera aktywne tokeny z Claude Design i aktualizuje `tailwind.config.ts` lub zmienne w `globals.css`;
- Tworzy lub uaktualnia plik `DESIGN.md` w katalogu głównym projektu;
- Zgłasza rozbieżności pomiędzy tokenami a istniejącymi komponentami React.

### Główny prompt #4: Punktowa aktualizacja tokenów

```markdown
Otwórz nasz aktywny design system. Chcę zaktualizować tokeny dla [wskazać: przycisków / pól formularzy / skali typograficznej].

Zaproponuj trzy warianty alternatywne dla tego modułu, nie naruszając nadrzędnej tożsamości marki (palety, siatki i nastroju).

Pokaż czytelne zestawienie „Przed vs Po” dla każdej opcji.
Nie wprowadzaj zmian globalnie przed moją jednoznaczną akceptacją.
```

---

## 8. Projektowanie animowanej maskotki marki (SVG i Claude Motion)

Oryginalna maskotka buduje rozpoznawalność brandu, uatrakcyjnia puste ekrany (empty states), łagodzi błędy 404 i wspiera kampanie marketingowe.

Claude Design potrafi wygenerować postać wektorową zgodną z tokenami oraz stworzyć dla niej kompletną bibliotekę stanów ruchu.

```mermaid
flowchart TD
    DS[Design System Marki] --> Concept[Opracowanie 3 koncepcji maskotki]
    Concept --> Approval{Wybór kierunku}
    Approval --> Vector[Eksport czystego wektora SVG]
    Vector --> States[Przygotowanie 15 stanów animacji]
    States --> WebDev[CSS / Lottie / JS dla www]
    States --> Video[Claude Motion MP4 / WebM]
```

### Główny prompt #5: Koncepcja maskotki i biblioteka 15 stanów ruchu

```markdown
Działaj jako główny Character Designer i Motion Engineer.

Na bazie naszego zatwierdzonego design systemu stwórz oryginalną maskotkę firmową.

Postać musi harmonijnie wpisywać się w tożsamość marki: korzystać z naszych tokenów kolorystycznych, promieni zaokrągleń i nastroju.

Faza 1: Koncepcja postaci (Wektor SVG)
- Zaproponuj 3 koncepcje maskotki o zróżnicowanych osobowościach (np. robot inżynier, minimalistyczna forma geometryczna, przyjazny cyfrowy kompan).
- Przygotuj czysty, semantyczny kod SVG dla każdej propozycji.
- Zaprojektuj mimikę, spojrzenie i charakterystyczną sylwetkę.
- Przedstaw wszystkie 3 warianty obok siebie do porównania.

Faza 2: Biblioteka 15 ruchów i emocji (po zatwierdzeniu konceptu):
1. Idle — spokojny oddech i stan spoczynku.
2. Blink — naturalne mruganie powiekami.
3. Wave — przyjazne machanie ręką lub elementem.
4. Walk — płynny cykl chodu.
5. Jump — radosny, dynamiczny podskok.
6. Think — skupiona postawa (podczas oczekiwania na odpowiedź AI).
7. Talk — stan aktywnej mowy lub ekspresji.
8. Happy — gest zadowolenia po ukończeniu zadania.
9. Sad — pełen empatii wyraz twarzy przy błędzie 404 lub utracie połączenia.
10. Surprise — reakcja zaskoczenia i odkrycia.
11. Celebrate — wystrzał konfetti lub gest triumfu.
12. Point — skierowanie uwagi na kluczowy przycisk lub element.
13. Loading — zapętlona interakcja ze wskaźnikiem ładowania.
14. Sleep — tryb uśpienia przy nieaktywnej karcie.
15. Goodbye — uprzejme pożegnanie przy wyjściu.

Na tym etapie przedstaw wyłącznie 3 wstępne koncepcje SVG i zaczekaj na mój wybór.
```

### Główny prompt #6: Dopracowanie animacji i interaktywna galeria

```markdown
Wybieram maskotkę nr [Podaj numer].

Stwórz teraz interaktywną galerię prezentującą wszystkie 15 stanów animacji:
1. Zachowaj identyczne proporcje, skalę i tokeny kolorów we wszystkich scenach.
2. Zaimplementuj płynne animacje CSS @keyframes osadzone bezpośrednio w kodzie SVG.
3. Uwzględnij zapytanie prefers-reduced-motion dla zapewnienia dostępności (a11y).
4. Przygotuj przejrzysty panel sterowania: przyciski Play / Pause oraz suwak tempa odtwarzania.
```

> [!TIP]
> **Słownik efektów wizualnych i motion:** Aby dobrać precyzyjne pojęcia stylistyczne do promptów ruchu postaci (np. *morphing*, *kinetic typography*, *rotoscoping*, *claymation*, *glitch*), skorzystaj z wizualnej encyklopedii [Eyecannndy](https://eyecannndy.com/).
>
> **Claude Motion (Eksport wideo):** W przypadku montażu wideo (Premiere Pro, DaVinci Resolve), Anthropic udostępnia moduł beta **Claude Motion** (dla planów Team i Enterprise), który renderuje animacje postaci bezpośrednio do plików MP4 w wysokiej rozdzielczości lub przezroczystych WebM.

---

## 9. Podsumowanie procesu i polecane źródła

Projektowanie trwałego i skalowalnego design systemu obejmuje osiem logicznych etapów:

| Etap | Kluczowe zadanie | Ostateczny rezultat |
| :--- | :--- | :--- |
| **1. Referencje** | Zbiór moodboardów w 7 obszarach | Zestaw 10 wartościowych linków i 3 słowa marki |
| **2. Inicjalizacja** | Start w Claude Design | Nowa przestrzeń projektowa |
| **3. Eksploracja** | Główny prompt #1 na płótnie 2×2 | 4 kontrastujące kierunki wizualne |
| **4. Tokenizacja** | Główny prompt #2 i Usage Notes | Plik `DESIGN.md` oraz tokeny barw i typografii |
| **5. Testy formy** | Główny prompt #3 na 3 formatach | Zweryfikowany widok web, slajd i baner społecznościowy |
| **6. Synchronizacja** | Komenda `/design-sync` w Claude Code | Spójne tokeny Tailwind i CSS w repozytorium |
| **7. Ewolucja** | Główny prompt #4 dla mikro-poprawek | Bezpieczne modyfikacje komponentów bez refaktoru |
| **8. Maskotka & Motion** | Prompty #5 i #6 + Claude Motion | Wektorowa maskotka SVG z 15 animacjami i MP4 |

### Oficjalna dokumentacja i materiały poszerzające

- **Anthropic Academy:** [Oficjalny samouczek tworzenia design systemów](https://academy.claude.com/tutorials/create-a-design-system-with-claude)
- **Centrum pomocy Claude Design:** [Wprowadzenie do Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
- **Dokumentacja Claude Motion:** [Przewodnik po wersji beta i renderowaniu wideo](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)
- **Powiązany poradnik na GotBurnout:** [50 stylów designu wizualnego dla UI i dyrekcji artystycznej](/pl/guides/prompts/50-design-styles-for-better-prompting)