skills.rest
rshankras
rshankrasCOMMUNITY
Explore all skills by this author →
Website𝕏@rshankraGitHub

ux-spec

Generate UI/UX specifications and design system documentation from product requirements and architecture documents.

603|51|Updated Oct 29, 2025
Search Tags:#specification#design system#wireframing#ios#macos#ux design#ui design
One-click install
npx skills add https://github.com/rshankras/claude-code-apple-skills --skill ux-spec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-spec
Source: https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/product/ux-spec
Command: npx skills add https://github.com/rshankras/claude-code-apple-skills --skill ux-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of detailed UI/UX specifications, including wireframes and design system documentation, directly from product requirements and architecture documents.

Core Features & Use Cases

  • Generate UX_SPEC.md: Creates comprehensive screen layouts, component specifications, and interaction flows.
  • Generate DESIGN_SYSTEM.md: Defines design principles, typography, color palettes, and reusable components.
  • Use Case: When starting a new app project, use this skill to translate your Product Requirements Document (PRD) and Architecture Specification into a visual blueprint that developers can use to build the user interface.

Quick Start

Generate a UX specification from the PRD and Architecture documents.

Frequently Asked Questions about ux-spec

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

FAQPage Schema
How do I generate UI/UX specifications from a product requirements document?▼

To generate UI/UX specifications from a product requirements document, this Skill automatically translates your PRD and architecture documents into detailed screen layouts, component specifications, and interaction flows.

Can I create design system documentation including typography and color palettes?▼

Yes, you can create design system documentation that defines design principles, typography, color palettes, and reusable components directly from your product requirements and architecture documents.

Does this tool support wireframing and interaction patterns for iOS and macOS applications?▼

Yes, this tool supports wireframing, component definition, and interaction patterns specifically tailored for iOS and macOS applications, including accessibility and dark mode adaptation.

What is the best way to document component specifications and interaction flows for a new app project?▼

The best way to document component specifications and interaction flows is to generate a comprehensive UX_SPEC.md file from your initial product requirements and architecture documents.

How do I handle dark mode adaptation and accessibility in UX design?▼

To handle dark mode adaptation and accessibility in UX design, this Skill processes your architecture documents to output specifications that explicitly include these visual and functional adaptations.

Related Skills

Explore More Design & Creative Skills→
gustavscirulisgustavscirulis
114

ux-spec

Generate UI/UX specifications with wireframes and design systems from PRDs.

Community
Advanced
jtvarisjtvaris

implementation-guide

Generate a phased iOS/macOS implementation guide from PRD, architecture, UX, and design docs.

Community
Advanced
danielzmeowdanielzmeow

extract

Extract reusable UI components and design tokens from code into a design system.

Community
Advanced
pratikrath126pratikrath126
42

frontend-design

Guide frontend design decisions with UX psychology, typography, and color theory.

Community
Intermediate