---
title: Design the screens before anyone builds them
description: One design direction in a studio you can click through, plus a design spec Plan can read.
url: https://openplanr.dev/docs/prompts/design-before-build
updated: 2026-10-06
related:
  - https://openplanr.dev/docs/prompts/apply-pinned-feedback.md
  - https://openplanr.dev/docs/prompts/compare-design-directions.md
  - https://openplanr.dev/docs/prompts/plan-ui-from-design.md
---

# Design the screens before anyone builds them

One design direction in a studio you can click through, plus a design spec Plan can read.

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

Parts to fill in, shown with their example text:

- The screens to design: the onboarding checklist for new accounts

## Why this works

Name the screens, the sizes, and the states. Design builds one direction you can review as a canvas, a prototype, and a walkthrough, then writes a 10-section design spec that Plan reads before it splits the UI work.

## Make it stick

[Design before you build](https://openplanr.dev/docs/guides/design.md)