skills.rest
caobingsheng
caobingshengCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Guide teams in implementing accessible, token-based UI/UX design systems.

1|Updated Mar 26, 2026
Search Tags:#design#ui#research#accessibility#ux#tokenization#design-systems
One-click install
npx skills add https://github.com/caobingsheng/skills --skill ui-ux-designer-caobingsheng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/caobingsheng/skills/tree/main/design/ui-ux-designer
Command: npx skills add https://github.com/caobingsheng/skills --skill ui-ux-designer-caobingsheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation of interface designs, wireframes, and design systems while ensuring accessibility and consistency across platforms.

Core Features & Use Cases

  • Design Systems Mastery: Atomic design methodology, token-based architecture, and scalable component libraries.
  • Modern Tools & Workflows: Advanced features in design tools, handoff, and collaboration.
  • Accessibility & Inclusive Design: WCAG compliance, keyboard navigation, and inclusive patterns.
  • Information Architecture & UX Strategy: Site mapping, user flows, and content modeling.

Quick Start

Describe your project goals, audience, and platforms to generate a step-by-step UI/UX design plan.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I build a scalable UI/UX design system with token-based architecture?▼

Create accessible UI/UX design systems by applying atomic design methodology and token-based architecture across web and mobile platforms. This approach tokenizes UI components for consistent visual language, ensuring maintainable and scalable product interfaces.

What is the best way to ensure WCAG compliance and accessibility in UI design?▼

Ensure WCAG compliance in UI design by conducting accessibility audits that verify keyboard navigation, inclusive patterns, and contrast ratios. Integrating these accessibility checks into your design system workflow guarantees inclusive design across all product development stages.

How do I generate a UI/UX design plan for cross-platform product development?▼

Generate a cross-platform UI/UX design plan by defining your project goals, audience, and target platforms. This guides the creation of step-by-step strategies for site mapping, user flows, and content modeling across web and mobile environments.

Can I use this approach for usability testing and developer handoff workflows?▼

Yes, you can use this approach for usability testing and developer handoff workflows. It supports modern design tools and collaboration features, applying information architecture and UX strategy to translate design systems into developer-ready implementations.

When do I need design tokenization for my component libraries?▼

You need design tokenization for component libraries when scaling UI/UX across multiple platforms. Tokenization centralizes design decisions like color and typography into a shared architecture, ensuring visual consistency and simplifying updates across web and mobile interfaces.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
2.0k

design-brief

Define and document a design brief with problem space, audience, constraints, and success criteria.

Community
Intermediate
cagdotincagdotin
36

web-design-guidelines

Evaluate frontend UI code against Web Interface Guidelines for accessibility and usability gaps.

Community
Intermediate
Logos-LiberLogos-Liber
17

wireframing-prototyping

Create wireframes, user flows, sitemaps, and interactive prototypes for digital products.

Official
Intermediate
ivegamsftivegamsft

ux

Provide UX design templates and checklists for journey mapping, wireframing, and accessibility auditing.

Community
Advanced