Shadcn

它能做什么

Shadcn 技能让 AI 代理能生成符合 shadcn/ui 设计系统的 UI 组件——按钮、表单、表格、对话框、导航栏，风格统一且可以直接用在你的 React 项目中。不是简单生成"看起来像"的 HTML，而是产出真实可用的 React 组件代码。

它与众不同在哪

市面上 AI 生成 UI 的方案大多是"给我一张截图"或"生成一个 HTML 页面"——好看但不能用。Shadcn 技能走的是组件级路线：它了解 shadcn/ui 的组件约定、Props 接口、样式模式和 Tailwind 类名体系，生成的代码可以直接粘贴进已有的 shadcn/ui 项目，不需要改样式。跟 Cursor 或 Copilot 的自主生成相比，它能保证输出跟你项目中已有组件的代码风格一致。

谁不适合用它

如果你不用 React，或者项目不基于 shadcn/ui，这个技能帮不了你。如果你只是需要一个着陆页而不是 UI 组件，直接用 AI 生成完整 HTML 页面更高效。Shadcn 技能瞄准的是"我有项目在跑 shadcn/ui，需要新组件"的精确场景。

总结

Shadcn 技能让 AI 生成的 UI 组件不只是好看，还能无缝融入你已有的 shadcn/ui 项目——省去"从 AI 生成到项目适配"的中间功夫。