Дизайн-системы

Material 3

Реализует Material Design 3 от Google в Compose, Flutter и вебе.

Что это

Гайд по Material Design 3, покрывающий пространство токенов md.sys, 30+ компонентов, адаптивную раскладку, темизацию и M3 Expressive. Jetpack Compose основная цель; Flutter и @material/web вторичны.

>
Из исходного SKILL.md

Почему это важно для дизайна

  • Токены цвета, шрифта, формы и высоты заменяют захардкоженные hex и радиусы.
  • Тональные поверхности несут глубину вместо теней, в согласии с текущей спецификацией MD3.
  • Оценочный аудит рейтингует десять категорий и перечисляет правки по приоритету.

Что внутри

  • Design token system
  • Component quick reference
  • Common patterns
  • Anti-patterns
  • M3 Expressive
  • MD3 compliance audit

Как установить

Material 3

  1. Клонируйте репозиторий.

    git clone https://github.com/hamen/material-3-skill
  2. Укажите Codex на файл скилла.

    skills/material-3/SKILL.md
  3. Дальше опишите нужный интерфейс. Codex следует скиллу.

Как запустить с Codex

  1. Назовите платформу, чтобы Codex выбрал Compose, Flutter или кастомные свойства CSS.

  2. Запросите компонент и получите правильный вариант вместе с проводкой токенов.

  3. Прогоните аудит по URL или исходным файлам ради отчёта о соответствии.

Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.

Больше плагинов в списке codex-design ↗

Следующий шаг

Проектируйте с Open Design без возни с настройкой

Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.