---
name: prd-to-ux
description: Use when translating a PRD, feature spec, or raw product idea into screen-level prompts for web UX generators (Google Stitch, Figma AI, Pencil.dev, Claude Design, v0, or similar). Use before creating visual mockups or wireframes.
---

# prd-to-ux

Take a PRD (or a raw product idea) and produce **tool-agnostic, concept-driven screen prompts** for web UX generators — Stitch, Figma AI, Pencil, Claude Design, and similar.

Output describes design *intent*: what a screen is for, what's visible, how it feels. It does NOT emit Tailwind, component trees, or hex codes (unless the user explicitly supplies them).

## Pipeline

- **Step 1 — PRD Shaping** *(optional)* — when no PRD exists. See `references/step-1-prd-shaping.md`.
- **Gate — PRD Validation** — required pass between Step 1 and Step 1.5. See `references/prd-validation.md`.
- **Step 1.5 — UX Philosophy** *(required)* — 3 distinct philosophies, user picks. See `references/step-1-5-ux-philosophy.md`.
- **Step 2 — Feature & State Briefs** *(required)* — screens and states per feature. See `references/step-2-feature-states.md`.
- **Step 3 — Design Direction** *(optional)* — vibe brief, or shadcn-style default. See `references/step-3-design-direction.md` and `references/default-design-direction.md`.
- **Step 4 — Screen Prompts Export** *(required)* — one prompt block per screen × state. See `references/step-4-screen-prompts.md`.

The divergent→convergent pattern shared by Step 1 (features) and Step 1.5 (UX expressions) lives in `references/divergent-convergent-pattern.md`.

## Artifacts

Written to the user's current working directory under:

```
docs/prd-to-ux/<YYYY-MM-DD>-<project-slug>/
├── 01-prd.md
├── 01b-ux-philosophy.md
├── 02-features-and-states.md
├── 03-design-direction.md        (only if user opted in at Step 3)
└── 04-screen-prompts/
    ├── <feature-1>.md
    └── ...
```

Project slug is lowercase kebab-case derived from the PRD title or elevator pitch. Skill proposes a slug and lets the user override.

## Entry

User invokes `/prd-to-ux` or references the skill, optionally passing a PRD file path or pasted content.

## Opening Move

1. Introduce the pipeline stages briefly (Step 1 through Step 4, plus the validation gate).
2. Ask: **"Do you have a PRD, or should we build one from an idea?"**
3. Check the target directory `docs/prd-to-ux/<today>-<proposed-slug>/` for existing artifacts.
   - **Directory exists with artifacts:** ask whether to resume at the next missing step or start fresh.
   - **Directory does not exist:** propose the slug, confirm, then create it and proceed.

## Flow Control

- **One step runs at a time.** Between steps, show a terse summary (what was produced, where it lives) and ask to proceed or refine. Refinement edits the artifact in place before moving on. This is the phase gate — do not batch steps.
- **Artifacts are written incrementally** within each step. A dropped session can be resumed on restart.
- **Skill never auto-selects** at any convergence point. User chooses the philosophy, the design direction, the feature scope. See the individual step references for specifics.

## Termination

The skill stops after Step 4 (Screen Prompts Export). It does NOT invoke Stitch, Figma AI, Pencil, Claude Design, or any other rendering tool. The user takes the prompts elsewhere.

## Edge Cases

- **Vague feature at Step 2:** pause, ask targeted questions, update `01-prd.md`, resume. Never fabricate.
- **User pastes a PRD mid-flow:** write verbatim to `01-prd.md`, run validation gate, skip divergent-adversarial at Step 1, proceed to Step 1.5.
- **User rejects all 3 philosophies at Step 1.5:** re-diverge with different constraints, or take user-supplied axes. Do not force a choice.
- **Design-direction vs. functional tension** (e.g., "minimal" + dense data table): surface in the relevant screen prompt as a note to the rendering tool, don't silently resolve.
- **Platform mismatch** (mobile PRD, user plans to paste into a web-focused tool): note in final handoff; suggest specifying platform framing when pasting.

## Out of Scope

- Invoking rendering tools on the user's behalf.
- Generating code (React, Tailwind, component files).
- Pixel-level style specs (hex, dp, spring tensions) — unless the user supplied them in Step 3.
- HTML preview artifacts, consultant-posture mockup proposals.
- Iteration on rendered output (belongs to the rendering tool).
- Maintaining a cross-project design system.

## Red Flags / Common Rationalizations

| Thought | Reality |
|---|---|
| "Skip the philosophy step, the user knows what they want" | Step 1.5 is required. The 3-philosophy frame is where expression-level coherence is decided. |
| "Auto-pick the recommended philosophy — user seems decisive" | Never auto-select. Always wait for the user's choice. |
| "Skip empty/error states to move faster" | No. Every state gets a prompt. |
| "Add Tailwind classes to make prompts more actionable" | The skill is explicitly tool-agnostic. Describe, don't prescribe. |
| "Batch multiple steps in one message to save turns" | Phase gates exist to catch drift early. Run one step at a time. |