critique-brand-consistency
owl-listener/designer-skills
Audit UI screens against brand guidelines (mood, voice, tokens) for compliance and consistency.
What is critique-brand-consistency?
Critique Brand Consistency checks whether a rendered screen faithfully expresses your brand by comparing it against three reference files: mood.md (personality and aesthetic), voice.md (tone and language), and tokens.md (design token values). Use this when those brand files exist and you need to verify compliance; for defining the visual language itself, use the illustration-style skill instead.
- Compare screen aesthetics against mood.md personality keywords and visual direction
- Audit all visible copy against voice.md tone, vocabulary, and language rules
- Verify every design value (color, spacing, radius, shadow, typography) matches tokens.md definitions
- Flag hardcoded values that should use design tokens
- Identify imagery, illustration, and iconography that diverge from brand mood
- Rate each dimension (Mood, Voice, Token Compliance) as pass, minor issue, or major issue
How to install critique-brand-consistency
npx skills add https://github.com/owl-listener/designer-skills --skill critique-brand-consistency- mood.md file in project root (brand personality, aesthetic keywords, visual references)
- voice.md file in project root (tone, language style, vocabulary rules)
- tokens.md file in project root (canonical color, spacing, radius, shadow, typography values)
How to use critique-brand-consistency
- 1.Locate and read mood.md, voice.md, and tokens.md from your project root
- 2.Provide the rendered screen (screenshot or component) you want critiqued
- 3.The skill will compare the screen against each reference file dimension
- 4.Review the observations, divergences, and fixes provided for Mood, Voice, and Token Compliance
- 5.Apply the suggested corrections to bring the screen into compliance
Use cases
- Review a new feature screen before handoff to development to ensure brand compliance
- Audit an existing product screen that may have accumulated hardcoded values over time
- Verify copy tone and vocabulary in error messages, CTAs, and microcopy match brand voice
- Check that a redesigned component uses the correct tokens and mood aesthetic
- Validate that third-party or contractor-created screens follow your brand guidelines
- Design system managers ensuring consistency across products
- Product designers reviewing screens before development
- Brand leads auditing compliance across teams
- Design QA roles checking brand adherence
critique-brand-consistency FAQ
The skill will note which files are missing and skip those dimensions. It will not invent brand rules. Create those files first if you want full critique coverage.
No. This skill audits compliance against existing brand files. To define your visual language initially, use the illustration-style skill (ui-design) instead.
Any hardcoded hex color, pixel spacing, border radius, shadow, or font size/weight that differs from the values defined in tokens.md. The skill will list the non-compliant value and its correct token equivalent.
The skill checks tone (formal vs. friendly, direct vs. conversational), vocabulary rules (forbidden words, required patterns), and consistency across CTAs, labels, error messages, and microcopy.
Provide one rendered screen per critique for best results. Multiple screens can be reviewed in separate runs.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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:
- Observation — what you see (neutral, factual)
- Divergence — what conflicts with the reference file and why it matters
- 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
Related skills
More from owl-listener/designer-skills and the wider catalog.
critique-color
Audit colour contrast, palette coherence, and semantic meaning on a single screen.
critique-composition
Critique spatial balance, whitespace, rhythm, and gestalt grouping in screen layouts.
critique-information-density
Evaluate screen information density, cognitive load, and content prioritization to reduce overwhelm.
critique-typography
Audit typography on screens for scale compliance, readability, consistency, and token usage.
critique-visual-hierarchy
Critique visual hierarchy on rendered screens to fix misaligned attention and eye flow.
dark-mode-design
Adapt light palettes to dark mode with surface elevation, contrast rules, and desaturation.