用途
本技能为 Next.js/NestJS 全栈应用提供设计系统模式参考，用于在实现 UI、选择颜色、应用间距、创建组件或确保品牌一致性时查阅。它是对 Generic Design System 的扩展（Extends），文档明确要求先阅读基础技能以了解色彩理论、排版比例、间距系统与组件状态；基础技能中未在本页重复的内容暂未在此提供。
主要能力
文档覆盖以下方面：
- 主题配置：以 lib/theme.ts 作为单一样本来源（Single source of truth），定义 colors（primary、secondary、accent）与 spacing（xs、sm、md、lg）等令牌。
- CSS 变量：在 globals.css 中定义
:root与.dark下的 background、foreground、primary、primary-foreground 等变量。 - Tailwind 集成：在 tailwind.config.js 中将 background、foreground、primary 等颜色映射到 CSS 变量。
- 组件模式（shadcn/ui）：提供 Button（primary、outline、destructive、ghost 及 sm、lg 尺寸）、表单（Input、Label）、Dialog/Modal 的示例代码。
- 视觉效果：玻璃拟态（Glassmorphism）与渐变背景的 CSS 示例。
- 暗色模式：基于 Next.js + next-themes 的 ThemeProvider 配置与主题切换组件示例。
- 资源组织：public 目录下 images、favicons 与 site.webmanifest 的目录结构示例。
- 动画：文档在标题层面提及 GPU 加速动画（GPU-accelerated animations），但本页正文未提供具体代码或参数。
- 无障碍：文档提及覆盖 WCAG AA 无障碍，但本页正文未提供具体规则说明。
使用方式
文档以代码片段形式给出可参考的实现结构，包括 lib/theme.ts 的主题对象、globals.css 中的 CSS 变量、tailwind.config.js 的扩展配置，以及各 shadcn/ui 组件在 TSX 中的导入与调用示例。暗色模式部分展示了在 app/layout.tsx 中使用 next-themes 的 ThemeProvider，以及通过 useTheme 实现主题切换的按钮组件。资源组织部分给出 public 目录的树形结构，并注明 og-image.png 建议为 1200x630 且小于 1MB。
适用场景
适用于 Next.js/NestJS 全栈应用的前端界面开发，尤其是使用 shadcn/ui、Tailwind CSS 与 next-themes 的技术栈，在需要统一颜色、间距、组件样式与暗色模式时使用。
限制与暂未提供的内容
文档未提供安装命令、版本要求、收费与价格信息、性能数据或实际效果验证。GPU 加速动画与 WCAG AA 无障碍仅被提及，具体实现细节本页暂未提供。基础设计系统的色彩理论、排版比例、间距系统与组件状态需参考其父级 Generic Design System 技能，本页未展开。