skills.rest
AutisticAF
AutisticAFCOMMUNITY
Explore all skills by this author →
GitHub

product-ux-spec

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

4|1|Updated Apr 2, 2026
Search Tags:#ui#ios#macos#wireframes#ux#design-system#ux-spec
One-click install
npx skills add https://github.com/AutisticAF/claude-code-apple-dev-plugin --skill product-ux-spec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-ux-spec
Source: https://github.com/AutisticAF/claude-code-apple-dev-plugin/tree/main/skills/product-ux-spec
Command: npx skills add https://github.com/AutisticAF/claude-code-apple-dev-plugin --skill product-ux-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many product teams struggle to convert product requirement documents and architecture outlines into developer-ready UI/UX specifications, resulting in ambiguous designs, implementation delays, and accessibility regressions. This skill bridges the gap by producing clear, actionable UX_SPEC and DESIGN_SYSTEM documents that developers and designers can use to implement consistent interfaces across iOS and macOS.

Core Features & Use Cases

  • Full spec generation: Produces a complete docs/UX_SPEC.md with screen inventories, wireframes, interaction patterns, states, and accessibility guidance.
  • Design system output: Creates docs/DESIGN_SYSTEM.md detailing components, typography, color modes, and behavior for consistent implementation.
  • Context-aware: Reads docs/PRD.md and docs/ARCHITECTURE.md to align UI, data model displays, and navigation with platform conventions (iOS/macOS).
  • Use case: Convert a product PRD and architecture file into a developer-ready UX spec and component library for an iOS app release.

Quick Start

Ask the skill to generate a UX spec by providing the PRD and ARCHITECTURE.md and request outputs as docs/UX_SPEC.md and docs/DESIGN_SYSTEM.md.

Frequently Asked Questions about product-ux-spec

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

FAQPage Schema
How do I generate developer-ready UX specifications from a PRD?▼

To generate UX specifications from a PRD, you need a tool that reads your product requirements and architecture documents to output structured UI/UX specs. This skill processes your PRD and ARCHITECTURE.md files to produce detailed docs/UX_SPEC.md and docs/DESIGN_SYSTEM.md, including screen inventories, wireframes, and interaction patterns.

Can I create a complete iOS and macOS design system from architecture documents?▼

Yes, you can create a complete iOS and macOS design system from architecture documents. By analyzing your docs/ARCHITECTURE.md, this skill generates a docs/DESIGN_SYSTEM.md detailing component libraries, typography, color modes, and platform-specific behaviors for consistent implementation across Apple platforms.

What is the best way to document wireframes and interaction patterns for iOS app development?▼

The best way to document wireframes and interaction patterns for iOS app development is to generate a comprehensive UX spec. This skill converts your product requirements into screen-by-screen wireframes, component definitions, and interaction patterns aligned with platform conventions.

Does generating a UX spec automatically include accessibility and dark mode guidance?▼

Yes, generating a UX spec with this skill automatically includes accessibility and dark mode guidance. The output docs/UX_SPEC.md specifically integrates accessibility requirements and dark mode behaviors alongside the core UI components and interaction states.

Do I need an ARCHITECTURE.md file to build a component library for an app release?▼

Yes, you need an ARCHITECTURE.md file to build an accurate component library. The skill requires both docs/PRD.md and docs/ARCHITECTURE.md as readable inputs to align the UI, data model displays, and navigation with the underlying technical architecture.

Why does my design team struggle with ambiguous UI implementations during app releases?▼

Your design team struggles with ambiguous UI implementations because product requirements are not converted into actionable UX specifications. This skill bridges that gap by producing clear docs/UX_SPEC.md and docs/DESIGN_SYSTEM.md files that eliminate design ambiguity and prevent implementation delays.

Related Skills

Explore More Design & Creative Skills→
mazicimertmazicimert

ux-spec

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

Community
Advanced
jtvarisjtvaris

implementation-guide

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

Community
Advanced
muzhicaomingwangmuzhicaomingwang
3

ui

Translate UX concepts into wireframe-level UI specifications with design tokens and accessibility checklists.

Community
Intermediate
cenconq25cenconq25
39

ux-design

Generate 11-section UX specification documents from PRDs and design bibles.

Community
Intermediate