skills.rest
BryantChi
BryantChiCOMMUNITY
Explore all skills by this author →
GitHub

UI 設計技能

Index UI design guidelines for color, typography, spacing, and accessibility.

1|Updated Jan 22, 2026
Search Tags:#typography#design#ui#accessibility#color#design-system#spacing
One-click install
npx skills add https://github.com/BryantChi/webdev-skills --skill ui-bryantchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI 設計技能
Source: https://github.com/BryantChi/webdev-skills/tree/main/ui
Command: npx skills add https://github.com/BryantChi/webdev-skills --skill ui-bryantchi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams struggle with inconsistent design language across products, causing usability gaps and higher redesign costs.

Core Features & Use Cases

  • Color system governance: establishing a scalable palette, contrast, and theming across platforms.
  • Typography scale and rhythm: headings, body text, and accessibility-compliant typography.
  • Spacing and layout: a cohesive spacing system for grids, components, and responsive design.
  • Accessibility guidelines: ensuring WCAG-aligned keyboard navigation, color contrast, and semantic HTML.
  • Style library coverage: 55+ design styles references and practical templates for rapid prototyping.
  • Use cases include corporate sites, SaaS dashboards, e-commerce product pages, and editorial magazines.
  • Real-world example: generate a UI kit with color tokens, typography tokens, and a sample component set.

Quick Start

Create a starter UI design guide for a new project.

Frequently Asked Questions about UI 設計技能

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

FAQPage Schema
How do I create a scalable UI color system and typography scale for a SaaS dashboard?▼

Create a cohesive UI spacing system by defining consistent grid and component spacing tokens for responsive design. This eliminates layout misalignment and ensures structural harmony across different screen sizes and components.

Can I generate a complete UI design kit with color and typography tokens for a new project?▼

Generate a complete UI design kit by compiling color tokens, typography tokens, and a sample component set. This provides a practical starter guide and reusable templates for rapid prototyping across various platforms.

What is the best way to ensure WCAG-aligned accessibility in UI design?▼

Ensure WCAG-aligned accessibility in UI design by applying guidelines for keyboard navigation, color contrast, and semantic HTML. This guarantees that interfaces meet compliance standards and remain usable for all users.

How do I maintain UI consistency across different editorial and e-commerce platforms?▼

Maintain UI consistency across editorial and e-commerce platforms by indexing style variations and referencing a library of over 55 design styles. This prevents inconsistent design language and reduces redesign costs.

Related Skills

Explore More Design & Creative Skills→
dtsongdtsong
1

intake-skill

Transform natural language project descriptions into structured engagement briefs.

Community
Advanced
PeterHddPeterHdd
27

cleanui

Improve AI-generated user interfaces with design best practices and layout intelligence.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
Jorge-IvanJorge-Ivan
1

validating-accessibility

Validates web accessibility against WCAG 2.2 Level AA requirements.

Community
Advanced