SuperAPI AI 工具集

design-system-patterns

设计与创作

查看项目

更新于 10-15 21:41

技能介绍

用途:说明设计系统不只是组件库,而是设计决策、可复用 UI 基础件、无障碍预期、文档、贡献规则与发布采用流程之间的共享契约,帮助团队更快、更一致地构建界面。

主要能力:

  1. 设计令牌:区分原始令牌(如 --gray-100、--space-4)与语义令牌(如 --color-surface、--color-action-primary),语义令牌让主题与改版更容易。
  2. 组件分层:基础件(Box、Text、Stack、Button)、组合模式(FormField、Card、Dialog、Tabs、Toast)、产品专属组件(如 InvoiceStatusCard)应放在核心系统之外。
  3. 组件 API 设计:偏好组合而非布尔属性爆炸,使用 variant、size、tone 等清晰模型,并定义 hover、focus、pressed、disabled、loading、invalid 等状态;复杂组件可用具名插槽(如 Dialog.Header/Body/Footer)。
  4. 无障碍默认值:键盘交互、焦点样式、语义标记、颜色对比、减少动效、错误与忙碌状态应由系统内置。
  5. 主题化:基于令牌驱动,支持明暗模式、品牌或租户定制、密度、动效偏好,组件消费语义令牌而非手动分支。
  6. 文档与治理:包含使用时机、示例、变体指南、无障碍说明、迁移说明;治理需回答复用性、API 稳定性、维护归属等问题。
  7. 版本与采用:语义化版本、先弃用后移除、迁移指南、codemod、面向采用影响的变更日志;采用策略建议从少量强基础件开始,优先替换高重复组件。

使用方式:资料未提供具体安装命令或代码调用步骤,仅给出模式与示例片段(如令牌定义、主题选择器、组件用法)。

适用场景:需要跨团队统一 UI、支持多品牌或多模式、降低重复组件逻辑、把无障碍作为默认能力的项目。

限制:资料未提供收费、价格、平台支持或效果数据;内容为模式说明,非可直接安装的工具包。