skills.rest
xianmingyao
xianmingyaoCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

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
One-click install
npx skills add https://github.com/xianmingyao/openclaw-CaySon --skill ui-design-xianmingyao
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
UnicornUnicorn

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Official
Advanced
bamechobamecho
1

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS and React or Vue.

Community
Advanced
therealityreporttherealityreport

audit-responsive-accessibility

Audit generated UI for WCAG compliance across article and brand pages.

Community
Intermediate
ydnikolaevydnikolaev
8

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community
Intermediate