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.