design-system-patterns

此技能为构建可扩展、可维护且一致的设计系统提供了结构化框架，适用于网页与移动应用程序。它专为需要桥接设计意图与生产环境代码的前端工程师、UI 架构师及设计系统负责人所设计。通过分层的标记化 (tokenization) 方法，团队能从原始基础值 (primitives) 过渡到语义化标记 (semantic)，最终定义特定组件标记，确保核心值的变更能在不需要手动介入的情况下自动反映至应用程序各处。

• 多层级标记架构，支持基础、语义及组件特定的标记层级。

• 进阶主题基础设施，包含 CSS 自定义属性、系统层级配色方案检测，以及基于 React 的持久化主题切换供应器。

• 组件构成策略，运用复合模式、多态 (polymorphic) 'as' 属性以及无头 (headless) UI 结构以实现最大弹性。

• 自动化标记管线，通过 Style Dictionary 等工具协助实现 Figma 到代码的同步。

• 使用 CVA (class-variance-authority) 等现代库进行变体管理与响应式样式协调。

• 支持多品牌与跨平台主题系统，确保不同产品线之间的一致用户体验。

• 当您需要从零开始建立设计系统或重构现有碎片化的 UI 库时，请使用此技能。

• 非常适合实现亮色与暗色模式切换、高对比无障碍模式以及动态间距系统。

• 有效提升组件库开发效率，通过统一的 API、减小的包大小并优化开发体验 (DX)。

• 通过定义色彩、排版、阴影与间距的明确约束，标准化您的设计转代码流程。

• 预期输出包含 JSON 或基于 CSS 的标记定义、用于主题管理的主题 Context 包装器，以及模块化、由变体驱动的组件架构。

• 限制条件包括在系统更新期间维持向后兼容性，并确保标记层级保持适当深度，以防止 CSS 性能下降。