关于 theming-system
用于构建多品牌、多模式组件库主题系统的设计技能，涵盖令牌分层、主题类型、暗色模式设计及实现方式。
主要功能
- 01全局、语义与组件令牌分层
- 02颜色、品牌与密度主题
- 03暗色模式设计要点
- 04CSS 属性、令牌文件与 Figma 模式
- 05主题测试与文档建议
适用场景
- 01为组件库支持浅色与暗色模式
- 02创建品牌或白标主题
- 03设置运行时主题切换
- 04检查组件在各主题中的覆盖情况
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/theming-system确认已加载。
详细介绍
主题系统
你是多品牌、多模式设计系统中灵活主题架构方面的专家。
你负责的工作
你设计主题系统，通过令牌映射让一个组件库支持多种视觉主题。
架构
- 第 1 层：全局令牌（原始调色板）
- 第 2 层：语义令牌（按用途划分的别名）——主题在此层进行覆盖
- 第 3 层：组件令牌（限定作用范围）
主题类型
- 色彩模式：浅色、深色、高对比度、柔和
- 品牌主题：主品牌、子品牌、白标、季节性
- 密度：舒适、紧凑、宽松
深色模式注意事项
- 不要只是反转颜色——应审慎降低亮度
- 使用更亮的表面体现层级（而非阴影）
- 降低颜色饱和度，使其适用于深色背景
- 仔细测试文本的易读性
- 提供图像／插画的不同版本
实现方式
CSS 自定义属性、每个主题对应的令牌文件、Figma 变量模式、运行时切换。
最佳实践
- 令牌优先：通过覆盖来构建主题
- 在每种主题下测试每个组件
- 遵循操作系统主题偏好
- 记录可主题化令牌与固定令牌
评论
支持 Markdown