skills.rest
Bojackxiang
BojackxiangCOMMUNITY
Explore all skills by this author →
GitHub

主题颜色规范

Define blue-cyan gradient tokens and shadow rules for UI components.

Updated Jan 20, 2026
Search Tags:#consistency#accessibility#design system#theme#UI design#gradient
One-click install
npx skills add https://github.com/Bojackxiang/n8n-demo --skill -bojackxiang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 主题颜色规范
Source: https://github.com/Bojackxiang/n8n-demo/tree/main/.copilot/skills/theme
Command: npx skills add https://github.com/Bojackxiang/n8n-demo --skill -bojackxiang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a cohesive color system and gradient guidelines to ensure consistent visual design across UI components, improving aesthetics and usability.

Core Features & Use Cases

  • Gradient tokens: defines a primary blue-to-cyan gradient for buttons, icons, and cards.
  • Shadow and interaction: prescribes shadows and hover/focus/disabled states for predictable UI behavior.
  • Usage guidance: offers practical examples to apply the theme to buttons, badges, cards, and icon containers.

Quick Start

Apply the theme across new components by adopting the gradient tokens and shadow rules shown in the examples.

Frequently Asked Questions about 主题颜色规范

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

FAQPage Schema
How do I unify UI gradient colors for buttons and cards?▼

To unify UI gradient colors, apply a cohesive blue-cyan gradient system to components like buttons and cards. This ensures consistent visual design and predictable UI behavior across your application.

What is a design system color token for frontend development?▼

A design system color token defines specific gradient values and shadow rules for UI components. It standardizes visual elements like buttons and icons, ensuring aesthetic consistency.

Can I use this theme color specification without external tooling?▼

Yes, you can apply this theme color specification without external tooling. It provides standalone gradient tokens and shadow rules that integrate directly into frontend design and development workflows.

How do I define hover and disabled states for UI components?▼

Define hover and disabled states by applying prescribed shadow and interaction rules from a cohesive color system. This ensures predictable UI behavior for buttons, cards, and icons.

Why does my UI design system have inconsistent visual theming?▼

Inconsistent visual theming occurs when UI components lack a cohesive color system. Implementing standardized gradient tokens and shadow rules for buttons, cards, and typography solves this problem.

Best way to standardize typography and badge colors in frontend design?▼

The best way to standardize typography and badge colors is by adopting a unified gradient color system. It provides clear usage guidelines and tokens to ensure aesthetic consistency across UI components.

Related Skills

Explore More Design & Creative Skills→
Adelie-SquadAdelie-Squad
17

UI Designer Agent

Create UI systems with design tokens, component libraries, and handoff notes.

Official
Advanced
tylerwindtylerwind
47

ui-neumorphic-design

Apply dual shadows, soft highlights, and typography rules for neumorphic UI styling.

Community
Basic
PiercingXXPiercingXX
1

gradient

Standardize Gradient design-system styling rules with WCAG 2.2 AA accessibility criteria.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

riso-product

Generate web page templates with risograph-inspired halftone textures and neobrutalist UI elements.

Community
Intermediate