---
title: Plan UI work from a finished design
description: Turn a design and its design spec into UI tasks that carry the screens, states, and frames.
url: https://openplanr.dev/docs/prompts/plan-ui-from-design
updated: 2026-10-06
related:
  - https://openplanr.dev/docs/prompts/plan-a-spec.md
  - https://openplanr.dev/docs/prompts/plan-from-intent.md
  - https://openplanr.dev/docs/prompts/apply-pinned-feedback.md
---

# Plan UI work from a finished design

Turn a design and its design spec into UI tasks that carry the screens, states, and frames.

## Prompt

Claude Code:

```text
/planr:plan SPEC-001. Use the selected design direction and its design spec for the UI tasks.
```

Codex:

```text
$plan SPEC-001. Use the selected design direction and its design spec for the UI tasks.
```

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

Cursor:

```text
@planr-plan SPEC-001. Use the selected design direction and its design spec for the UI tasks.
```

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

Parts to fill in, shown with their example text:

- The spec with a design: SPEC-001

## Why this works

Plan reads the design document, the selected direction, and the 10-section design spec, and checks that they describe the same direction before it splits the UI work. Screen IDs, component recipes, responsive frames, and flows become task context.

## Make it stick

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