color-system — скилл для Claude Code: цветовая система продукта
Скилл собирает палитру продукта: тональные шкалы, семантические роли и проверку контраста по WCAG. Пригодится, когда цвета задают с нуля или переделывают.
npx skills add Owl-Listener/designer-skills --skill color-system -a claude-codeЧто делает color-system
Скилл ведёт агента по четырём слоям палитры. Сначала брендовые цвета с полными тональными шкалами от 50 до 950, затем нейтральная серая шкала для текста, фонов, границ и поверхностей. Дальше семантические цвета — success, warning, error, info, у каждого варианты для фона, текста, границы и иконки. Последний слой — расширенная палитра: цвета для графиков, иллюстраций и градиентов.
Контраст проверяется по требованиям WCAG: текст на фоне не ниже 4.5:1 по AA или 7:1 по AAA, крупный текст от 3:1, элементы интерфейса от 3:1 к соседним цветам. Скилл напоминает, что смысл нельзя передавать одним цветом, и советует проверять палитру симуляторами дальтонизма. Тёмную тему он тоже закладывает сразу, но за её адаптацию отвечает отдельный скилл dark-mode-design.
Внутри — один файл SKILL.md с инструкциями, без скриптов и внешних зависимостей. Для палитр графиков есть data-visualization, для токенов нескольких брендов — theming-system из набора design-systems. Если нужен только один цвет, а не система, скилл будет лишним.
Какие задачи решает
- собрать тональные шкалы 50–950 для брендовых цветов
- развести семантические роли success, warning, error и info по фонам и тексту
- проверить контраст пар текст/фон перед вёрсткой
- подобрать нейтральную серую шкалу для границ и поверхностей
- заложить цвета графиков и иллюстраций отдельно от интерфейсных
Примеры запросов агенту
- Собери цветовую систему для нового продукта: брендовые шкалы, нейтральные и семантические цвета
- Проверь контраст всех пар текст/фон в текущей палитре и покажи, где ниже 4.5:1
- Добавь в палитру цвета для графиков и опиши, где какой применять
Как установить color-system
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a claude-code2Вручную: положить файлы
~/.claude/skills/color-system/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/color-system/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a codex2Вручную: положить файлы
.agents/skills/color-system/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a cursor2Вручную: положить файлы
.cursor/skills/color-system/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills color-system2Вручную: положить файлы
.github/skills/color-system/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/color-systemВручную: положить файлы
.devin/skills/color-system/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill color-system -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о color-system
Как установить color-system в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill color-system -a claude-code. Скилл появится в ~/.claude/skills/color-system/SKILL.md.
Что делает color-system?
Строит палитру продукта по слоям: брендовые тональные шкалы, нейтральные цвета, семантические роли и расширенный набор для графиков. Заодно проверяет контраст по требованиям WCAG.
Чем color-system отличается от dark-mode-design?
color-system задаёт цвета с нуля и сразу закладывает маппинги для тёмной темы, а адаптацией под тёмный режим занимается dark-mode-design. Для палитр графиков берите data-visualization.
Исходный текст
SKILL.md · MIT
--- name: color-system description: Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems). --- # Color System You are an expert in building systematic, accessible color palettes for digital products. ## What You Do You create comprehensive color systems with raw palettes, semantic mapping, and accessibility compliance. ## Color System Layers ### 1. Brand Palette Primary, secondary, and accent colors with full tonal scales (50-950 or equivalent). ### 2. Neutral Palette Gray scale for text, backgrounds, borders, and surfaces. ### 3. Semantic Colors - Success (green), warning (amber), error (red), info (blue) - Each with background, foreground, border, and icon variants ### 4. Extended Palette Data visualization colors, illustration colors, gradient definitions. ## Accessibility Requirements - Text on backgrounds: minimum 4.5:1 contrast (AA) or 7:1 (AAA) - Large text: minimum 3:1 - UI components: minimum 3:1 against adjacent colors - Don't rely on color alone to convey meaning ## Color Relationships - Tint/shade scales for each hue - Complementary pairs for contrast - Analogous sets for harmony - Neutral pairings for text/surface combinations ## Best Practices - Generate full tonal scales, not just single swatches - Test every foreground/background combination for contrast - Provide usage guidance for each color - Design for color blindness (test with simulators) - Include dark mode mappings from the start
© Owl-Listener · MIT · Owl-Listener/designer-skills
