UX To Prompts

Skill: UX Spec to Build-Order Prompts

Adapted from UX-spec-to-prompts skill

Overview

Transform a UX specification into a sequence of self-contained prompts optimized for UI generation tools (v0, Bolt, Claude, Stitch, etc.). Each prompt builds one discrete feature/view with full context included.

When to Use

• After /ux-spec, when you want to feed specs into external UI generation tools
• When a UX spec is too large for a single prompt
• When you need build-order sequencing (foundations → features → polish)

Not for: Quick component requests, features that fit in one prompt, or projects where you're building with code directly (use /execute instead).

Build Order

Generate prompts in this sequence:

Extraction Process

Step 1: Identify Atomic Units

Read the UX spec and list discrete buildable features:

• Each screen/view
• Each reusable component
• Each interaction pattern
• Each state variation

Step 2: Map Dependencies

For each unit, note what it requires:

• "Node card requires design tokens"
• "Connection lines require nodes to exist"
• "Lens picker requires prompt field"

Step 3: Sequence by Dependency Graph

Order units so dependencies come first. Group tightly coupled items into single prompts.

Step 4: Write Self-Contained Prompts

For each prompt:

1. Re-state relevant context — don't assume reader saw previous prompts
2. Include specific measurements from the spec
3. Include all states from state design (Pass 5)
4. Include interaction details from affordances (Pass 3)
5. Set boundaries — what this prompt does NOT include

Prompt Structure

Each generated prompt follows this template:

## [Feature Name]

### Context
[What this feature is and where it fits in the app]

### Requirements
- [Specific behavior/appearance requirement]
- [Include relevant specs: dimensions, colors, states]

### States
- Default: [description]
- [Other states from spec]

### Interactions
- [How user interacts]
- [Keyboard support if applicable]

### Constraints
- [Technical or design constraints]
- [What NOT to include]

Self-Containment Rules

Each prompt MUST include:

• Enough context to understand the feature in isolation
• All visual specs (colors, spacing, dimensions) relevant to that feature
• All states that feature can be in
• All interactions for that feature

Each prompt MUST NOT:

• Reference "see previous prompt" or "as described earlier"
• Assume knowledge from other prompts
• Leave specs vague ("appropriate styling")

Output

Write to docs/plans/Build-Order-Prompts-{topic}.md with this structure:

# Build-Order Prompts: [Project Name]

## Overview
[1-2 sentence summary]

## Build Sequence
1. [Prompt name] - [brief description]
2. [Prompt name] - [brief description]
...

---

## Prompt 1: [Feature Name]
[Full self-contained prompt]

---

## Prompt 2: [Feature Name]
[Full self-contained prompt]

Quality Checklist

Before finalizing:

• Every measurement from spec is captured in a prompt
• Every state from spec is captured in a prompt
• Every interaction from spec is captured in a prompt
• No prompt references another prompt
• Build order respects dependencies
• Each prompt could be given to someone with no context

Common Mistakes