关于 ux-color
ux-color 是用于构建基于角色、令牌化配色方案的生成式设计技能。它引导设计人员结合品牌与受众背景审慎选色，并将结果交由审查技能验证。
主要功能
- 01检查品牌与受众背景
- 02指导按角色定义颜色
- 03构建色阶并命名令牌
- 04考虑浅色与深色模式
- 05交由无障碍与美学审查
适用场景
- 01为新产品创建配色方案
- 02为设计系统定义颜色
- 03根据目标市场调整颜色
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/ux-color确认已加载。
详细介绍
色彩调色板与系统技能
此技能的工作方式（请先阅读）
这是一项生成式技能。色彩有两种截然相反的常见失误模式：随意（挑一种好看的蓝色，没有系统，且对比度不达标）和花哨刺眼（套用所有情感／文化联想和突出效果 → 形成 aesthetics 所警示的过度着色「威利·旺卡」调色板）。因此，此技能会把关以下事项：
- 确定品牌、受众和市场 — 这些因素决定了值得采用的那一套色相／情感／文化选择。
- 应用始终适用的核心原则 — 克制、基于角色、令牌化且无障碍的调色板适用于任何产品。
- 审慎做出表达性选择 — 将表面底色、情感、饱和度和深色模式设为需经过把关的决定，而非默认选项。
然后交由审查流程处理：accessibility 负责对比度比例和色盲检查；aesthetics 负责协调与平衡。
步骤 0 — 选择颜色前先明确背景
- 品牌与行业 — 是否已有品牌色／指南？行业惯例是什么（金融 → 信任／藏青；儿童 → 活泼）？查看竞争对手，了解该领域的视觉语言。
- 受众与市场 — 面向谁，以及在哪里 — 颜色含义因文化而异（请参阅情感参考中的注意事项）。
- 个性 — 高端／精致，还是活泼／充满活力？这比色相更能决定饱和度和中性色。
- 模式 — 仅浅色模式，还是也支持深色模式？
如果在没有答案的情况下继续，请说明假设。
始终适用的核心原则（适用于任何调色板／系统）
- 以色彩协调方案为基础，再加以调整。 从一种基础色和一种方案开始 — 单色／类似色（安全、对比度低）或互补色（对比度高，可用淡色和过渡色柔化）— 然后调整饱和度／亮度以增加层次感。
- 以中性色为主，谨慎使用强调色 — 60-30-10 法则。 约 60% 为主色／中性色表面，约 30% 为次要色，约 10% 为强调色，仅用于必须突出的元素（CTA）。主色／次要色应保持相对中性，以提高可读性。
- 按角色而非仅按色相定义颜色。 系统需要：主色／次要色／三级强调色（及其前景色搭配）、中性／表面色调，以及功能性／语义颜色（成功、警告、错误、信息）。
- 让功能色与品牌色保持区分。 如果品牌色是接近错误红色的亮红色，应定义单独的错误色系，以免用户把品牌色与反馈混淆。
- 构建色调阶梯 + 令牌。 从每种基础色生成一致的淡色／深色；将其作为命名的变量／令牌（采用功能性或数字命名），以便一次更改即可全面生效，并保持系统一致。
- 绝不能只依赖颜色，并且检查每组文本／图标／表面之间的对比度 — 具体比例和色盲检查交由
accessibility审查，但调色板必须以通过这些检查为目标进行构建。
依情境决定的事项（呈现出来，不要自动套用）
逐项说明取舍，并给出与步骤 0 相关的建议。叠加许多高饱和度的色相和联想，是常见的失败方式。
| 决策 | 适用情况 | 避免／调整的情况 | 默认建议 |
|---|---|---|---|
| 基础色相／情绪基调 | 根据品牌希望传递的感受选择色相（参见参考） | 仅凭个人喜好选色，或追逐每种联想 | 选择一种有明确意图、契合品牌与行业的基础色 |
| 配色方案 | 高对比配色适合鲜明／高能量的风格；类似色／单色适合平静／精致的风格 | 高饱和度的高对比配色（过于强烈） | 默认采用类似色／单色；高对比配色应以中性色柔化 |
| 饱和度／鲜艳度 | 高饱和度适合活泼／充满活力的品牌 | 高端／企业级风格（使用克制、低饱和的色调） | 根据品牌个性选择；任何醒目强调色都应搭配中性色作为基调 |
| 文化适配 | 面向全球的产品／特定市场（颜色含义因地而异） | 单一市场且惯例已确定 | 根据目标市场验证关键色相 |
| 强调色数量 | 使用一种明确的强调色；只有在第二种确有作用时才添加 | 多种强调色相互争抢（显得俗艳，且没有视觉焦点） | 一种强调色＋功能色；其余全部使用中性色 |
| 深色模式 | 产品需要或用户预期支持深色模式 | 仅通过简单反转颜色来添加深色模式 | 为两种模式设计语义化颜色（见下文） |
颜色 → 情绪（有条件使用的选项——谨慎采用，由情境决定）
黄色：快乐／温暖 · 橙色：充满活力／热情 · 红色：刺激／紧迫／热烈（也有警报之意） · 蓝色：平静且值得信赖（海军蓝 → 金融／科技领域中的信赖感） · 绿色：踏实／自然／成功 · 紫色：创意／精神／高端 · 粉色：柔和／关怀（注意其性别联想可能会改变） · 棕色／大地色系：稳定／踏实。**注意：**这些联想偏向西方语境，且取决于具体情境——同一种色相在不同文化和周围颜色的影响下，含义可能不同。只选一种有明确意图的联想；不要把所有联想都涂到设计里。
深色模式说明
定义语义化颜色（按用途定义，而非按具体色相定义），让它们能适配不同模式；不要只反转浅色模式。确保两种模式下的对比度；在深色模式中用更亮的表面体现层级（而不只是阴影），并在真实光照条件下进行测试。
验证结果（编排）
交接时使用各审查视角对应的可安装技能
name。只有在已安装该技能时才调用；若未安装，此技能自身的核心内容已涵盖这些规则，因此无需等待该技能，直接继续即可。
定义或修改调色板后，应将结果交给审查视角检查，而不是直接宣布完成。这些都是候选审查视角——具体处理方式由 docs/orchestration-policy.md 决定，也可以将整个流程交由 ux-design-review 处理。此处没有 Tier A；accessibility 和 aesthetics 属于 Tier B（可选）——在现有设计系统下，aesthetics 会被抑制，accessibility 则会缩小为用法审查。如果用户调用此技能是为了处理某一项具体内容，请遵守该范围。
ux-accessibility-audit（Tier B——可选；在现有设计系统下缩小范围）——检查每组文本／图标／表面的对比度（浅色和深色模式），以及是否能安全地适用于色盲用户（不要只用红／绿编码状态）。调色板必须从设计之初就满足这些要求。ux-aesthetics-audit（Tier B——可选；在现有设计系统下抑制）——检查配色的和谐与平衡：是否以中性色为主、强调色明确，还是已经滑向颜色过多、没有视觉焦点的“威利·旺卡”风格？
如果无障碍审查发现某组颜色未通过，或审美审查指出配色俗艳，请回归 60-30-10 原则／单一强调色这一核心做法。
常见做法与禁忌
| ❌ 禁忌 | ✅ 推荐做法 |
|---|---|
| 不依据任何体系，随意挑选好看的颜色 | 定义角色：主色、次要色、第三色 + 中性色 + 功能色 |
| 几种鲜艳颜色占比相同 | 60-30-10：以中性色为主，一种强调色约占 10% |
| 套用所有颜色与情绪的关联 | 只选择一种有意为之的关联，并将其与品牌和市场联系起来 |
| 高饱和度互补色产生冲突 | 用淡色和中性色柔化；以类似色或单色方案作为稳妥基础 |
| 品牌红色 ≈ 错误红色 | 将功能色系与品牌色系分开 |
| 到处硬编码十六进制颜色值 | 将色调阶梯作为具名令牌或变量提供 |
| 只用颜色表示状态 | 颜色 + 图标/标签（→ 无障碍性） |
| 将浅色模式反转为“深色模式” | 为两种模式设计语义化颜色；通过更浅的表面颜色体现层级 |
| 未检查对比度就发布 | 移交无障碍性检查（对比度比值 + 色盲检查）和美学检查 |