design-system-patterns

design-system-patterns — практический навык для построения масштабируемой дизайн-системы на web и mobile. Он нужен, когда интерфейс уже нельзя поддерживать набором случайных цветов, отступов и локальных компонентов: навык помогает превратить визуальные решения в согласованный набор токенов, правил темизации и повторяемых компонентных паттернов. В область применения входят цвета, типографика, spacing, тени, документация дизайн-системы, а также связка design-to-code с Figma tokens. Основой служит иерархия токенов. Primitive tokens хранят исходные значения цветов, размеров и шрифтов. Semantic tokens связывают значение с назначением: например, text-primary, surface-elevated или interactive-primary. Component tokens описывают конкретное место применения вроде button-bg или card-border. Такое разделение позволяет менять визуальный слой без поиска одинаковых hex-значений по всему проекту и даёт понятный путь от общего правила к компоненту. Навык также рассматривает правила именования, организацию токенов и генерацию представлений для CSS, iOS и Android, поэтому одну систему можно согласованно переносить между платформами. Для темизации описывается архитектура CSS custom properties, контекст темы в React и динамическое переключение. В работу включены определение системного предпочтения через prefers-color-scheme, сохранение выбранной темы, reduced motion и high contrast modes. Это полезно для проекта со светлой и тёмной темой, для multi-brand продукта и для интерфейса, где доступность не должна быть отдельным ручным исправлением. Тема рассматривается как инфраструктура, а не как две независимые палитры: семантические значения должны ссылаться на примитивы и меняться целостно. Компонентный слой охватывает compound components, polymorphic components с prop as, системы вариантов и размеров, slot-based composition, headless UI, style props и responsive variants. Эти паттерны подходят для библиотеки кнопок, форм, карточек, навигации и сложных составных блоков, когда единый API важнее копирования разметки. Перед добавлением варианта следует определить его место в токенах и правилах компонента, чтобы новый режим не превращался в разрозненный набор исключений. Отдельный контур — token pipeline: синхронизация из Figma, конфигурация Style Dictionary, преобразование и форматирование токенов, а также включение обновлений в CI/CD. Это даёт команде повторяемый процесс доставки изменений от исходного дизайна к целевым платформам. На практике навык можно использовать при старте новой component library, миграции legacy-стилей на семантические токены, подготовке брендовых тем или согласовании web, iOS и Android. У подхода есть ограничения, которые нужно учитывать до внедрения. Самая большая система не становится лучше от максимального числа токенов: источник отдельно предупреждает о token sprawl, смешанных соглашениях именования, отсутствии адаптации к dark mode, hardcoded values, циклических ссылках и пробелах между платформами. Поэтому сначала нужна ясная иерархия primitive → semantic → component, затем проверка ссылок и покрытия платформ, а уже после — расширение набора. Подробные рабочие примеры вынесены в references/details.md исходного навыка; эта карточка описывает назначение и границы подхода, но не заменяет проверку конкретной кодовой базы и её ограничений.