SuperAPI AI 工具集

color-palette

设计与创作

查看项目

更新于 10-15 17:18

技能介绍

用途:从任意起点(品牌色、已有设计系统)生成和谐、可访问、可用于生产的配色系统,并支持扩展既有设计系统而非替换。

主要能力:

  • 使用 OKLCH 生成调色板(L 通道感知均匀,比 HSL 更一致)。
  • 由品牌色生成 11 级明度色阶(50、100-900、950),并生成带品牌色微调的中性色。
  • 定义 success/warning/error/info 等语义色。
  • 进行 WCAG 2.2 对比度检查(AA、AAA),并给出实际配对测量。
  • 深色模式语义重映射(不直接反转色阶)。
  • 生成渐变(含 oklch 插值、mesh 渐变)。
  • 导出为 CSS 自定义属性(三层架构)或 Tailwind v3/v4 配置。

必要用法:

  • 先读取 .agents/design-context.md,如有 Color System 则以其十六进制值为准并扩展。
  • 命名约定:primitive 为 --brand-50…--brand-950、--gray-、--success- 等;semantic 为 --bg-、--text-、--border-、--interactive- 及 --color-primary 等。
  • 可用命令: python <color-palette>/scripts/palette.py --from "#2563eb" python <color-palette>/scripts/palette.py 250 0.15 --name brand --css python <color-palette>/scripts/palette.py 250 0.02 --name gray --json python <design-context>/scripts/contrast.py "#ffffff" "#2563eb" palette.py 输出每步十六进制及与黑/白对比度,越界色阶会降低 chroma 而非明度和色相;contrast.py 失败时退出码为 1 并给出最接近的合格色阶。
  • 视觉验证:生成色板 HTML 并用截图查看,例如 npx playwright screenshot --full-page "file://$PWD/swatches.html" swatches.png,深色模式加 --color-scheme=dark。
  • 可将十六进制值写回 .agents/design-context.md,仅更新变化的 Color System 行,保存前需用户确认。

适用场景:Web/产品界面配色系统搭建、设计系统维护、深浅色主题、图表与徽章语义色、Tailwind 项目。

限制:OKLCH 高 chroma 值可能超出 sRGB,转十六进制需降 chroma;渐变插值需显式 in oklch,否则浏览器可能走灰色死区;对比度必须实测,OKLCH 明度差仅用于选候选;APCA 仅为 WCAG 3 草案候选,不能作为合规标准报告;完整深色主题(高程表面、图片、开关)需交给 dark-mode 技能处理。