SuperAPI AI 工具集

design-system-library

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:帮助开发者选择并实现设计系统。该技能会识别项目使用的前端 UI 库,并给出选型建议;需要最新库文档时使用 Context7 获取当前版本资料。

主要能力:内置常见设计系统对照,包括 Material UI(MUI)、Ant Design、Tailwind CSS、shadcn/ui、Chakra UI、NativeWind、Bootstrap、Mantine、Radix UI、Headless UI,并标注各自适合的场景与平台,如企业级、数据密集型应用、React/Vue/React Native 等。支持从 package.json 自动检测,例如 @mui/material 对应 Material UI,antd 对应 Ant Design,tailwindcss 对应 Tailwind CSS,@chakra-ui/react、nativewind、@radix-ui/*、@headlessui/react、@mantine/core 等也有对应映射。选型示例:企业级可选 Ant Design、MUI、Mantine;现代 Web 可选 Tailwind + shadcn/ui;React Native 移动端可选 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”。实现细节同样通过该方式获取实时文档。

适用场景:前端项目初始化选型、登录表单或仪表盘等组件实现、已用库的版本文档查询、跨框架 UI 方案比较。

限制:资料未提供具体安装命令、代码示例、收费方式与效果说明;内置选型表可能随资料更新而变化。