用途：在只有一个或两三个品牌色时，快速推导出完整的 UI 色彩系统，包括悬停/激活/禁用等状态色、背景与边框用的中性色，以及与品牌协调的语义色（错误、警告、成功、信息）。
主要能力：
- 交互状态推导：基于 HSL 调整明度，从每个品牌色生成 base、hover（明度 -8%）、active（明度 -14%）、tint（明度 +40%）与 subtle（大幅降低饱和度并提亮）等变体。
- 带品牌倾向的灰阶：将品牌色相降低饱和度得到 grey-900 至 grey-50 的中性色，替代通用 #666 / #eee；并建议避免纯黑配纯白，改用近黑（如 #222）与偏白（如 #EEE）。
- 语义色推导：使用标准语义色相（错误 0–10、警告 35–45、成功 140–160、信息 210–230），饱和度对齐品牌主色，警告色明度较主色降低 5–10% 以平衡视觉重量，并遵循“鲜艳度规则”。
- 功能性颜色：焦点 --color-focus、选区 --color-selection、遮罩 --color-overlay、骨架屏 --color-skeleton、禁用态（grey-500 文字、grey-200 背景/边框）、品牌色倾向阴影、链接及已访问链接、输入框与校验状态。
- 角色命名：强调颜色必须承担明确角色（surface、text、link、accent、decoration 等），缺失角色会被框架默认值填充，导致配色偏离品牌。
使用方式：先确定种子品牌色，资料提示可从线上站点提取真实色值（get_color_palette 或 extract-design 技能，需另行配置），再用上述 HSL 方法扩展；最终输出为 CSS 自定义属性令牌（:root 下的 --color-* 变量）。资料附有以 #133174 为主色的完整令牌示例与审查清单。
限制：价格、平台支持与具体安装命令暂未提供。所有方法为设计指导，实际对比度是否达标仍需自行验证。