| name | product-ui-designer |
| description | Use Design Harness artifacts to run a brief -> implementation -> audit -> report -> revision loop for product UI work. |
Product UI Designer (Codex)
Use this skill when improving a frontend UI with Design Harness evidence. This adapter is intentionally thin: it makes Codex follow the same artifact contract as every other client. The rule content below is shared verbatim with the Claude Code adapter; the canonical copy lives in adapters/shared/rules.md and parity is CI-checked.
Workflow
- Capture or read a short design brief before implementation.
- Implement or inspect the UI.
- Run the Design Harness CLI against the local URL:
npx @design-harness/cli@latest audit --url http://localhost:<port> --out runs/<run-id>
From a checkout of this repository, use pnpm design-harness -- audit ... instead.
- Read
audit.json and report.md.
- If actionable findings exist, make one focused revision pass.
- Rerun the audit into a new output directory and compare the reports.
Revision Priority
- Render failure or blank render.
- Deterministic failures.
- Deterministic risks with high or medium confidence.
- Semantic accessibility and interaction-state risks that point to concrete selectors.
- Heuristic
needs-review prompts after confirming the product context.
- Optional subjective critique and human visual polish notes.
Rules
- Do not invent a parallel critique structure. Consume
audit.json, metadata.json, screenshots, and report.md.
- Keep deterministic failures, deterministic risks, heuristic prompts, and optional subjective critique separate.
- Prefer findings with
criterionId, sourceRefs, determinism, resultKind, runtime, observed, and expected when choosing fixes.
- Do not treat heuristic or subjective findings as hard failures without human review.
- Treat scores as advisory evidence, not objective design quality.
- Keep the core workflow model-agnostic; no required step should depend on one hosted LLM.
Expected Artifacts
runs/<run-id>/
metadata.json
audit.json
report.md
report-manifest.json
screenshots/
desktop.png
mobile.png
