skills.rest
cenconq25
cenconq25COMMUNITY
Explore all skills by this author →
GitHub

ux-design

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

39|6|Updated May 3, 2026
Search Tags:#documentation#accessibility#specification#ux-design#prd#ux-flow#design-bible
One-click install
npx skills add https://github.com/cenconq25/claude-code-app-studio --skill ux-design-cenconq25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-design
Source: https://github.com/cenconq25/claude-code-app-studio/tree/main/.claude/skills/ux-design
Command: npx skills add https://github.com/cenconq25/claude-code-app-studio --skill ux-design-cenconq25

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Section-by-section UX spec authoring helps translate concepts, PRDs, and platform conventions into concrete UX documents that guide design and implementation before development begins.

Core Features & Use Cases

  • Generates design/ux/<screen-or-flow>.md from the design bible, parent PRD, and concept notes.
  • Ensures a consistent 11-section UX spec structure that captures goals, context, layout, states, motion, copy, accessibility, platform notes, and implementation hooks.
  • Supports reuse across screens and flows by referencing tokens in the design bible and linking to related PRDs.

Quick Start

Run after the relevant PRD is approved and before stories cite UI behavior to produce a ready-to-edit UX spec document.

Frequently Asked Questions about ux-design

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

FAQPage Schema
How do I translate a PRD into a UX specification document?▼

To translate a PRD into a UX specification, you generate a structured markdown file that applies platform conventions and concept notes to define layout, states, motion, and accessibility for a specific screen or flow.

What sections should be included in a comprehensive UX spec?▼

A comprehensive UX spec should include 11 structured sections capturing goals, context, layout, states, motion, copy, accessibility, platform notes, and implementation hooks to fully guide design and development.

When should I generate UX documentation during the product development lifecycle?▼

You should generate UX documentation after the parent PRD is approved and before engineering stories cite UI behavior, ensuring developers have actionable design and accessibility guidelines before implementation begins.

Does generating UX flows require referencing a specific design bible?▼

Generating UX flows relies on referencing a design bible to extract design tokens and platform conventions, ensuring the resulting specification maintains consistency across multiple screens and user journeys.

Can I apply UX specifications to both single screens and broader user flows?▼

You can apply UX specifications to both single screens and broader user flows by generating tailored markdown documents that reference the parent PRD and maintain consistent accessibility considerations across contexts.

How do accessibility considerations integrate into UX documentation?▼

Accessibility considerations integrate directly into UX documentation as a dedicated section within the 11-part structure, ensuring design tokens and implementation hooks account for inclusive platform interactions from the start.

Related Skills

Explore More Design & Creative Skills→
ilandahanilandahan
9

role-product-manager

Guide product discovery, PRD creation, and phase-specific deliverables.

Community
Basic
felvieirafelvieira
22

po-feature-spec

Translate business needs into user stories, acceptance criteria, and handoff plans.

Community
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
hoonzinopehoonzinope

uiux-engineer

Draft a UI/UX design document covering goals, personas, user flows, and states.

Community
Intermediate