skills.rest
ano4l
ano4lCOMMUNITY
Explore all skills by this author →
GitHub

ux-spec

Convert PRD and architecture docs into UX specs and design systems.

Updated Jun 2, 2026
Search Tags:#architecture#prd#wireframes#generate#design-system#ux-spec#ios-design
One-click install
npx skills add https://github.com/ano4l/SiteRent --skill ux-spec-ano4l
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-spec
Source: https://github.com/ano4l/SiteRent/tree/main/skills/product/ux-spec
Command: npx skills add https://github.com/ano4l/SiteRent --skill ux-spec-ano4l

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turning product requirements and architecture documents into clear UI/UX specifications and a shared design system to accelerate design-to-development handoff.

Core Features & Use Cases

  • PRD to spec: Convert PRD.md into structured UX specs and a design system scaffold.
  • Architecture-aware design: Align UI components and navigation with ARCHITECTURE.md.
  • Output artifacts: Generate UX_SPEC.md and DESIGN_SYSTEM.md ready for implementation.

Quick Start

Provide PRD.md and ARCHITECTURE.md, and I will generate UX_SPEC.md and DESIGN_SYSTEM.md.

Frequently Asked Questions about ux-spec

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

FAQPage Schema
How do I convert a PRD into UI UX specifications for an iOS app?▼

To convert a PRD into UI UX specifications, the Skill reads PRD.md and ARCHITECTURE.md to generate comprehensive UX_SPEC.md and DESIGN_SYSTEM.md scaffolds tailored for iOS/macOS app workflows.

What is the best way to generate a design system from architecture docs?▼

Generating a design system from architecture docs requires aligning UI components with technical structure. This Skill interprets ARCHITECTURE.md and outputs a ready-to-implement DESIGN_SYSTEM.md scaffold.

Do I need architecture docs to generate wireframes and UX specs?▼

Yes, architecture docs are required to generate UX specs. The Skill explicitly requires both docs/PRD.md and docs/ARCHITECTURE.md to exist to accurately draft wireframes and align the design system.

Can I use this to create a design system scaffold for macOS app design?▼

Yes, you can use this to create a design system scaffold for macOS app design. It specifically applies to iOS and macOS workflows, mapping product requirements into structured UX specifications and design systems.

Why does PRD to spec generation require ARCHITECTURE.md files?▼

PRD to spec generation requires ARCHITECTURE.md files to ensure resulting wireframes and UI components are technically feasible and aligned with your app's underlying structure and navigation flow.

Related Skills

Explore More Design & Creative Skills→
venomez-vipervenomez-viper
1

ux-spec

Generate UX_SPEC.md and DESIGN_SYSTEM.md from PRD.md and ARCHITECTURE.md.

Community
Intermediate
AutisticAFAutisticAF
4

product-ux-spec

Generate UI/UX specifications and design systems from PRD and architecture documents.

Community
Advanced
BellaBeBellaBe
37

product-design-wireframes

Convert user flows into wireframe specifications using atomic design hierarchy.

Community
Advanced
laraxotlaraxot
26

bmad-wds-create-design-system

Parse YAML specifications and add components to design systems.

Official
Advanced