| name | design-ux |
| description | UX / usability audit — heuristic evaluation of INTERACTIVE UIs (not just visual polish). Load with design when a UI "feels off", "sucks to use", is hard to learn, needs an instruction wall, or before shipping an interactive tool/editor/app. Scores the RENDERED UI against Nielsen's 10 +... |
| risk | unknown |
| source | https://github.com/connerkward/ckw-design-skill/tree/main/deterministic-design/design-ux |
| source_repo | connerkward/ckw-design-skill |
| source_type | community |
| date_added | 2026-07-01T00:00:00.000Z |
| license | MIT |
| license_source | https://github.com/connerkward/ckw-design-skill/blob/main/LICENSE |
| author | Conner K Ward |
design-ux — usability audit (heuristic evaluation)
When to Use
Use this skill when you need uX / usability audit — heuristic evaluation of INTERACTIVE UIs (not just visual polish). Load with design when a UI "feels off", "sucks to use", is hard to learn, needs an instruction wall, or before shipping an interactive tool/editor/app. Scores the RENDERED UI against Nielsen's 10 +...
Usability ≠ aesthetics. design-system/design-spatial make it look right; this checks whether a first-timer can do the task without being told how. Use it whenever a UI "sucks to use," needs a paragraph of instructions, or before shipping anything interactive.
Rule 0 — fresh eyes, on the rendered artifact (inherited from design-spatial §1)
Never self-grade. The builder rationalizes its own UI. Render the live UI in its default first-load state (not a hand-arranged screenshot), capture an interaction trace of the primary task, and have a separate judge (a subagent/VLM that did NOT build it) score it. A described list of changes is not an audit — the audit is a fresh judge hunting for what's wrong on the real screen.
The procedure
- Name the primary task(s) the UI exists for (e.g. "trim a clip and set its speed, then export"). The audit is relative to these, not to abstract prettiness.
- Render default state + trace the task. Screenshot the first-load UI (wide AND narrow — overflow gate from design-spatial §2). Then actually perform the primary task and screenshot each step.
- Score every heuristic (table below) on the artifact: pass / violation, severity (blocker / major / minor), a specifically located finding, and a concrete fix. Separate judge does this.
- Prioritize: blockers → majors → minors; cluster fixes that touch the same surface.
- Fix, then RE-RENDER and RE-SCORE. Do not claim fixed without re-auditing the new artifact (verify-outputs-rule).
Heuristics — score each (Nielsen's 10, 1994) + interaction add-ons
| # | Heuristic (Nielsen) | What to check in THIS UI |
|---|
| 1 | Visibility of system status | Every action has visible feedback; current state/selection/mode always legible; progress for slow ops. |
| 2 | Match the real world | Known metaphors & conventions (e.g. NLE: clips, trim handles, playhead) — not bespoke gestures users must learn. |
