关于 color-systems
color-systems 是一项在对话中应用色彩规则的设计技能，适合需要建立一致配色的设计工作。它强调明确颜色职责、控制调色板规模，并检查对比度及明暗模式表现。
主要功能
- 01划分结构、语义、强调和装饰色
- 02保持语义色含义一致
- 03以中性色为主并精简配色
- 04检查语境对比度与明暗模式
适用场景
- 01检查产品调色板中可删减的颜色
- 02确认不同颜色是否各有明确含义
- 03评估配色的对比度和明暗模式表现
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/color-systems确认已加载。
详细介绍
色彩系统
减少颜色，遵守规范。每种颜色都要有其存在的理由。
使用方法
/color-systems将色彩系统约束应用于当前对话。
约束
调色板角色
- MUST 为每种颜色分配明确的角色：结构色（背景、边框）、语义色（错误、成功、警告）、强调色（主要操作、重点内容）或装饰色
- MUST 确保语义色在所有地方保持一致（红色始终表示同一种含义）
- MUST 让中性色承担 80-90% 的视觉工作。颜色用于强调，而非奠定基础。
- NEVER 将同一种颜色用于彼此冲突的用途（例如红色既表示“精选”，又表示“错误”）
克制原则
- 有意使用的 2-3 色调色板，始终胜过未经思考使用的 7 色调色板
- MUST 评估：去掉某种颜色后，是否仍能保留所有信息？
- SHOULD 从一种强调色开始；只有当单一强调色无法承载语义信息时，才添加更多颜色
- NEVER 因为“需要更多颜色”而添加颜色。只有在信息需要时才添加颜色。
重视色彩关系，而非单个色样
- MUST 在具体环境中评估颜色，而非孤立地评估（同一种蓝色，在暖灰色与冷白色旁边看起来会有所不同）
- MUST 检查对比度是否符合无障碍要求（最低达到 WCAG AA）
- SHOULD 评估调色板在浅色和深色模式下的表现
反模式
- 不评估是否适用，就从流行调色板中挑选颜色
- 将颜色作为主要的层级工具（颜色应强化层级，而不应单独建立层级）
- 使用对信息或品牌毫无帮助的装饰性渐变
- 不同页面使用不同强调色，却没有支撑这种差异的系统
评论
支持 Markdown