skills.rest
cna-bootcamp
cna-bootcampOFFICIAL
Explore all skills by this author →
GitHub

uiux-design

Generates UI/UX design specifications and style guides from user stories.

23|5|Updated Jul 17, 2025
Search Tags:#design#style guide#prototyping#wireframing#user experience#uiux
One-click install
npx skills add https://github.com/cna-bootcamp/clauding-guide --skill uiux-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-design
Source: https://github.com/cna-bootcamp/clauding-guide/tree/main/.claude/skills/16-uiux-design
Command: npx skills add https://github.com/cna-bootcamp/clauding-guide --skill uiux-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you create detailed UI/UX design specifications based on user stories, ensuring a user-centered and consistent design for your product.

Core Features & Use Cases

  • Detailed Design Specification: Generates comprehensive UI/UX design documents including principles, information architecture, user flows, wireframes, and component libraries.
  • Style Guide Creation: Defines visual elements like color palettes, typography, spacing, icons, and responsive design strategies.
  • Use Case: After defining user stories for a new e-commerce feature, use this Skill to generate a complete UI/UX design specification, including wireframes for key screens and a style guide for consistent branding.

Quick Start

Use the uiux-design skill to create a UI/UX design specification based on the user stories in design/userstory.md.

Frequently Asked Questions about uiux-design

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

FAQPage Schema
How do I generate a UI/UX design specification from user stories?▼

To generate a UI/UX design specification, provide your user stories to produce comprehensive design documents including information architecture, user flows, wireframes, and a complete style guide.

What is included in a design style guide for user interface consistency?▼

A style guide for user interface consistency defines visual elements including color palettes, typography, spacing, icons, and responsive design strategies to maintain unified product branding.

Can I create wireframes and component libraries for an e-commerce feature?▼

Yes, you can create wireframes for key screens and build component libraries for e-commerce features by processing user stories to ensure a user-centered design aligned with your style guide.

Do I need user stories before starting the user experience design process?▼

Yes, user stories are required as the primary input to generate detailed UI/UX design specifications, information architecture, and user flows that accurately reflect your product requirements.

What's the best way to structure information architecture for product design?▼

The best way to structure information architecture is by processing user stories to generate mapped user flows and wireframes, ensuring a logical, user-centered navigation experience across the product.

Related Skills

Explore More Design & Creative Skills→
jameinghjameingh
2

brainstorming

Guides a structured brainstorming session to produce validated design specifications.

Community
Basic
tiankong0101-bytetiankong0101-byte

ui-ux-pro-max

Create design systems, component specifications, and interactive prototypes for software products.

Community
Advanced
NAMEWTANAMEWTA
4

frontend-design

Generate production-ready front-end interfaces for web components, pages, and applications.

Community
Advanced
zzafergokzzafergok
1

project-planner-skill

Generate Requirements, Design, and Tasks documents from a feature brief.

Community
Advanced