ux-designer

Generate UX/UI design documentation with layout specs, interaction flows, and style guides.

1|1|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/itsmichaelwest/agent-kit --skill ux-designer-itsmichaelwest
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/itsmichaelwest/agent-kit/tree/main/skills/ux-designer
Command: npx skills add https://github.com/itsmichaelwest/agent-kit --skill ux-designer-itsmichaelwest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for creating detailed UX/UI design documentation, including layout specifications, interaction flows, and style guides, without writing any implementation code.

Core Features & Use Cases

  • Design Documentation: Generates comprehensive design documents for various applications (consumer apps, enterprise software, SaaS dashboards, etc.).
  • Layout and Interaction Specs: Defines precise layouts, responsive behavior, and interaction states.
  • Visual System Definition: Specifies color roles, typography scales, spacing systems, and design tokens.
  • Accessibility Guidance: Provides recommendations for keyboard navigation, focus order, and contrast.
  • Use Case: A product manager needs a detailed design specification for a new feature's user interface, including wireframes, interaction details, and a style guide, to hand off to developers.

Quick Start

Use the ux-designer skill to create a design document for a new user dashboard, focusing on a clean and minimalist aesthetic.

Frequently Asked Questions about ux-designer

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

FAQPage Schema
How do I generate UX design documentation for a new feature without writing code?

You can generate UX design documentation by defining layout specifications, interaction flows, and style guides in structured Markdown. This approach provides detailed wireframes and visual system definitions for features without requiring any implementation code.

What is the best way to create wireframes and interaction specs for a user dashboard?

Creating wireframes and interaction specs involves defining precise layouts, responsive behavior, and interaction states in a structured format. You can output ASCII layout diagrams and Markdown documentation to specify the exact visual and functional behavior of the dashboard.

Can I define a complete design system with typography scales and spacing tokens?

Yes, you can define a complete visual system by specifying color roles, typography scales, spacing systems, and design tokens. This establishes a consistent style guide across various digital product platforms.

Does this approach provide accessibility guidance for keyboard navigation and contrast?

Yes, accessibility guidance is included by providing specific recommendations for keyboard navigation, focus order, and contrast. This ensures the design documentation addresses necessary accessibility compliance for the digital product.

How do I document interaction design and layout specifications for enterprise software?

Documenting interaction design for enterprise software requires detailing precise layouts, responsive behavior, and interaction states. The output is a comprehensive design document covering wireframes and style guides tailored for complex SaaS dashboards.