New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Prd To UX

by ragnar-pwninskjold in ragnar-pwninskjold/tech-snacks

A skill your agent uses 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).

MITAuto-check passedProduct & Project Management

Install Prd To UX

skills CLI
$ npx skills add ragnar-pwninskjold/tech-snacks --skill prd-to-ux -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ragnar-pwninskjold/tech-snacks prd-to-ux --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ragnar-pwninskjold/tech-snacks.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/tech-snacks/skills/prd-to-ux .claude/skills/prd-to-ux && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
prd-to-ux
GitHub stars
137
Token cost
~1.3k tokens
SKILL.md length
633 words
Files
14 (incl. references)
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses 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).

  • Works in 3 steps: Introduce the pipeline stages briefly… → Ask: "Do you have a PRD, or should we… → Check the target directory…
  • Translating a PRD
  • SKILL.md covers Pipeline, Artifacts, Entry and Opening Move, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Prd To UX is an agent skill from ragnar-pwninskjold/tech-snacks. 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.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including reference files (for example `references/default-design-direction.md`, `references/divergent-convergent-pattern.md` and `references/prd-validation.md`).

It sits in Product & Project Management, covering PRD writing. It works with Figma and Google Stitch. The repository describes itself as: A skill library for vibe coders that make cool stuff. The licence is MIT.

When your agent uses it

  • Translating a PRD
  • Raw product idea into screen-level prompts for web UX generators (Google Stitch

Example prompts

  • “/prd-to-ux”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  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/-/ for existing artifacts.

What it can do on your machine

Read from SKILL.md and the folder at commit 2d9a73b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Prd To UX loads about 1.3k tokens when it runs, and up to ~7.8k if it reads all its reference files. Until then it costs about 60 tokens; SKILL.md has 633 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ragnar-pwninskjold/tech-snacks at commit 2d9a73b, republished under its MIT licence (© ragnar-pwninskjold). 633 words, ~1,290 tokens.

Download SKILL.mdSave it as .claude/skills/prd-to-ux/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.
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.

Show full SKILL.md (250 more words)Show less

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

ThoughtReality
"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.

© ragnar-pwninskjold, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 13 other files (references) in plugins/tech-snacks/skills/prd-to-ux of ragnar-pwninskjold/tech-snacks.

  • SKILL.md
  • references/default-design-direction.md
  • references/divergent-convergent-pattern.md
  • references/prd-validation.md
  • references/step-1-5-ux-philosophy.md
  • references/step-1-prd-shaping.md
  • references/step-2-feature-states.md
  • references/step-3-design-direction.md
  • references/step-4-screen-prompts.md
  • templates/design-direction.template.md
  • templates/features-and-states.template.md
  • templates/prd.template.md
  • templates/screen-prompt.template.md
  • templates/ux-philosophy.template.md

Open the folder on GitHubat commit 2d9a73b

Compare with similar skills

Prd To UX next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Prd To UX compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Prd To UX this skillragnar-pwninskjold/tech-snacks137—~1.3kAutomated safety check: PassMIT
Prd V04 Visual Prototype Gatemattgierhart/PRD-driven-context-engineering180—~1.6kAutomated safety check: PassMIT
Experience Lwc Design Generateforcedotcom/sf-skills1.1k—~4kAutomated safety check: PassApache-2.0
Design Handoff Briefmohitagw15856/pm-claude-skills1.4k—~1.3kAutomated safety check: PassMIT
Figma Design Briefmohitagw15856/pm-claude-skills1.4k—~1kAutomated safety check: PassMIT
Figma Design Reviewmohitagw15856/pm-claude-skills1.4k—~788Automated safety check: PassMIT

Similar skills

  • Prd V04 Visual Prototype Gate

    mattgierhart/PRD-driven-context-engineering

    Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool).

    180 GitHub stars~1.6k tokensUpdated 1 mo ago
    Product & Project ManagementAuto-check passed

  • Experience Lwc Design Generate

    forcedotcom/sf-skills

    A skill your agent uses when you need to create a brand new Lightning Web Component from a Figma design, a Product Requirements Document, or another design artifact — orchestrating the five-phase…

    1.1k GitHub stars~4k tokensUpdated yesterday
    Product & Project ManagementAuto-check passed

  • Design Handoff Brief

    mohitagw15856/pm-claude-skills

    Transform feature briefs into structured design briefs that give designers the context they need before opening Figma.

    1.4k GitHub stars~1.3k tokensUpdated 2 days ago
    Product & Project ManagementAuto-check passed

  • Figma Design Brief

    mohitagw15856/pm-claude-skills

    Write a structured design brief for a Figma design task from a product requirement or feature request.

    1.4k GitHub stars~1k tokensUpdated 2 days ago
    Product & Project ManagementAuto-check passed

  • Figma Design Review

    mohitagw15856/pm-claude-skills

    Runs a structured PM design review against product requirements.

    1.4k GitHub stars~788 tokensUpdated 2 days ago
    Product & Project ManagementAuto-check passed

  • Write Product Spec

    Terry-Mao/AICodingFlow

    Write a behavior-focused product spec for a significant or ambiguous feature in this repository.

    167 GitHub stars~818 tokensUpdated 8 days ago
    Product & Project ManagementAuto-check passed

More from ragnar-pwninskjold/tech-snacks

  • Scaffold Claude

    ragnar-pwninskjold/tech-snacks

    A skill your agent uses when the user wants to create, draft, or scaffold a CLAUDE.md (or AGENTS.md) file for their project.

    137 GitHub stars~1.7k tokensUpdated 1 mo ago
    Auto-check passed

  • UI Cloner

    ragnar-pwninskjold/tech-snacks

    A skill your agent uses when user provides a URL and wants to replicate or clone a website's UI, design, or visual style for their own product.

    137 GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed

  • Mine Claude Md

    ragnar-pwninskjold/tech-snacks

    Mine recent Claude Code sessions for non-obvious, multi-file CLAUDE.md candidates, adversarially verify them, and propose paste-ready additions.

    137 GitHub stars~1k tokensUpdated 1 mo ago
    Auto-check passed

  • React Refactor Tournament

    ragnar-pwninskjold/tech-snacks

    Review React/Next.js code against the real vercel-react-best-practices skill, backlog the performance findings keyed to actual rule ids + impact tiers, rank the most over-subscribed tiers, then fix…

    137 GitHub stars~1.3k tokensUpdated 1 mo ago
    Auto-check passed

  • Caveman Search

    ragnar-pwninskjold/tech-snacks

    A skill your agent uses when the user wants a terse, opinionated, research-backed answer to a "what tech/tools/stack do I need for X" question, or asks how to approach building something.

    137 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Lite Prd

    ragnar-pwninskjold/tech-snacks

    A skill your agent uses when the user hands you a vague or half-formed feature ask and wants it turned into a lightweight PRD, or asks to "write a PRD", "spec this feature", "flesh this out", or…

    137 GitHub stars~853 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Prd To UX

What does Prd To UX do?

A skill your agent uses 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). Prd To UX is an agent skill from ragnar-pwninskjold/tech-snacks.dev, Claude Design, v0, or similar).

When should I use Prd To UX?

Prd To UX fits situations like: translating a PRD; raw product idea into screen-level prompts for web UX generators (Google Stitch.

How do I install Prd To UX in Claude Code?

Run `npx skills add ragnar-pwninskjold/tech-snacks --skill prd-to-ux -a claude-code`. Or copy the skill folder (plugins/tech-snacks/skills/prd-to-ux in ragnar-pwninskjold/tech-snacks) into .claude/skills/prd-to-ux in your project. Claude Code loads it when a task matches its description.

How do I install Prd To UX in Codex?

Run `npx skills add ragnar-pwninskjold/tech-snacks --skill prd-to-ux -a codex`. Or copy the skill folder (plugins/tech-snacks/skills/prd-to-ux in ragnar-pwninskjold/tech-snacks) into .agents/skills/prd-to-ux in your project. Codex loads it when a task matches its description.

Can I use Prd To UX in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ragnar-pwninskjold/tech-snacks --skill prd-to-ux -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prd-to-ux, .gemini/skills/prd-to-ux, .github/skills/prd-to-ux and .opencode/skills/prd-to-ux in your project.

What does Prd To UX need to run?

SKILL.md names no scripts, command-line tools or credentials: Prd To UX is instructions for the agent only.

Does Prd To UX access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Prd To UX safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Prd To UX use?

Prd To UX is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Prd To UX use?

About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.5k tokens, read only when the agent opens those files.

What are the alternatives to Prd To UX?

Skills that share tags, products or a category with Prd To UX: Prd V04 Visual Prototype Gate (mattgierhart/PRD-driven-context-engineering, 180 stars), Experience Lwc Design Generate (forcedotcom/sf-skills, 1.1k stars), Design Handoff Brief (mohitagw15856/pm-claude-skills, 1.4k stars) and Figma Design Brief (mohitagw15856/pm-claude-skills, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Prd To UX?

ragnar-pwninskjold (a GitHub user) maintains it in ragnar-pwninskjold/tech-snacks, which has 137 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on August 18, 2026.

Source: ragnar-pwninskjold/tech-snacks on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.