Design before you build

When the work has screens, design them before an agent builds them. OpenPlanr's design skills run in your coding agent, produce editable source in your repository, and end with a design spec that Plan reads when it splits the UI work.

Start one direction

Invoke /planr:design with the screens, the sizes, and the states you need. The skill reads your brief, the app shell, components, tokens, and reference screens, and asks only the questions that change the outcome. It reuses your app's design system when one exists.

It builds one design document with stable screens. Canvas, Prototype, and Walkthrough are 3 views of that same document, so switching views never regenerates the screens. The skill checks the screens in a browser at the declared sizes and exercises the main journey; without a browser it returns the design as unverified.

Design stops when the handoff is ready. Planning, building, sharing a review link, and deploying are separate steps you start yourself.

Compare 3 directions

When you want alternatives, invoke /design-loop. It builds 3 materially different directions for the same journey in a live review studio, using the same screens and frames for each. You pin and rate them on the board, then it develops the direction you select. Until you select one, it reports the comparison as awaiting selection.

Apply pinned feedback

To revise an existing design, invoke /design-review. It maps each pin to a stable screen and anchor, changes only the targeted source, and keeps unrelated screens, feedback, and layout as they were. It resolves a pin only after the change is rendered and checked, and reports pins it cannot place as unresolved.

What Plan receives

In a spec-driven project, the design lives next to the spec:

.planr/specs/SPEC-NNN-<slug>/design/
  design-spec.md

The design spec has 10 sections: color palette, typography, spacing and layout, components inventory, navigation and layout patterns, iconography, motion and interaction hints, component overrides, screen inventory, and open questions.

Plan reads the design document, the selected direction, and this spec, and checks that they describe the same direction before it writes UI tasks. Screen IDs, component recipes, responsive frames, and flows become context for those tasks.

Prompts for this stage

• Design the screens before anyone builds them
• Compare 3 design directions
• Apply pinned design feedback
• Plan UI work from a finished design

Next: Build one task at a time.