Design Token 的变更审批流：企业级设计系统变更的自动化通知机器人

在大型分布式前端团队中，设计系统的底层 Token 仓库（design-tokens Repo）是全公司几百个业务系统的“视觉神经中枢”。设计师只要在 Figma 里改了一个品牌色号或者微调了一个基础字阶，通过自动流水线，这个改动就会被编译为一个 Pull Request 提交到代码仓库。

然而，在很多团队中，Token 变更的协同流程却极度原始与脱节：

• 前端 Tech Lead 面对 GitHub PR 里密密麻麻的一串十六进制字符串 Diff（例如：- #4F46E5 + #4338CA），完全看不出这个颜色在视觉上到底有多大差异，也不知道哪些核心业务组件会被影响；
• 审批过程漫长且信息闭塞，往往等代码已经合并发布到了生产环境，业务团队才发现结算页的按钮颜色变暗了。

为了建立严密、透明且高效的变更闭环，我们构建了一套基于 GitHub Actions 与飞书 / Slack 交互卡片的 Design Token 自动化通知与审批机器人（Design Token Change Bot）。

Token 变更审批机器人的全流程架构

[设计师在 Figma 发布新版 Variables]
                 │
                 ▼ (触发 GitHub PR 自动创建)
[GitHub Actions 提取 Token Diff & 语义影响面分析]
                 │
                 ▼ (构建富文本色彩对比与组件影响矩阵)
[发送飞书/Slack 交互式富文本卡片通知 (@设计总监 & 前端架构师)]
   ├── 可视化色块前后对比 (SVG / 16进制色条)
   ├── 影响业务组件影响面打标 (Impact List)
   └── [一键批准合并 (Approve PR)] 交互按钮直达

编写自动化卡片 Payload 构建器

当 PR 触发时，脚本自动比对新旧 Token JSON，并生成带有富文本色块的卡片协议 JSON：

// scripts/token-change-notifier.ts
export interface TokenDiffEntry {
  path: string;
  oldVal: string;
  newVal: string;
  type: 'color' | 'dimension' | 'shadow';
}

export function buildFeishuCardPayload(
  prTitle: string,
  prUrl: string,
  author: string,
  diffs: TokenDiffEntry[],
  affectedComponents: string[]
) {
  // 构建富文本卡片
  return {
    msg_type: 'interactive',
    card: {
      header: {
        title: {
          tag: 'plain_text',
          content: `🎨 Design Token 变更审批通知: ${prTitle}`,
        },
        template: 'indigo',
      },
      elements: [
        {
          tag: 'div',
          fields: [
            { is_short: true, text: { tag: 'lark_md', content: `**提交人:** ${author}` } },
            { is_short: true, text: { tag: 'lark_md', content: `**变更项数:** ${diffs.length} 个 Token` } },
          ],
        },
        { tag: 'hr' },
        {
          tag: 'div',
          text: {
            tag: 'lark_md',
            content: `**📋 核心 Token 差异对比明细:**\n` +
              diffs.map(d => {
                if (d.type === 'color') {
                  return `• \`${d.path}\`: \`${d.oldVal}\` ➔ **\`${d.newVal}\`** (色彩微调)`;
                }
                return `• \`${d.path}\`: \`${d.oldVal}\` ➔ **\`${d.newVal}\`**`;
              }).join('\n'),
          },
        },
        {
          tag: 'div',
          text: {
            tag: 'lark_md',
            content: `**🚨 潜在影响业务组件 (${affectedComponents.length} 个):**\n` +
              affectedComponents.map(c => `\`<${c} />\``).join(', '),
          },
        },
        {
          tag: 'action',
          actions: [
            {
              tag: 'button',
              text: { tag: 'plain_text', content: '查看完整 PR 详情' },
              type: 'primary',
              url: prUrl,
            },
          ],
        },
      ],
    },
  };
}

GitHub Actions CI 流水线触发配置

在 .github/workflows/token-notify.yml 中无缝集成：

name: Notify Token Changes
on:
  pull_request:
    paths:
      - 'tokens/**/*.json'

jobs:
  notify-design-team:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 2

      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Analyze Token Diff & Dispatch Bot
        env:
          FEISHU_WEBHOOK_URL: ${{ secrets.FEISHU_WEBHOOK_URL }}
          GITHUB_PR_URL: ${{ github.event.pull_request.html_url }}
          PR_TITLE: ${{ github.event.pull_request.title }}
          PR_AUTHOR: ${{ github.actor }}
        run: |
          npm install
          npx ts-node scripts/token-change-notifier.ts

交互卡片在即时通讯中的落地效果

通知机器人会在设计师与前端架构师的群组中即时推演：

• 卡片头部：高亮标明发布版本与提交人；
• 明细区域：清晰陈列改动路径（如 color.brand.primary: #4F46E5 -> #4338CA）；
• 组件影响面：精准告警哪些页面和组件直接消费了该 Token；
• 操作按钮：直接一键跳转至 GitHub Review 页面，从容完成多方协同会签。

总结

Design Token 的治理不仅是纯代码编译，更是跨职能团队之间最关键的视觉契约协同。通过打造全自动化的变更通知与审批机器人，把冰冷的 Git Diff 转化为直观生动的富文本交互卡片，团队才能以极高的透明度与敏捷度，共同守护住设计系统在全公司每一次升级演进中的稳健与从容。