# Як створити власну дизайн-систему в Claude Design: від мудборду до анімованого маскота

> Повний практичний посібник зі створення дизайн-системи бренду в Claude Design: збір візуальних референсів, генерація 4 концепцій, токенізація, стрес-тестування та розробка анімованого SVG-маскота.

Сучасна генерація інтерфейсів за допомогою штучного інтелекту часто страждає на «візуальний дрейф»: щоразу, коли ви просите нейромережу створити новий екран чи промо-матеріал, вона пропонує випадкові відтінки, хаотичні відступи та шрифти без єдиної логіки. Продукт втрачає впізнаваність, перетворюючись на клаптикову ковдру.

**Claude Design** від Anthropic докорінно змінює цей підхід. Це спеціалізоване середовище, призначене для проектування та фіксації повноцінних дизайн-систем: від глобальних токенів (палітри, сітки, типографіки) до інтерактивних UI-компонентів та фірмових персонажів.

У цьому практичному посібнику ми пройдемо повний інженерний цикл: від дослідження світових референсів і генерації чотирьох принципово різних стилістичних концепцій до токенізації, синхронізації з кодовою базою через Claude Code та створення власного анімованого маскота.

> [!NOTE]
> Дизайн-система в Claude Design — це не статична картинка в Figma, а активний набір правил і токенів. Після збереження Claude автоматично застосовує затверджені кольори, радіуси та шрифти до кожного нового запиту, коду чи маркетингового асету.

---

## 1. Що таке Claude Design та навіщо потрібна система правил

Дизайн-система — це єдине джерело правди (Single Source of Truth) для візуального стилю вашого бренду. Вона визначає:

- **Колірні токени:** первинні, нейтральні, фонові та семантичні контрасти.
- **Типографічну ієрархію:** гарнітури, масштаби (scale ratio), висоту рядків і насиченість.
- **Геометрію та спейсинг:** систему відступів (наприклад, 4px/8px grid), радіуси заокруглення (border-radius) та тіні (elevation).
- **Багаторазові UI-компоненти:** кнопки, інпути, картки, навігаційні бари.
- **Принципи руху та взаємодії:** мікроанімації переходів і характер фірмових персонажів.

Без закріпленої системи генеративний ШІ змушений щоразу фантазувати. З підключеною дизайн-системою Claude генерує узгоджені артефакти з першої спроби, заощаджуючи десятки годин ручного доопрацювання у графічних редакторах.

---

## 2. Добірка візуальних референсів: збір естетичного ДНК

Перш ніж відкривати генератор або вводити перший запит, необхідно сформувати референсну базу. Не обмежуйтеся пошуком «красивих сайтів» — досліджуйте бренд-айдентику, типографіку, компонентні сітки та анімації як окремі інженерні пласти.

> [!TIP]
> Для глибшого розуміння стилістичних напрямів зверніться до нашого керівництва [50 стилів візуального дизайну для дизайн-систем та UI/UX](/uk/guides/prompts/50-design-styles-for-better-prompting), де детально розібрано перехід естетичних кодів (від Bauhaus до Neo-Brutalism) у токени інтерфейсу.

### 2.1. Брендинг, айдентика та візуальні напрямки

Ці ресурси допомагають визначити глобальний настрій бренду, базову колористику та типографічну тональність.

| Ресурс | Фокус та практичне призначення | Посилання |
| :--- | :--- | :--- |
| **50 Design Styles (GotBurnout)** | Повний візуальний словник із 50 стилів дизайну, палітрами та UI-токенами | [Відкрити наш гайд →](/uk/guides/prompts/50-design-styles-for-better-prompting) · [UX Planet](https://uxplanet.org/50-design-styles-every-designer-should-know-for-better-prompting-56c09d55db62) |
| **Pinterest** | Мудборди, фактури матеріалів, градієнти, світлові схеми | [Відкрити Pinterest →](https://www.pinterest.com/) |
| **Behance** | Повномасштабні брендбуки, кейси айдентики та гайдлайни | [Відкрити Behance →](https://www.behance.net/) |
| **Brand New** | Детальний аналіз ребрендингів та світових кейсів від UnderConsideration | [Читати Brand New →](https://www.underconsideration.com/brandnew/) |
| **Rebrand Gallery** | Каталог логотипів, оновлених колірних палітр та шрифтових пар | [Переглянути Rebrand Gallery →](https://www.rebrand.gallery/) |
| **Recent Design** | Свіжі тренди графічного дизайну, UI-патернів та motion-графіки | [Дослідити Recent Design →](https://recent.design/) |

**Сценарій використання:** на етапі брифування, щоб відібрати 2–3 контрастні стилі, які резонують із філософією вашого продукту. Повний практичний розбір естетики кожного напрямку дивіться у нашому гайді [50 стилів візуального дизайну](/uk/guides/prompts/50-design-styles-for-better-prompting).

### 2.2. Вебдизайн, маркетингові сайти та лендінги

Для проектування макроструктури веб-сторінок, інформаційної ієрархії та конверсійних блоків.

| Платформа | Спеціалізація та користь | Посилання |
| :--- | :--- | :--- |
| **Awwwards** | Авангардний вебдизайн, експериментальні інтерфейси, WebGL | [Відкрити Awwwards →](https://www.awwwards.com/) |
| **Land-book** | Преміальні маркетингові сайти та висококонверсійні лендінги | [Відкрити Land-book →](https://land-book.com/) |
| **One Page Love** | Еталонні односторінкові рішення та мікросайти | [Переглянути One Page Love →](https://onepagelove.com/inspiration) |
| **Curated Design** | Сайти з жорсткою категоризацією за індустріями та стилями | [Відкрити Curated Design →](https://curated.design/) |
| **Landing Love** | Відеозаписи скролу, складні переходи та кінетичні анімації | [Дивитися Landing Love →](https://www.landing.love/) |
| **Saaspo** | Довідник інтерфейсів SaaS-продуктів, сторінок тарифів та Onboarding | [Відкрити Saaspo →](https://saaspo.com/) |
| **SaaSFrame** | Маркетингові воронки та UI-патерни цифрових сервісів | [Дослідити SaaSFrame →](https://saasframe.io/) |
| **WebInspoo** | SaaS-референси з інтелектуальними фільтрами за кольорами й стеком | [Перейти до WebInspoo →](https://webinspoo.com/) |

### 2.3. Специфічні блоки та конверсійні секції

Корисно, коли глобальний стиль затверджено, але потрібно деталізувати окремий функціональний блок сторінки.

| Елемент / Каталог | Призначення | Посилання |
| :--- | :--- | :--- |
| **Navbar Gallery** | Архітектура хедера: плаваючі навігації, mega-menu, мобільні бари | [Переглянути навабари →](https://www.navbar.gallery/) |
| **Supahero** | Hero sections — перші екрани із заголовками та ключовими CTA | [Дослідити Hero блоки →](https://supahero.io/) |
| **Unsection** | Специфічні блоки: соціальні докази, порівняльні таблиці, відгуки | [Відкрити Unsection →](https://www.unsection.com/) |
| **Footer Design** | Футери веб-сторінок: багаторівневі посилання, копірайти, бейджі | [Дивитися футери →](https://www.footer.design/) |
| **CTA Gallery** | Конверсійні блоки реєстрації, захоплення лідів та закликів до дії | [Переглянути CTA →](https://www.cta.gallery/) |
| **404s Design** | Креативні сценарії обробки помилки 404 та повернення користувача | [Колекція 404 →](https://www.404s.design/) |
| **One Page Love (OG)** | Зразки банерів Open Graph для коректного шарингу в соцмережах | [Приклади OG-банерів →](https://onepagelove.com/og) |

### 2.4. Модульні сітки та Bento Grid

Структурування контенту через картковий лейаут і відступи.

| Інструмент | Опис | Посилання |
| :--- | :--- | :--- |
| **Bento Grids** | Модульні асиметричні сітки в стилі Bento Box для продуктових фіч | [Переглянути Bento Grids →](https://bentogrids.com/) |
| **Griddy** | Інтерактивний тренажер для побудови складних систем CSS Grid | [Тренажер Griddy →](https://griddy.io/) |
| **One Page Love Sections** | Каталог композиційних структур окремих модулів сторінки | [Відкрити секції →](https://onepagelove.com/sections) |

### 2.5. UI-компоненти та готові дизайн-токени

Багаторазові елементи: кнопки, картки, бейджі, форми вводу та системні правила.

| Бібліотека | Чим корисна | Посилання |
| :--- | :--- | :--- |
| **Component Gallery** | Енциклопедія компонентів: порівняння реалізацій кнопок, табів та карток у 50+ світових дизайн-системах | [Відкрити Component Gallery →](https://component.gallery/) |
| **Astryx by Meta** | Офіційна відкрита дизайн-система від Meta, оптимізована для ШІ-агентів (Agent Ready) | [Документація Astryx →](https://astryx.atmeta.com/) |
| **21st.dev** | «npm для дизайн-інженерів»: каталог UI-компонентів із готовими ШІ-промптами | [Відкрити 21st.dev →](https://21st.dev/) |
| **Refero** | Каталог із понад 30 000 реальних екранів iOS та веб-інтерфейсів | [Дослідити Refero →](https://refero.design/) |
| **Refero Styles** | Еталонні дизайн-системи з готовими токенами та документами `DESIGN.md` | [Відкрити Refero Styles →](https://styles.refero.design/) |
| **VantaUI** | Компонентні набори, інтерактивні стани та Figma-макети | [Дослідити VantaUI →](https://www.vantaui.com/) |
| **ButtonCraft** | Колекція кнопок із готовими CSS-стилями та hover-ефектами | [Відкрити ButtonCraft →](https://www.buttoncraft.co/) |
| **OpenBridge** | Відкрита індустріальна дизайн-система з екстремальними вимогами до контрасту | [Документація OpenBridge →](https://www.openbridge.no/) |

> [!TIP]
> Каталог **Refero Styles**, **Component Gallery** та дизайн-система **Astryx від Meta** є золотим стандартом для передачі референсів у Claude: структура їхніх правил і токенів ідеально конвертується в системний файл `DESIGN.md`, зрозумілий моделям сімейства Claude 3.5 та 3.7.

### 2.6. Мікровзаємодії, анімації та 3D

| Ресурс | Напрям | Посилання |
| :--- | :--- | :--- |
| **React Bits** | 60+ відкритих анімованих компонентів для React: шейдери, текст, переходи | [Відкрити React Bits →](https://reactbits.dev/) |
| **21st.dev** | Інтерактивні мікроанімації та готові UI-блоки на Framer Motion та Tailwind | [Каталог 21st.dev →](https://21st.dev/) |
| **Amicro** | Легкі переходи та витончені мікровзаємодії для компонентів React | [Відкрити Amicro →](https://amicro.dev/) |
| **Paper Shaders** | Інтерактивні шейдерні фони на WebGL, процедурний шум та жива графіка | [Відкрити Paper Shaders →](https://shaders.paper.design/) |
| **ThreeUI** | Готові 3D-компоненти для вебу та інтерактивні WebGL-полотна | [Переглянути ThreeUI →](https://threeui.com/browse) |
| **60fps Design** | Патерни плавного руху, інтерактивні переходи та реакції на клік | [Відкрити 60fps →](https://60fps.design/) |
| **Design Spells** | Мікроанімації, нативні жести та витончені hover-ефекти | [Відкрити Design Spells →](https://designspells.com/) |
| **Mesh3D Gallery** | Тривимірні сцени, шейдери WebGL та бібліотека Three.js | [Переглянути 3D-галерею →](https://www.mesh3d.gallery/) |

### 2.7. Типографіка та палітри

| Сервіс | Застосування | Посилання |
| :--- | :--- | :--- |
| **Google Fonts** | Безкоштовні шрифти з обов'язковою підтримкою української кирилиці | [Каталог Google Fonts →](https://fonts.google.com/) |
| **Fontpair** | Перевірені комбінації гарнітур (Header Display + Body Sans) | [Підбір шрифтових пар →](https://www.fontpair.co/) |
| **Coolors** | Генератор колірних схем, перевірка коефіцієнта контрасту (WCAG) | [Генератор Coolors →](https://coolors.co/) |

### 2.8. Золота формула підготовки референсів

Не завантажуйте в Claude десятки посилань одночасно — це спричинить інформаційний шум. Оптимальний референс-пакет містить:

- **2–3 приклади айдентики:** зафіксувати колірну температуру та характер шрифтів.
- **2–3 сайти повністю:** показати принципи повітря, відступів та структури.
- **2–3 компоненти:** продемонструвати геометрію кнопок, інпутів та карток.
- **1–2 приклади динаміки:** характер скруглень, тіней або анімацій.
- **3 ключові дескриптори бренду:** наприклад, *«технологічний, лаконічний, монохромний»*.

---

## 3. Ініціалізація дизайн-системи в Claude Design

Для створення нової системи в інтерфейсі Claude доступні два шляхи:

1. **Через налаштування акаунту:** перейдіть у `Settings` → `Design systems` → натисніть кнопку `New design system`.
2. **Прямо з контекстного меню чату:** натисніть іконку `+` біля рядка вводу → виберіть `Design system` → `New design system`.

```mermaid
graph LR
    A[Початок] --> B{Режим створення}
    B -->|З нуля / Без коду| C[Using Claude]
    B -->|Є кодова база| D[Using Claude Code]
    C --> E[Завантаження референсів і брифу]
    D --> F[Сканування CSS / Tailwind токенів]
    E --> G[Інтерактивне полотно Canvas]
    F --> G
```

### Вибір режиму: Using Claude чи Using Claude Code

- **Using Claude:** оптимально для створення бренду або інтерфейсу з чистого аркуша. Ви передаєте скриншоти, бренд-гайд або опис завдань, а Claude генерує стиль у візуальному полотні.
- **Using Claude Code:** підходить для команд із готовим репозиторієм. Агент аналізує ваші Tailwind-конфіги, CSS-змінні та React-компоненти, екстрагуючи наявні токени в дизайн-систему.

> [!IMPORTANT]
> Якщо ви використовуєте українську мову в інтерфейсах, обов'язково вказуйте вимогу повної кириличної підтримки шрифтів у Google Fonts. Це запобіжить випадінню гліфів (FOUT/FOIT) у майбутньому коді.

---

## 4. Дослідження естетики: генерація 4 контрастних концепцій

Головна помилка дизайнерів-початківців — намагатися одразу сформулювати фінальні дизайн-токени. Натомість професійний підхід полягає у порівняльному спліт-тестуванні.

Попросіть Claude згенерувати **чотири принципово несхожі концепції**, розміщені на єдиному інтерактивному полотні (Canvas 2×2), використовуючи однаковий контент.

### Майстер-промпт №1: Пошук стилю та генерація концепцій

```markdown
Ти — провідний артдиректор, який розробляє візуальний стиль бренду в Claude Design.

Не створюй фінальну дизайн-систему одразу. Твоє перше завдання — запропонувати чотири принципово різні стилістичні напрями на вибір.

Контекст бренду:
- Назва та галузь: [Вкажіть назву та сферу діяльності]
- Цільова аудиторія: [Опишіть портрет користувача]
- Три слова, що описують характер бренду: [Наприклад: інженерний, мінімалістичний, преміальний]
- Що обов'язково зберегти: [Логотип, базовий фірмовий відтінок тощо]
- Чого категорично уникати: [Наприклад: дитячих пастельних тонів, неону, градієнтів]

Аналіз референсів:
Ознайомся з прикріпленими матеріалами. У трьох рядках зафіксуй спільні риси (палітра, типографіка, щільність сітки). Використовуй їх виключно як джерело натхнення, не копіюючи чужий дизайн.

Чотири контрастні напрями:
Створи чотири виразні варіанти: світлий і темний, теплий і холодний, з антиквою (Serif) та гротеском (Sans-serif).

Для кожної концепції надай:
1. Концептуальну назву (2-3 слова) та стисле філософське обґрунтування.
2. Шрифтову пару з Google Fonts з повною підтримкою української кирилиці (Title + Body).
3. Точну колірну палітру з 5-6 кольорів у форматі HEX.
4. Два ідентичні тестові артефакти: [Наприклад: головний екран сайту та картка продукту].

Вимоги до подачі:
Розмісти всі 4 концепції на одному полотні в сітці 2×2, кожну на окремому Artboard. Забезпеч збереження редагованості всіх векторних фігур, типографіки та блоків.

Зупинись і чекай мого вибору або коментарів щодо об'єднання елементів перед переходом до дизайн-системи.
```

Після виконання запиту ви отримаєте наочну матрицю, де на одному екрані можна оцінити поведінку кольорів та шрифтів. Ви можете вибрати конкретний варіант або попросити скомбінувати типографіку з першого варіанту з палітрою другого.

---

## 5. Токенізація та фіналізація дизайн-системи

Коли концепцію погоджено, її необхідно трансформувати в структуровану специфікацію токенів і багаторазових компонентів.

### Майстер-промпт №2: Складання повноцінної дизайн-системи

```markdown
Я обираю концепцію №[Вкажіть номер] із такими коригуваннями: [Опишіть побажання, наприклад: замінити фоновий сірий на тепліший графітовий].

На цій основі згенеруй повну інженерну дизайн-систему в Claude Design.

Специфікація повинна містити такі розділи:
1. Colors (Дизайн-токени кольору):
   - Primary, Secondary, Background, Surface, Muted, Accent, Error, Success.
   - Усі кольори в HEX із визначенням ролей та контрасту.
2. Typography (Типографічна система):
   - Шрифтова родина Google Fonts із кирилицею.
   - Масштабна сітка (H1, H2, H3, H4, Body Large, Body, Caption) із кеглями (px/rem), line-height та letter-spacing.
3. Spacing & Layout (Відступи та сітка):
   - Базова сітка 4px / 8px (space-1 = 4px, space-2 = 8px ... space-16 = 64px).
   - Контейнери (max-width) та сітка для desktop (12 колонок) і mobile (4 колонки).
4. Geometry & Elevation (Форми та ефекти):
   - Радіуси скруглення (radius-sm, radius-md, radius-lg, radius-full).
   - Товщина меж (border-width) та рівні тіней (box-shadow tokens).
5. Core Components (Базові компоненти):
   - Button (Primary, Secondary, Ghost, Destructive) у станах Default, Hover, Active, Disabled.
   - Input Field, Card, Badge, Modal Dialog.
6. Assets & Rules:
   - Гайдлайни щодо логотипу та обробки зображень.

Оформи систему у вигляді структурованого DESIGN.md та дизайн-токенів. Зафіксуй суворе дотримання обраного стилю без відкату до попередніх варіантів.
```

### Важливий інструмент: Usage Notes

У Claude Design обов'язково заповнюйте блок **Usage Notes**. Це системний маніфест, який повідомляє моделі, за яких умов дозволено використовувати певні стилі. Наприклад:

- *«Акцентний жовтий колір (#FFC700) використовується тільки для головної кнопки CTA і ніколи для фону карток»*.
- *«Шрифт заголовків використовується виключно у верхньому регістрі (UPPERCASE) з letter-spacing 0.05em»*.

Ці правила мінімізують візуальні галюцинації при подальшій роботі.

### Екосистема DESIGN.md: готові бази токенів та автогенератори

Щоб не створювати специфікації вручну з нуля або щоб швидко перенести існуючий брендинг у Claude Design, використовуйте інструменти екосистеми `DESIGN.md`:

| Інструмент | Можливості та призначення | Посилання |
| :--- | :--- | :--- |
| **getdesign.md** | Колекція готових файлів `DESIGN.md` відомих веб-сервісів для ШІ-агентів | [Відкрити getdesign.md →](https://getdesign.md/) |
| **designmd.me** | AI-екстрактор токенів: вставляєте URL сайту й отримуєте токени та `DESIGN.md` за секунди | [Генератор designmd.me →](https://designmd.me/) |
| **designmd.ai** | Каталог відкритих дизайн-систем у форматі `DESIGN.md` для Cursor та Claude Code | [Каталог designmd.ai →](https://designmd.ai/) |

---

## 6. Стрес-тестування системи на реальних носіях

Перш ніж масштабувати дизайн-систему на всю команду чи продукт, протестуйте її консистентність на трьох контрастних форматах.

### Майстер-промпт №3: Стрес-тест на консистентність

```markdown
Використовуючи створену щойно дизайн-систему, згенеруй три різні матеріали для нашого бренду:

1. Перший екран десктопного сайту (Hero Section з навігаційним баром, оффером та CTA).
2. Презентаційний слайд (Слайд із ключовою метрикою, графіком та висновком).
3. Промо-пост для соціальних мереж (Квадратний банер 1080x1080 для анонсу фічі).

Вимоги:
- Усі три носії повинні мати бездоганну спільну візуальну мову.
- Суворо дотримуйся затверджених токенів: кольорів, гарнітур, радіусів та відступів.
- Перевір читабельність тексту та контрастність елементів за стандартом WCAG AA.
```

> [!TIP]
> **Референси для перевірки форматів:**
> - Для оцінки презентаційного слайда скористайтеся каталогом [Deck Gallery](https://deck.gallery/) — добіркою еталонних пітч-деків та слайдів відомих технологічних стартапів.
> - Для оцінки соцмережевого банера зверніться до [Posts Design](https://posts.design/) — колекції виразних візуальних постів, каруселей та бренд-анонсів.

Якщо на одному з носіїв шрифт видається занадто дрібним або акцентний колір перевантажує композицію — не виправляйте макет вручну. Внесіть правки безпосередньо в токени дизайн-системи, і всі залежні елементи оновляться автоматично.

---

## 7. Робота в нових проєктах та інтеграція з Claude Code

Після збереження дизайн-система стає доступною у вашому воркспейсі Claude.

### Підключення в чаті
Щоб активувати правила в новому діалозі, натисніть `+` біля рядка вводу → виберіть `Design system` → відзначте створену систему. Тепер будь-який запит на генерацію HTML/React коду, листа розсилки чи дашборду буде спиратися на затверджені правила.

### Синхронізація з кодом через команду `/design-sync`
Якщо ви використовуєте агентний термінал **Claude Code**, синхронізація дизайн-системи з кодовою базою виконується однією командою:

```bash
/design-sync
```

Ця команда зчитує актуальні токени з Claude Design та зіставляє їх із файлами у вашому репозиторії:
- генерує оновлений `tailwind.config.ts` або змінні `globals.css`;
- створює або оновлює файл `DESIGN.md` у корені проєкту;
- повідомляє про розбіжності між токенами системи та існуючими React-компонентами.

### Майстер-промпт №4: Точкове оновлення дизайн-системи

```markdown
Відкрий нашу активну дизайн-систему. Мені потрібно оновити токени [вказати: кнопок / полів вводу / типографіки].

Запропонуй три альтернативні варіанти стилізації для цього блоку, зберігаючи недоторканою загальну айдентику бренду (палітру, сітку та настрій).

Покажи порівняння «До» та «Після» для кожного варіанту.
Не застосовуй зміни глобально, доки я не виберу фінальний варіант.
```

---

## 8. Створення фірмового анімованого маскота (SVG & Claude Motion)

Унікальний маскот значно підвищує запам'ятовуваність бренду, оживляє пусті сторінки (Empty States), статусні екрани помилок і маркетингові кампанії.

Claude Design здатний не лише намалювати векторного персонажа за правилами системи, але й створити повну бібліотеку станів руху.

```mermaid
flowchart TD
    DS[Дизайн-система бренду] --> Concept[Генерація 3 концепцій маскота]
    Concept --> Approval{Вибір напряму}
    Approval --> Vector[Експорт векторного SVG]
    Vector --> States[Створення 15 анімаційних станів]
    States --> WebDev[CSS / Lottie / JS для вебу]
    States --> Video[Claude Motion MP4 / WebM]
```

### Майстер-промпт №5: Генерація маскота та 15 станів руху

```markdown
Ти — провідний Character Designer та Motion Designer.

Спираючись на затверджену дизайн-систему бренду, створи унікального фірмового маскота.

Персонаж повинен органічно продовжувати візуальну мову бренду: використовувати наші колірні токени, геометрію та загальний настрій. 

Етап 1: Концепція персонажа (Vector SVG)
- Запропонуй три концепції маскота з різними характерами (наприклад: інженерний помічник, абстрактна геометрична форма, кібернетична істота).
- Створи чистий, семантично розмічений векторний код SVG для кожної концепції.
- Продумай міміку, вираз очей та ключові атрибути.
- Покажи всі три варіанти поруч для порівняння.

Етап 2: Бібліотека з 15 рухів та емоцій (після затвердження концепції):
1. Idle — фонове дихання та стан спокою.
2. Blink — природне моргання очей.
3. Wave — дружнє вітання рукою або елементом.
4. Walk — циклічна хода.
5. Jump — динамічний стрибок радості.
6. Think — задумливий стан (для генерації відповіді ШІ).
7. Talk — стан активної розмови чи озвучення.
8. Happy — тріумф та радість успіху.
9. Sad — легкий смуток для екранів скасування чи втрати зв'язку.
10. Surprise — здивування та відкриття.
11. Celebrate — святковий салют (конфеті, перемога).
12. Point — спрямування уваги користувача на важливий елемент чи кнопку.
13. Loading — циклічна взаємодія з прелоадером.
14. Sleep — режим очікування або неактивності вкладки.
15. Goodbye — тепле прощання при виході.

Поки що покажи виключно 3 концепції маскота в SVG і зупинись для мого вибору.
```

### Майстер-промпт №6: Фіналізація анімацій та створення інтерактивної галереї

```markdown
Я обираю маскота №[Вкажіть номер].

Тепер створи повноцінну інтерактивну галерею для демонстрації всіх 15 анімацій:
1. Забезпеч однаковий масштаб, пропорції та кольори персонажа у всіх сценах.
2. Реалізуй плавні CSS-анімації та ключові кадри (@keyframes) безпосередньо всередині коду SVG.
3. Додай підтримку режиму reduced-motion для доступності (a11y).
4. Оформи панель керування: кнопки Play / Pause для кожного стану та перемикач швидкості відтворення.
```

> [!TIP]
> **Словник візуальних ефектів та моушн-стилів:** Для підбору точних стилістичних назв при промптингу рухів персонажа (наприклад: *morphing*, *kinetic typography*, *rotoscoping*, *claymation*, *glitch*) зверніться до візуальної енциклопедії [Eyecannndy](https://eyecannndy.com/).
>
> **Claude Motion (Експорт у відео):** Якщо вам потрібні відеоролики для монтажу у Premiere Pro чи DaVinci Resolve, Anthropic пропонує спеціальний бета-модуль **Claude Motion** (доступний для підписок Team та Enterprise), який рендерить анімації персонажа безпосередньо у відеофайли MP4 або прозорі WebM без втрати якості.

---

## 9. Підсумкова дорожня карта та корисні ресурси

Побудова життєздатної дизайн-системи втілюється у восьми послідовних фазах:

| Фаза | Ключова дія | Результат |
| :--- | :--- | :--- |
| **1. Референси** | Збір мудбордів у 7 категоріях | Пакет із 10 точних посилань та 3 слів бренду |
| **2. Ініціалізація** | Запуск Claude Design | Створення нового системного простору |
| **3. Концепції** | Промпт №1 на полотні 2×2 | 4 контрастні напрями на єдиному контенті |
| **4. Токенізація** | Промпт №2 та Usage Notes | Готовий файл `DESIGN.md` та токени кольорів/шрифтів |
| **5. Стрес-тест** | Промпт №3 на трьох форматах | Валідація веб-екрана, слайду та соцмереж |
| **6. Синхронізація** | Команда `/design-sync` у Claude Code | Оновлений Tailwind/CSS у репозиторії |
| **7. Еволюція** | Промпт №4 для мікро-оновлень | Безпечні правки компонентів без редизайну |
| **8. Маскот & Motion** | Промпти №5 і №6 + Claude Motion | Векторний персонаж із 15 станами руху та MP4 |

### Офіційні джерела та корисні матеріали

- **Офіційна академія Anthropic:** [Create a Design System with Claude Academy](https://academy.claude.com/tutorials/create-a-design-system-with-claude)
- **Документація Claude Design:** [Getting Started with Claude Design Guide](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
- **Документація Claude Motion:** [Motion Beta Guide & Video Export](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)
- **Суміжний гайд GotBurnout:** [50 стилів візуального дизайну для арт-дирекшну та UI](/uk/guides/prompts/50-design-styles-for-better-prompting)