ux-spec
Generates UI/UX specifications with wireframes and design system. Creates UX_SPEC.md and DESIGN_SYSTEM.md from PRD and Architecture specs. Use when designing app interface and creating design system.
npx skills add rshankras/claude-code-apple-skills --skill ux-spec --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Generates UI/UX specifications with wireframes and design system for iOS/macOS apps by transforming PRD and architecture inputs into two documents: UX_SPEC.md and DESIGN_SYSTEM.md. The output documents cover design principles, information architecture, screen specifications, and component interactions to guide implementation.
How it works
- Activates when the user says: "generate UI spec", "create UX specification", "design wireframes", "create design system", or "generate UX spec from PRD".
- Requires: PRD (from prd-generator skill), ARCHITECTURE.md (from architecture-spec skill), and a Product development plan with positioning/brand personality.
- Reads inputs from: docs/PRD.md, docs/ARCHITECTURE.md, Product development plan (product-plan-*.md), and optional User clarifications.
- Produces two documents:
- docs/UX_SPEC.md containing sections for Design Principles, Information Architecture, Screen Specifications, and detailed screen content (onboarding, home, item detail, etc.).
- DESIGN_SYSTEM.md (implied by description) outlining design system components (not explicitly shown in excerpt; assumed to be included alongside UX_SPEC.md).
- Documents include concrete screen structures, layouts, interactions, states, and accessibility notes as described in the input material.
When to use it
Use when designing an app interface and creating a design system, specifically after PRD and architecture are available and clarified with branding and target audience.
What it can touch
- Reads: docs/PRD.md, docs/ARCHITECTURE.md, product-plan-*.md
- Writes: docs/UX_SPEC.md (and DESIGN_SYSTEM.md)
- No execution against codebases or deployment actions; outputs are design documentation for developers.
Caveats
- Requires PRD and ARCHITECTURE.md to exist from respective skills.
- Output format and content are drawn from the described templates; exact wording and structure depend on input files and guidance within the skill description.
- The design system portion is created as part of the output but exact file naming and structure beyond UX_SPEC.md are not strictly enumerated in the excerpt.
# UX Specification Skill Generate comprehensive UI/UX specifications with wireframes and design system for iOS/macOS apps. ## Metadata - **Name**: ux-spec - **Version**: 1.0.0 - **Role**: UI/UX Designer - **Author**: ProductAgent Team ## When This Skill Activates This skill activates when the user says: - "generate UI spec" - "create UX specification" - "design wireframes" - "create design system" - "generate UX spec from PRD" ## Description You are a UI/UX Designer AI agent specializing in iOS/macOS app design. Your job is to transform product requirements and architecture into comprehensive, actionable UI/UX specifications that developers can implement directly. ## Prerequisites Before activating this skill, ensure: 1. PRD exists (from prd-generator skill) 2. ARCHITECTURE.md exists (from architecture-spec skill) 3. Product development plan with positioning and brand personality ## Input Sources Read and extract information from: 1. **docs/PRD.md** - All features and requirements - User flows and user stories - Target audience - Acceptance criteria 2. **docs/ARCHITECTURE.md** - App structure and navigation - Data models (to understand what to display) - Platform (iOS/macOS) 3. **P
- Metadata
- When This Skill Activates
- Description
- Prerequisites
- Input Sources
- Output
- 1. docs/UXSPEC.md
- X.X [Screen Name]
- 2. docs/DESIGNSYSTEM.md
- Execution Instructions
- Quality Guidelines
- Example Activation
- Integration with Workflow
- Notes
What does the ux-spec skill do?
Generates UI/UX specifications with wireframes and design system. Creates UX_SPEC.md and DESIGN_SYSTEM.md from PRD and Architecture specs. Use when designing app interface and creating design system.
How do I install it?
Run `npx skills add rshankras/claude-code-apple-skills --skill ux-spec --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rshankras/claude-code-apple-skills, a repository with 589 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.