ui-design

Name: ui-design
Availability: InStock
Author: xianmingyao

Codify UI design patterns, tokens, and accessibility guidelines for web interfaces.

1|1|Updated Mar 18, 2026

Search Tags:#typography #accessibility #layout #color #ui-design #responsive-design #web-design

Ready to run

npx skills add https://github.com/xianmingyao/openclaw-CaySon --skill ui-design-xianmingyao

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/xianmingyao/openclaw-CaySon/tree/main/skills/ui-design
Command: npx skills add https://github.com/xianmingyao/openclaw-CaySon --skill ui-design-xianmingyao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI design skill provides a comprehensive framework to craft production-grade interfaces by consolidating patterns, tokens, and accessibility guidance so teams can deliver consistent, usable designs at scale.

Core Features & Use Cases

Layout patterns and grid strategies for responsive interfaces, including grid vs flexbox decisions and container strategies.
Typography, color, spacing, and motion guidelines to achieve strong visual hierarchy and accessibility.
Design tokens architecture enabling theme switching and consistent theming across components; applicable to dashboards, marketing pages, and design systems.

Use cases include building dashboards, marketing pages, and component libraries with QA for visual consistency and accessibility.

Quick Start

Design a responsive UI dashboard mockup applying the typography scale, spacing rhythm, and a WCAG-compliant color palette.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I create a responsive UI dashboard with consistent typography and spacing?▼

To create a responsive UI dashboard, apply standardized type scales, spacing rhythms, and responsive grid layout patterns to ensure visual hierarchy and interface consistency across screen sizes.

What's the best way to structure design tokens for theme switching across web interfaces?▼

Structure design tokens by codifying typography, color, and spacing attributes into a centralized architecture, enabling consistent theming and seamless theme switching across component libraries.

When do I use grid vs flexbox layout strategies for responsive web design?▼

Choose grid vs flexbox layout strategies based on container requirements: use grid for two-dimensional responsive web design layouts and flexbox for one-dimensional component alignment patterns.

How do I ensure my landing page color palette meets WCAG accessibility guidelines?▼

Ensure landing page accessibility by applying a WCAG-compliant color palette that achieves strong visual hierarchy and meets contrast requirements for usable web interfaces.

Can I use these UI design patterns to build a component library?▼

Yes, you can use these UI design patterns to build component libraries by aligning typography, color, spacing, layout, and motion guidelines into a comprehensive design system.

What motion guidelines should I apply for accessible web interface design?▼

Apply motion guidelines that establish consistent animation patterns across products while maintaining accessibility, ensuring interface motion complements visual hierarchy without causing usability issues.