UI 技术栈顾问 是做什么的？
选择技术栈是项目中最具杠杆效应的 UI 决策：它决定了无障碍质量、主题灵活性、包体积以及最终外观的“模板化”程度。请审慎地一次性做出选择，并记录下来。
知识快照：2026 年 11 月。库的演进很快——安装前请确认当前主版本和 API（参见新鲜度检查）。优先使用项目中已有的库，而不是这里列出的任何库。
第一步 — 先阅读项目
检查 package.json / pubspec.yaml / Package.swift / build.gradle 中已有的 UI 库、样式方案（Tailwind 版本、CSS-in-JS）、框架版本，以及任何 components.json（shadcn）、DESIGN.md 或 token 文件。不要在一个已有组件库旁边引入第二个组件库——要么扩展已有的，要么对其进行封装。如果项目中已经使用了本推荐中的某个竞品，可以提及但不要未经询问就切换依赖。
第二步 — 回答五个问题
- 平台：仅 web、仅移动端、还是从同一代码库同时支持两者？
- 所有权：复制到源码中自由修改（shadcn 模式）还是带主题 API 的版本化依赖（MUI/Mantine 模式）？复制模式 = 最大的设计自由 + 自己维护。依赖模式 = 更快、一致性好、免费升级、但难以做出独特外观。
- 产品类型：营销/落地页（表现力强、动效丰富）、产品 UI/仪表盘（紧凑、一致、键盘友好）、内容型（排版优先）、移动消费类应用（原生手感、手势）。
- 无障碍要求：公共部门/企业/欧盟（欧洲无障碍法案）→ 选择经过验证的无障碍原语（React Aria、Base UI、Radix），不要手动编写交互组件。
- 样式系统：Tailwind v4（新的 Web 项目默认）、CSS Modules/vanilla-extract、CSS-in-JS；React Native 上：NativeWind vs Unistyles vs Tamagui。
第三步 — 默认选择（当没有其他约束时）
| 场景 | 默认 | 理由 |
|---|---|---|
| React/Next.js 产品 UI | shadcn/ui（Base UI 原语——2026 年 7 月以来的默认；Radix 和 React Aria 也支持）+ Tailwind v4 | 你拥有代码所有权，优秀的无障碍性，庞大的 registry 生态系统，AI 工具对其很熟悉 |
| React，无障碍关键/复杂组件（日期范围、组合框、拖放、国际化） | React Aria Components（或 shadcn 的 React Aria 变体 / HeroUI v3，后者构建于其上） | 最严格的无障碍+国际化行为 |
| React，功能全面，不使用 Tailwind | Mantine | 100+ 组件 + hooks + 表单 + 日期，文档强大 |
| React，企业/Material 风格或重型数据表格 | MUI v9（+ MUI X Data Grid/Date Pickers/Charts） | 成熟、完整；难以做出独特外观 |
| 企业后台（尤其是中国/亚太团队） | Ant Design | 组件众多，数据密集型模式 |
| Vue / Nuxt | Nuxt UI v4（免费，基于 Reka UI + Tailwind v4）或 shadcn-vue | |
| Svelte / SvelteKit | shadcn-svelte（基于 Bits UI） | |
| Solid | Kobalte / solid-ui（shadcn 移植版）/ Ark UI | |
| Angular | Spartan UI（类似 shadcn）或 Angular Material / PrimeNG | |
| 框架无关的原语 | Ark UI（Zag.js 状态机；支持 React/Vue/Solid/Svelte） | |
| 营销/落地页效果 | shadcn + Motion + 从 Magic UI / Aceternity / Animate UI / React Bits 中选择特定组件 | 使用 1–3 个标志性效果，不要拼贴 |
| React Native / Expo（新应用） | Expo + Expo Router + NativeWind v5 + React Native Reusables（shadcn 的 RN 版）或 HeroUI Native；@expo/ui 用于真正原生的 SwiftUI/Compose 控件；Reanimated 4 + Gesture Handler 实现动效 | |
| React Native，注重 StyleSheet 式性能 | Unistyles 3 + 自有组件 | |
| 从同一代码库支持 React Native + Web | Tamagui（编译器，通用）或 Expo + NativeWind 配合 react-native-web | |
| Flutter | Material 3（内置）/ Cupertino；forui 或 shadcn_ui 用于非 Material 外观 | |
| iOS 原生 | SwiftUI 系统组件（iOS 26+ 上的 Liquid Glass 随标准控件免费提供） | 尽可能少地对抗平台 |
| Android 原生 | Jetpack Compose Material 3（material3 1.5 版本系列中的 Expressive APIs） |
各平台的详细信息、替代方案和权衡，请阅读匹配的引用文档：
references/web-react.md— React 原语、样式套件、shadcn 生态系统与 registries、Tailwind 工具references/web-other.md— Vue、Svelte、Solid、Angular、Astro、纯 HTML/Web Componentsreferences/mobile.md— React Native/Expo、Flutter、SwiftUI、Compose、Kotlin Multiplatformreferences/motion.md— 各平台的动画库以及何时 CSS/原生就足够了references/building-blocks.md— 图标、字体、图表、表格、表单、Toast、日期、拖放、虚拟化、编辑器、命令菜单、走马灯、地图、3Dreferences/inspiration.md— 寻找参考的地方（Mobbin、Refero 等）和 AI 设计工具
第四步 — 记录决策
将选择写入项目文件（DESIGN.md 或 README 的“UI 技术栈”部分）：库 + 版本、样式方案、图标集、动效库、字体以及选择理由。未来的会话（和其他代理）将读取它，而不是重新决策。
新鲜度检查（安装前执行）
npm view <pkg> version time.modified repository.url # 当前版本 + 最后发布时间
npm view <pkg> deprecated # 弃用通知（如果有）
# Flutter：https://pub.dev/packages/<pkg>（点赞、pub 分数、最后发布）
# Swift：检查仓库的最新 release 标签
应避免的库信号：12 个月以上没有发布版本且存在开放关键问题、README 声明“未维护/已归档”、peer 依赖锁定在旧的 React/RN 版本、无 TypeScript 类型、无障碍问题被忽略。已知已退役/有风险的例子：react-beautiful-dnd（已弃用 → 使用 @atlaskit/pragmatic-drag-and-drop 或 dnd kit）、@base-ui-components/react（已重命名 → @base-ui/react）、Chakra v2 API（v3 是基于 Ark UI/Panda 的重写）、Reanimated 2/3 手势 API（useAnimatedGestureHandler 已在 v4 中移除）。
如果有可用的文档 MCP（例如 Context7、shadcn MCP、用于设计系统查询的 Figma MCP），请使用它们阅读当前文档，而不是依赖记忆。
反模式
- 一个应用中使用两个组件库（MUI + shadcn）→ 焦点、间距、主题不一致。
- 手写对话框、菜单、组合框、日期选择器、Toast、工具提示 → 无障碍错误（焦点陷阱、escape、aria、滚动锁定、碰撞）。使用原语。
- 完整安装一个“动画组件”库 → 只复制你需要的那 1–3 个部分。
- 在 React Native 中通过 WebViews 使用 Web UI 套件，或强制 iOS 用户使用 Material 组件。
- 保留库的默认主题不变 → “所有 shadcn 应用看起来都一样”的问题。至少更改：字体、圆角、强调色、中性色温度和密度（参见 design-system-builder 和 color-theory 技能）。