别让 AI 瞎写前端了，这个 Skill 让它秒懂 shadcn/ui

做前端的朋友一定对 shadcn/ui 不陌生。这两年它杀疯了——React、Vue、Svelte、React Native 全都有，copy-paste 的用法也比传统 npm 包灵活得多，堪称现代前端人的”乐高库”。

但问题也随之而来：让 Claude、Cursor 这类 AI 写前端时，它经常”幻觉”出根本不存在的组件名，或者给你一套过时的 API。 每次写代码前都得先跟 AI 解释半天 shadcn 的目录结构、组件路径和依赖关系，非常费时间。

直到我挖到了这个 shadcn-ui-mcp-server。

它是什么？

简单说，这是一个给 AI 助手装的 “shadcn/ui 专属知识库”，基于 Model Context Protocol（MCP）构建。装好之后，Claude Code、Cursor、VS Code、Claude Desktop 等工具就能直接读取 shadcn/ui v4 的：

• 完整组件源码（TypeScript，可直接引用）
• Blocks 完整实现（Dashboard、Calendar、Form 等整套页面模板）
• Dependencies 和元数据（不会漏装依赖）
• Demo 示例和用法（每个组件怎么用一目了然）

支持 React、Svelte、Vue、React Native 四种框架，React 下还能选 Radix UI 或 Base UI 作为底层组件库。

上手有多简单？

一行命令搞定：

npx @jpisnice/shadcn-ui-mcp-server

如果你配个 GitHub Token，请求上限从每小时 60 次直接提到 5000 次，日常用基本不会被打限流。

然后 claude mcp add 接入 Claude Code 或 Claude Desktop，秒生效。

实际体验

我之前让 Claude 写一个带侧边栏的管理后台，以前它经常给我错漏百出的代码——组件名写错、依赖忘装、API 用老版本。装上这个 MCP 之后，它直接知道每个 shadcn 组件的准确路径和用法，生成的代码几乎不用改。

最实用的是它支持 Blocks 查询——不只是单个组件，而是整套页面模板，比如登录页、数据表格、Dashboard，直接拿来改改就能用，效率拉满。

谁适合用？

• 用 shadcn/ui 做项目的 React/Vue/Svelte 开发者
• 想让 AI 写前端代码更准确的同学
• 用 Cursor / Claude Code 做 AI 编程的人

如果你还在手动给 AI 解释 shadcn 的组件结构，这个 Skill 值得装一个试试。

GitHub: https://github.com/Jpisnice/shadcn-ui-mcp-server