用途
该技能为 React/TypeScript 应用提供设计系统模式参考，帮助开发者在实现界面时统一颜色、排版、间距与组件风格，并保持品牌一致性。它扩展自通用设计系统技能，建议先阅读基础技能以获取色彩理论、排版比例、间距系统与组件状态等基础知识。
主要能力
- Tailwind 配置：展示如何在
tailwind.config.js中扩展颜色（primary、secondary、accent，均引用 CSS 变量）、间距与圆角。 - CSS 变量设置：提供品牌色、表面色变量，并包含暗色主题变量覆盖（通过
[data-theme="dark"]）。 - React 组件模式：给出按钮（主要、次要、幽灵）、输入框、卡片、Framer Motion 模态框、加载骨架的类名与代码示例。
- 视觉效果：玻璃拟态（
.glass、.glass-dark）与多级阴影（soft、medium、floating、glow）的 CSS 定义。 - Framer Motion 动画：悬停上浮、页面过渡、子项交错动画的写法。
- 暗色模式实现：提供基于 React Context 的 ThemeProvider 方案，以及系统偏好检测代码。
- 无障碍：Tailwind 焦点样式与跳过链接（skip link）示例，提及遵循 WCAG AA 标准。
使用方式
文档以代码片段形式给出配置与组件示例，可直接参考并应用到 React/TypeScript 项目中。使用时需根据自身项目自定义品牌色 CSS 变量。
适用场景
适用于在 React 应用中实现 UI、选择颜色、应用间距、创建组件或确保品牌一致性时参考。
限制
该技能为设计系统参考，不包含安装命令、收费或价格信息、具体平台支持说明或性能数据，这些内容暂未提供。