skills.rest
phyter1
phyter1COMMUNITY
Explore all skills by this author →
GitHub

design

Convert product requirements into UX design specifications with user flows and wireframes.

Updated Apr 2, 2026
Search Tags:#user flows#ux design#design documentation#wireframes#prds
One-click install
npx skills add https://github.com/phyter1/seed --skill design-phyter1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/phyter1/seed/tree/main/.claude/skills/design
Command: npx skills add https://github.com/phyter1/seed --skill design-phyter1

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps teams quickly generate comprehensive UX design specifications from product requirement documents, reducing manual effort in planning and documentation.

Core Features & Use Cases

  • PRD Analysis: Extracts user personas, goals, interaction patterns, and constraints from requirement documents.
  • User Flow Mapping: Creates detailed user flows for major features, identifying entry points, decision points, and error states.
  • Wireframe Generation: Produces ASCII wireframes for key screens to visualize layout and interactions.
  • Component Inventory: Identifies reusable UI components and documents their states and accessibility needs.
  • Design Documentation: Assembles all findings into a structured design specification report.

Quick Start

Use the design skill to analyze your product requirements and generate a detailed UX report with wireframes and component lists.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate UX design specifications from a PRD?▼

Generating UX design specifications from a PRD involves extracting user personas, goals, and constraints to produce structured documentation, user flows, and wireframes for effective design planning.

What is the process for mapping user flows from product requirements?▼

Mapping user flows from product requirements requires analyzing interaction patterns to identify entry points, decision branches, and error states, visualizing the complete user journey for major features.

Can I create wireframes directly from product requirement documents?▼

Creating wireframes directly from product requirement documents is possible by generating ASCII wireframes for key screens, allowing you to visualize layout structures and interaction patterns without graphical design tools.

How do I document reusable UI components and their states?▼

Documenting reusable UI components involves creating a component inventory that identifies each element, specifies its various states, and outlines accessibility needs based on the extracted product requirements.

What is included in comprehensive design documentation for UX planning?▼

Comprehensive design documentation for UX planning assembles user personas, mapped user flows, ASCII wireframes, and component inventories into a structured specification report to streamline the design process.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
seb1nseb1n
147

Wireframing

Generate text-based wireframes with component inventories and responsive specifications.

Community
Advanced
erikhazzarderikhazzard
1

game__directing

Generate a Design Brief and validation plan before writing code.

Community
Advanced
takemo101takemo101

wireframe-generator

Generates PNG wireframe images from YAML definitions in Markdown using Chakra UI and Playwright.

Community
Intermediate