design-system-patterns - 设计系统模式
使用设计令牌和组件架构构建可扩展设计系统
标签
更新于: 2026-06-15该技能可以做什么
- 创建设计令牌
- 定义颜色令牌
- 定义排版令牌
- 定义间距令牌
- 定义阴影令牌
- 创建语义令牌
- 创建组件令牌
- 设置令牌层级
- 实现主题切换
- 创建CSS自定义属性
- 创建React主题提供者
- 检测系统偏好
- 存储主题偏好
- 构建多品牌主题
- 启用减少动画
- 启用高对比度
- 创建复合组件
- 创建多态组件
- 定义组件变体
- 创建尺寸系统
输入
- 颜色值
- 排版比例
- 间距比例
- 阴影值
- Figma设计文件
- 令牌源文件
- Style Dictionary配置
- 平台构建配置
- 组件规范
输出
- 设计令牌
- 主题配置
- 组件库
- CSS变量
- 令牌文档
- 平台令牌文件
- 主题上下文
- 组件变体
要求
- React框架
- CSS支持
- Figma账号
- Style Dictionary
- 构建工具
- 多平台构建