prd-to-ux
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.mdandreferences/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
More from ragnar-pwninskjold/tech-snacks
ui-cloner
Use when user provides a URL and wants to replicate or clone a website's UI, design, or visual style for their own product. Entry point for the full 4-phase SRIP pipeline.
37ui-cloner-forensic-audit
Use when performing a forensic analysis of a target website as part of the UI cloning pipeline. Phase 1 of SRIP — runs steps 1.1 through 1.9 and produces a Site DNA document.
16ui-cloner-brand-interview
Use when Phase 1 forensic audit is complete and it's time to collect brand information from the user. Phase 2 of SRIP — presents all 12 brand questions in a single message and waits for answers before proceeding.
14ui-cloner-quality-check
Use after generating a UI replication prompt to verify it meets all quality standards before delivery. Phase 4 of SRIP — runs a multi-domain fidelity checklist and patches any missing elements before outputting the final prompt.
13ui-cloner-synthesis
Use when Site DNA and all 12 brand interview answers are in hand and it's time to generate the final replication prompt. Phase 3 of SRIP — applies 11 synthesis rules to produce a one-shot developer build prompt.
13ui-cloner-iterator
Use when a UI cloning attempt produced a poor or incomplete result and needs to be improved iteratively. Runs 5 structured comparison loops between the current implementation and the Site DNA to produce corrective prompts that progressively dial in fidelity.
13