Превращаем Сlaude Code в дизайнера мирового уровня: генерация UI-компонентов, тем и аудит по гайдлайнам

Каждый раз, когда я верстаю интерфейс по Material Design 3, уходит время на одно и то же: проверить токены цветов, найти правильный компонент, убедиться что elevation и shape соответствуют спеке. Документация на m3.material.io — SPA, которое грузится медленно и искать по нему неудобно.

На GitHub появился скилл для Claude Code, который решает эту проблему: 30+ компонентов с маппингами на Jetpack Compose, система дизайн-токенов, генерация тем из seed-цвета и аудит готового приложения на соответствие MD3. 454 звезды за четыре дня — проект зацепил.

Что это делает

material-3-skill — скилл для Claude Code, который превращает его в эксперта по Material Design 3. Устанавливается в ~/.claude/skills/ и добавляет команду /material-3.

Четыре режима:

Генерация компонентов. Описываете, что нужно — получаете код с правильными токенами.

/material-3 component Создай форму логина с полями email и пароль

Claude Code выдаст Compose-код с MaterialTheme, правильными OutlinedTextField, FilledButton, корректными отступами и elevation. Не «что-то похожее на Material», а код, который соответствует спеке.

Генерация темы. Даёте seed-цвет — получаете полную тему.

/material-3 theme Сгенерируй тему из seed-цвета #1A73E8

На выходе — ColorScheme с primary, secondary, tertiary, surface, error и всеми вариантами (onPrimary, primaryContainer и т.д.), плюс тёмная тема. Всё по алгоритму тональных палитр Material You.

Scaffold приложения. Каркас с адаптивной навигацией.

/material-3 scaffold Создай responsive shell с навигацией

Получаете адаптивный каркас: на телефоне — bottom navigation, на планшете — navigation rail, на десктопе — navigation drawer. С правильными breakpoint’ами из MD3.

Аудит. Самое интересное — проверка готового приложения на соответствие MD3.

/material-3 audit ./app/src/main

Скилл анализирует код по 10 категориям: цветовые токены, типографика, shape, elevation, компоненты, layout, навигация, motion, accessibility, theming. Выдаёт оценку и конкретные замечания с предложениями исправлений.

Compose-first, но не Compose-only

Скилл приоритизирует Jetpack Compose — это основная платформа. Но покрывает и другие:

Для веба честно предупреждает: Material Web не развивается, M3 Expressive на вебе не реализован. Используйте токены и компоненты, но знайте, что новые фичи туда не придут. Честность ценю — многие скиллы обещают «всё для всех».

Что внутри: структура файлов

material-3-skill/├── SKILL.md                              — главный файл скилла├── references/│   ├── color-system.md                   — цветовые роли, палитры, dynamic color│   ├── component-catalog.md              — 30+ компонентов с Compose-маппингами│   ├── theming-and-dynamic-color.md      — генерация тем, бренд-цвета, dark mode│   ├── typography-and-shape.md           — типографика, shape, elevation, motion│   ├── navigation-patterns.md            — навигация, responsive shell│   └── layout-and-responsive.md          — breakpoints, canonical layouts, edge-to-edge├── CONTRIBUTING.md└── LICENSE (MIT)

Каждый reference-файл — это выжимка из официальной документации m3.material.io, Android Developers и AndroidX Compose Material3 API. Не копия — дистилляция: таблицы токенов, шаблоны компонентов, примеры layout’ов, нормализованные для единообразия.

Аудит — самая полезная часть

Генерация компонентов — это удобно, но Claude Code и без скилла неплохо пишет Material-подобный код. А вот аудит — это то, чего нет нигде.

10 категорий проверки:

1. Color tokens — используете ли MaterialTheme.colorScheme.primary или захардкодили #1A73E8

2. Typography — правильные ли стили текста из MaterialTheme.typography

3. Shape — соответствуют ли скругления токенам (small, medium, large, extraLarge)

4. Elevation — правильные ли уровни тени для каждого компонента

5. Components — используете ли стандартные компоненты или самодельные аналоги

6. Layout — адаптивность, breakpoints, canonical layouts

7. Navigation — правильный ли тип навигации для каждого размера экрана

8. Motion — Expressive анимации, transitions

9. Accessibility — контрастность, touch targets, content descriptions

10. Theming — dynamic color, dark mode, seed-based палитры

На выходе — отчёт с оценкой по каждой категории и конкретными строками кода, которые нужно исправить. Для проектов, которые проходят дизайн-ревью — экономит часы.

M3 Expressive — новый слой (май 2025)

Скилл покрывает M3 Expressive — обновление Material Design 3, которое добавило emphasis в типографику, новые shape-морфинги и расширенные motion-паттерны. Поддержка зависит от платформы:

• Compose — motion и emphasized type доступны

• Flutter — частичная поддержка через community-пакеты

• Web — не реализовано, не планируется

Скилл содержит матрицу поддержки по платформам — перед использованием Expressive-фич можно проверить, доступны ли они на вашей платформе.

Установка

git clone https://github.com/hamen/material-3-skill.gitcp -r material-3-skill ~/.claude/skills/material-3

Или симлинк для автообновлений:

ln -s /path/to/material-3-skill ~/.claude/skills/material-3

После этого в Claude Code доступна команда /material-3.

Ограничения

Compose-first. Если вы пишете на Flutter или для веба — скилл полезен, но не оптимален. Основные примеры и маппинги — под Compose.

Может устаревать. Скилл — дистилляция документации на момент создания. Если Google обновит спеку — скилл отстанет, пока не обновят. Для точных API-сигнатур лучше сверяться с официальными Android-доками.

Не заменяет дизайнера. Скилл генерирует технически корректный MD3-код, но не принимает дизайн-решения за вас. «Какой seed-цвет выбрать» и «нужен ли здесь FAB» — всё ещё ваша работа.

Репозиторий: github.com/hamen/material-3-skill

---

Используете Material Design 3 в проектах? Как решаете проблему соответствия гайдлайнам — ручной аудит, линтеры, или доверяете глазу?