跳转到使用指南
color-expert作者 David Aerne

Color Expert Skill.

Claude Code 和 Codex 的品牌与设计系统 skill:色彩命名、理论、色彩空间、调色板、色阶、渐变、转换和对比度。

  • Brand & Design Systems
meodai/skill.color-expert · SKILL.mdSKILL.md
--- name: color-expert description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
从上游文件读取的前言和章节标题,2026-09-14 · 完整 31,055 字符

01 功能说明

color-expert 这个 skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

color-expert 是一个面向设计师和开发者的色彩知识库,涵盖命名、理论、色彩空间、调色板、色阶、渐变、转换、无障碍性和颜料混合。它会将请求路由到五种模式之一——具体的设计或艺术项目、设计系统色阶与主题 token、生成式艺术、一般色彩问题,或构建调色板生成器——并以相应的语域作答。

它包含一张任务对应色彩空间的表格(感知性工作用 OKLCH,印刷用 CIELAB D50,跨媒介匹配用 CAM16,颜料混合用 Kubelka-Munk),涵盖 2.81 万亿个十六进制颜色对的 APCA 与 WCAG 通过率数据、色域映射指南、CSS Color 4/5 速查表,以及一份精选工具列表,超过 140 个参考文件被收录在 references/INDEX.md 之下并建立索引。

它产出什么

  • 针对所述约束给出具体的工具和调色板建议,而非泛泛的理论。
  • 一张 token 关系图,参考 token 为 surface、on-surface、accent、success、warning、danger 等语义角色提供数值。
  • 通过构造方式确保色域内的顺序型与发散型数据可视化色阶,适用于 sRGB 和 Display-P3。
查看示例提示词 ↗

工作方式

  1. 01
    将请求路由到五种模式之一

    该文件列出了五种常见模式,并指示 Agent 根据用户的明确请求以及上下文中隐含的约束来匹配其回应,而不是对所有色彩问题都用同一种方式回答。

  2. 02
    直接依据文件回答一般性问题

    对于诸如“什么是 OKLCH”或“为什么渐变会发灰”这类问题,直接依据该 skill 文件或参考索引作答,并引用相关参考资料,只有当用户询问具体操作方法时才涉及工具。

  3. 03
    先在 OKLCH 中构建色阶

    对于设计系统、色阶和主题 token,优先顺序首先是 OKLCH,这样明度在不同色相之间保持一致,中间色调也不会变得浑浊。

  4. 04
    在 UI 使用之前插入一个语义层

    程序或样式表中使用的颜色应位于一个语义层之后,由参考 token 保存具体数值,语义 token 则将含义映射到这些数值上。

  5. 05
    先展示多种调色板方案,再收窄范围

    在生成或比较调色板时,该 skill 应先展示多种方案及其取舍,因为基准色扩展、色相循环、余弦函数、色彩和谐规则、场景光照和提取等方法适用于不同问题。

02 找到适合场景

何时使用 color-expert Skill

当工作是此类品牌与设计系统工作时,在 Claude Code 或 Codex 中使用 color-expert skill。适用范围和限制来自该 skill 自己的文件。

适合场景

  • 为具体 brief(如标志、海报、插画或应用)选色,首先询问媒介和情绪。
  • 构建设计系统色阶和主题 token:9 级强调色阶、浅色加深色模式调色板、Tailwind 或 Radix 风格色阶,或与品牌匹配的灰阶。
  • 生成艺术与创意编程,代码本身即作品,用户想要可组合的技法,而非复刻某位具名艺术家的风格。
  • 直接回答一般色彩问题,例如什么是 OKLCH、为什么渐变中间会变灰,或 APCA 是否优于 WCAG。
  • 构建调色板生成器或请求 OKLCH 色阶函数,答案应是用户所用技术栈中可运行的代码。

了解边界

  • 将 coolors.co 当作生成器;该文件指出它只是从其 JS 包中硬编码的调色板里随机选取。
  • 手写的单通道颜色排序;仅按色相或仅按明度排序会以可预见的方式失败,而打包的 RGB/HSL 排序会产生跳跃感。
  • 将补色、三色组或四色组色相间隔当作独立的和谐规则使用——该文件称它们单独使用时是弱预测指标。
  • 期望三种或更多图表填充色彼此之间都保持 3:1 对比度;该文件指出应改用边框约束。

需要提供的信息

  • 媒介与限制对于设计或艺术项目,请说明媒介(印刷、屏幕、绘画、混合)、品牌或情绪、受众、无障碍需求,以及需要协调的现有颜色。
  • 真实的目标色域请说明输出必须处于 sRGB 还是 P3,因为在 P3 中有效的颜色在 sRGB 中仍可能被裁剪,且检测方式不同。
  • 你的技术栈代码示例会按照用户自己的技术栈编写,色彩空间的选择依据 skill 的任务表。
  • 需要协调的现有系统如果你已有调色板系统,可以提取其感知结构并重新应用到你自己的色相上。

03 Skill 内部

color-expert Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 绝不推荐 coolors.co

    该 skill 明确禁止将其用作调色板生成器,因为它只是从 7,821 个预制调色板的固定集合中挑选,而非生成任何内容。

  2. 修复超出色域的 OKLCH 时,调整色度而非明度或色相

    裁剪 R/G/B 会改变色相,因此应通过降低色度使其靠近色域边界来保持色彩身份,而不是直接裁剪通道。

  3. 避免在组件中直接写入原始颜色字面量

    字面十六进制或颜色值通常只应出现在调色板/参考定义、转换、诊断,或刻意为之的一次性示例中。

  4. 优先使用原生 CSS,而非引入 JS 库

    现代 CSS 已原生支持感知色彩处理,因此 Agent 应先尝试这些特性,而非引入 JavaScript 颜色库。

  5. 优先使用现成库,而非手写实现

    当用户需要生成器或调色板算法时,默认建议使用现成库,例如 Culori、Poline、RampenSau 或 Spectral.js。

  6. 未经询问不主动讲解内部原理

    在具体的设计或艺术项目中,Agent 应给出方案和建议,而不是在用户未提问的情况下讲解 CIE 1931 或 OKLCH 的内部原理。

  7. 在浅色和深色主题下均验证对比度

    每一组文本与背景配色都必须在浅色和深色模式下用 APCA 或 WCAG 检查。

  8. 编码派生规则,而非固定字面值

    当某个决策可以从约束条件推导得出——可读的前景色、由 OKLCH 中基础 token 推出的 hover 色、最接近的命名色相——系统应输出规则,而不是单一的手动选择。

04 投入使用

在 Claude Code 或 Codex 中安装 color-expert

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 color-expert 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert

用于 SKILL.md 的通用 skills CLI 形式;仓库可能会记录自己的路径。

为 Skill 分配第一个品牌和 design-system 工作任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 用 WCAG 或 APCA 确认对比度,并考虑文字大小、字重、极性和色觉缺陷(CVD);灰度检查只是一个基本合理性验证。
  • 对于顺序渐变色阶,绘制相邻样本间的感知步长,并要求彩色和灰度下均为平线。
  • 灰度仅用作快速的明度区分检查,不能作为可访问性的证明。
  • 用保持 L 和 H 不变的色度钳制(chroma clamping)来映射超出色域的颜色,而不是简单粗暴的 RGB 钳制。
  • 用 Color Buddy 依据 WCAG、CVD、区分度、公平性和情感规则对生成的调色板进行检查。
  • 在模拟色觉缺陷的条件下审查现有调色板中的 JND 冲突。

在 OpenDesign 中已内置 color-expert:在 Plugins → Skills 中,从顶部栏中选择它即可。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Skill 文件
SKILL.md 验证时记录的内容校验和;commit 6514810
License
CC-BY-4.0 来自 LICENSE。
仓库星标数
575 GitHub 快照拍摄于 2026-09-14,针对整个 meodai/skill.color-expert 仓库。不是 color-expert 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 如何使用此 Skill五种响应模式:设计项目、设计系统、生成艺术、一般问题、生成器构建。
  2. 色彩空间——何时使用任务与空间对照表:感知用 OKLCH,印刷用 CIELAB D50,跨媒体用 CAM16,J
Skill 自身的描述
用于处理颜色命名、色彩理论、色彩空间、颜色定义或任何涉及色彩知识的任务——色板、色阶、渐变、转换、无障碍访问、感知匹配、颜料混合、印刷与屏幕色彩、CSS 颜色语法或历史色彩术语。只要用户在选择、比较、生成、命名、转换或解释颜色,就使用此 skill,即使他们没有明确要求「色彩理论」。

来自 SKILL.md 的前言描述。完整文件约 31,055 个字符。在 GitHub 上阅读完整文件。

Color Expert

在真实的品牌与设计系统工作任务上运行 color-expert。

color-expert skill 内置于 OpenDesign 中。下载应用,在 Plugins → Skills 中选择该 skill,粘贴上方提示,在结果之前阅读计划。

终端
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert