Skill · Design
/planr:design$design@planr-design
Design one product direction in a review studio you can view as a canvas, a prototype, and a walkthrough. It ends with a 10-section design spec that Plan reads.
/planr:designin Claude Code
$designin Codex. With the OpenPlanr plugin for Codex, use $planr:design.
@planr-designin Cursor. Cursor applies the planr-design rule when you mention it in chat.
What it does
Design a polished product interface through adaptive consultation, a shared canvas/prototype/walkthrough studio, and an implementation-ready specification. Use for a new design or an existing interface that needs a coherent direction.
The skill reads your brief, the app shell, components, tokens, and reference screens, and reuses your app's design system when one exists. It builds one design document with stable screens. Canvas, Prototype, and Walkthrough are views of that document, so switching views never regenerates the screens.
It checks the screens in a browser at the declared sizes, or returns the design as unverified when it cannot. Design stops at the handoff: planning, building, sharing a review link, and deploying are separate steps you start yourself. See Design before you build.
When to use it
Use it to
- Create an initial product design direction
- Start the OpenPlanr design workflow for a feature
Not for
- Review an existing completed design
- Explore several competing design variants
Example
/planr:design the onboarding checklist for new accounts on desktop and phone, with empty and error states$design the onboarding checklist for new accounts on desktop and phone, with empty and error states@planr-design the onboarding checklist for new accounts on desktop and phone, with empty and error statesWhat you get
.planr/specs/SPEC-001-<slug>/design/design-spec.md## 1. Color Palette## 2. Typography## 3. Spacing & Layout## 4. Components Inventory## 5. Navigation & Layout Patterns## 6. Iconography## 7. Motion & Interaction Hints## 8. Component Overrides## 9. Screen Inventory## 10. Open QuestionsPrompts and commands
Design the screens before anyone builds them
One design direction in a studio you can click through, plus a design spec Plan can read.
Apply pinned design feedback
Revise only the screens your review pins point at, and keep everything else as it was.
Compare 3 design directions
See 3 materially different directions side by side, rate them, and develop the one you pick.