Design Tokenавтор Owl-Listener

Design Token Skill.

Дайте визуальным решениям названия и связи, которые компоненты смогут использовать повторно.

Дизайн-системы
Спецификации

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Design TokenSKILL.md

Задача Дизайн-системы Результат • Категории токенов и схема именования • Связи между глобальными, алиасными и компонентными токенами • Рекомендации по использованию и версионированию Перед началом Предоставьте существующие визуальные значения, примеры компонентов и ограничения по именованию. Навык определяет имена токенов и связи между ними; инструменты экспорта и интеграция с фреймворком требуют отдельной настройки.

Редакторское резюме · источник проверен 2026-10-07 · не сгенерированный пример

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

Design Token: определение семантической основы

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

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

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

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

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

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

Категории токенов и схема именования
Связи между глобальными, алиасными и компонентными токенами
Рекомендации по использованию и версионированию

Посмотреть пример задания

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

01
Инвентаризация основ
Перечислите значения, нужные продукту для цвета, сетки, шрифтов, возвышения и анимации.
02
Определение уровней
Отделите исходные шкалы от семантических ролей и добавляйте имена для конкретных компонентов только там, где это полезно.
03
Документирование применения
Объясните, где применяются алиасы и как компонентам следует ссылаться на них вместо жёстко заданных значений.

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

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

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

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

Новый слой токеновИспользуйте, когда визуальные значения есть, а общих имён и ролей для них нет.
Непоследовательные основыДайте повторяющимся решениям по отступам или цвету общий словарь.

Что учитывать

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

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

Текущие значенияПредоставьте решения по палитре, шрифтам, отступам и возвышению.
Потребности компонентовПокажите типичные случаи использования и состояния.
Ограничения по именованиюУкажите соглашения платформы и ожидания по версионированию.

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

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

Имена сохраняют замысел
Семантические алиасы сохраняют замысел при изменении исходных значений.
Уровни предотвращают путаницу
Глобальный цвет и цвет состояния кнопки не следует считать взаимозаменяемыми именами.

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

Попробуйте целевое задание

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

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

Загрузите SKILL.md для этой задачи из репозитория designer-skills в поддерживаемое место для навыков вашего агента. Универсальная команда установки во входном файле не указана.

Исходный файл в репозитории

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md

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

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

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

Используйте design-token, чтобы определить слой токенов для этой небольшой продуктовой системы. Разделите исходные шкалы, семантические алиасы и необходимые токены компонентов. Сопоставьте предоставленные примеры кнопки и карточки, задокументируйте правила именования и не утверждайте наличие конвейера экспорта, который мы не реализовали.

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

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

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

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

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

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

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

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

Владелец источника: Owl-Listener
Репозиторий: Owl-Listener/designer-skills
Файл навыка: design-systems/skills/design-token/SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-07 · 9a6930cf84a8

Редакторское резюме источника

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

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

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

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

Токены — это только цвета?

Нет. Источник включает отступы, типографику, возвышение, границы и анимацию.

Должен ли каждый компонент использовать исходные значения?

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

Поддерживает ли он несколько брендов?

Запись отделяет базовую архитектуру токенов от отдельной задачи theming-system.

OpenDesign

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

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

Скачать OpenDesign Смотреть дизайн-навыки