# Banner Critique

> Vision-based design critique for banners, creatives, or any rendered visual. Use AFTER any banner production step and BEFORE showing the user. Reads the image through Codex vision and scores it on 5 axes (readability, hierarchy, depth, brand fit, professional polish), returns top 3 issues + 3 specific fixes + PASS/REVIEW/FAIL verdict. Use when user says '/banner-critique', 'critique this banner', 'rate this design', or as a self-check gate before delivery. ANTI-PATTERN: do not use for code review (use code-review), text review (use audit-pro), or non-visual outputs.

- Skill: `cryptopafi/banner-critique` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cryptopafi/banner-critique`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cryptopafi/banner-critique/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: cryptopafi (https://skillmd.com/u/cryptopafi)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/cryptopafi/banner-critique

---


# /banner-critique — Vision-model design review for banners

Reads a banner image, scores it on 5 graphic-design axes, returns specific fixes. Used as a self-review gate before showing creative output to the user.

## When to invoke

- After any banner render step in `~/.nexus/projects/smsads/casino-rewards/` (or other creative project)
- After the `gpt-image-banner` skill produces a hero
- After the compositor (Prompt 05) outputs a final asset
- Before announcing iteration N to the user
- User explicitly says: `/banner-critique {path}`, "rate this design", "is this good enough to ship?", "critique this banner"

ANTI-PATTERN — do NOT use for:
- Code review (use `code-review` or `audit-pro`)
- Text-only review (use `audit-pro`)
- Performance analysis (use `audit`)
- Architecture review (use `audit-pro` profile=architecture)

## Required input

- `image_path` — absolute path to the banner file (JPG/PNG/GIF/WebP)
- Optional `--brand` — brand code (CK/LXC/ZC) to anchor brand-fit scoring against the LP style ref
- Optional `--target-size` — expected dimensions like `250x250` for hierarchy scoring at that scale
- Optional `--reference` — path to a comparison reference banner (1+); enables side-by-side scoring

## Method

1. Read the image with the runtime image-viewing tool (`view_image` in Codex).
2. If `--brand` is provided, also read:
   - `~/.nexus/projects/smsads/casino-rewards/recon/lp-style/{brand}-{lang_geo}.md` for palette + voice baseline
3. If `--reference` is provided, read each ref image and prepare comparative judgment.
4. Score the input image on the 5 axes below (each 1–5, integer).
5. Identify the top 3 design issues.
6. Suggest 3 specific, actionable fixes (one per issue).
7. Compute verdict:
   - All axes ≥ 4 → **PASS** (ship-ready)
   - Mostly ≥ 3, one axis = 2 → **REVIEW** (operator judgement needed)
   - Any axis ≤ 2, OR mean < 3 → **FAIL** (do not ship; iterate)
8. Return the report.

## 5-axis scoring rubric

### Axis 1 — Readability (1–5)
- 5: All text is crisp, contrast ratio ≥ 7:1 (WCAG AAA), minimum 18pt at final render, no clipping, no kerning issues, sub-pixel anti-aliasing clean.
- 4: Text legible at full size, minor contrast issue OR slight kerning issue OR small text near 14pt.
- 3: Text legible at full size but uncomfortable; contrast ratio 4.5–6.5; some sub-12pt elements.
- 2: Text fights with background; multiple legibility issues at full size.
- 1: Text unreadable, blends with image, missing contrast, clipped or cut.

### Axis 2 — Hierarchy (1–5)
- 5: One dominant element clearly carries the message (eye lands on it within 0.3s); supporting elements graded by size, color, weight; legal subordinate but readable; flow obvious.
- 4: Clear dominant element, minor competition between two elements; flow still readable.
- 3: Hierarchy attempted but partially flat; eye doesn't know where to land first; some elements compete.
- 2: All elements roughly equal weight; eye bounces; no clear focal point.
- 1: Chaotic; multiple competing focal points OR everything is flat-equal.

### Axis 3 — Depth (1–5)
- 5: Genuine depth — layered z-order, atmospheric haze, drop shadow, accent glow, foreground-midground-background distinction, photographic lighting; banner feels three-dimensional.
- 4: Depth attempted with shadow/glow on key elements; works but flatter than ideal.
- 3: Some shadow OR glow on one element; still mostly flat layered.
- 2: Pure flat design with no depth cues; sticker-art / wireframe look.
- 1: Aggressively flat; HTML-table-cell aesthetic; no graphic-design polish.

### Axis 4 — Brand fit (1–5) — REQUIRES `--brand`
- 5: Matches LP palette ±5 hex per channel, font family matches LP, CTA verb verbatim, voice mirrors LP (pronoun, currency, punctuation).
- 4: Matches LP palette ±15 hex, font close-substitute, copy verbatim.
- 3: Recognizable as the brand but with drift on either palette OR font OR voice.
- 2: Two of the three drifted; ambiguous brand identity.
- 1: Could be any generic casino brand; no LP-anchor recognition.

(If `--brand` not provided, score = 3 with note "brand-fit unmeasured — pass --brand to enable")

### Axis 5 — Professional polish (1–5)
- 5: Looks like a paid-design-agency deliverable — would be at home in Meta Ads Library top-100 casino creatives. Confident composition, sophisticated lighting, no amateur tells.
- 4: Polished and shippable; clean execution; could be A/B tested against an agency creative.
- 3: Decent first-pass; visible amateur tells (basic CSS look, generic typography, no atmosphere) but reads as competent.
- 2: Looks like a homework assignment; clearly machine-made; no design judgement.
- 1: Looks broken or rushed; would harm brand perception if shipped.

## Output format

Return to chat AND write to `~/.nexus/projects/smsads/casino-rewards/deliverables/{brand_slug}/{lang_geo}/critique-{timestamp}.md`:

```
BANNER CRITIQUE — {image_path}
Brand: {brand_code} | Target: {WxH} | Reference: {ref_count}

SCORES:
  Readability:           {N}/5
  Hierarchy:             {N}/5
  Depth:                 {N}/5
  Brand fit:             {N}/5
  Professional polish:   {N}/5
  --------------------------
  MEAN:                  {N.NN}/5
  VERDICT:               {PASS|REVIEW|FAIL}

TOP 3 ISSUES:
  1. {issue} — affects axis {N}
  2. {issue} — affects axis {N}
  3. {issue} — affects axis {N}

3 SPECIFIC FIXES (in priority order):
  1. {action verb} {element}: {specific change with measurable target}
     (Expected lift: +X on axis {N})
  2. {action verb} {element}: ...
  3. {action verb} {element}: ...

SHIPPABLE? {Y/N — with one-line rationale}

NEXT STEP RECOMMENDATION:
  - If FAIL → list the cheapest fix-then-recritique loop
  - If REVIEW → list the 1 operator decision needed
  - If PASS → ready for compliance gate (Prompt 06) then ship
```

## Constraints

- Use Codex vision through the runtime image-viewing tool — no external API.
- Always score all 5 axes (use 3 as placeholder for unmeasured with explanation).
- Never lie to the user — if the banner is amateur, score it 2/5 honestly. Iter-02 in casino-rewards is the cautionary tale.
- For brand-fit, read the actual LP-style ref file; don't guess colors from memory.
- Verdict thresholds are HARD: PASS requires ALL axes ≥4. Anything less is REVIEW or FAIL.
- Acronym expansion first-use: LP (Landing Page), CTA (Call To Action), WCAG AAA (Web Content Accessibility Guidelines, AAA conformance), CSS (Cascading Style Sheets).
- Time budget: ≤2 min per critique.

## Example invocation

```
/banner-critique /Users/pafi/.nexus/projects/smsads/casino-rewards/deliverables/luxury-casino/fr-burkina/lxc-fr-burkina-250x250-v01.jpg --brand LXC --target-size 250x250 --reference /Users/pafi/.nexus/projects/smsads/casino-rewards/recon/sample-banners/luxury-casino-1000bonus-hero-300x250.gif
```

Returns scored critique. If FAIL, the calling agent (Mercury, banner pipeline) MUST iterate before showing the user.

## Anti-glaze rule

This skill exists to PREVENT amateur output from reaching the user. Do not score generously to be polite. The iter-02 banner that triggered this skill's creation scored:
- Readability: 4 (legible)
- Hierarchy: 4 (figure dominates)
- Depth: **1** (pure flat CSS, no atmosphere)
- Brand fit: 3 (palette OK but no LP visual identity)
- Professional polish: **2** (homework-tier)
Mean: 2.8 → **FAIL**
That assessment should have prevented the user from seeing it. This skill is the gate.