К основному содержанию
скилл CX Codex

critique-brand-consistency — скилл для Claude Code: проверка экрана

Сверяет отрендеренный экран с тремя файлами проекта — mood.md, voice.md и tokens.md — и указывает, где стили и тексты разошлись с брендом.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a claude-code
Открыть на GitHub

Что делает critique-brand-consistency

Скилл читает три справочных файла из корня проекта: mood.md описывает характер бренда и визуальные ориентиры, voice.md задаёт тон и правила языка, tokens.md хранит значения цветов, отступов, радиусов, теней и типографики. Дальше экран проверяется по трём направлениям: попадание в настроение, совпадение текстов с голосом бренда и соблюдение токенов.

На выходе по каждому направлению идут три пункта: что видно на экране, что именно конфликтует с файлом-эталоном и как это исправить — конкретное слово или имя токена. Каждое направление получает оценку pass, minor issue или major issue. Отдельно перечисляются жёстко прописанные значения, которые должны были браться из токенов.

Если какого-то из трёх файлов нет, скилл пропускает это направление и не придумывает правила бренда за вас. Поэтому перед запуском проверьте, что нужные файлы лежат там, где вы их ожидаете: без них проверка будет неполной. Для определения самого визуального языка, а не проверки готового экрана, автор отсылает к скиллу illustration-style из набора ui-design.

Какие задачи решает

  • сверить отрендеренный экран с описанием характера бренда
  • найти в вёрстке жёстко прописанные цвета вместо токенов
  • проверить тексты кнопок и ошибок на соответствие tone of voice
  • выловить разные радиусы и тени у компонентов на одном экране
  • получить точную замену для значения, выпавшего из дизайн-системы

Примеры запросов агенту

  • проверь этот экран на соответствие бренду по mood.md, voice.md и tokens.md
  • прогони critique-brand-consistency по странице настроек
  • какие значения на этом экране не совпадают с tokens.md?

Как установить critique-brand-consistency

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a claude-code

2Вручную: положить файлы

~/.claude/skills/critique-brand-consistency/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/critique-brand-consistency/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о critique-brand-consistency

Как установить critique-brand-consistency в Claude?

Выполните npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a claude-code. После этого файл скилла окажется по пути ~/.claude/skills/critique-brand-consistency/SKILL.md.

Что делает critique-brand-consistency?

Сравнивает отрендеренный экран с mood.md, voice.md и tokens.md, отмечает расхождения по настроению, голосу и токенам и предлагает исправление для каждого.

Что нужно подготовить до запуска?

Три файла в проекте: mood.md, voice.md и tokens.md. Если файла нет, соответствующее направление проверки пропускается.

Исходный текст

SKILL.md · MIT
---
name: critique-brand-consistency
description: Critique a rendered screen against mood.md, voice.md, and tokens.md. Use when those brand files exist and you are checking compliance. For defining the visual language itself, use `illustration-style` (ui-design).
---
# Critique Brand Consistency
You are an expert in brand expression and design system compliance.
## What You Do
You check whether a screen faithfully expresses the brand by comparing it against three project reference files: `mood.md` (personality and aesthetic direction), `voice.md` (tone and language guidelines), and `tokens.md` (design token definitions). Flag every divergence and suggest the correct value or approach.
## Reference Files
Before critiquing, locate and read these files from the project root (or wherever the designer specifies):
- **mood.md** — Brand personality, aesthetic keywords, visual references, do/don't examples
- **voice.md** — Tone of voice, language style, copy do/don't rules, vocabulary
- **tokens.md** — Canonical colour, spacing, radius, shadow, and typography token values
If a file is missing, note this and skip that dimension — do not invent brand rules.
## Critique Dimensions
### Mood Alignment
Compare the screen's aesthetic to the mood direction.
- Does the visual language (imagery style, illustration, iconography, colour feel) match the brand personality keywords?
- Are any elements tonally off — e.g., a playful brand using cold, corporate styling?
- Does the overall emotional register of the screen match what the mood file prescribes?
### Voice Alignment
Compare all visible copy to the voice guidelines.
- Does the tone match (e.g., direct vs. conversational, formal vs. friendly)?
- Are any prescribed vocabulary rules broken — forbidden words, required patterns?
- Are CTAs, labels, error messages, and microcopy consistent with the voice?
### Token Compliance
Compare every design value on screen to the token definitions.
- Are hardcoded hex values used where a colour token should apply?
- Are spacing, radius, or shadow values that deviate from tokens present?
- Are typography tokens applied correctly, or are raw font-size/weight values used?
- List every non-compliant value with its token equivalent.
## Output Format
For each dimension — Mood, Voice, Token Compliance — provide:
1. **Observation** — what you see (neutral, factual)
2. **Divergence** — what conflicts with the reference file and why it matters
3. **Fix** — the exact correction (preferred wording, correct token name, etc.)
Rate each dimension: `pass` / `minor issue` / `major issue`.
## Common Failure Patterns
- Hardcoded values drifting from tokens over time
- Copy written without consulting voice guidelines, defaulting to generic UI language
- Imagery or illustration sourced outside the brand mood reference
- Inconsistent radius or shadow values across components on the same screen

© Owl-Listener · MIT · Owl-Listener/designer-skills

Похожие скиллы

Всё по теме «Дизайн» →
component-family-consistency dembrandt Скилл следит, чтобы кнопки, поля ввода, бейджи и пилюли делили радиус, цвета, тени, границы и отступы. Пригодится при сборке или ревизии библиотеки компонентов. CX Codex +1 874установок brand-consistency dylantarre Скилл разбирает анимацию, которая выбивается из стиля бренда, и подсказывает, что поправить: тайминги, кривые, уровень выразительности. CX Codex +1 518установок brand-consistency-checker OneWave-AI Скилл просматривает документы и слайды на чужие цвета, шрифты и логотипы, сверяет их с гайдлайнами бренда и предлагает правки. CX Codex +1 345установок brand-guidelines Alireza Rezvani Помогает применять и оформлять правила бренда: цвета, типографику, логотип и тон коммуникации. Нужен при проверке макетов, текстов и создании гайдлайна. 696установок brand-identity rampstackco Скилл для проектирования и проверки визуальной айдентики: логотип, палитра, типографика, иллюстрации, иконки и принципы анимации. CX Codex +1 495установок professional typeui.sh Задаёт агенту правила дизайн-системы: токены, типографику, состояния компонентов и критерии доступности. Пригодится, когда нужен аккуратный интерфейс без ручных правок. CX Codex +1 2 400установок

Из того же набора109

aesthetic-usability Помогает оценить, как визуальная цельность интерфейса влияет на ощущение удобства и доверия. Нужен при разборе слабых первых впечатлений от работающего дизайна. CX Codex +1 1 900установок information-architecture Скилл проектирует структуру контента: карту разделов, навигационную модель, таксономию и модель типов. Пригодится, когда надо разложить существующий контент по полкам. CX Codex +1 1 900установок critique-composition Оценивает баланс, пустое пространство, ритм и гештальт-группировку на готовом экране. Помогает, когда в макете всё на месте по иерархии, но композиция выглядит разваленной. CX Codex +1 1 900установок service-blueprint Помогает описать, как услуга работает для пользователя и внутри команды. Нужен при поиске сбоев между видимыми действиями, процессами и системами. CX Codex +1 1 800установок navigation-patterns Помогает подобрать схемы переходов между разделами интерфейса: от таббаров до боковых панелей. Полезен при проектировании мобильных и десктопных экранов. CX Codex +1 1 800установок motion-system Задаёт единый набор длительностей, кривых и правил для анимаций в продукте. Пригодится, когда у каждого компонента свои тайминги. CX Codex +1 1 800установок design-negotiation Помогает дизайнерам защищать качество интерфейса, сроки и состав задач в спорах с менеджерами и разработчиками через факты и поиск компромиссов. CX Codex +1 1 700установок design-impact-reporting Помогает связать работу дизайна с метриками продукта и бизнеса и рассказать об этом языком стейкхолдеров. CX Codex +1 1 700установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой