关于 design-system-management
用于构建、维护和演进设计系统的技能，涵盖设计令牌、可复用组件和界面模式，并强调一致性、组合性、文档及版本迁移。
主要功能
- 01整理颜色、字体、间距、边框、阴影和动效令牌
- 02定义组件变体、状态、尺寸、行为与无障碍要求
- 03涵盖表单、导航、数据展示和反馈模式
- 04强调一致性及受约束的组合能力
- 05记录破坏性变更的版本与迁移路径
适用场景
- 01整理设计系统的视觉令牌
- 02规定可复用组件的状态和变体
- 03记录产品内共享的界面模式
- 04规划破坏性系统变更的迁移
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design-system-management确认已加载。
详细介绍
设计系统管理
帮助构建、维护和演进设计系统。
设计系统的组成部分
设计令牌
定义视觉语言的原子级数值：
- 颜色（品牌色、语义色、中性色）
- 字体排印（字阶、字重、行高）
- 间距（间距阶梯、组件内边距）
- 边框（圆角、宽度）
- 阴影（层级高度）
- 动效（时长、缓动函数）
组件
可复用的 UI 元素，并明确定义以下内容：
- 变体（主要、次要、幽灵）
- 状态（默认、悬停、激活、禁用、加载中、错误）
- 尺寸（sm、md、lg）
- 行为（交互、动画）
- 无障碍（ARIA、键盘操作）
模式
由多个组件组合而成的常见 UI 解决方案：
- 表单（输入组、校验、提交）
- 导航（侧边栏、标签页、面包屑）
- 数据展示（表格、卡片、列表）
- 反馈（轻提示、模态框、行内消息）
设计原则
- 一致性优先于创意：设计系统的存在是为了让团队不必重复造轮子
- 约束内的灵活性：组件应可组合，而非僵化
- 一切皆需文档：没有文档的东西，等同于不存在
- 版本化并提供迁移路径：破坏性变更需要配套的迁移方案
评论
支持 Markdown