ui-ux-designer

Design user interfaces, wireframes, and design systems with accessibility standards.

Updated Feb 17, 2026

Search Tags:#ui #inclusive design #accessibility #design system #prototyping #wireframing #ux

Ready to run

npx skills add https://github.com/TheGreatL/ojt-time-tracker --skill ui-ux-designer-thegreatl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/TheGreatL/ojt-time-tracker/tree/main/.agent/skills/ui-ux-designer
Command: npx skills add https://github.com/TheGreatL/ojt-time-tracker --skill ui-ux-designer-thegreatl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the need for creating user-centered, accessible, and visually appealing digital interfaces and design systems that are both functional and delightful to use.

Core Features & Use Cases

Design Systems: Develop and maintain comprehensive design systems using atomic principles and design tokens.
User Research & Accessibility: Conduct user research, implement accessibility standards (WCAG), and ensure inclusive design practices.
Interface Optimization: Design wireframes, prototypes, and final UI elements that enhance user experience and task completion.
Use Case: A startup needs to build a new mobile app. This Skill can help define the entire visual language, create reusable UI components, ensure it's accessible to all users, and produce high-fidelity prototypes for user testing.

Quick Start

Design a user flow for a mobile banking application's fund transfer feature, focusing on simplicity and security.

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 design system with reusable components and design tokens?▼

To create a design system, you define atomic design principles and generate design tokens for cross-platform consistency. This process produces a reusable component library that ensures visual and functional alignment across your entire product suite.

How do I design wireframes and prototypes that meet WCAG accessibility standards?▼

Designing accessible wireframes and prototypes involves integrating inclusive design patterns and adhering to WCAG standards throughout the user research phase. This ensures your final UI elements are usable by individuals with varying abilities and enhance task completion.

What is the best way to structure a mobile app user flow for task completion?▼

Structuring a mobile app user flow requires focusing on simplicity and security while applying user research insights. This approach yields intuitive interface designs that guide users efficiently through specific actions like fund transfers.

Can I use this approach to build an inclusive design pattern library for cross-platform apps?▼

Yes, you can build an inclusive design pattern library by applying accessibility standards and atomic design principles. This generates a comprehensive set of UI components that maintain consistency across multiple platforms and devices.

Does user research drive the creation of design tokens and component libraries?▼

User research directly informs the creation of design tokens and component libraries by identifying user needs and accessibility requirements. This data shapes the visual language and functional behavior of the reusable UI elements.

When should I not use atomic design principles for interface optimization?▼

You should avoid atomic design principles when building highly customized, one-off interfaces that do not require cross-platform consistency or reusable components. In these cases, a rigid component library may unnecessarily constrain the visual language.