design-iterate

Files (1)

• SKILL.md

SKILL.md (first lines)

# Design Iterate

Load and follow the instructions in the `design-iterator` agent.

**Usage:**
- `/design-iterate "<url or screen>"` (no flag) — the full loop: ground in `docs/design/tokens.json` → render → capture mobile/tablet/desktop → deterministic token-lint + vision critique → apply smallest fixes → re-capture until no P0/P1 remains or the 3-iteration cap hits
- `/design-iterate --sync` — extract an observed token baseline from an existing codebase + running app into `docs/design/tokens.json` (`provenance: extracted-baseline`) + `docs/design/TOKEN_DRIFT.md`. Only when no tokens.json exists — authored systems from design-system-lead always win
- `/design-iterate --real "<url>"` — capture + critique a real logged-in browser session (findings only, no fixes) via the tiers in `references/real-browser-bridge.md`

**Code and pixels in one loop:** a fix is not done when the code is edited — it is done when a fresh screenshot shows it closed. Every finding is grounded: screenshot path + viewport + element + cited token/principle. No vibes.

**References:** `references/visual-design-loop.md` (the protocol), `references/real-browser-bridge.md` (logged-in/real-browser tiers), `references/design-review-checklist.md` (rubrics).

**Workflow:** Read protocol → Ground in tokens → Render dev server → Capture 3 viewports → Token-lint + critique → Fix P0/P1 → Re-capture → Log → Exit at clean or cap.

**Outputs:**
- default → `docs/design/ITERATION_LOG.md` + `docs/screenshots/design-iterate/iter-N/`
- `--sync` → `docs/design/tokens.json` + `docs/design/TOKEN_DRIFT.md`
- `--real` → `docs/design/DESIGN_AUDIT_LIVE.md`

From bpmforge/attest, Apache-2.0.

More from bpmforge/attest