---
title: OpenPlanr Design
description: Design a polished product interface through adaptive consultation, a shared canvas/prototype/walkthrough studio, and an implementation-ready specification.
url: https://openplanr.dev/docs/skills/design
updated: 2026-10-06
related:
  - https://openplanr.dev/docs/skills/design-loop.md
  - https://openplanr.dev/docs/skills/design-review.md
---

# OpenPlanr Design

Skill family: 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.

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.

## Run it

- Claude Code: `/planr:design`
- Codex: `$design`. With the OpenPlanr plugin for Codex, use $planr:design.
- Cursor: `@planr-design`. Cursor applies the planr-design rule when you mention it in chat.

## 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 prompt

Claude Code:

```text
/planr:design the onboarding checklist for new accounts on desktop and phone, with empty and error states
```

Codex:

```text
$design the onboarding checklist for new accounts on desktop and phone, with empty and error states
```

With the OpenPlanr plugin for Codex, use $planr:design.

Cursor:

```text
@planr-design the onboarding checklist for new accounts on desktop and phone, with empty and error states
```

Cursor applies the planr-design rule when you mention it in chat.

## Output

`.planr/specs/SPEC-001-<slug>/design/design-spec.md`:

```text
## 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 Questions
```

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](https://openplanr.dev/docs/guides/design.md).