这就是组件库要解决的问题。

组件库是一套预先设计好的 UI 零件集合。按钮、输入框、下拉菜单、对话框、表格……这些你在任何产品中都会反复用到的界面元素，组件库已经帮你做好了，而且经过了大量用户的验证和打磨。你只需要像搭积木一样把它们组合起来。

为什么需要组件库？

想象你在装修房子。你可以自己从木头开始做一把椅子，但更常见的做法是去宜家买一把——设计好看、质量稳定、说明书清晰，拿回家组装就行。

组件库就是前端开发中的「宜家」。对比自己手写和使用组件库：

自己手写 使用组件库
需要自己处理样式、交互、动画 开箱即用，样式和交互已经打磨好
不同页面的按钮可能长得不一样 全局风格统一，自动保持一致性
适配手机、平板需要额外工作 大多数组件库已内置响应式支持
无障碍访问容易遗漏 专业组件库已处理好键盘导航、屏幕阅读器
开发速度慢 开发速度快，专注业务逻辑

简单来说：组件库让你把时间花在「做什么」上，而不是「怎么画」上。

四个核心组件库

组件库数量众多，但你只需要先认识这四个最具代表性的：

Ant Design（React）

  • 蚂蚁集团出品，企业级中后台的事实标准
  • 组件覆盖面极广，表格、表单、图表开箱即用
  • 内置大量企业级交互模式（批量操作、高级筛选、数据导出）

shadcn/ui（React）

  • 不把组件当 npm 包安装，而是直接把代码复制到你的项目里
  • 基于 Tailwind CSS，定制自由度最高
  • 你可以随意修改任何组件的源码

HeroUI（React，原 NextUI）

  • 默认样式精美、动画流畅
  • 基于 Tailwind CSS + React Aria
  • 适合对视觉品质有要求的落地页和产品展示

Material UI（React）

  • 最老牌的 React 组件库，实现 Google Material Design 规范
  • 生态最成熟，组件最全面

Vue 用户同样有丰富选择：Element Plus（国内最流行）、Ant Design Vue、Naive UI 等。

场景一：用 HeroUI 构建产品落地页

场景：你做了一个 AI 写作助手，需要一个漂亮的落地页来展示产品特性、吸引用户注册。落地页需要视觉冲击力强、动画流畅、在手机上也好看。

提示词示例：

请帮我做一个 AI 写作助手的落地页，用 HeroUI 组件库来做：

页面结构：
1. 顶部导航栏：左边放 Logo 和产品名，右边放"功能"、"定价"、"关于"三个链接，再加一个"开始使用"按钮
2. 首屏区域：大标题写"让 AI 成为你的写作搭档"，副标题介绍产品价值，两个按钮"免费试用"和"查看演示"
3. 功能展示：三列卡片，分别介绍"智能续写"、"风格调整"、"多语言翻译"三个功能
4. 定价区域：三个定价卡片（免费版、专业版、团队版），专业版要突出显示推荐
5. 底部号召：一句吸引人的文案，加上注册按钮

设计要求：看起来要现代、专业，支持暗色模式，手机上看也要好看

AI 会用到的关键 HeroUI 组件：

  • Navbar —— 顶部导航栏
  • Button —— CTA 按钮、导航按钮
  • Card —— 功能展示、定价卡片
  • Chip —— 「推荐」「最受欢迎」标签
  • Divider —— 区域之间的视觉分隔

场景二：用 shadcn/ui 构建产品页面

场景：你的 AI 写作助手需要一个用户登录后的主界面——左侧是文档列表，右侧是编辑器，顶部有工具栏。这是一个功能型产品页面，需要高度定制化的 UI。

shadcn/ui 的独特之处：每次 add 一个组件，它会把源代码复制到你项目的 components/ui/ 目录下。你可以直接打开这些文件修改样式和行为。

# 初始化项目
npx create-next-app@latest ai-writer-app --typescript --tailwind --app
cd ai-writer-app
npx shadcn@latest init

# 按需添加组件
npx shadcn@latest add button card input sidebar sheet dialog

提示词示例：

请帮我做一个 AI 写作助手的主界面，用 shadcn/ui 组件库来做：

整体布局：
- 左边是可折叠的侧边栏（280px）：顶部放"新建文档"按钮，下面是文档列表，右键点击可重命名或删除
- 右边是主编辑区：上面是工具栏（编辑标题、字数统计、AI续写按钮、导出下拉菜单），下面是编辑区域

交互细节：
- 点击"AI 续写"后，按钮显示加载状态，编辑器底部出现 AI 生成的文本（打字机效果逐字显示）
- 手机上侧边栏变成抽屉式，从左边滑出
- 当前选中的文档要高亮显示

shadcn/ui 的优势在于你可以直接修改组件源码。比如你想让按钮的圆角更大：

请帮我修改 components/ui/button.tsx，
把所有按钮的默认圆角从 rounded-md 改为 rounded-xl，
并给 primary 变体加上微妙的阴影效果

AI 会直接修改你项目中的组件文件——这就是 shadcn/ui「拥有代码」的好处。

场景三：用 Ant Design 构建后台管理界面

场景：你的 AI 写作助手上线后，需要一个管理后台来查看用户数据、管理文档内容、处理付费订单。后台管理系统的核心是数据展示和操作效率。

为什么选 Ant Design：在中后台领域积累最深，ProTable、ProLayout 等高级组件让复杂表格和页面布局变得简单。

# 使用 Ant Design Pro 脚手架
npx create-umi@latest ai-writer-admin
# 选择 Ant Design Pro 模板

提示词示例：

请帮我做一个 AI 写作助手的管理后台，用 Ant Design 组件库来做：

整体布局：
- 左边是菜单栏：仪表盘、用户管理、文档管理、订单管理、系统设置
- 顶部显示面包屑导航

用户管理页面：
- 顶部四个统计卡片：总用户数、今日新增、活跃用户数、付费用户数
- 搜索筛选区：可以按用户名搜索、选择注册时间范围、筛选用户状态
- 用户表格：显示头像、用户名、邮箱、注册时间、订阅计划（不同颜色标签）、状态、操作
  - 每页显示 20 条，支持分页
  - 可以批量选择用户，批量禁用或导出
  - 操作列：查看详情、编辑、禁用（二次确认）
- 点击"查看详情"从右侧滑出抽屉，显示用户详细信息和最近文档列表

Ant Design 的高级组件：

  • ProLayout —— 后台整体布局框架
  • ProTable —— 高级表格，内置搜索、分页、列设置
  • StatisticCard —— 数据统计卡片
  • Drawer —— 侧边抽屉（用户详情）
  • Popconfirm —— 气泡确认框（删除、禁用等危险操作）

如何查文档

Vibe Coding 中 AI 会帮你写大部分代码，但当 AI 生成的结果不对、或者你想微调某个组件的行为时，查文档是最快的解决方式。

以 Ant Design 为例，查文档的标准流程：

  1. 明确需求：比如「我需要表格支持行选择」
  2. 在文档中搜索：搜索「Table」进入表格组件页面
  3. 查看示例：文档中每个组件都有多个在线示例，找到「可选择」示例
  4. 复制代码：把示例代码复制到你的项目中
  5. 查看 API 表格：在页面底部找到 rowSelection 属性的完整配置项

各组件库文档速查：

组件库 文档地址
Ant Design ant.design/components/overview-cn
shadcn/ui ui.shadcn.com/docs/components
HeroUI heroui.com/docs/components
Material UI mui.com/material-ui/all-components
Element Plus element-plus.org/zh-CN/component/overview.html

选择建议

场景 推荐组件库 核心特点
落地页 / 展示页 HeroUI 默认样式精美，动画流畅，视觉冲击力强
产品功能页面 shadcn/ui 代码完全可控，深度定制灵活
后台管理系统 Ant Design 业务组件丰富，表格表单开箱即用

Vibe Coding 的工作流总结：

  1. 根据场景选择合适的组件库
  2. 用 AI IDE 描述你想要的页面结构和交互
  3. AI 生成初版代码，你预览效果
  4. 用自然语言继续迭代调整
  5. 遇到细节问题时查阅组件库文档

组件库的价值不在于它提供了多少功能，而在于它让你能专注于真正重要的事情——构建产品的核心业务逻辑。