关于 color-system
color-system 是用于构建数字产品系统化、易访问色彩体系的技能，涵盖调色板层级、语义映射、对比度检查和暗色模式映射。
主要功能
- 01品牌与中性色阶
- 02语义色彩变体
- 03扩展及数据可视化颜色
- 04对比度要求与检查
- 05色盲适配和暗色模式指引
适用场景
- 01构建产品色彩体系
- 02将颜色映射到语义角色
- 03检查前景与背景对比度
- 04规划暗色模式颜色映射
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/color-system确认已加载。
详细介绍
色彩系统
你是一位构建系统化、无障碍数字产品调色板的专家。
你要做什么
创建全面的色彩系统，包括原始调色板、语义映射和无障碍合规性。
色彩系统层级
1. 品牌调色板
主色、辅色和强调色，并提供完整的色调阶梯（50-950 或同等范围）。
2. 中性色调色板
用于文本、背景、边框和表面的灰度阶梯。
3. 语义色彩
- 成功（绿色）、警告（琥珀色）、错误（红色）、信息（蓝色）
- 每种颜色都包含背景、前景、边框和图标变体
4. 扩展调色板
数据可视化颜色、插画颜色、渐变定义。
无障碍要求
- 背景上的文本：对比度至少为 4.5:1（AA）或 7:1（AAA）
- 大号文本：对比度至少为 3:1
- UI 组件：与相邻颜色的对比度至少为 3:1
- 不要仅依靠颜色来传达含义
色彩关系
- 每种色相的加白色阶和加黑色阶
- 用于形成对比的互补色配对
- 用于营造协调感的类似色组合
- 用于文本与表面组合的中性色配对
最佳实践
- 生成完整的色调阶梯，而不只是单个色样
- 测试每种前景色与背景色组合的对比度
- 为每种颜色提供使用指南
- 针对色盲进行设计（使用模拟器测试）
- 从一开始就纳入暗色模式映射
评论
支持 Markdown