design-system-patterns

Name: design-system-patterns
Author: wshobson

github.com/wshobson设计与 UI41.9k16.3k 次安装2 周前更新

代码仓库

关于 design-system-patterns

用于规划 Web 和移动应用设计系统基础与组件架构的技能，面向设计系统团队，涵盖令牌层级、主题、组件模式及从 Figma 到代码的令牌流程。

主要功能

01原始、语义和组件令牌
02主题切换与 CSS 自定义属性
03可复用组件架构模式
04从 Figma 到代码的令牌流程
05文档、版本管理与迁移指导

适用场景

01为 UI 库建立令牌层级
02添加浅色、深色或多品牌主题
03规划一致的组件 API
04将 Figma 令牌同步到代码

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/wshobson/agents --skill design-system-patterns

安装后在 Claude Code 中输入/design-system-patterns确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

component-architecture.md

design-tokens.md

details.md

theming-architecture.md

详细介绍

设计系统模式

掌握设计系统架构，在 Web 和移动应用中打造一致、可维护且可扩展的 UI 基础。

何时使用本技能

为颜色、排版、间距和阴影创建设计令牌
使用 CSS 自定义属性实现浅色/深色主题切换
构建多品牌主题系统
设计具有一致 API 的组件库
借助 Figma 令牌建立设计到代码的工作流
创建语义化令牌层级（基础、语义、组件）
搭建设计系统文档和指南

核心能力

1. 设计令牌

基础令牌（原始值：颜色、尺寸、字体）
语义令牌（上下文含义：text-primary、surface-elevated）
组件令牌（具体用途：button-bg、card-border）
令牌命名约定与组织方式
多平台令牌生成（CSS、iOS、Android）

2. 主题基础设施

CSS 自定义属性架构
React 中的主题上下文 Provider
动态主题切换
系统偏好检测（prefers-color-scheme）
持久化主题存储
减弱动效和高对比度模式

3. 组件架构

复合组件模式
多态组件（as prop）
变体与尺寸系统
基于插槽的组合
无头 UI 模式
样式 props 和响应式变体

4. 令牌流水线

Figma 到代码的同步
Style Dictionary 配置
令牌转换与格式化
令牌更新的 CI/CD 集成

快速开始

// Design tokens with CSS custom properties
const tokens = {
  colors: {
    // Primitive tokens
    gray: {
      50: "#fafafa",
      100: "#f5f5f5",
      900: "#171717",
    },
    blue: {
      500: "#3b82f6",
      600: "#2563eb",
    },
  },
  // Semantic tokens (reference primitives)
  semantic: {
    light: {
      "text-primary": "var(--color-gray-900)",
      "text-secondary": "var(--color-gray-600)",
      "surface-default": "var(--color-white)",
      "surface-elevated": "var(--color-gray-50)",
      "border-default": "var(--color-gray-200)",
      "interactive-primary": "var(--color-blue-500)",
    },
    dark: {
      "text-primary": "var(--color-gray-50)",
      "text-secondary": "var(--color-gray-400)",
      "surface-default": "var(--color-gray-900)",
      "surface-elevated": "var(--color-gray-800)",
      "border-default": "var(--color-gray-700)",
      "interactive-primary": "var(--color-blue-400)",
    },
  },
};

详细模式与完整示例

详细的模式文档位于 references/details.md。当上述导航层级不够用时，请阅读该文件。

最佳实践

按用途命名令牌：使用语义化名称（text-primary），而非视觉描述（dark-gray）
维护令牌层级：基础令牌 > 语义令牌 > 组件令牌
记录令牌用法：在令牌定义中附上使用指南
对令牌进行版本管理：将令牌变更视为 API 变更，并遵循 semver
测试主题组合：验证所有主题与所有组件均能正常工作
自动化令牌流水线：用 CI/CD 实现 Figma 到代码的同步
提供迁移路径：逐步弃用令牌，并提供明确的替代方案

常见问题

令牌泛滥：令牌过多且缺乏清晰层级
命名不一致：混用命名约定（camelCase 与 kebab-case）
缺少深色模式：令牌无法适应主题变化
硬编码值：使用原始值而非令牌
循环引用：令牌之间相互循环引用
平台缺口：某些平台缺少令牌（有 Web 但没有移动端）

支持 Markdown

登录后评论