用途：构建可扩展、易维护的设计系统，覆盖令牌、组件与主题架构。
主要能力：
- 三层令牌：原始令牌（oklch 颜色、4px 基准间距、字号、圆角）、语义令牌（背景/文字/边框/交互/品牌别名）、组件令牌（如 --btn-*）。
- CSS 自定义属性架构：tokens/_primitives.css、_semantic.css、_themes.css 与 components/ 分文件，index.css 按序 @import。
- 主题：用 [data-theme="dark"] 覆盖语义令牌，支持 prefers-contrast、forced-colors，并用 data-brand 做多品牌重映射。
- 令牌导出：按 W3C DTCG 格式输出 tokens.json，含 $value、$type、别名 {group.token} 与 $description。
- 组件 API：尺寸 sm/md/lg、变体 primary/secondary/ghost/outline/danger、状态 hover/active/focus-visible/disabled，含 Card、Input 等组合模式。
- 尺度系统：4px 间距表、6 级阴影、圆角嵌套规则（内=外-内边距）、时长与缓动令牌及 prefers-reduced-motion 支持。
- 文档与验证：Storybook 风格 HTML 文档页，用 npx playwright screenshot --full-page "file://$PWD/docs.html" light.png 截图检查，grep 排查硬编码色值，并核对对比度。
使用方式：先读取 .agents/design-context.md 与现有令牌，识别框架后扩展而非重造；颜色尺度与字号分别由 color-palette、typography 技能提供。
适用场景：需要统一令牌、主题与组件规范的前端项目。
限制：资料未提供具体安装命令、收费、平台与效果数据；部分步骤依赖同仓库其他技能（design-context、color-palette、typography、motion-design、layout-composition）。