用途:该技能用于构建可扩展的设计系统,涵盖设计令牌、组件 API 与文档三部分,适用场景包括从零创建设计系统、演进既有组件库、定义令牌架构、确立组件 API 模式以及搭建设计系统文档。
主要能力:一是三层令牌体系——基础令牌(如 --color-blue-500、--spacing-4、--font-size-base、--radius-md)、语义令牌(如 --color-action-primary、--color-text-primary、--spacing-component-gap)、组件令牌(如 --button-bg、--button-padding-x、--card-radius),并给出亮色/暗色主题的 theme 对象写法。二是组件 API 模式:属性式 API 示例(ButtonProps 含 variant、size、isLoading、isDisabled、leftIcon、children、onClick,并给出默认值写法)、复合组件模式(Tabs.List、Tabs.Tab、Tabs.Panel)与多态组件模式(Box 的 as 属性,配合具有泛型约束的 PolymorphicProps 类型)。三是按原子设计划分组件类别:原子(Button、Input、Label、Icon、文字、Box/Flex/Grid)、分子(FormField、SearchInput、Card)、有机体(Header、DataTable、Modal)。四是文档策略,给出组件文档结构:说明、用法代码、属性表格、示例、无障碍说明(默认使用 button 元素、支持键盘激活、加载状态对屏幕阅读器播报)。
设计原则:组合优于配置、默认值合理、默认可访问、类型安全 API、最小 API 面。维护实践包括语义化版本、移除前弃用警告、大版本迁移指南与自动化视觉回归测试。
限制与未提供内容:资料未说明具体实现框架版本、安装命令、配套工具链、收费情况与配套组件数量,暂未提供;示例为代码片段,实际落地需结合项目技术栈调整。