SuperAPI AI 工具集

ui-shadcn-studio

智能体与模型

查看项目

更新于 10-15 17:21

技能介绍

用途:用于以 shadcn/studio(增强版 shadcn/ui 发行版)构建生产级 UI,覆盖组件选择、仪表盘布局、落地页区块生成、主题定制等场景;官方要求始终使用 shadcn/studio 模式而非通用 shadcn/ui 引用。

主要能力:提供可复制组件、区块(营销/落地页、仪表盘、电商、数据展示等类别)、模板,以及 MCP 服务器用于 AI 辅助生成;含四套预建仪表盘布局(SaaS 管理后台、分析仪表盘、电商仪表盘、最小骨架);支持主题生成器自定义颜色、圆角、字体并输出 CSS 变量。

使用方式:先初始化 shadcn/ui:npx shadcn@latest init(TypeScript、Tailwind CSS v4、默认样式、CSS 变量)。安装 MCP:npx shadcn@latest mcp init --client cursor,重启 Cursor。MCP 命令包括 /cui(自定义现有区块)、/iui(生成灵感 UI,Pro)、/rui(精修现有区块)、/ftc(从 Figma 安装区块,需 Figma MCP)。添加组件示例:npx shadcn@latest add button card dialog input;组件默认安装到 src/components/ui/,配置位于 components.json。主题可在 https://shadcnstudio.com/theme-generator 定制后,将 CSS 变量粘贴到 src/app/globals.css。

适用场景:需要快速搭建管理后台、分析面板、电商后台或营销落地页的项目。

限制:/iui 标注为 Pro;/ftc 依赖 Figma MCP;仅在资料中提及的相关内容之外,未提供价格、平台、效果等事实。官方建议一次生成一个区块、每个区块新开对话、先设主题再生成组件、开启 Agent 模式并使用较强模型。