超详细！AI Coding中组件库的接入技巧+保姆级指令案例！

一、全文速览图

当下 AI IDE 已经成为前端开发、物料搭建的核心工具，很多团队都开始用 AI 辅助组件调用和页面搭建，也有越来越多的同学会问我类似的问题：

“ 让 AI 调用组件有什么好的方法么？怎样做才能让 AI 用的更准确呢？”

本文就结合我在大厂工作中的实际项目经验，分享 AI Coding 时组件库接入的三种逻辑和方法，文中也提供具体的指令，供你复制后微调使用。

二、用 npm 包接入

npm 包相当于是 AI Coding 时真正能用到的“元素和材料”，主要的功能是让 AI 直接使用真实组件的代码，拿来即用。

你可能会质疑 npm 包的功能到底有多大，因为你也许也遇到过类似的场景：

为什么我没装 npm，只跟 AI 说让它用 AntD 的组件，AI 也能做出来 AntD 组件的风格搭建的页面呢？

答案是：你的页面只是看上去“像”而已，但视觉样式只是最表面的一层，组件背后还有很多逻辑：

❌ 当你没安装 AntD 组件的 npm 包，AI 写出了看起来像 AntD 组件风格的页面，其实是 AI 手写 CSS 和 HTML 代码来模仿 AntD 的组件设计样式，而不是真的在调用 AntD 的组件代码，页面只是看起来很像 AntD，但实际上和 AntD 的代码没有什么关系。

✅ 只有安装了 AntD 组件的 npm 包，AI 才能真的调用 AntD 组件的真实代码，写出来的页面也会自带完整的 AntD 的交互逻辑、无障碍支持、主题系统等等，代码也才更加真实有效。

所以如果你在做一个 Vibe Coding 项目，想要让 AI 使用自己团队的组件库来搭建页面，我很推荐你使用 npm 包来接入。你可以在项目开始时就对 AI 输入如下的 Prompt：

本项目是一个从零开始搭建的新项目，技术栈为 React + TypeScript + Tailwind CSS。
使用公司内部组件库 @组件库的名称，通过以下方式安装：
npm install @组件库的名称
组件使用规则：
- 所有组件优先从 @组件库的名称 引用，不要自己用 HTML/CSS 重新实现；
- import 方式：import { Button, Card, Form } from '组件库的名称'；
- 不要安装 antd、shadcn/ui 等其他组件库；
- 不确定某个组件 API 时，先告诉我组件名，我确认后再写代码；
- 项目初始化时，先运行 npm install @组件库的名称 再开始写组件；
- 如果遇到样式不生效，检查 @组件库的名称 是否需要在入口文件引入样式。

三、用 MCP 接入

MCP 相当于是给 AI 开放了一个“外部工具的连接接口”，让 AI 可以主动去查组件文档、看示例代码、确认 API 的有效期等等，最主要的功能是帮助 AI 及时更新组件信息、少用过时 API。如果不接入 MCP，AI 就只能靠记忆来生成组件代码，还有可能用过时的 API。

不过要注意，不是所有组件库都有 MCP 的接入渠道。因为 MCP 通常需要研发人员来维护，制作和管理的门槛比较高，所以组件库通过 MCP 接入 AI 工具的前提是该组件库有对应的 MCP Server。比如 Ant Design 就已经有了官方 MCP Server，可以直接部署和应用：

如果你的组件库已经由研发做好了 MCP Server 并已经完成了本地部署，在 Vibe Coding 时想要使用 MCP 的方式接入组件库，那在项目开始时就可以输入如下 Prompt：

本项目是一个从零开始搭建的新项目，技术栈为 React + TypeScript + Tailwind CSS。
使用公司内部组件库 @组件库的名称，已接入 @组件库的名称 MCP Server。
可用工具：
- @组件库的名称_search_component：搜索是否有某个组件；
- @组件库的名称_get_component：获取组件的详细文档和 Props；
- @组件库的名称_get_component_code：获取组件的示例代码；
- @组件库的名称_list_components：列出所有可用组件。
组件使用规则：
- 写任何组件前，必须先调用 @组件库的名称_get_component 获取文档，不得凭记忆写；
- 不确定有没有某个组件时，先调用 @组件库的名称_search_component；
- 严格按工具返回的 Props 写代码，没有的 prop 不要用；
- 项目初始化时，先调用 @组件库的名称_list_components，列出所有可用组件，再开始规划页面结构；
- 搭建第一个页面前，告诉我从 MCP 查到的组件清单，我来确认后再继续。

四、用 Skills 接入

Skills 相当于是给 AI 写的工作指导手册，它不提供代码，主要的功能是让 AI 每次都按同一套风格和流程来做事。比如规定 Ai：“不要做扁平化设计风格”，“输入框的设计效果要统一用紫色渐变描边”等等。

这些可以作为设计原则和规范，对 AI 创作和应用组件的行为进行约束。Skills 的制作和维护门槛很低，任何人（设计师、产品、前端）都可以根据自己或者项目的需要来做一个 Skill。

如果你已经完成了 Skill 的制作和安装，在 Vibe Coding 时想要使用 Skills 的方式接入组件库，那在项目开始时就可以输入如下的 Prompt：

本项目是一个从零开始搭建的新项目，技术栈为 React + TypeScript + Tailwind CSS。
使用公司内部组件库 @组件库的名称。
组件使用规则：
- 写任何组件前，先查阅 @组件库的名称，确认是否有可用组件；
- 严格按 @组件库的名称 中的 Props 定义和示例代码使用，不要推断不存在的 API；
- import 路径以 @组件库的名称 中的示例为准；
- @组件库的名称 没有的组件，告诉我，由我决定怎么处理，不要自行替换；
- 不要依赖训练数据里的 @组件库的名称 记忆，文档可能已更新；
- 项目初始化时，先根据 @组件库的名称 的安装说明完成组件库接入，再开始写页面。

这里我也要多说一句：如果你只是想要做视觉 Demo，那么模仿组件设计风格的 Skills 就完全够用；但如果你要做的是真正可以交付的前端产品（有完整交互、状态管理、表单验证等），那就最好使用前文说过的 npm 包。你也可以这么理解：

Skills：更适合让 AI “读懂” 设计规范。

是让 AI 理解你们的业务规范、命名规则、组件使用限制；给 AI 规定不能乱用哪个组件、什么情况用什么 token 等的行为规则；不需要工程环境，文档整理好就能用，且更新方便，直接改文档就行。

npm 包：更适合让 AI“直接用”设计组件。

是让 AI 在真实项目里直接调用组件的代码，AI 生成的代码可以直接跑，也可以直接被前端拿去合并，不需要大改，组件样式由代码库保证。

五、三者同时接入

以上对于 npm 包、Skills 和 MCP 三种方式的讲解会让你明白，虽然都是提供组件库接入 AI IDE 的功能，但三者的本质还是有一些区别的：

1. npm 包：侧重点在于项目运行时真正执行的组件代码；
2. Skills：侧重点在于静态上下文，快速了解组件库背景；
3. MCP：侧重点在于动态查询最新文档、Props 等更新信息。

因此它们之间并不存在冲突，叠加在一起使用也能够让组件库更加顺利地接入 AI Coding 项目。如果你想要同时使用三种方式，那在项目开始时就可以输入如下的 Prompt：

本项目是一个从零开始搭建的新项目，技术栈为 React + TypeScript + Tailwind CSS。
使用公司内部组件库 @组件库的名称， 三层接入方式已全部配置：
1. npm 包：组件运行时代码，通过 npm install @组件库的名称 安装
2. Skills 文档：已通过 @组件库的名称 注入，用于快速了解组件库背景信息
3. MCP Server：已接入，可动态查询最新文档
优先级：MCP 查询结果 > @组件库的名称文档 > 训练记忆。有冲突时以 MCP 为准。
可用 MCP 工具：
- @组件库的名称_list_components：列出所有可用组件
- @组件库的名称_search_component：搜索是否有某个组件
- @组件库的名称_get_component：获取组件详细文档和 Props
- @组件库的名称_get_component_code：获取组件示例代码
组件使用规则：
- 写任何组件前，先调用 @组件库的名称_get_component 获取最新文档
- 不确定有没有某个组件，先调用 @组件库的名称_search_component
- 严格按 MCP 返回的 Props 写代码，没有的 prop 不要用
- 工具返回 deprecated: true 时，换用 deprecatedReason 中的替代组件
- 项目初始化时先运行 npm install @组件库的名称， 再调用 @组件库的名称 获取组件清单

另外，如果你对于如何维护组件库有疑问，我也建议你短期内使用上手门槛最低的 Skills，等 Skills 质量稳定了，再让前端把业务组件库发成 npm 包，在 AI IDE 里以 npm 包的方式接入，生成的代码可以直接跑。

欢迎关注作者微信公众号：「长弓小子」