skills.rest
ragnar-pwninskjold
ragnar-pwninskjoldCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/ragnar-pwninskjold/tech-snacks --skill prd-to-ux-ragnar-pwninskjold
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
LeszekDNVLeszekDNV

10x-prd

Generate a schema-conformant PRD from shaping notes with template auto-routing.

Community
Advanced
zzafergokzzafergok
1

stitch-ui-design-skill

Generate structured Stitch prompts for UI/UX prototypes and mockups.

Community
Intermediate
fishyerfishyer
1

ui-ux-pro-max

Generates UI/UX design recommendations and implements frontend code across React, Vue, Svelte, and more.

Community
Advanced
decoutkhanqindevdecoutkhanqindev

kta-design-spec

Generates per-screen markdown design specs from feature PRDs for AI design tools.

Community
Advanced