用途:该技能用于帮助选择并实现设计系统。其核心目标是在项目开发中辅助确定合适的 UI 库,并在实现时获取对应的最新文档。
主要能力:
- 设计系统选择建议:资料列出了 10 个系统及其适用场景与平台,包括 Material UI(MUI,适用于 Google 生态与企业级,React/Next.js)、Ant Design(数据密集型企业管理后台,React/Vue)、Tailwind CSS(工具类优先,适用所有框架)、shadcn/ui(现代 React 与完全控制,React/Next.js)、Chakra UI(可访问性与开发体验,React/Next.js)、NativeWind(移动端 Tailwind,React Native)、Bootstrap(快速原型,适用所有框架)、Mantine(功能完整与暗色模式,React/Next.js)、Radix UI(无头基础组件,React)、Headless UI(Tailwind Labs 无头组件,React/Vue)。
- 自动检测:可从 package.json 识别项目中的设计系统,资料给出的对应关系为:@mui/material 对应 Material UI,antd 对应 Ant Design,tailwindcss 对应 Tailwind CSS,@chakra-ui/react 对应 Chakra UI,nativewind 对应 NativeWind,@radix-ui/* 对应 Radix UI,@headlessui/react 对应 Headless UI,@mantine/core 对应 Mantine。
- 快速选型参考:企业级推荐 Ant Design、MUI、Mantine;现代 Web 推荐 Tailwind + shadcn/ui;移动端(RN)推荐 NativeWind;原型设计推荐 Bootstrap、Tailwind。
使用方式:资料建议在向技能提出实现需求时附加「use context7」,例如「Build a login form with Material UI」use context7、「Create dashboard with Ant Design」use context7、「Style with Tailwind」use context7,以便自动获取当前版本对应的文档。
适用场景:需要为 React/Next.js、React Native 或通用框架项目选择 UI 库时;需要根据已有 package.json 判断项目所用设计系统时;需要按企业级、现代 Web、移动端或原型等场景快速获得推荐时。
限制:该技能本身不提供具体组件代码或安装命令;资料未说明其运行环境、安装方式、是否收费及支持的全部框架版本。实现细节依赖 Context7 获取最新库文档,若未使用 Context7,可能无法获得版本对应的文档。