product_skill

This skill generates UI/UX specifications and wireframes from PRD and architecture, delivering UX_SPEC.md and DESIGN_SYSTEM.md for iOS/macOS apps.

Swift

56

GitHub Stars

2

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill rshankras/claude-code-apple-skills --skill product

SKILL.md3.5 KB
WORKFLOW.md24.7 KB

Overview

This skill generates complete UI/UX specifications for iOS and macOS apps, including wireframes, screen inventories, and a design system. It transforms product requirement documents and architecture notes into two output documents: UX_SPEC.md and DESIGN_SYSTEM.md. Use it to produce developer-ready, platform-specific interface specs and consistent visual language files.

How this skill works

The skill reads the PRD, architecture notes, and product positioning to infer app structure, user flows, data needs, and brand personality. It creates detailed screen-by-screen specs with ASCII wireframes, component definitions, interactions, states (loading/empty/error), accessibility notes, and handoff-ready design system tokens. It also generates DESIGN_SYSTEM.md with colors, typography, spacing, components, and interaction rules.

When to use it

Designing the app UI from a PRD and architecture spec
Creating developer-ready screen specs and wireframes for iOS/macOS
Establishing a reusable design system for implementation
Preparing UX deliverables for sprint planning or handoff
Validating navigation, flows, and accessibility before visual design

Best practices

Provide a complete PRD and architecture document before generation
Specify brand personality and any existing brand assets up front
Identify 3–6 priority screens to focus effort and iteration
Review generated interactions and accessibility annotations with engineers
Use generated design tokens as source of truth for implementation
Iterate on wireframes with user feedback before final visual design

Example use cases

Generate UX_SPEC.md and DESIGN_SYSTEM.md from a PRD to hand off to developers
Create onboarding, home, and detail screen specs for an iOS app sprint
Produce platform-specific interaction rules (iOS/macOS) and accessibility labels
Standardize component behavior and tokens for an engineering team
Quickly prototype navigation and empty/loading/error states for user testing

FAQ

A PRD with features and user flows, an architecture spec with app structure and data models, and the product positioning or brand notes.

What documents does the skill produce?

Two documents: UX_SPEC.md with wireframes, screen specs, flows, and interactions; and DESIGN_SYSTEM.md with tokens, components, and usage guidance.

Can it target both iOS and macOS?

Yes. The output includes platform-specific patterns, navigation suggestions, and accessibility guidance for iOS and macOS.

How customizable are styles and tokens?

You can pass brand personality, preferred design style, and color preferences; the design system is generated and intended to be edited and locked as a source of truth.