用途：在构建或修改应用布局、创建 UI 组件或做视觉设计决策时使用，目标是做出统一且有辨识度的应用，而非仅仅正确。
主要能力：先确定一个词的美学基调与标志性细节，再据此选择字体、颜色、圆角与布局。通过 src/global.css 中的 @theme 令牌统一控制视觉身份，组件只负责布局、间距与元素细节。提供 UI Style Recipes 与 Visual Style Recipes 参考文件，覆盖按钮、卡片、输入、对话框、标签页、提示、表格及图表主题。
使用方式：先定制 src/global.css 的语义颜色令牌（含 .dark 覆盖）、--radius 与字体令牌；字体通过 Google Fonts 等 CDN 以 link 标签加载到 index.html，再更新字体令牌。布局上让应用填满视口，宽屏约束外层内容宽度，避免约束单个图表容器。仪表盘采用移动优先的响应式网格，用 span 工具支持混合尺寸卡片。异步组件需处理加载（骨架）、空（居中弱化提示）、错误（破坏性样式横幅）三种状态。头部或工具栏加入明暗模式切换，使用 @/hooks/use-theme 的 useAppTheme。
约定：全部使用 Tailwind CSS v4 工具类；用 cn()（clsx + tailwind-merge）合并类名；图标用 Lucide React；交互元素用 Radix 原语加 Tailwind 样式。禁止硬编码颜色、像素或字体栈，仅允许在 global.css 中定义原始值。
限制：资料未提供具体安装命令、版本要求、收费或平台信息。需注意 tailwind-merge 会把 text-* 视为同一冲突组，合并字号与文字颜色时建议用显式长度语法；原生表单控件需在 global.css 中设置 font-family: inherit。完成后需在实际上下文中逐项审查可读性、比例与对齐。