mock
Produce a cheap mock from the design plan and gate on user sign-off before committing to the full build. Dispatches the…
Execute an approved design plan through gated phases (BUILD → REVIEW → commit) with subagent dispatch. Produces JOURNEY.md, DESIGN.md, design-system tokens, and final mocks. Use when a design plan exists and the direction is approved — per-phase quality gates, design execution
$ npx -y skills add ryanthedev/design-for-ai --agent claude-codeHow it fires
How this command gets triggered: by you, by Claude, or both.
/buildContext preview
What this command does when you run it.
Execute an approved design plan through gated phases (BUILD → REVIEW → commit) with subagent dispatch. Produces JOURNEY.md, DESIGN.md, design-system tokens, and final mocks. Use when a design plan exists and the direction is approved — per-phase quality gates, design execution
description: "Execute an approved design plan through gated phases (BUILD → REVIEW → commit) with subagent dispatch. Produces JOURNEY.md, DESIGN.md, design-system tokens, and final mocks. Use when a design plan exists and the direction is approved — per-phase quality gates, design execution evidence (contrast/token/heuristic), and a final trust report." argument-hint: "[plan path]"
**Load Plan → Setup → Execute → Verify → Report.**
Execute an approved design plan phase by phase. Each phase dispatches the **`design-build-agent`** (produces the phase artifact with design execution evidence) then the **`design-review-agent`** (independent cross-pillar critique on the rendered pixels), then the orchestrator commits. This command **dispatches** the two agents — it never inlines the design or the review work.
This command runs a per-phase gate machinery (BUILD → REVIEW → commit) for design, and obeys the shared contract in `docs/workflow-conventions.md` (the lifecycle, the DESIGN.md/JOURNEY.md gates, the design done-when vocabulary). "Tests" are design execution evidence: contrast (`palette.mjs`), render (`prototype`), token coverage, heuristic pass (workflow-conventions.md §3).
---
Each of these exists because its absence has a specific failure mode:
---
Clear this gate before any other work. Multi-phase commits on `main` have no rollback and pollute history.
git branch --show-current git status git worktree list
| Situation | Action | |-----------|--------| | Already in a worktree (`.git` is a file) | On a feature branch — proceed | | On feature branch, clean | Proceed (single-build mode) | | On `main`/`master`, clean | Ask the user (below) before proceeding | | Dirty working tree | Ask the user (below) before proceeding |
**On main/master or a dirty tree, resolve via `AskUserQuestion`** — both are decisive picks with 2-3 self-contained options, so the dialog is the right channel (unlike the content-review checkpoints in `commands/plan.md`, there's nothing here the user needs to read first):
You're on [main]. Building a design plan requires an isolated workspace. Worktree or feature branch? - [ ] Worktree — isolated copy; main checkout stays free - [ ] Feature branch — simpler, but blocks this checkout during build - [ ] Abort
Uncommitted changes in the working tree. Stash, commit, or abort? - [ ] Stash — set changes aside, restore after the build - [ ] Commit — commit them now, then proceed - [ ] Abort
Record the workspace mode (worktree path + branch, or branch) for the REPORT merge instructions. **Never proceed on main/master** — a multi-phase build committed there has no rollback boundary, and a failed phase leaves the default branch broken.
Read the plan path from `$ARGUMENTS` (or `.design-foundations/plans/`). If none given, `ls .design-foundations/plans/*.md` and ask which to execute. Extract:
1. **Context** — used for goal anchoring in BUILD dispatch prompts (NOT for REVIEW). 2. **Phases** — the lifecycle stages (Discover / Design). 3. **Done-when items per phase** — every `- [ ]` under each `**Done when:**` (passed verbatim to both agents). 4. **`**Doctrine:**` per phase** — the doctrine names; become the `## Doctrine` block in each agent dispatch. 5. **`**Gate:**` per phase** — Full / Standard / Minimal. 6. **`**Model:**` per phase** — optional override (ladder: fable/sonnet/haiku; `opus` valid only as an explicit override). 7. **Edge cases per phase** — passed to REVIEW with DW-item verdict standing.
| Plan status | Action | |-------------|--------| | `ready` / `in-progress` | Proceed (resume from `**Current Phase:**` if in-progress) | | `complete` | Ask: "Plan already complete. Re-execute or archive?" | | `blocked` | Show blockers, ask how to proceed |
---
Set in the plan file: `**Status:** in-progress`, `**Started:** YYYY-MM-DD HH:MM`, `**Current Phase:** 1`.
For each phase, read its `**Doctrine:**` field. Validate each name against the resolver in `docs/pillar-taxonomy.md §5`. A name absent from the resolver → STOP and surface the gap to the user. A missing field → match the phase goal/scope against the stage map in `commands/plan.md` and add the right doctrine names. These become the `## Doctrine` block in each agent dispatch.
Use the phase's `**Model:**` field if present, else omit (agents run on the active model). The ladder is fable → sonnet → haiku (`opus` a valid override, resolved the same as fa
Claude builds interfaces that look like Claude built them. Cyan-on-dark hero sections. Cards in a grid, all the same size. Glassmorphism on everything. Bounce easing. Inter at 16px. You've seen it. You've shipped it. Your users noticed.
Produce a cheap mock from the design plan and gate on user sign-off before committing to the full build. Dispatches the…
Turn a design brief into a phased design plan: clarify gaps, classify complexity, decompose into lifecycle stages…
Figure out what the user wants to design — even when they don't know yet. Extracts the design brief: purpose, audience, brand…