01 功能说明
产品调色板分层、色调阶梯、语义色彩映射，以及以对比度为导向的使用指南。
Color System 用于构建或重建产品调色板。它将品牌色阶、中性色、语义状态色和扩展用途区分开来。其结果不只是一组悦目的色样：每种颜色都需要明确的角色，并与相邻表面建立可用的搭配关系。
来源将色调阶梯与对比度检查相结合，并警告不要仅依靠颜色传达信息。它还要求尽早规划深色模式映射。在针对实际文本、组件和状态组合完成检查之前，生成的调色板仍只是一项设计提案。
预期交付物
从品牌方向出发，推导产品实际使用的中性色和状态角色。
将颜色分配给文本、表面、边框和状态，而不是让它们停留在没有标签的色样层面。
测试预期的颜色组合，并在必须理解状态含义的地方添加非颜色信号。
02 适用场景
提供品牌色、界面角色和无障碍目标。使用实际组件状态和对比度检查工具评估拟议的颜色组合。
03 关键决策
语义映射使调色板可在各类组件中使用。
脱离背景和使用场景，单一颜色不存在有意义的文本对比度结果。
04 示例任务
以下示例简报尚未经过测试。使用前请检查该技能的设置说明。
从 designer-skills 仓库将此任务的 SKILL.md 加载到智能体支持的技能位置。入口文件未规定通用安装命令。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/color-system/SKILL.md提供品牌色、界面角色和无障碍目标。使用实际组件状态和对比度检查工具评估拟议的颜色组合。
运行该技能前，请根据需要调整此简报的范围、来源材料和约束。
使用 color-system，根据所提供的品牌蓝为这款排期产品创建调色板。定义色调阶梯、中性色阶、语义化的成功/警告/错误角色，以及实际文字与表面颜色组合的矩阵。对未经验证的对比度值作出标记，不要声称其符合要求。根据以下可观察标准检查实际输出。
OpenDesign 为编程智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其外部工具、凭据和软件依赖已包含在内。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。
9a6930cf84a8产品调色板分层、色调阶梯、语义色彩映射，以及以对比度为导向的使用指南。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/color-system/SKILL.md