shadcn/ui
从一个表单，到一整套界面。
让 AI 按项目配置使用 shadcn/ui：先查组件文档，再搭建表单、后台与主题。组件源码留在你的项目里，可以继续修改和维护。
打开官方示例官方示例：侧栏、统计卡片与数据表。
查看图片出处这些是 shadcn/ui 官方组件示例，用来了解界面结构与风格。它们不是运行本页提示词得到的结果；你的页面会随需求和项目主题变化。
支持本地 Skill 的 AI 编程助手
- Codex
- Claude Code
- Cursor
- GitHub Star
- 126,761
- 版本
- 4.23.0
- 资料核对
- 分类
- 工程开发
第一次用，先做一个设置页。
带上字段清单，先把输入、报错和保存做完整。需要展示业务数据，再做后台页面；已有界面，选主题定制；组件改过源码，更新前先看差异。
选一个任务，开始使用
同一个 Skill，四种用法。选一个任务，安装后复制提示词，再按检查项验收。
从一个个人设置页开始，做完整的输入、校验和保存流程。
安装官方 shadcn Skill
在项目目录的终端执行，按提示选择 AI 客户端。若安装器列出多个技能，选择 shadcn。四个任务共用这个 Skill，安装一次即可。
查看作者安装说明npx skills add shadcn/ui项目还没有配置 shadcn/ui？
安装 Skill 只会给 AI 添加使用说明。项目还没有 components.json 时，先按所用框架初始化 shadcn/ui，再发送下面的任务；已配置的项目可直接继续。
查看项目初始化指南把这段话发给 AI
在已安装 Skill 的 AI 客户端中打开项目，附上材料再发送。下面是本站依据官方说明编写的任务示例，可按需修改。
请用 shadcn Skill 做一个个人设置页，包含显示名称、邮箱和邮件通知开关。我会提供字段要求和保存接口；没有接口时，请明确标注为本地演示。先读取项目配置，查阅组件文档，复用已有组件和主题，再补齐所需组件。实现输入校验、保存中、成功和失败反馈。完成后在浏览器检查键盘操作和手机布局，交付可运行的页面。
检查你拿到的结果
- 表单字段、默认值和通知开关符合需求，组件代码保存在项目中。
- 能检查输入错误、保存中、成功和失败状态；演示数据与真实保存有明确区分。
- 键盘能依次操作，标签与错误提示对应正确，手机上没有内容溢出。
进一步了解这个 Skill
shadcn/ui 提供可放进项目维护的组件源码，官方 shadcn Skill 则负责指导 AI 使用这些组件。它会读取项目框架、路径别名、已装组件和所用基础库，先查文档，再沿用项目的实际配置编写代码。
它的价值在组合和一致性：表单使用匹配的字段结构，弹窗保留标题与焦点行为，颜色使用项目的主题变量。Base UI、Radix 等基础库的接口有区别，应以项目配置为准。组件源码可直接修改，所需的依赖仍会通过包管理器安装。
除了搭页面，官方说明还覆盖组件检索、自建组件注册表、主题定制和更新差异检查。MCP 是查找与安装组件的另一种接入方式，是否配置可以按任务需要决定。
来源与核验
资料核对
已核对官方 Skill、安装文档与任务规则；示例图来自官方仓库。提示词由本站整理，尚未逐项实测生成结果。