design-system-patterns

此技能为工程师、UI 架构师与设计系统维护者提供了一套完整的框架，用于构建健壮且可扩展的设计系统。它专注于弥合 Figma 设计资产与生产级代码之间的差距，通过标记驱动开发（Token-driven development），协助团队在大型网页与移动应用中维持视觉一致性，并透过标准化组件架构显著降低技术债。

本技能涵盖了设计系统的整个生命周期，从原始设计标记（Primitive tokens）的定义到复杂的多主题切换基础设施实作。它整合了业界标准（如 Style Dictionary）以进行多平台标记生成，并利用 React 的复合组件（Compound components）与 Headless UI 模式，确保组件既灵活又具备无障碍性。无论是从零构建系统，还是重构既有组件库以支持深色模式与动态主题，本技能均提供了必要的架构模式。

• 原始、语义与组件级标记定义策略，实现细粒度的视觉控制

• 利用 CSS 自定义属性、系统偏好检测与持久化存储实现动态主题切换

• 组件库架构模式，包含多态组件（Polymorphic components）、插槽组合与 Headless UI 设计

• 自动化设计转代码工作流程，利用 Figma 同步与 CI/CD 整合

• 进阶主题功能，如多品牌支持、减少动态效果与高对比度无障碍模式

• 使用 class-variance-authority (CVA) 与现代 CSS 架构来管理复杂的变体与尺寸系统

• 适合需要跨平台（iOS、Android、Web）视觉一致性的项目

• 提供标记层级、主题 Context Provider 与组件变体管理的范本

• 推荐给正在建立设计转代码工作流程或迁移至标记化样式系统的团队

• 有助于实作设计系统文档与维护开发者体验（DX）

• 限制：最适合在拥有现代构建工具（Vite、Webpack）与 CSS-in-JS 或 CSS-module 工作流程的环境中使用