本文へ移動
cccskills
無料GitHub で公開

critique-brand-consistency

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).

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9012026年9月6日 更新

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9012026年9月6日 更新

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9012026年9月6日 更新

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9012026年9月6日 更新

Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9012026年9月6日 更新

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.

日本語の概要は準備中です。原文の説明を表示しています。

Owl-Listener/designer-skills2,9012026年9月6日 更新

Owl-Listener のスキルをすべて見る

このスキルの問題を報告する