古法编程

使用 shadcn/ui 快速构建现代化设计系统

解决 UI 开发中“造轮子”与“组件库过重”的矛盾：通过 AI 引导使用 shadcn/ui，将高质量的组件源码直接引入项目，实现极致的定制化控制与一致的设计语言。

为什么需要这个技能

传统的组件库通常以 npm 包形式安装，难以深度定制样式。而 shadcn/ui 采用“源码分发”模式，组件通过 CLI 直接写入你的项目代码中。

为了避免在引入过程中产生样式混乱、破坏可访问性或重复造轮子，需要 AI 掌握一套严格的原则：优先使用现有组件、采用语义化颜色、利用 cn() 处理条件类，并严格遵循 Radix UI 的组合模式。

适用场景

  • 快速原型开发：需要快速搭建具有专业感且符合现代审美（如 Nova 风格）的界面。
  • 设计系统构建：在项目中建立一套可维护、可扩展的 UI 规范。
  • 复杂表单设计：需要构建包含验证、分组且符合无障碍标准的复杂输入界面。
  • 组件迁移与更新：在保持本地自定义修改的同时，同步上游组件的更新。

核心工作流

  1. 项目初始化与上下文分析：通过 npx shadcn@latest info 确认当前的路径别名（Alias）、Tailwind 版本及基础库（Radix 或 Base）。
  2. 组件检索与文档查阅：先使用 search 查找组件，通过 npx shadcn@latest docs <component> 获取官方 API 和用法示例，拒绝盲目猜测。
  3. 源码引入与验证：使用 add 命令安装组件，安装后必须检查源码是否符合项目规范（如图标库是否一致、是否有缺失的子组件）。
  4. 遵循组合原则开发：
    • 布局：使用 flex + gap-* 代替 space-x/y-*。
    • 尺寸：宽高相等时使用 size-*（如 size-10）。
    • 颜色：严禁使用 bg-blue-500 等原始值，必须使用 bg-primary 等语义化 Token。
    • 结构：确保 SelectItem 在 SelectGroup 内，Dialog 必须包含 DialogTitle。
  5. 智能更新：使用 --dry-run 和 --diff 预览上游变更，人工分析差异后再决定是否覆盖或手动合并本地修改。

下载和安装

下载 shadcn 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐