Design
Everything before production code. This spine routes; the craft lives in the
reference files — load only what the mode needs.
Contract (all modes)
- Deliverables are documents and artifacts, never production code. The one
sanctioned codebase touch is vary mode's throwaway picker harness, removed when a
variant is promoted.
- Authority chain, every mode: the user's words → the project's design system
(DESIGN.md, tokens, components) → the subject itself → your judgment. Never let a
preset or a habit override an upstream authority.
- Derivation is the default; presets are commissions. Direction comes from the
subject and brief (
direct/index.md). A named preset (direct/presets/) is used
only when the user's direction explicitly matches it.
- Motion in artifacts must be motivated. If the reason doesn't fit one sentence,
the element stays static.
Modes
| Mode |
When |
Load from references/ |
| understand |
"Document our product / design system", DESIGN.md work |
understand/index.md; understand/design-format.md + understand/templates.md for the schema; understand/url-and-validation.md for public-URL extraction and the lint/export gates; understand/generated-mode.md for greenfield systems |
| brief |
"Write a brief for X", "spec this feature" — planning one feature, surface, or flow before code |
brief/index.md (runs direct mode mid-flow when visual direction is materially unresolved) |
| direct |
"How should this look / feel", creative direction, a register or palette decision |
direct/index.md; check every visual choice against direct/slop-tells.md; direct/presets/ only on explicit match |
| mock |
Wireframe, mockup, prototype, diagram, or plan as an HTML artifact |
mock/index.md (the router), then the level file it names: wireframe.md, prototype.md, diagram.md, plan.md; shared craft in charts-and-data.md, diagrams.md, documents-and-presentations.md, interfaces.md |
| vary |
"Show me N versions", compare directions in the real page |
vary/index.md + vary/picker.md (the engineered picker), governed by vary/axes.md (one primary axis; the accessibility floor; ?variant=name URLs) |
| onboard |
First-run, activation, setup, empty states, tours |
onboard/index.md + onboard/patterns.md |
Disambiguation: understand documents the whole product durably; brief plans a
single feature or flow. A mockup of something new is mock; N takes on one existing piece
is vary. "Make it look better" on shipped UI is not this skill (pe-build). A named
diff/branch/PR is never this skill (pe-review).
Approval
Runs only on the user's explicit approval of a brief, direction, mock, or variant —
"this is it", "ship this", "approved". Praise is not approval; if the words could mean
either, ask one line before writing. In the same turn: confirm a slug, then write
.product/approved/<slug>/ holding the artifact byte-for-byte as approved (plus
source/ when it was rendered from source) and approval.md — approved date, by whom,
from which conversation or variant, the exact state approved (layout, toggles, filters
as chosen), the decisions on the way (what was rejected and why), and what is explicitly
out of scope. A newer approval supersedes: rename the old folder <slug>--YYYY-MM-DD
(its approval date; append -2, -3 on a same-day collision), never delete it, and
never edit a record except to mark it superseded. If .product/ is absent, create it
and tell the user the convention: product-level records live there, human-readable and
diffable, owned by the user.
Name mapping
The mock files route to skills by name (html-wireframe, html-prototype,
html-diagram, html-plan, design-artifact — including ../design-artifact/SKILL.md
links): resolve to this skill's mock/wireframe.md, mock/prototype.md,
mock/diagram.md, mock/plan.md, and direct/index.md respectively. Their relative
references/*.md links resolve to the same mock/ folder. The creative-direction.md
fallback resolves to direct/index.md.
Handoffs
Implementing a confirmed brief, chosen direction, mock, or winning variant →
pe-build (with the DESIGN.md, any chosen preset, and the approved record named).
Judging existing UI → pe-review. Behavior specs beyond PRODUCT.md's scope →
pe-product-description. On-brand standalone assets → pe-brand-assets.
1---2name: pe-design3description: Design-process work before production code. Use to capture product and design-system context (PRODUCT.md / DESIGN.md), write a design brief for one feature or flow, set creative direction and taste, build wireframes / mockups / prototypes / diagrams / plans as self-contained HTML, render competing variations of a UI piece behind a picker, design onboarding and first-run flows, or record an approved artifact under .product/approved/. Triggers on design, design brief, "write a brief", "spec this feature", "shape this flow", direction, "how should this look/feel", wireframe, mockup, prototype, mock this up, diagram, "document our design system", DESIGN.md, "show me versions/variations", onboarding, empty states, first-run. The deliverable is a document or artifact — not production code (pe-build) and not a verdict on existing UI (pe-review).4license: Apache-2.05---67# Design89Everything before production code. This spine routes; the craft lives in the10reference files — load only what the mode needs.1112## Contract (all modes)1314- **Deliverables are documents and artifacts**, never production code. The one15 sanctioned codebase touch is vary mode's throwaway picker harness, removed when a16 variant is promoted.17- **Authority chain, every mode:** the user's words → the project's design system18 (DESIGN.md, tokens, components) → the subject itself → your judgment. Never let a19 preset or a habit override an upstream authority.20- **Derivation is the default; presets are commissions.** Direction comes from the21 subject and brief (`direct/index.md`). A named preset (`direct/presets/`) is used22 only when the user's direction explicitly matches it.23- **Motion in artifacts must be motivated.** If the reason doesn't fit one sentence,24 the element stays static.2526## Modes2728| Mode | When | Load from `references/` |29| --- | --- | --- |30| **understand** | "Document our product / design system", DESIGN.md work | `understand/index.md`; `understand/design-format.md` + `understand/templates.md` for the schema; `understand/url-and-validation.md` for public-URL extraction and the lint/export gates; `understand/generated-mode.md` for greenfield systems |31| **brief** | "Write a brief for X", "spec this feature" — planning one feature, surface, or flow before code | `brief/index.md` (runs direct mode mid-flow when visual direction is materially unresolved) |32| **direct** | "How should this look / feel", creative direction, a register or palette decision | `direct/index.md`; check every visual choice against `direct/slop-tells.md`; `direct/presets/` only on explicit match |33| **mock** | Wireframe, mockup, prototype, diagram, or plan as an HTML artifact | `mock/index.md` (the router), then the level file it names: `wireframe.md`, `prototype.md`, `diagram.md`, `plan.md`; shared craft in `charts-and-data.md`, `diagrams.md`, `documents-and-presentations.md`, `interfaces.md` |34| **vary** | "Show me N versions", compare directions in the real page | `vary/index.md` + `vary/picker.md` (the engineered picker), governed by `vary/axes.md` (one primary axis; the accessibility floor; `?variant=name` URLs) |35| **onboard** | First-run, activation, setup, empty states, tours | `onboard/index.md` + `onboard/patterns.md` |3637Disambiguation: **understand** documents the whole product durably; **brief** plans a38single feature or flow. A mockup of something new is **mock**; N takes on one existing piece39is **vary**. "Make it look better" on shipped UI is not this skill (pe-build). A named40diff/branch/PR is never this skill (pe-review).4142## Approval4344Runs only on the user's explicit approval of a brief, direction, mock, or variant —45"this is it", "ship this", "approved". Praise is not approval; if the words could mean46either, ask one line before writing. In the same turn: confirm a slug, then write47`.product/approved/<slug>/` holding the artifact byte-for-byte as approved (plus48`source/` when it was rendered from source) and `approval.md` — approved date, by whom,49from which conversation or variant, the exact state approved (layout, toggles, filters50as chosen), the decisions on the way (what was rejected and why), and what is explicitly51out of scope. A newer approval supersedes: rename the old folder `<slug>--YYYY-MM-DD`52(its approval date; append `-2`, `-3` on a same-day collision), never delete it, and53never edit a record except to mark it superseded. If `.product/` is absent, create it54and tell the user the convention: product-level records live there, human-readable and55diffable, owned by the user.5657## Name mapping5859The mock files route to skills by name (html-wireframe, html-prototype,60html-diagram, html-plan, design-artifact — including `../design-artifact/SKILL.md`61links): resolve to this skill's `mock/wireframe.md`, `mock/prototype.md`,62`mock/diagram.md`, `mock/plan.md`, and `direct/index.md` respectively. Their relative63`references/*.md` links resolve to the same `mock/` folder. The `creative-direction.md`64fallback resolves to `direct/index.md`.6566## Handoffs6768Implementing a confirmed brief, chosen direction, mock, or winning variant →69**pe-build** (with the DESIGN.md, any chosen preset, and the approved record named).70Judging existing UI → **pe-review**. Behavior specs beyond PRODUCT.md's scope →71**pe-product-description**. On-brand standalone assets → **pe-brand-assets**.
backnotprop