SuperAPI AI 工具集

shadcnui-patterns

前端与建站

查看项目

更新于 10-15 21:46

技能介绍

用途:使用 shadcn/ui 组件配合 FrankX 玻璃拟态设计系统,创建有辨识度、可用于生产的界面,并保证组件用法一致、无障碍合规,避免通用化 AI 审美。

项目配置:风格为 new-york,启用 rsc、tsx、cssVariables,baseColor 为 neutral,图标库为 lucide,别名 ui 指向 @/components/ui、utils 指向 @/lib/utils。

主要能力与结构:组件目录分为 ui/primitives(shadcn 基础组件)、ui/magic-ui(增强动效组件)和 FrankX 自定义组件。核心原则为设计先行,先确定大胆的美学方向与字体,再做组件。

使用方式:用 npx shadcn@latest add button 等命令安装组件,如 card、dialog、form、input、toast。内置按钮变体、玻璃卡片、带校验的表单(react-hook-form、zod、FormField)、对话框和基于 sonner 的 toast 通知等模式。设计系统提供极光渐变色令牌、玻璃效果工具类和排版类。

无障碍要求:交互元素需有可见焦点环,正文对比度至少 4.5:1,大字体 3:1,使用恰当 ARIA 标签,并支持键盘导航。

适用场景:为 FrankX.AI 构建新 UI 组件、表单、弹窗或交互元素,落地设计系统组件与无障碍合规。限制:资料未提供收费、价格、平台或效果信息,具体命令与代码需按原样使用。