83.3K+Скачать
Перейти к руководству
color-expertавтор David Aerne

Color Expert Skill.

Skill для Claude Code и Codex для работы с брендом и дизайн-системами: именование цветов, теория, цветовые пространства, палитры, градации, градиенты, конверсии и контраст.

  • Бренд и дизайн-системы
Скачать OpenDesignИнструкция по использованию
meodai/skill.color-expert · SKILL.mdSKILL.md
--- name: color-expert description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
Вводная информация и заголовки разделов считаны из исходного файла 2026-09-14 · полностью 31 055 символов

01 Что делает

Что делает Skill color-expert в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

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

Он содержит таблицу соответствия задач и цветовых пространств (OKLCH для перцептивной работы, CIELAB D50 для печати, CAM16 для кросс-медийного сопоставления, Kubelka-Munk для пигментов), показатели прохождения APCA и WCAG по 281 триллиону пар hex-цветов, рекомендации по gamut-mapping, шпаргалку по CSS Color 4/5 и подобранный список инструментов, а также 140+ справочных файлов, проиндексированных в references/INDEX.md.

Что он выдаёт

  • Конкретные рекомендации по инструментам и палитрам, подобранные под заявленные ограничения, а не общая теория.
  • Граф токенов, где референсные токены питают семантические роли, такие как surface, on-surface, accent, success, warning и danger.
  • Последовательные и дивергентные рампы для визуализации данных, генерируемые в пределах gamut по построению, для sRGB и Display-P3.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Направление запроса в один из пяти режимов

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

  2. 02
    Отвечать на общие вопросы прямо из файла

    На вопросы вроде того, что такое OKLCH или почему градиент становится серым, отвечайте прямо из файла skill или справочного индекса и указывайте соответствующую справку, обращаясь к инструментам только если пользователь спрашивает, как что-то сделать.

  3. 03
    Строить шкалы сначала в OKLCH

    Для дизайн-систем, рамп и токенов темы порядок приоритетов начинается с OKLCH, чтобы светлота оставалась стабильной по всем оттенкам, а средние тона не становились мутными.

  4. 04
    Вставлять семантический слой перед использованием в UI

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

  5. 05
    Сначала представьте несколько подходов к палитре, а затем сужайте выбор

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

02 Определите своё применение

Когда использовать навык color-expert

Используйте skill color-expert в Claude Code или Codex, когда задача связана с брендом и дизайн-системами. Область применения и ограничения взяты из файла самого skill.

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

  • Подбор цветов для конкретного брифа — логотипа, постера, иллюстрации или приложения, — где сначала уточняются носитель и настроение.
  • Построение шкал design system и токенов темы: 9-шаговая шкала акцентного цвета, палитра для светлой и тёмной темы, шкалы в стиле Tailwind или Radix, либо серая шкала, подобранная под бренд.
  • Генеративное искусство и creative coding, где код сам является произведением искусства, а пользователю нужны техники для составления, а не стиль конкретного художника для копирования.
  • Прямые общие вопросы о цвете, например, что такое OKLCH, почему градиент становится серым в середине, или превосходит ли APCA WCAG.
  • Создание генератора палитр или запрос функции для построения шкалы OKLCH, где ответом должен быть рабочий код в стеке пользователя.

Знайте границы

  • Использование coolors.co в качестве генератора; в файле указано, что он выбирает случайным образом из палитр, зашитых в его JS-бандл.
  • Самодельная сортировка цветов по одному каналу; сортировка только по оттенку или только по светлоте предсказуемо даёт сбои, а сортировка по упакованному RGB/HSL — рваные скачки.
  • Использование комплементарных, триадных или тетрадных интервалов оттенков как самостоятельного правила гармонии — в файле сказано, что сами по себе они слабые предикторы.
  • Ожидание, что три или более заливок графика будут держать контраст 3:1 между собой; в файле рекомендуется вместо этого использовать ограничение по границе.

Что предоставить

  • Носитель и ограниченияДля дизайн- или арт-проекта укажите носитель (печать, экран, краска, смешанный), бренд или настроение, аудиторию, требования к доступности и любые существующие цвета, с которыми нужно гармонировать.
  • Реальный целевой цветовой охватУкажите, должен ли результат оставаться в sRGB или P3, поскольку цвет, допустимый в P3, может выходить за границы sRGB, и проверка в этих случаях отличается.
  • Ваш стекПримеры кода пишутся в стеке пользователя, а цветовое пространство выбирается согласно таблице задач skill.
  • Существующая система для гармонизацииЕсли у вас уже есть система палитры, её перцептивную структуру можно извлечь и повторно применить к вашему собственному оттенку.

03 Внутри скилла

Правила, которые skill color-expert даёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Никогда не рекомендовать coolors.co

    Skill явно запрещает использовать его как генератор палитр, поскольку он выбирает из фиксированного набора 7821 готовой палитры, а не генерирует что-либо.

  2. Исправлять выход OKLCH за пределы охвата, снижая насыщенность, а не светлоту или оттенок

    Клиппинг каналов R/G/B смещает оттенок, поэтому сохраняйте идентичность цвета, снижая насыщенность к границе охвата, а не отсекая каналы.

  3. Не допускать сырых цветовых литералов в компонентах

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

  4. Предпочитать нативный CSS перед JS-библиотекой

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

  5. По умолчанию используйте существующую библиотеку, а не пишите вручную

    Когда пользователю нужен генератор или алгоритм палитры, по умолчанию рекомендуется существующая библиотека, например Culori, Poline, RampenSau или Spectral.js.

  6. Не читайте лекций о внутреннем устройстве без запроса

    В конкретном дизайн- или арт-проекте агент должен предлагать и рекомендовать, а не объяснять внутреннее устройство CIE 1931 или OKLCH, если пользователь не спрашивает об этом.

  7. Проверяйте контраст в обеих темах

    Каждая пара текст-фон должна быть проверена по APCA или WCAG как в светлом, так и в тёмном режиме.

  8. Кодируйте производные значения вместо фиксации литералов

    Там, где решение можно вывести из ограничений — читаемый передний план, hover-состояние от базового token в OKLCH, ближайший именованный оттенок — система должна выдавать правило, а не единичное ручное решение.

04 Применение

Установите color-expert в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте color-expert в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert

Общая форма CLI-команды skills для SKILL.md; репозиторий может документировать собственный путь.

Дайте Skill первую рабочую задачу по бренду и дизайн-системе

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Подтверждайте контраст по WCAG или APCA и учитывайте размер текста, насыщенность, полярность и CVD; проверка в градациях серого — лишь базовая сверка.
  • Для последовательного градиента отслеживайте перцептивный шаг между соседними образцами и требуйте ровную линию как в цвете, так и в градациях серого.
  • Используйте градации серого только как быструю проверку разделения светлоты, а не как доказательство доступности.
  • Отображайте цвета за пределами гаммы с ограничением по цветности, сохраняющим L и H, а не наивным ограничением RGB.
  • Проверяйте сгенерированную палитру на соответствие правилам WCAG, CVD, различимости, справедливости и восприятия с помощью Color Buddy.
  • Проверяйте существующую палитру на коллизии JND при симуляции нарушения цветового зрения.

В OpenDesign color-expert встроен: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
David Aerne
Repository
github.com/meodai/skill.color-expert Ветка main
Файл skill
SKILL.md Контрольная сумма содержимого записана при верификации; коммит 6514810
License
CC-BY-4.0 Из LICENSE.
Звёзды репозитория
575 Снимок GitHub от 2026-09-14 для всего репозитория meodai/skill.color-expert. Не является рейтингом или счётчиком использования color-expert.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Как использовать этот skillПять режимов ответа: дизайн-проект, дизайн-система, генеративное искусство, общий вопрос, создание генератора.
  2. Цветовые пространства — что использовать и когдаТаблица соответствия задачи и пространства: OKLCH для восприятия, CIELAB D50 для печати, CAM16 для кросс-медиа, J
Собственное описание skill
«Используйте, когда работаете с названиями цветов, теорией цвета, цветовыми пространствами, определениями цветов или любой задачей, связанной с знаниями о цвете — палитрами, градациями, градиентами, конверсиями, доступностью, перцептивным соответствием, смешиванием пигментов, цветом для печати и экрана, синтаксисом цвета CSS или исторической терминологией цвета. Используйте этот skill всякий раз, когда пользователь выбирает, сравнивает, генерирует, называет, конвертирует или объясняет цвета, даже если он явно не просит «теорию цвета».»

Описание из заголовка SKILL.md. Полный файл содержит около 31 055 символов. Читать полный файл на GitHub.

Color Expert

Запустите color-expert на реальной задаче по бренду и дизайн-системе.

Skill color-expert встроен в OpenDesign. Скачайте приложение, выберите skill в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert