Dark Mode Designавтор Owl-Listener

Dark Mode Design Skill.

Переносите иерархию интерфейса на тёмные поверхности, а не просто инвертируйте цвета.

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

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

Обзор источника · Dark Mode DesignSKILL.md

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

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

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

Dark Mode Design: адаптация существующей палитры

Адаптация тёмной палитры: возвышение, контраст, обработка медиа и поведение выбора темы.

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

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

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

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

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

Иерархия тёмных поверхностей и их возвышения
Сопоставленные цвета текста, границ, действий и статусов
Рекомендации по поведению темы и адаптации медиа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Возвышение без тяжёлых теней
Яркость поверхности может передавать слои там, где тёмные тени неэффективны.
Медиа — часть темы
Яркое изображение или неподходящий логотип могут испортить цельный тёмный интерфейс.

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

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

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

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

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

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

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

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

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

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

Используйте dark-mode-design, чтобы адаптировать эту существующую светлую панель. Сопоставьте поверхности и текст семантически, проверьте цвета предупреждений и изображения диаграмм, определите системную настройку и ручной выбор. Измерьте реальные пары контраста и отметьте ресурсы, которым нужны тёмные варианты.

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

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

Уровни поверхностей остаются различимыми.
Контраст текста и статусов проверен.
Изображения, логотипы и элементы управления темой проверены.

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

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

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

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

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

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

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

Адаптация тёмной палитры: возвышение, контраст, обработка медиа и поведение выбора темы.

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

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

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

Можно ли просто инвертировать палитру?

Источник прямо рекомендует перепроектировать отношения между поверхностями, а не инвертировать цвета.

Создаёт ли он исходную палитру бренда?

Нет. Он предполагает наличие базовой палитры для адаптации.

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

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

OpenDesign

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

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

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