用途：该技能面向设计与前端工程，帮助建立可扩展、可维护的设计系统，用于统一产品体验，适用于创建组件库、设计令牌和主题体系。
主要能力：以设计令牌为原子层，将颜色、间距、字体等最小设计决策以数据形式存储，支持单一事实来源、跨平台消费、版本可追溯与明暗主题切换；令牌分为基础令牌、语义令牌和组件令牌三类。借助 Style Dictionary 可将令牌编译为 CSS 变量与 JS 等平台产物。组件层采用原子设计方法，按原子、分子、组织、模板、页面组织，并给出组件目录结构（实现、样式、Storybook 故事、测试、类型、导出、文档）。示例展示 Button 组件与 FormField 分子组件，覆盖变体、尺寸、图标、加载态等。还给出组件 API 设计原则：合理默认值、组合优先于配置、受控与非受控模式、多态组件。文档化部分使用 Storybook，配置故事与 MDX 文档，并列出可访问性要点（键盘访问、焦点可见、ARIA 属性、加载状态对屏幕阅读器播报）。
使用方式：安装 Style Dictionary：npm install --save-dev style-dictionary；通过配置文件指定 source 与各平台构建产物，执行 npx style-dictionary build 生成 variables.css 等。Storybook 初始化：npx storybook@latest init。
限制：资料未提供该技能的安装方式、许可、支持平台、价格及运行依赖等具体信息。