---
name: actcenter_design-debug
description: Review and critique visual design — UI screens, landing pages, ad creatives, deck slides, dashboards, brand assets. Flags hierarchy, spacing, alignment, color, typography, contrast, accessibility, brand drift, and grid violations. Use when the user says "review this design", "is this on-brand?", "design looks off", "critique this mockup", "audit this LP visually", "checa esse design", "tá fora do padrão", "revisa esse layout", "design feedback", or attaches a screenshot/Figma frame/PNG for review. Operates on screenshots, image uploads, or live URLs. Built for ACTCENTER operators who need a design quality gate before shipping.
metadata:
  type: skill
  version: 1.0
  owner: actcenter
---

# actcenter_design-debug

Master skill for design critique. Operates on any visual asset — UI screen, landing page, ad creative, deck slide, dashboard, social post, document layout. Built for operators who need a structured, opinionated design review without waiting for a designer.

## When to use

Trigger on any of:

- "Review this design / mockup / screen / slide"
- "Is this on-brand?"
- "Does this layout work?"
- "Design feedback please"
- "Audit this LP visually"
- User uploads a PNG / JPG / PDF screenshot of any interface or marketing asset
- "Checa esse design", "tá fora do padrão", "revisa esse layout"

Do not use for:

- Copy/messaging review → use a copywriting skill
- Technical/console bugs → use `actcenter_site-debug`
- Brand strategy / positioning → out of scope

## What this skill does

Runs a six-axis review. Output is always ordered by severity (BLOCKER / HIGH / MEDIUM / LOW), not by axis — the user wants the worst problems first.

### Axis 1 — Hierarchy

1. Does the eye land on the right element first?
2. Is the primary CTA clearly the loudest element?
3. Is there one obvious "lead" headline, or do three things compete?
4. Z-pattern / F-pattern: does the layout respect scan behavior for the asset type?

### Axis 2 — Spacing & rhythm

1. Vertical rhythm: are gaps between sections consistent or arbitrary?
2. Padding inside cards/buttons: consistent across the asset?
3. White space: is it doing work, or is the layout cramped / floaty?
4. 8pt grid (or 4pt for dense UI): is the asset on grid or off?

### Axis 3 — Alignment

1. Edges align — copy left edges, image left edges, button rows.
2. Optical alignment for icons, asymmetric shapes.
3. Tables and data: numeric right-aligned, text left-aligned, headers handled.
4. Multi-column grids: gutters consistent, no orphan elements.

### Axis 4 — Color & contrast

1. Body text ≥ 4.5:1 contrast against background (WCAG AA).
2. Status colors used consistently — green = OK, red = critical, amber = warning. No accidental crossover.
3. Brand palette respected; flag any out-of-palette colors.
4. Dark-mode-first if the brand calls for it (ACTCENTER does — Carbon `#0E1117` background).

### Axis 5 — Typography

1. Heading scale: defined and respected (e.g., display / h1 / h2 / body / caption).
2. Line length: 45–75 characters for body copy.
3. Line height: 1.4–1.6× font size for body.
4. Font choices match brand system (ACTCENTER: Space Grotesk + Inter + JetBrains Mono).
5. Numerals: tabular for tables and data, proportional for prose.

### Axis 6 — Brand fit

1. Logo placement, clear space, no distortion.
2. Imagery style: matches brand (e.g., ACTCENTER avoids "diverse team smiling at laptop" stock).
3. Voice in any copy on the asset: matches brand tone (no "amazing / revolutionary").
4. Component library: matches established UI library (Linear / Stripe / Bloomberg references for ACTCENTER).

## How to run

You need either a screenshot of the asset or a live URL. For URLs, the Chrome MCP tools render the page; for static assets, the user uploads.

```
1. Ask the user to share the asset (URL, PNG, Figma frame, PDF, deck slide).
2. Confirm the brand context (which brand / which audience / which channel).
3. Run all six axes, but report ordered by severity.
4. Output: design-review-{asset-name}-{date}.md
```

## Severity guide

| Tag | Meaning |
|---|---|
| **BLOCKER** | The asset cannot ship like this. Brand violation, illegible text, broken hierarchy, or accessibility failure. |
| **HIGH** | Material drag on perception or conversion. Inconsistent spacing system, off-grid by ≥ 4px in multiple places, weak CTA. |
| **MEDIUM** | Visible defects an experienced eye catches. Off-by-one alignment, slightly weak contrast (3.5–4.5:1). |
| **LOW** | Refinements. Slight kerning, micro-spacing, polish-level. |

## Output template

```markdown
# Design Review — [asset name] — [YYYY-MM-DD]

## Asset
- **Type:** [UI screen / landing page / ad creative / slide / dashboard]
- **Brand context:** [brand name + audience + channel]
- **Viewport / format:** […]

## Verdict
- **Ship readiness:** [BLOCK / SHIP WITH FIXES / SHIP]
- **Blockers:** X
- **High:** Y
- **Medium:** Z
- **Low:** W

## Blockers
1. **[issue]** — what's broken, where, suggested direction (one sentence). Optional: before/after sketch.
2. …

## High-priority
[…]

## Medium
[…]

## Low / polish
[…]

## What's working
- [1–3 things to keep — not optional, balances the critique]
```

## Voice

Direct, opinionated, evidence-based. State the issue, the impact, the direction. Don't soften with "maybe consider" — say "move the CTA above the fold; current placement drops below the scroll line at 768px." Avoid the words *clean*, *modern*, *sleek*, *premium*, *cool*, *nice*. They mean nothing in a critique.

## What ships back

Always end with three explicit things:

1. **Top 3 fixes** (the ones that close the BLOCK / SHIP-WITH-FIXES gap).
2. **What's working** (1–3 items — protects the parts that are right).
3. **One question** (the single ambiguity that, if resolved, would change the review).

## Boundaries

- Don't redesign the asset. Critique it.
- Don't grade subjective taste. Grade craft and brand alignment.
- If the brand doesn't have a documented system, ask for one before grading "brand fit" axis.
- For accessibility, default to WCAG AA. Flag any need for AAA explicitly.