mcpField
C
competitive-visual-audit

competitive-visual-audit

github.com/mike-coulbournDesign & UI4554 installsUpdated 4w ago
Repository

About competitive-visual-audit

A competitive visual-audit skill for brand and design teams. It structures reviews of competitors’ identity, positioning, and voice, then connects findings to visual design choices.

Key features

  1. 01Review competitor identity, positioning, and voice
  2. 02Score brands with the Good/Different Chart
  3. 03Map perception and identify market whitespace
  4. 04Compare color, typography, and imagery patterns
  5. 05Translate findings into design decisions

Use cases

  1. 01Avoid crowded competitor colors when choosing a brand palette
  2. 02Find visual distinction through a typography audit
  3. 03Use a positioning map to guide visual direction

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mike-coulbourn/claude-vibes --skill competitive-visual-audit

After installing, type/competitive-visual-auditin Claude Code to confirm it loaded.

Bundled filesreference/templates.md

Details

From the project README

Competitive Visual Audit Frameworks

Quick reference for competitive brand analysis that informs visual identity decisions. This skill auto-activates during visual phases so competitive insights guide design decisions.

"When others zig, zag. Radical differentiation is the surest path to relevance." — Marty Neumeier


Key statistics

  • 55% of brand first impressions are visual
  • 90% of snap judgments are made on color alone (depending on product)
  • 80% boost in brand recognition from consistent visual strategy
  • 86% of customers say authenticity is a key reason they buy

The Good/Different Chart (Marty Neumeier)

Plot brands on two axes, "Good" (customer value) and "Different" (novelty/surprise):

                DIFFERENT (Novel, Surprising)
                       │
      ZONE OF          │         ZONE OF
      IRRELEVANCE      │         DOMINANCE
      (Different but   │         (Good AND Different)
       not good)       │         ← THE GOAL
                       │
───────────────────────┼───────────────────────
                       │
      ZONE OF          │         ZONE OF
      MEDIOCRITY       │         COMMODITIZATION
      (Neither good    │         (Good but
       nor different)  │          not different)
                       │
                GOOD (Customer Value)

Score each competitor 1-10 on both axes, then plot their position.


The Only-ness Statement (Marty Neumeier)

Format: "Our brand is the only [category] that [differentiation] for [audience] in [market] who [need or belief]."

Test: Can competitors complete the same statement truthfully? If yes, you're not differentiated enough.


Zig vs zag decision framework

When to "Zig" (follow category conventions)
  • Category requires trust/safety signals (healthcare, finance, legal)
  • Customers use visual conventions to identify legitimate options
  • Entering an established market needing initial credibility
  • Differentiation comes from other factors (service, pricing)
When to "Zag" (break category conventions)
  • Category is visually homogeneous (everyone looks the same)
  • Genuine philosophical/strategic difference to communicate
  • Target audience is tired of category sameness
  • Can sustain the difference with real substance
  • Willing to polarize some to attract others strongly

Visual differentiation priority

Based on impact and feasibility:

PriorityElementImpactNotes
1ColorHighestMost immediate differentiator
2TypographyHighAffects all touchpoints
3Photography/ImageryHighDistinctive but resource-intensive
4Illustration styleHighUnique but requires consistency
5Logo designFoundationalSets tone, just one element
6Layout/White spaceSubtleDifferentiates through feel

Quick visual audit checklist

When analyzing competitors, capture for each:

Visual Identity

  • Logo: Symbol vs. wordmark, style, complexity
  • Primary Color + Hex code
  • Secondary Colors
  • Typography: Serif vs. sans-serif, weights
  • Imagery: Photography vs. illustration, mood, subjects
  • Overall aesthetic: Minimal, bold, playful, corporate

Positioning

  • Tagline
  • Key claims
  • Only-ness assessment (can they complete the statement?)
  • Good/Different Chart position (1-10 each axis)

Voice

  • Tone: Professional, casual, playful, authoritative
  • Personality traits (3-4 adjectives)
  • Sample language from their site

Perceptual mapping quick guide

  1. Choose Two Axes that matter to customers and create contrast:

    • Price (Low → High) vs. Quality (Low → High)
    • Professional ↔ Friendly
    • Traditional ↔ Innovative
    • For Experts ↔ For Everyone
  2. Plot 10+ competitors on the map

  3. Identify White Space: quadrants with low competition


Common visual patterns to look for

Color Clusters

  • Where do most competitors congregate? (Many industries have a "blue problem")
  • What color territories are unclaimed?

Typography Trends

  • All serif? → Consider sans-serif
  • All geometric sans? → Consider humanist or serif

Imagery Patterns

  • All stock photography? → Consider custom illustration
  • All people shots? → Consider product/abstract

Research-to-design bridge

Competitive FindingInforms
Color white spacePrimary color selection
Typography patternsTypeface selection
Imagery gapsPhotography/illustration direction
Positioning map white spaceVisual personality
Archetype landscapeOverall aesthetic

Templates

Read reference/templates.md when producing a deliverable the user will keep, such as a filled worksheet, a documented decision, or a final write-up. Skip it for conceptual questions and quick recommendations, which this file covers. It opens with a table of contents, so load only the template needed:

  • Color audit matrix
  • Typography audit matrix
  • Imagery style audit matrix
  • Perceptual map template
  • Good/Different Chart template
  • Output validation checklist

When to apply this knowledge

During color selection
  • Reference competitive color audit to avoid clusters
  • Identify unclaimed color territories
During typography selection
  • Reference typography audit to find differentiation
  • Counter-position if category is homogeneous
During visual direction
  • Use perceptual map to guide overall aesthetic
  • Apply Zig vs Zag decision framework
During positioning work
  • Reference Only-ness Statement opportunities
  • Use Good/Different Chart for strategic positioning

Key principles

  1. Map before you create: Understand the landscape before making visual decisions
  2. White space is opportunity: What no one does is what you could own
  3. Color is fastest differentiator: Start there for visual differentiation
  4. Distinctiveness requires consistency: Different only works if you maintain it
  5. Be the Only, not the Best: Neumeier's core principle

Deep methodology

For full competitive brand audits, the brand-competitive-auditor agent contains 750+ lines of methodology, including output formats and research processes.

Comments

Markdown supported