106.9K+Скачать
Перейти к руководству
Design Tokensавтор julianoczkowski

Design Tokens Навык.

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

  • Токены
  • Tailwind
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · design-tokensSKILL.md
Задача Преобразуйте выбранное направление дизайна в переиспользуемые значения темы. Результаты Файл токенов или расширение темы в формате проекта. Перед началом Источник предписывает расширять существующую систему, а не перезаписывать её.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

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

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

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

Процесс на основе источникаНе тест выполнения

Принцип работы

Design Tokens определяет значения, на которые будут ссылаться новые компоненты. Начинает с изучения существующих CSS-переменных, провайдеров темы, файлов токенов и зависимостей фреймворка, затем читает дизайн-бриф функции. Если система уже есть, навык заполняет её пробелы, а не заменяет её.

Результат соответствует стеку проекта: пользовательские CSS-свойства, конфигурация Tailwind или модуль темы. Документированный процесс включает светлую и тёмную палитры, а также значения отступов, типографики, компоновки, движения и адаптивности. Агент объясняет выбранное визуальное направление и решения, отклоняющиеся от него.

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

  • Файл токенов или расширение темы в формате проекта.
  • Осознанно разработанные светлая и тёмная палитры с семантическими ролями.
  • Краткое описание направления дизайна и решений реализации.
Смотреть пример задания

От задания до проверки

  1. 01
    Изучите существующие основы

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

  2. 02
    Свяжите бриф со стеком

    Прочитайте бриф текущей функции и его эстетическое направление. Выберите формат токенов под приложение; при неясном стеке используйте пользовательские CSS-свойства по умолчанию.

  3. 03
    Определите связанные шкалы

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

  4. 04
    Создайте оба режима темы

    Осознанно спроектируйте тёмные значения и поддержите описанные источником варианты системных предпочтений и ручного выбора темы. Объясните, как новые значения расширяют систему.

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

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

Источник предписывает расширять существующую систему, а не перезаписывать её.

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

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

Ограничения

  • Сохраняйте существующие токеныИсточник предписывает расширять существующую систему, а не перезаписывать её.
  • Нужно направление дизайнаЕсли брифа нет, определите предполагаемое направление. Именованная эстетическая философия получает параметры из сопутствующего навыка frontend-design.
  • Значения нужно проверить в приложенииСгенерированная палитра всё равно требует проверки контраста и отображения в реальных компонентах.

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

  • Бриф функцииПредоставьте принятое визуальное направление и соответствующие дизайн-решения.
  • Исходники темыПредоставьте текущие переменные, конфигурационные файлы и экспорты токенов.
  • Стек приложенияУкажите CSS, Tailwind или реализацию через провайдер темы.

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

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

  1. Семантическое повторное использование

    Компоненты могут ссылаться на роли текста, поверхности и фокуса вместо произвольных значений.

  2. Осознанные режимы

    Тёмный режим проектируется вместе со светлым.

  3. Соответствие стеку

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

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

Попробуйте конкретное задание

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

Изучите исходные инструкции и настройку

Предоставьте принятое визуальное направление и соответствующие дизайн-решения.

Исходный файл в репозитории
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md

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

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

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

Пример задания
Используй design-tokens для расширения темы нашей новой функции отчётности. Сначала прочитай утверждённый дизайн-бриф и изучи существующие CSS-переменные, настройки Tailwind и провайдеры темы. Сохрани текущие имена токенов и заполни только документированные пробелы. Нужны семантические поверхности графиков, статусные цвета, отступы и типографические значения для светлого и тёмного режимов. Используй существующий формат проекта и объясни взаимодействие ручного выбора темы с системными предпочтениями. Добавь сопоставление новых значений с ролями и отметь сочетания палитры, которым ещё нужна проверка контраста при отображении.

Проверьте результат

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

  • Существующие определения токенов сохранены, если изменение явно не обосновано.
  • Обе темы покрывают предполагаемые семантические роли.
  • Новые компоненты могут использовать результат в реальной системе стилей проекта.

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

Скачать OpenDesignЧитать краткое руководство

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

Исходные материалы и лицензия

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

Владелец источника
julianoczkowski
Репозиторий
julianoczkowski/designer-skills
Файл навыка
SKILL.md
Лицензия
Apache-2.0
Проверенный снимок
2026-11-02 · c259656c76d9
Редакционное резюме источника
Преобразуйте выбранное направление дизайна в переиспользуемые значения темы.

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

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

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

Всегда ли создаётся новый файл tokens.css?

Нет. Источник выбирает CSS-переменные, конфигурацию Tailwind или модуль темы в зависимости от стека.

Как получать тёмный режим?

Источник требует осознанного выбора палитры, а не простого инвертирования светлых цветов.

Можно ли работать с существующей системой?

Да. Работа начинается с поиска существующих токенов и заполнения их пробелов.

OpenDesign

Храните задание и работу над дизайном вместе.

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

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md