用途
本技能用于重新调整或定制 lobe-ui 的颜色令牌,适用于企业/白标调色板、自定义品牌主色、状态色(错误/警告/信息/成功)等场景。
主要能力
- 通过脚本
scripts/generateColorTokens.ts生成状态色,所有主题共享同一 HCT 色调/彩度阶梯,保持级别一致;步骤 9 的色调拉回种子色的色调,保持每个色相的权重;色相旋转数据保持外观。 - 支持自定义调色板:用新输入重新生成,并交人工审查,禁止手动编辑十六进制值。
- 提供审计脚本
.agents/skills/tuning-color-palettes/scripts/audit-palette.ts,可测量当前状态,输出每个角色的十六进制、H/C/T、WCAG 对比度和 APCA Lc,分浅色和深色两套。 - 提供测量 Radix 色阶的脚本
measure-radix.ts,用于重新测量色相旋转数据。 - 支持生成主色(品牌色)并通过
setLobeTheme({ primaryColor: '#hex' })检查结果。 - 提供可调节审查板,包含主色相、彩度、基础色调、主拉回、色相旋转强度、警告提升等滑块,并排显示调整前后的 Alert / Tag / Button。
使用方式
- 运行审计脚本测量当前状态,可选参数包括
--primary '#hex'、--neutral sand、--scales file.json、--json。 - 一次性询问请求者:锚点(哪个现有组件在哪个主题下看起来正确)、每个状态的种子十六进制或可接受的色相方向、品牌色是否必须精确命中、交付形式、中性色/边框/表面是否保持不变(默认不变)。
- 为每个新色相准备输入,包括 MASTER_HUE、ORIGINAL_BASE(替换为客户种子)、色相旋转数据(当色相移动超过约 15° 时重新测量)。
- 生成并审计,输出新色阶为 JSON,用
--scales审计,并检查硬性标准。 - 构建可调节审查板,由人工眼睛决定,请求者复制参数后写回预设。
- 落地并验证:重新生成、更新快照、添加不变量测试,并使用 local-testing 技能检查 Alert、Tag、Toast、Tooltip、Markdown 链接、Button 和 /design-tokens 在浅色和深色主题下的表现。
适用场景
- 企业或白标调色板定制。
- 自定义品牌主色。
- 状态色(错误、警告、信息、成功)调整。
限制
- 自定义调色板必须重新生成并人工审查,不能手动编辑十六进制值。
- 生成器只保留种子的色调,不保证保留种子十六进制;若需精确命中,需显式固定步骤 9。
- 色相旋转数据仅对原始色相有效,色相移动超过约 15° 时需重新测量。
- 深色基础色调上限为 74,高彩度加高色调会产生眩光。
- 自定义主色必须与成功色和信息色的色相相差至少 20°。
- 若运行时结果不理想,可生成静态色阶,但
registerLobePalette不接受主色,只能通过覆盖 CSS 变量实现。 - 命名调色板名称只能包含字母、数字、下划线和连字符;重新注册同名后需再次调用
setLobeTheme以重写根样式表。 - 仓库内预设会将客户名称放入公共仓库,需先确认允许。
@material/material-color-utilities0.4.0 在纯 Node 中导入失败,需使用 tsx 或直接导入hct/hct.js和utils/string_utils.js。- 其他事实暂未提供。