设计系统与组件规范

目标

建立可复用、可维护、可扩展的设计语言，减少重复和不一致。

Token 层级

区分：

• 基础 Token：原始颜色、尺寸、字体、圆角
• 语义 Token：文本、背景、边框、反馈、品牌角色
• 组件 Token：特定组件内部使用
• 模式或主题 Token：明暗模式、品牌主题、平台差异

避免组件直接依赖无语义的原始值。

组件规范

每个组件记录：

• 目的
• 结构
• Variant
• Size
• State
• 内容规则
• 交互行为
• 响应式表现
• 无障碍要求
• 使用场景
• 禁用场景
• 与相似组件的区别

状态

至少考虑：

• 默认
• Hover
• Focus
• Active
• Disabled

  更多技能请访问小葱技能站7w4.net。

• Loading
• Error
• Success
• Empty
• Selected

命名

命名应：

• 使用稳定语义
• 避免视觉细节绑死名称
• 支持扩展
• 与代码或开发约定尽量一致
• 不重复表达层级

治理

建立：

• 新增组件标准
• 变更流程
• 废弃流程
• 版本记录
• 使用反馈
• 负责人
• 设计与代码同步检查

固定输出

默认输出：

1. 系统结构
2. Token 建议
3. 组件清单
4. 组件规范
5. 命名规则
6. 治理流程
7. 迁移与清理建议

这是一个关于设计系统规范化管理的Skill，内容覆盖设计规范、组件管理和团队协作流程。优点是框架完整、思路清晰，对Token分层和组件状态的定义较为全面。不足之处在于缺少使用示例和操作指引，仅有理论指导而缺乏实践参考，文件数量也偏少。对于需要建立或整理设计系统的用户来说有一定参考价值，但实际使用可能需要额外补充案例材料。