critique-brand-consistency

Reviews rendered screens against mood, voice, and design token reference files for brand compliance.

2.5k|358|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-brand-consistency
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: critique-brand-consistency
Source: https://github.com/Owl-Listener/designer-skills/tree/main/visual-critique/skills/critique-brand-consistency
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-brand-consistency

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Screens often drift from the brand over time: hardcoded hex values replace tokens, copy ignores voice guidelines, and imagery clashes with the intended mood. This Skill systematically checks a rendered screen against the project's brand reference files and reports every divergence with a concrete fix.

Core Features & Use Cases

  • Mood Alignment Check: Compares imagery, iconography, and overall visual feel against the personality keywords in mood.md.
  • Voice Alignment Check: Audits all visible copy, CTAs, labels, and error messages against the tone and vocabulary rules in voice.md.
  • Token Compliance Audit: Detects hardcoded colour, spacing, radius, shadow, and typography values that should use tokens from tokens.md, listing each with its correct token equivalent.
  • Use Case: Before shipping a redesigned settings page, run this critique to catch a hardcoded #3B82F6 button that should use the primary colour token and a CTA label that violates the voice guidelines.

Quick Start

Critique this screen against the mood.md, voice.md, and tokens.md files in the project root and list every divergence with fixes.

Frequently Asked Questions about critique-brand-consistency

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check a screen for brand consistency?

Provide the rendered screen along with the project's mood.md, voice.md, and tokens.md files. The critique compares mood alignment, voice compliance, and token usage, then reports each divergence with a specific fix and a pass/minor/major rating.

How to audit design token compliance in UI screens?

The token compliance check compares every colour, spacing, radius, shadow, and typography value on screen against tokens.md. It flags hardcoded hex values and raw font sizes, listing each non-compliant value alongside its correct token equivalent.

What files are needed for a brand consistency critique?

Three reference files are expected: mood.md for personality and aesthetic direction, voice.md for tone and vocabulary rules, and tokens.md for design token values. If a file is missing, that dimension is skipped rather than invented.

What happens if mood.md or voice.md is missing?

The critique notes the missing file and skips that dimension entirely. It does not invent brand rules, so the remaining dimensions are still evaluated against whichever reference files exist.

When should I use illustration-style instead of a brand critique?

Use illustration-style when defining the visual language itself, such as creating the mood direction or illustration approach. Use this critique only after those brand files exist and you need to verify a screen complies with them.