Frontend Design Systems 是一套系统化构建一致、可扩展、可维护前端 UI 组件的方法，核心是设计系统与组件库。
用途 它面向需要统一视觉规范、提升组件复用性与可维护性的前端项目，通过系统化设计模式来构建 UI 组件。
主要能力
- 设计令牌系统（Design Token System）：
- 颜色令牌：提供 primary、neutral 以及 semantic（success、warning、error、info）等颜色定义，示例以 TypeScript 导出。
- 间距比例：定义 xs、sm、md、lg、xl、2xl 等间距值，对应 4px 到 48px。
- 排版系统：包含 fontFamily（sans、mono）、fontSize（xs 到 xl，含 lineHeight）、fontWeight（normal、medium、semibold、bold）。
- 组件模式（Component Patterns）：
- 基础按钮组件：定义 ButtonProps 接口，支持 variant（primary、secondary、outline）、size（sm、md、lg）、disabled、loading、children、onClick，并给出对应样式映射与渲染逻辑。
- 复合组件：以 Card 为例，通过 Card.Header、Card.Body、Card.Footer 组合使用。
- 布局模式（Layout Patterns）：
- 响应式网格系统：使用 grid 布局，按断点从 1 列到 2 列、3 列。
- 容器模式：使用 container、mx-auto、响应式内边距与 max-w-7xl。
- 状态管理模式（State Management Patterns）：
- 表单状态：提供 useForm 泛型 Hook，管理 values、errors，支持 handleChange 与基于 Zod 的 validate。
- 无障碍模式（Accessibility Patterns）：
- 焦点管理：以 Dialog 为例，使用 role="dialog"、aria-modal="true"、tabIndex={-1}，打开时聚焦，按 Escape 关闭。
使用方式 资料以代码示例形式展示各模式的实现，包括设计令牌的 TypeScript 导出、React 组件函数、Hook 与无障碍属性写法。使用者可参照这些示例在项目中落地设计系统与组件库。
适用场景 适合需要建立统一设计规范、构建可复用组件库、保证 UI 一致性与可维护性的前端开发场景。
限制 资料未提供安装命令、依赖版本、构建工具配置、收费或价格信息、平台支持范围以及具体使用步骤，这些内容暂未提供。
集成点 资料说明其可与以下内容互补：canvas-design（设计集成）、accessibility-patterns（ARIA/WCAG）、responsive-design-patterns（移动优先）、testing-patterns（组件测试）。