shadcn
让AI助手直接操作shadcn/ui组件库的MCP服务器
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：shadcn。 它的用途是：让AI助手直接操作shadcn/ui组件库的MCP服务器 完整的 Skill 内容见：https://321skill.com/skills/shadcn/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要一个用户登录表单，包含邮箱和密码输入框、记住我复选框以及提交按钮，使用shadcn/ui的组件。”，AI会调用此Skill的工具，生成符合shadcn/ui样式和代码规范的表单组件代码。或者
对AI说：“把刚才生成的按钮从默认样式改成destructive变体。”，AI会操作现有组件代码进行修改。
介绍
这个Skill是一个基于TypeScript实现的MCP（Model Context Protocol）服务器，它允许AI助手（如Claude）直接访问和操作流行的React UI组件库——shadcn/ui。它解决了开发者在构建UI界面时需要频繁查阅文档、手动编写组件代码的低效问题。通过将shadcn/ui的组件能力封装成AI可调用的工具，开发者可以直接用自然语言指令让AI助手生成、修改或组合shadcn/ui组件代码。
使用时，你需要配置好MCP客户端（例如在Claude Desktop中），并将此服务器添加到你的工具列表中。之后，在与AI助手对话时，你可以直接提出UI构建需求，AI会调用此服务器提供的工具来生成对应的shadcn/ui组件代码片段，或对现有组件进行操作。
它非常适合需要快速构建高质量、一致UI界面的前端开发者、全栈开发者以及UI设计师。特别是那些已经在使用或希望采用shadcn/ui作为设计系统的团队，可以借助此工具大幅提升UI开发的效率和一致性。
建议在项目初期或进行UI重构时引入此工具，以快速搭建基础界面。需要注意的是，它主要服务于代码生成和操作，对于复杂的交互逻辑或业务状态管理，仍需开发者进行后续整合。确保你的开发环境已配置好React和shadcn/ui的相关依赖。
核心特点
这是首个专注于将shadcn/ui组件库能力暴露给AI助手的MCP服务器，实现了对特定UI库的深度集成，而非通用的代码生成工具。它允许AI直接理解和使用shadcn/ui的组件API和设计规范，生成的代码更符合该库的最佳实践。
注意事项
该Skill主要面向使用shadcn/ui和TypeScript的React项目，不适用于其他UI库、框架或纯JavaScript项目。
常见问题
这个MCP服务器支持哪些AI助手？
它支持任何兼容MCP协议的客户端，如Claude Desktop、Cursor等。
使用前需要安装shadcn/ui吗？
是的，你的项目需要先安装并配置好shadcn/ui，此服务器是AI与现有组件库之间的桥梁。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/shadcn/raw/index.md 读取 shadcn 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/shadcn/raw/index.md（查看排版版本）