prd-to-ux

Translate PRDs or product ideas into tool-agnostic screen prompts for UX generators.

125|32|Updated Feb 12, 2026

Search Tags:#workflow #prd #design-direction #tool-agnostic #ux-prompts #screen-prompts #prompts-export

Ready to run

npx skills add https://github.com/ragnar-pwninskjold/tech-snacks --skill prd-to-ux-ragnar-pwninskjold

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: prd-to-ux
Source: https://github.com/ragnar-pwninskjold/tech-snacks/tree/main/plugins/tech-snacks/skills/prd-to-ux
Command: npx skills add https://github.com/ragnar-pwninskjold/tech-snacks --skill prd-to-ux-ragnar-pwninskjold

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and templates (resource) components.

What problem does it solve?

Translating a PRD or raw product idea into actionable, tool-agnostic screen prompts for UX generators, enabling rapid exploration of design directions without writing UI code.

Core Features & Use Cases

Generates feature-by-feature screen prompts aligned to a locked PRD, including per-screen states and interaction notes.
Supports Step 1 through Step 4 workflow (PRD shaping, UX philosophy, feature/state briefs, and screen-prompt exports) to produce outputs suitable for Stitch, Figma AI, Pencil, Claude Design.
Exports ready-to-paste prompts for each screen/state into the target UX tool.

Quick Start

Provide your PRD content or paste a product idea to generate tool-agnostic screen prompts.

Frequently Asked Questions about prd-to-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate UX prompts from a PRD for tools like Figma AI or Stitch?▼

To generate UX prompts from a PRD, you input the PRD content or a raw product idea, and the workflow outputs structured, tool-agnostic screen-level prompts suitable for tools like Figma AI or Stitch without emitting UI code.

Can I use a raw product idea instead of a finalized PRD to create screen prompts?▼

Yes, you can use a raw product idea instead of a finalized PRD. The workflow includes a PRD shaping step that transforms your initial idea into a validated structure before generating the UX design directions and screen prompts.

What is the process for translating product requirements into tool-agnostic screen prompts?▼

The process involves PRD shaping and validation, establishing a UX philosophy, creating feature and state briefs, defining design directions, and exporting ready-to-paste screen prompts to a structured directory for downstream UX generators.

Does this UX prompt generation workflow output UI code for development?▼

No, this workflow does not output UI code for development. It specifically generates tool-agnostic, screen-level prompts and interaction notes to explore design directions in web UX generators without writing code.

What format are the exported screen prompts saved in for downstream UX tools?▼

Exported screen prompts are saved as structured artifacts within a directory structure for downstream tools. They are organized feature-by-feature, including per-screen states and interaction notes, ready to paste into UX generators.