Everything before production code. The deliverable is a document or an artifact, and the authority runs in one direction: your words, then the project’s design system, then the subject, then the skill’s judgment.
Say this, get this
| You say | You get |
|---|---|
| “Document our design system” | PRODUCT.md and DESIGN.md written from repo evidence, or from a public URL |
| “Write a brief for the checkout flow” | An interview, then a confirmed one-feature design brief |
| “How should this look and feel?” | A creative direction derived from your subject, checked against the anti-generic tells |
| “Wireframe the settings flow” | A self-contained HTML artifact, wireframe through prototype |
| “Show me three takes on this card” | Real variants behind a picker in your own page, with ?variant= URLs |
| “Design the first-run flow” | Onboarding, activation, and empty states as artifacts |
| “This is it” | The artifact stamped under .product/approved/<slug>/ with an approval record |
Modes
| Mode | When |
|---|---|
understand |
“Document our product / design system”, DESIGN.md work |
brief |
“Write a brief for X”, “spec this feature” — planning one feature, surface, or flow before code |
direct |
“How should this look / feel”, creative direction, a register or palette decision |
mock |
Wireframe, mockup, prototype, diagram, or plan as an HTML artifact |
vary |
“Show me N versions”, compare directions in the real page |
onboard |
First-run, activation, setup, empty states, tours |
Understand documents the whole product durably; brief plans one feature. A mockup of something new is mock; several takes on one existing piece is vary.
Setup
required |
a browser to open the HTML artifacts |
optional |
the app running locally, for vary mode’s picker in the real page |
optional |
network access, for understand mode from a public URL |
convention |
DESIGN.md at the repo root, which the other skills read |
convention |
approvals land in .product/approved/<slug>/ |
What it produces
Documents (PRODUCT.md, DESIGN.md, a brief) and single-file HTML artifacts that open
without a build step. On your explicit approval (“this is it”, “ship this”, “approved”)
the skill writes .product/approved/<slug>/: the artifact byte-for-byte, its source, and
approval.md with the date, who approved, the exact state approved, the decisions on
the way, and what is out of scope. A compliment is not read as approval; when the words
could mean either, it asks one line first.
A real record: docs-site-concept, the approved concept for this site, with its approval.md. The rules are in the approved record.
Handoffs
Implementing a confirmed brief, direction, mock, or winning variant: pe-build,
with the record named. Judging existing UI: pe-review. Behavior
specs beyond PRODUCT.md: pe-product-description.
Standalone on-brand assets: pe-brand-assets.
Provenance
Carries 20 files from Plannotator (10), Leon (5), Emil Kowalski (2), Jakub Krehel (1), Julien Thibeaut (1), Paul Bakaus (1), and 5 authored here. Every vendored file is hash-locked to a pinned upstream commit.
Apache-2.0 · skills/pe-design