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