主题颜色规范

Name: 主题颜色规范
Availability: InStock
Author: Bojackxiang

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

Ready to run

npx skills add https://github.com/Bojackxiang/n8n-demo --skill -bojackxiang

💬 Prompt for ChatGPT / Claude Chat▼

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.