用途:面向现代 Web 应用的 UI/UX 设计、审查与改进,产出可上线的 React 界面实现,技术栈为 TailwindCSS(样式)、Radix UI(无样式可访问原语)、shadcn/ui(成品组件)与 React/Next.js。
三层架构:TailwindCSS 提供工具类样式、设计令牌、响应式与暗色模式;Radix UI 提供符合 WAI-ARIA 的可访问行为、键盘导航与焦点管理;shadcn/ui 以复制粘贴方式交付组件,含 React Hook Form 与 Zod 校验,可定制变体。原则是逐层增强:先用 Tailwind 做样式,再加 Radix 行为,最后用 shadcn/ui 组合完整组件。
主要能力:UI/UX 审查(组件架构、WCAG 2.1/2.2 AA/AAA 无障碍、Core Web Vitals 性能、响应式、设计系统一致性、代码质量、视觉层级);界面设计(原子设计、布局网格、交互状态、三层设计令牌、OKLCH 配色、排版系统、动画过渡);改进(可访问性增强、性能优化、组件重构、状态处理、开发者体验)。
适用场景:管理后台、CRUD 应用、设置页、数据表格等表单密集应用;需要自定义组件库或 shadcn/ui 未覆盖组件时可用 Radix 原语自行构建;自定义布局与静态内容可直接用 Tailwind。
限制与注意:不适用于 React/Next.js 整体架构、状态管理、Server Components、后端 API、数据库与基础设施。无障碍方面不得覆盖 Radix 的 ARIA 特性;文本对比度需 ≥4.5:1、交互元素 ≥3:1;暗色模式需维持对比标准。Tailwind 运行时不会生成动态类名,需使用条件类。安装顺序为先 TailwindCSS,再用 shadcn/ui CLI(含 Radix 依赖),按需添加组件。官方文档见 https://tailwindcss.com/docs、https://www.radix-ui.com/primitives、https://ui.shadcn.com。其他具体配置、版本与价格资料暂未提供。