SuperAPI AI 工具集

tuning-color-palettes

设计与创作

查看项目

更新于 10-25 20:20

技能介绍

用途

本技能用于重新调整或定制 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。

使用方式

  1. 运行审计脚本测量当前状态,可选参数包括 --primary '#hex'、--neutral sand、--scales file.json、--json。
  2. 一次性询问请求者:锚点(哪个现有组件在哪个主题下看起来正确)、每个状态的种子十六进制或可接受的色相方向、品牌色是否必须精确命中、交付形式、中性色/边框/表面是否保持不变(默认不变)。
  3. 为每个新色相准备输入,包括 MASTER_HUE、ORIGINAL_BASE(替换为客户种子)、色相旋转数据(当色相移动超过约 15° 时重新测量)。
  4. 生成并审计,输出新色阶为 JSON,用 --scales 审计,并检查硬性标准。
  5. 构建可调节审查板,由人工眼睛决定,请求者复制参数后写回预设。
  6. 落地并验证:重新生成、更新快照、添加不变量测试,并使用 local-testing 技能检查 Alert、Tag、Toast、Tooltip、Markdown 链接、Button 和 /design-tokens 在浅色和深色主题下的表现。

适用场景

  • 企业或白标调色板定制。
  • 自定义品牌主色。
  • 状态色(错误、警告、信息、成功)调整。

限制

  • 自定义调色板必须重新生成并人工审查,不能手动编辑十六进制值。
  • 生成器只保留种子的色调,不保证保留种子十六进制;若需精确命中,需显式固定步骤 9。
  • 色相旋转数据仅对原始色相有效,色相移动超过约 15° 时需重新测量。
  • 深色基础色调上限为 74,高彩度加高色调会产生眩光。
  • 自定义主色必须与成功色和信息色的色相相差至少 20°。
  • 若运行时结果不理想,可生成静态色阶,但 registerLobePalette 不接受主色,只能通过覆盖 CSS 变量实现。
  • 命名调色板名称只能包含字母、数字、下划线和连字符;重新注册同名后需再次调用 setLobeTheme 以重写根样式表。
  • 仓库内预设会将客户名称放入公共仓库,需先确认允许。
  • @material/material-color-utilities 0.4.0 在纯 Node 中导入失败,需使用 tsx 或直接导入 hct/hct.js 和 utils/string_utils.js。
  • 其他事实暂未提供。