Перейти к руководству
Theming Systemавтор Owl-Listener

Theming System Skill.

Пусть одна библиотека компонентов меняет внешний вид без дублирования структуры.

  • Дизайн-системы
  • Темизация
Обзор источника · Theming SystemSKILL.md
Задача Дизайн-системы Результат • Трёхслойная архитектура токенов с правилами переопределения. • Матрица тем, охватывающая нужные режимы цвета, бренда или плотности. • Покрытие компонентов и рекомендации о том, какие токены фиксированы, а какие зависят от темы. Перед началом Реализация использует систему токенов проекта или аналоги платформы; переключение во время выполнения нужно разработать и протестировать.
Редакционное резюме · источник просмотрен 2026-10-07 · не сгенерированный пример

01 Возможности

Поддержка нескольких тем через токены

Многоуровневая архитектура темизации для общих компонентов разных брендов, цветовых режимов и вариантов плотности.

Рабочий процесс на основе источникаНе тест производительности выполнения

Рабочий подход

Theming System размещает различия тем в многоуровневой архитектуре токенов. Значения исходной палитры питают семантические роли, а те — токены уровня компонентов. Переопределения темы в основном меняют семантический слой, поэтому одни и те же компоненты могут работать для разных брендов или цветовых режимов.

Источник отличает темы от простой инверсии цветов. Тёмные поверхности, возвышение, насыщенность и варианты изображений требуют продуманной обработки. Плотность также указана как измерение темы, поэтому спецификация актуальна не только для цвета.

Ожидаемые результаты

  • Трёхслойная архитектура токенов с правилами переопределения.
  • Матрица тем, охватывающая нужные режимы цвета, бренда или плотности.
  • Покрытие компонентов и рекомендации о том, какие токены фиксированы, а какие зависят от темы.
Смотреть пример брифа

От брифа до проверки

  1. 01
    Разделите слои токенов

    Определите исходные примитивы, псевдонимы по назначению и ссылки уровня компонентов.

  2. 02
    Составьте карту переопределений тем

    Меняйте семантические роли для каждой запрошенной темы, сохраняя контракт компонента.

  3. 03
    Проверьте всю библиотеку

    Проверьте каждый компонент в каждой поддерживаемой теме, включая изображения и поведение при настройках ОС.

02 Когда использовать

Когда использовать

Реализация использует систему токенов проекта или аналоги платформы; переключение во время выполнения нужно разработать и протестировать.

Хорошо подходит

  • Продукты с несколькими брендамиПолезно, когда интерфейсы white-label или суббрендов должны использовать общую библиотеку компонентов.
  • Не только светлая и тёмная темыДаёт структуру и для высококонтрастных вариантов или вариантов плотности.

Ограничения для проверки

  • Не упражнение с одной палитройВыбор одного набора цветов не создаёт поддерживаемую архитектуру темизации.
  • Нет автоматической сертификации контрастаКаждую реальную комбинацию текста, поверхности и состояния всё равно нужно тестировать.

Что подготовить

  • Поддерживаемые темыПеречислите бренды, цветовые режимы, режимы контраста и требования к плотности.
  • Существующие токеныПредоставьте палитру, семантические псевдонимы и ссылки компонентов.
  • Неизменные элементы брендаУкажите ресурсы или значения, которые не должны меняться между темами.

03 Важные решения

Важные решения

  1. Переопределяйте на нужном слое

    Семантические псевдонимы не дают разбрасывать брендовые цвета по реализациям компонентов.

  2. Ресурсы — часть темы

    Изображениям и иллюстрациям могут понадобиться варианты; одни переменные CSS могут не сделать тёмный режим цельным.

04 Пример задания

Попробуйте целевой бриф

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

Проверьте настройку

Используйте описанный в репозитории способ установки и сохраните все упомянутые вспомогательные файлы. Эта запись описывает целевой метод дизайна, а не исполняемое приложение.

Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

Реализация использует систему токенов проекта или аналоги платформы; переключение во время выполнения нужно разработать и протестировать.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом брифе.

Пример брифа
Используйте theming-system для библиотеки компонентов, общей для двух брендов в светлом и тёмном режимах. Определите слои примитивов, семантики и компонентов, выделите фиксированные токены и покажите, как работают переопределения тем. Включите варианты изображений и матрицу QA «компонент × тема», не считая инверсию цвета достаточной.

Изучите результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Токены компонентов разрешаются через документированные семантические роли.
  • Изменяемые по теме и фиксированные значения различаются.
  • Тестовая матрица включает каждую поддерживаемую тему.

OpenDesign предоставляет локальное дизайн-пространство для кодирующих агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Источник и лицензия

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

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Лицензия
MIT
Просмотренный снимок
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Многоуровневая архитектура темизации для общих компонентов разных брендов, цветовых режимов и вариантов плотности.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использования навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

На каком слое темы должны переопределять токены?

Источник помещает основные переопределения на семантический слой между исходными значениями и токенами компонентов.

Может ли плотность быть темой?

Да. Источник включает комфортную, компактную и просторную плотность наряду с режимами цвета и бренда.

Предписывает ли он один инструмент реализации?

Он перечисляет пользовательские свойства CSS, файлы токенов, режимы переменных Figma и переключение во время выполнения, не требуя одного стека.

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md