# Как создать собственную дизайн-систему в Claude Design: от мудборда до анимированного маскота

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

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

**Claude Design** от Anthropic кардинально решает эту проблему. Это специализированная среда для проектирования и фиксации полноценных дизайн-систем: от глобальных токенов (палитр, сеток, типографики) до интерактивных UI-компонентов и фирменных анимированных персонажей.

В этом практическом руководстве мы разберем полный инженерный цикл: от сбора мировых референсов и генерации четырех принципиально контрастных стилистических концепций на интерактивном холсте 2×2 до токенизации, синхронизации с кодом через Claude Code и создания собственного анимированного маскота в SVG.

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

---

## 1. Что такое Claude Design и зачем нужна система правил

Дизайн-система выступает единым источником правды (Single Source of Truth) для визуального стиля вашего бренда. Она фиксирует:

- **Цветовые токены:** основные, вторичные, фоновые, поверхностные и доступные семантические контрасты.
- **Типографическую иерархию:** семейства шрифтов, масштабные коэффициенты, интерлиньяж и насыщенность.
- **Геометрию и отступы:** базовую сетку (например, 4px/8px), радиусы скругления (border-radius) и тени (elevation).
- **Переиспользуемые UI-компоненты:** кнопки, поля ввода, карточки, модальные окна и панели навигации.
- **Принципы движения и взаимодействия:** кривые микроанимаций, состояния при наведении и анимации маскота.

Без зафиксированной системы генеративный ИИ вынужден импровизировать при каждом запросе. С подключенной дизайн-системой Claude генерирует согласованные артефакты с первой попытки, экономя часы ручной правки в векторных редакторах.

---

## 2. Подбор визуальных референсов: извлечение ДНК бренда

Прежде чем открывать генератор или писать первый промпт, сформируйте качественную базу референсов. Не ограничивайтесь поиском «красивых сайтов» — исследуйте айдентику, типографику, модульные сетки и анимации как отдельные инженерные слои.

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

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

Ресурсы, помогающие определить общий характер бренда, цветовую температуру и типографическую тональность.

| Ресурс | Назначение и польза | Ссылка |
| :--- | :--- | :--- |
| **50 Design Styles** | Анализ 50 стилей: Art Deco, Japandi, Brutalism, Bauhaus и др. | [Открыть 50 стилей →](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-паттернов и моушн-графики | [Изучить Recent Design →](https://recent.design/) |

### 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-интерфейсов, страниц тарифов и онбординга | [Открыть 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-компоненты, дизайн-токены и открытые дизайн-системы

Переиспользуемые элементы: кнопки, поля ввода, карточки, бейджи и системные правила.

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

> [!TIP]
> Каталог **Refero Styles** и система **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/) |
| **ThreeUI** | Готовые 3D-компоненты для веба и интерактивные WebGL-холсты | [Смотреть ThreeUI →](https://threeui.com/browse) |
| **Paper Shaders** | Фоны на шейдерах WebGL и генеративные визуальные эффекты в браузере | [Смотреть Paper Shaders →](https://shaders.paper.design/) |
| **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** | Проверенные сочетания шрифтов (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[Интерактивный холст 2x2]
    F --> G
```

### Выбор режима: Using Claude или Using Claude Code

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

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

---

## 4. Исследование эстетики: генерация 4 контрастных концепций

Главная ошибка начинающих — сразу пытаться зафиксировать финальные дизайн-токены. Профессиональный подход предполагает дивергентное исследование перед финализацией.

Попросите Claude сгенерировать **четыре принципиально разных направления**, расположенных на едином интерактивном холсте (сетка 2×2), на базе одинакового текстового контента.

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

```markdown
Действуй как ведущий арт-директор, разрабатывающий визуальный стиль бренда в Claude Design.

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

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

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

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

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

Требования к подаче:
Размести все 4 концепции на одном холсте в сетке 2x2, каждую на отдельном Artboard. Обеспечь сохранение полной редактируемости векторных фигур, текста и контейнеров.

Остановись и дождись моего выбора или комментариев по объединению элементов перед переходом к токенам.
```

Сетка 2×2 позволяет объективно сопоставить цветовую гармонию и читаемость типографики. Вы можете выбрать конкретный концепт или попросить Claude объединить типографику первого варианта с палитрой третьего.

---

## 5. Токенизация и сборка дизайн-системы

После утверждения концепции переведите ее в структурированную спецификацию токенов и переиспользуемых компонентов.

### Мастер-промпт №2: Спецификация токенов и компонентов

```markdown
Я выбираю Концепцию №[Укажите номер] со следующими корректировками: [Например: заменить фоновый серый на более теплый графитовый оттенок].

На этой основе сформируй полную дизайн-систему в Claude Design.

Спецификация должна включать разделы:
1. Colors (Дизайн-токены цвета):
   - Primary, Secondary, Background, Surface, Muted, Accent, Error и Success.
   - Точные значения в HEX с указанием семантических ролей и контрастности WCAG AA.
2. Typography:
   - Семейства шрифтов Google Fonts.
   - Масштабная сетка (H1, H2, H3, H4, Body Large, Body, Caption) с размерами в px/rem, интерлиньяжем и трекингом.
3. Spacing & Layout:
   - Шкала отступов на базе 4px/8px (space-1 = 4px, space-2 = 8px ... space-16 = 64px).
   - Максимальная ширина контейнеров и адаптивные сетки (12 колонок для десктопа, 4 для мобильных).
4. Geometry & Elevation:
   - Радиусы скругления (radius-sm, radius-md, radius-lg, radius-full).
   - Толщина границ и уровни теней (box-shadow tokens).
5. Core UI Components:
   - Button (Primary, Secondary, Ghost, Destructive) в состояниях Default, Hover, Active и Disabled.
   - Текстовое поле ввода, карточка, бейдж и модальное окно.
6. Правила использования ассетов:
   - Охранные зоны логотипа и гайдлайны по обработке изображений.

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

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

В Claude Design обязательно заполняйте блок **Usage Notes**. Это системная инструкция, сообщающая Claude, когда и как допустимо использовать стили. Например:

- *«Акцентный желтый (#FFC700) зарезервирован исключительно для главной кнопки CTA и никогда не используется для фона карточек»*.
- *«Заголовки секций оформляются прописными буквами (UPPERCASE) с трекингом 0.05em»*.

Эти правила исключают визуальные галлюцинации в последующих диалогах.

### Экосистема DESIGN.md: базы токенов и ИИ-генераторы

Чтобы не составлять спецификацию вручную с нуля или быстро перенести существующий сайт в Claude Design, используйте инструменты экосистемы `DESIGN.md`:

| Инструмент | Возможности | Ссылка |
| :--- | :--- | :--- |
| **getdesign.md** | База готовых спецификаций `DESIGN.md` популярных сервисов для ИИ-агентов | [Открыть getdesign.md →](https://getdesign.md/) |
| **designmd.me** | ИИ-экстрактор токенов: вставляете 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-секция с навигацией, ценностным предложением и CTA).
2. Презентационный слайд (График ключевых метрик, визуализация данных и вывод).
3. Промо-пост для социальных сетей (Квадратный баннер 1080x1080 с анонсом новой функции).

Требования:
- Все три носителя должны обладать единым, безошибочно считываемым визуальным языком.
- Строго соблюдай утвержденные токены: цвета, шрифты, радиусы и внутренние отступы.
- Проверь читаемость текста и соответствие стандарту контрастности WCAG AA.
```

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

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

---

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

После сохранения дизайн-система становится доступна во всем вашем рабочем пространстве Claude.

### Подключение в обычных диалогах
Чтобы применить правила в новом чате, нажмите иконку `+` рядом со строкой ввода → выберите `Design system` → отметьте сохраненную систему. Любой запрос на генерацию 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), сглаживает ошибки 404 и усиливает маркетинг.

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 Engineer.

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

Персонаж должен органично продолжать визуальный язык бренда: использовать наши цветовые токены, радиусы скругления и общее настроение.

Этап 1: Концепция персонажа (Векторный SVG)
- Предложи 3 концепции маскота с разными характерами (например: робот-инженер, минималистичная геометрическая фигура, дружелюбный цифровой компаньон).
- Сформируй чистый, семантичный код SVG для каждого варианта.
- Продумай мимику, взгляд и узнаваемый силуэт.
- Покажи все три варианта рядом для сравнения.

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

На данном этапе предоставь исключительно 3 концепции маскота в SVG и сделай паузу для моего выбора.
```

### Мастер-промпт №6: Доработка анимаций и интерактивная галерея

```markdown
Я выбираю маскота №[Укажите номер].

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

> [!TIP]
> **Словарь визуальных эффектов и motion-стилей:** Для подбора точных формулировок при запросе анимаций персонажа (например: *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 на 3 форматах | Проверенные экраны для веба, слайда и соцсетей |
| **6. Синхронизация** | Команда `/design-sync` в Claude Code | Актуальные токены Tailwind и CSS в репозитории |
| **7. Эволюция** | Промпт №4 для точечных правок | Безопасное обновление компонентов без редизайна |
| **8. Маскот и Motion** | Промпты №5 и №6 + Claude Motion | Векторный SVG-маскот с 15 анимациями и MP4 |

### Официальные материалы Anthropic и документация

- **Anthropic Academy:** [Официальный туториал по созданию дизайн-систем](https://academy.claude.com/tutorials/create-a-design-system-with-claude)
- **Справочный центр Claude Design:** [Руководство по началу работы с Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
- **Документация Claude Motion:** [Руководство по бета-версии Motion и рендерингу видео](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)
- **Смежный гайд GotBurnout:** [50 стилей визуального дизайна для арт-дирекшна и UI](/ru/guides/prompts/50-design-styles-for-better-prompting)