---
name: dkeken/design-audit
source: https://app.decimal.ai/s/dkeken-design-audit@1/SKILL.md
source_sha256: e0c9ea296f7d
---

# Design — Audit

Find what's broken in an EXISTING interface and prioritize fixes by impact. The output is a ranked, actionable issue list — not a vibe check. Every issue ties back to the user's goal, so you're fixing what matters, not nitpicking pixels.

## When to use
- An existing screen/flow/site needs critique before iterating.
- "Why is conversion/completion low here?"
- Pre-redesign baseline: what to keep, what to fix.

## When NOT to use
- Nothing's built yet → `design-ideate` / `design-get-context`.
- You want competitor benchmarks → `design-research`.
- Final conformance check on a prototype you just built → `design-qa` (compares to a spec; audit is open-ended).

## Inputs
- **Target**: live URL, screenshot/image, or component path.
- `./design/context.md` (goal, user, success) if it exists — anchors severity.

## Workflow
1. **Capture the UI**: for a URL, use a browser-automation tool (snapshot + screenshot) or a web-fetch tool; for an image, use a vision/read tool; for code, read the components.
2. **Run heuristic passes**:
   - **Hierarchy**: is the primary action obvious within ~2 seconds? One clear focal point?
   - **Clarity**: labels, microcopy, empty/error/loading states present and understandable?
   - **Flow**: step count, friction, dead ends, unnecessary choices.
   - **Accessibility**: contrast ratios, focus order, target sizes (≥44px), alt text, keyboard reachability. (Note: full WCAG conformance needs manual assistive-tech testing — flag it.)
   - **Consistency**: spacing rhythm, type scale, component reuse vs one-offs.
   - **Conversion**: distractions competing with the CTA, trust cues, friction before value.
3. **Score each issue**: severity (high/med/low) × effort (S/M/L). Propose a concrete fix per issue.
4. Write `./design/audit.md`, sorted by severity. Hand fixes to `design-ideate`/`design-prototype`.

## Output: ./design/audit.md
```
target: https://app.example.com/signup   goal: ↑ signup completion
| # | area       | issue                              | sev  | fix                              | eff |
|---|------------|------------------------------------|------|----------------------------------|-----|
| 1 | hierarchy  | 3 CTAs same weight above the fold  | HIGH | one primary, demote 2 to links   | S   |
| 2 | clarity    | no error state on failed submit    | HIGH | inline field errors + summary    | M   |
| 3 | a11y       | CTA contrast 3.1:1 (<4.5 req)      | HIGH | darken accent to #1A6FؚE         | S   |
| 4 | flow       | asks company size before email     | MED  | move optional fields after signup| M   |
| 5 | a11y       | keyboard focus not visible         | MED  | add focus ring                   | S   |
notes: full screen-reader pass still required (manual AT).
verdict: 3 HIGH issues likely suppressing completion; fix 1-3 first.
```

## Quality bar
- Every issue ties to the user goal/success criteria — no taste nitpicks.
- Severity reflects user impact, not personal preference.
- Each issue has a concrete, implementable fix (not "improve hierarchy").
- Accessibility findings state what was checked vs what needs manual AT validation.
- Confirmed problems are separated from hypotheses ("likely" vs "is").

## Common pitfalls
- **Nitpicking** — listing 30 cosmetic issues buries the 3 that matter. Prioritize ruthlessly.
- **Overclaiming a11y** — automated contrast/focus checks ≠ full WCAG. Be honest about the gap.
- **Vague fixes** — "make it clearer" isn't actionable; "merge the two CTAs, primary = Sign up" is.
- **Ignoring the goal** — an audit untethered from the goal optimizes the wrong things.

## Handoff
`audit.md` → `design-ideate` (if fixes need new directions) or `design-prototype` (if fixes are direct edits). HIGH issues are the priority backlog.

## Tooling
Live URL audit needs a browser-automation tool (snapshot/screenshot) or web-fetch; image audit needs a vision/read tool; code audit needs file reads. Degrades to a heuristic review of whatever can be captured; state what couldn't be verified.