用途
design-system-pro 是一个设计系统架构与 Token 工程技能，定位为「2026 年的资深设计系统架构师与 Token 工程师」。它面向需要构建和维护多品牌、多主题设计系统的团队，强调高架构完整性、文档即代码（Documentation-as-Code）以及 AI 驱动的漂移检测。
主要能力
- 分层 Token 架构：遵循 Primitive → Semantic → Component 层级。规则要求组件中不得直接使用原始 Token（如 blue-500），而应使用语义 Token（如 action-primary-bg）。
- OKLCH 颜色与表达：纯 HEX 仅用于原始层，语义颜色必须使用 oklch() 以保证感知均匀性；调色板分布遵循 60/30/10 规则，避免「AI 彩虹」（过多强调色），并使用 color-mix() 做细微变化。
- Tailwind 4 CSS-first 配置：tailwind.config.js 已弃用，改用 CSS 中的 @theme 块；将 Token 集中为原生 CSS 变量，放在 packages/design-tokens 包中以实现运行时互操作。
- 无头 UI 与 Radix 集成：避免捆绑样式的「主题化组件」，使用无头逻辑（Radix）并应用语义工具类；组件需支持高对比度模式并尊重 prefers-reduced-motion。
- 文档即代码（DaC）：文档应是代码的副作用而非手工任务；使用 JSON-LD 或类型化 JSON 文件作为 Token 的事实来源，并通过 Style Dictionary 转换为 CSS、Android 和 iOS。
- 规范化协议：包括发现并模仿现有模式、漂移检测（识别硬编码值并归一化为语义 Token）、AI Slop 审计（避免通用紫到蓝渐变等「AI 标准」美学）、韧性测试（高对比度、RTL、低带宽字体等极端场景）。
使用方式
技能包含「指挥协议」：先进行 Token 拓扑审计（分析现有原始与语义 Token 的命名一致性与无障碍合规性），再进行主题映射（定义「核心」Token 与「品牌/产品」覆盖之间的关系），然后顺序激活技能：activate_skill(name="design-system-pro") → activate_skill(name="tailwind4-expert") → activate_skill(name="ui-ux-pro")，最后执行验证：bun x tailwindcss --check，并在浅色与深色模式下验证运行时 CSS 变量解析。
资料提供了实现示例：Tailwind 4 CSS-first 主题（packages/design-tokens/src/base.css 中的 @theme 块，包含原始色阶、语义层与组件层变量），以及语义组件用法（React 19 + Radix 的 Tooltip 示例，使用语义 Tailwind 4 类）。
适用场景
适用于构建多品牌、多主题设计系统，需要分层 Token 管理、Tailwind 4 CSS-first 主题、Radix 无头 UI 编排、自动化 Token 管道（从 Figma 到生产）以及文档即代码的团队与项目。
限制与反模式
资料列出「不要做」清单：不要在组件中硬编码十六进制色值或像素值；不要通过深层 CSS 嵌套创建「组件覆盖」，应使用 CSS 变量；不要忽视颜色 Token 的无障碍性，需在「语义」层检查对比度；不要在没有专用「沙盒」（Storybook 或内部文档）的情况下构建设计系统；不要混用命名约定（如变量用 camelCase，Token 就不要用 kebab-case）。
工具与脚本
资料提及专用工具与脚本：scripts/validate-contrast.py（审计语义 Token 列表是否符合 WCAG 2.2）、scripts/generate-theme-json.ts（将 CSS @theme 块导出为 JSON 格式供移动应用使用）。
学习资源
资料列出 Tailwind CSS v4.0 Alpha Docs、Radix UI primitives、Design Tokens Community Group 作为学习资源。
暂未提供
关于收费、价格、具体平台支持范围、实际效果数据等信息，资料中暂未提供。