critique-brand-consistency — скилл для Claude Code: проверка экрана
Сверяет отрендеренный экран с тремя файлами проекта — mood.md, voice.md и tokens.md — и указывает, где стили и тексты разошлись с брендом.
npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/critique-brand-consistency/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/critique-brand-consistency/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a codex2Вручную: положить файлы
.agents/skills/critique-brand-consistency/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a cursor2Вручную: положить файлы
.cursor/skills/critique-brand-consistency/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills critique-brand-consistency2Вручную: положить файлы
.github/skills/critique-brand-consistency/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path visual-critique/skills/critique-brand-consistencyВручную: положить файлы
.devin/skills/critique-brand-consistency/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-brand-consistency -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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