shadcn 官方 Skill 让 AI 生成界面终于不”假”了

shadcn/ui 官方 Skill 来了，AI 生成界面终于不「假」了

用过 Claude Code 写前端的朋友，大概都踩过这个坑：让 AI 帮我加个 Dialog 组件，它一脸懵地造了个野生 div，要么样式跑偏，要么 Accessibility 全灭。为啥？因为 AI 根本不知道你项目里 shadcn 的配置长什么样。

shadcn 官方出手了——他们给 Claude Code 写了一个专属 Skill：**让 AI 操作 shadcn/ui 组件时，能直接调 CLI、看真实文档、跑 dry-run 验证，而不是靠”记忆”乱猜**。

这 Skill 到底干了什么

简单说，它把 shadcn CLI 完整接入了 AI 的工具链。你让 Claude 加个 Button，它会：

• 先跑 npx shadcn@latest info --json 读取你项目的真实配置（aliases、是否 RSC、tailwind 版本）
• 用 npx shadcn@latest search 查 registry 文档，而不是凭训练记忆
• 加组件前先 --dry-run 预览 diff，确认无误再执行
• 组件装好后自动改写 registry 路径和 icon 引用，保持项目一致性

这意味着 AI 每次操作都基于你项目的真实状态，不会再出现”以为你用 v0 其实是 v1″这种致命幻觉。

35 条强制性规则，踩线就报错

这个 Skill 内置了 35 条 composition rules，覆盖：

• 样式：必须用 design tokens（bg-primary/text-foreground），禁止硬编码 bg-white/text-black
• 表单：FieldGroup、Field、InputGroup 的正确组合方式
• 组件组合：Card、Dialog、Select 等的复合模式规范
• Icon：data-icon 正确用法，icon 作为对象传递规范

违反规则？Skill 会直接告诉你哪里错了、怎么改，比任何 lint 工具都精准。

支持所有主流 AI 编程工具

不只 Claude Code，Cursor、Windsurf、GitHub Copilot、Codex CLI 都能用。安装方式统一是拉 SKILL.md 文件进对应目录，shadcn 官方提供每个工具的安装指令。

适合谁

• 用 shadcn/ui 搭建 React/Next.js 项目的工程师
• 想让 AI 真正接管前端界面开发而不是帮倒忙的团队
• 已经在用 Claude Code 但受够了 AI 生成「假 shadcn 组件」的开发者

272k 安装量、123k GitHub stars，这个 Skill 的热度已经说明一切。官方维护意味着跟着 shadcn 版本走，不用担心 Skill 过期没人管。

GitHub：https://github.com/shadcn-ui/ui

GitHub: https://github.com/shadcn-ui/ui