Color Systemавтор Owl-Listener

Color System Skill.

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

Цветовой дизайн
Рекомендации по дизайну

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

Обзор источника · Color SystemSKILL.md

Задача UX Результат • Тональные шкалы бренда и нейтральных цветов • Семантические роли для переднего плана, фона, границ и иконок • Матрица контраста и применения Прежде чем начать Предоставьте цвета бренда, роли интерфейса и цели доступности. Используйте реальные состояния компонентов и инструмент проверки контраста, чтобы оценить предложенные цветовые сочетания.

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

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

Color System: создание семантических цветов продукта

Слои продуктовой палитры, тональные шкалы, семантическое сопоставление цветов и рекомендации по применению с учётом контраста.

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

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

Color System нужен для создания или перестройки продуктовой палитры. Он разделяет шкалы бренда, нейтральные цвета, семантические цвета статусов и расширенные варианты применения. Результат — не просто несколько привлекательных образцов: у каждого цвета должна быть роль и пригодные для использования взаимосвязи с соседними поверхностями.

Источник сочетает тональные шкалы с проверкой контраста и предостерегает от передачи информации только цветом. Он также требует заранее продумывать соответствия для тёмной темы. Сгенерированная палитра остаётся дизайн-предложением, пока не проверены её реальные тексты, компоненты и сочетания состояний.

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

Тональные шкалы бренда и нейтральных цветов
Семантические роли для переднего плана, фона, границ и иконок
Матрица контраста и применения

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

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

01
Определите слои палитры
Начните с направления бренда и выведите нейтральные цвета и роли статусов, которые продукт действительно использует.
02
Сопоставьте реальные пары
Назначьте цвета тексту, поверхностям, границам и состояниям, а не оставляйте их немаркированными образцами.
03
Проверьте доступность
Проверьте предполагаемые сочетания и добавьте нецветовые сигналы там, где статус должен быть понятен.

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

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

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

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

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

Ограничения, которые нужно проверить

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

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

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

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

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

Роли важнее образцов
Семантическое сопоставление делает палитру пригодной для использования в разных компонентах.
Единица проверки — пара
У цвета нет осмысленного результата контраста текста без фона и контекста использования.

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

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

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

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

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

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

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/color-system/SKILL.md

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

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

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

Используйте color-system, чтобы создать палитру для этого продукта планирования на основе предоставленного синего цвета бренда. Определите тональные и нейтральные шкалы, семантические роли успех/предупреждение/ошибка и матрицу реальных сочетаний текста и поверхности. Отметьте непроверенные значения контраста, а не заявляйте о соответствии требованиям.

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

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

У каждой предложенной роли есть рекомендации по применению.
Для важных пар измерен контраст.
Статус не передаётся только оттенком.

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

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

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

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

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

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

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

Слои продуктовой палитры, тональные шкалы, семантическое сопоставление цветов и рекомендации по применению с учётом контраста.

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

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

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

Это только палитра бренда?

Нет. Она включает нейтральные цвета, семантические состояния и взаимосвязи применения.

Нужно ли думать о тёмной теме уже сейчас?

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

Решает ли всё палитра, безопасная для дальтоников?

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

OpenDesign

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

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

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