skills.rest
DDTully
DDTullyCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Produce UI/UX design artifacts, wireframes, and design system documentation.

Updated Aug 29, 2025
Search Tags:#design#ui#research#accessibility#prototyping#ux#design-systems
One-click install
npx skills add https://github.com/DDTully/dotfiles --skill ui-ux-designer-ddtully
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/DDTully/dotfiles/tree/main/skills/.agent_skills/ui-ux-designer
Command: npx skills add https://github.com/DDTully/dotfiles --skill ui-ux-designer-ddtully

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing intuitive, accessible, and scalable interfaces across product surfaces can be complex and time-consuming. This Skill provides a structured framework for user research, design systems, and cross-platform consistency to speed up delivery and improve usability.

Core Features & Use Cases

  • Atomic design with token-based architecture and component libraries for web, mobile, and desktop.
  • Accessibility-first design practices aligned with WCAG and inclusive design patterns.
  • Design system governance, versioning, and handoff-ready documentation for teams.

Quick Start

Design a token-based design system and produce a starter component library outline for a new product.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I create a token-based design system for web and mobile platforms?▼

A design system is a structured framework of token-based architecture and component libraries that ensures cross-platform consistency. It applies atomic design principles to scale UI components efficiently across web, mobile, and desktop environments.

How do I generate developer handoff documentation for UI components?▼

Developer handoff documentation is generated by producing design system governance, versioning, and specification artifacts. This creates handoff-ready documentation that translates UI components and wireframes into actionable developer specifications.

What is the best way to integrate accessibility best practices into wireframes?▼

The best way to integrate accessibility is by applying accessibility-first design practices aligned with WCAG standards during wireframe creation. This ensures inclusive design patterns are embedded directly into UI/UX artifacts.

Can I use this approach to design cross-platform user interfaces for desktop and mobile?▼

Yes, you can design cross-platform user interfaces for desktop and mobile using this framework. It produces UI/UX design artifacts and component libraries specifically structured for web, mobile, and cross-platform environments.

How does user research factor into producing UI design artifacts?▼

User research factors into producing UI design artifacts by applying research insights directly to the creation process. This framework structures user research to inform wireframes and design system documentation, improving overall usability.

Related Skills

Explore More Design & Creative Skills→
claudcherejiclaudchereji

ux-researcher

Conduct usability testing and translate findings into actionable product improvements.

Community
Advanced
webrix-aiwebrix-ai
1

design-handoff

Extract design specifications and implementation details from Figma handoff materials.

Official
Intermediate
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate