AI 时代如何更高效开发前端组件？21st.dev 给了一种答案

给大家推荐一个好东西：21st.dev ，大致上你可以将它理解为一个非常前卫的组件托管市场，特别之处在于：

1. 它参考 shadcn/ui 的设计理念提供了一种原子化的，Code Out 形式的依赖安装、管理模式；

2.并且更具有启发性的，它为每一个组件都提供了一套用于生成组件代码的 Prompt，用户可以借此在特定项目上下文中生成适配度更高的组件效果。

借助 21st.dev 与 cursor，我做了这样一个 demo：

这一切都是在 5min 内，不写一行代码的情况下实现的！

更值得称谓的是，21st.dev 的功能设计真正做到了 AI 友好，

能够很好地应用在各类 AI 工具中(cursor、v0.dev、bolt.new、cline 等等)，并且这套设计逻辑还非常适合复用到各种 TO-D 场景中，

21st.dev 是什么

21st.dev 是一个开源的 React UI 组件市场，专门为设计工程师和前端开发者提供高质量的 UI 组件。

它的灵感来自于 shadcn/ui，旨在帮助开发者快速构建精美的用户界面，尤其适用于 AI 产品的开发。

21st.dev 目前已经托管了海量开源组件，类型涵盖各种极具设计感(由官方审核)头像、dialog、按钮、日历，甚至完整 Page，应有尽有，

并且这些组件都经过 21st.dev 官方审核，质量上还是比较有保证的。

与 npm 等传统市场的主要差异点：

1. 21st.dev 偏向于一次性交付，安装后会把代码 clone 到本地，之后就算是跟市场本身脱钩了，这种方式缺点是无法持续跟进组件本身的迭代；

但好处则是这会大大减少版本概念带来的复杂性(《NPM 依赖管理的复杂性》)，

并且，代码被复制下来后，可按项目的具体上下文做任意调整，比较适合一些复杂度不是很高的代码复用场景；

2.21st.dev 提供了一些 AI 友好的交互，一是为每一个共享组件都设置了用于生成组件代码的 Prompt，

用户可直接复制粘贴到 LLM 工具中(推荐用 Cursor)，即可生成对应组件代码；其次，它还提供了 MCP 实现，用户可将之接入到各类支持 MCP 协议的工具中；

相对而言，21st.dev 的模式更匹配 AI 时代的用户习惯：Codeout、可定制、AI 可理解，因此它在海外也就迅速走红，Producthub 评分非常高。

怎么用

使用之前，建议先进入市场内(https://21st.dev/)看看有那些可用组件，整体质量很不错。

21st.dev 本质上是一个组件市场，提供了多种组件消费方式：

1. 使用 dlx 工具：进入 21st.dev ，选定组件，进入组件详情页后，直接复制右上角的 install component 命令，之后在项目目录中执行，即可生成对应代码；

1. 使用 Prompt：同样的，进入组件详情页后，点击 copy prompt 按钮，之后使用 cursor、cline 等工具，即可生成组件代码：

1. 使用 21st.dev MCP 服务：参考：https://github.com/21st-dev/magic-mcp 文档，配置 MCP 服务接口，

之后在 prompt 中使用 /ui 指令明确要求调用 21st.dev 生成组件(具体用法，下面有详细介绍)；

这里强烈推荐使用第三种：MCP 服务，这种方式相当于将 21st.dev 的组件知识外挂到 cursor 等 IDE，

之后这类 IDE 可根据实际场景中的上下文，自行规划实现路径，以及自行判定如何基于 21st.dev 提供的组件设计知识

(注意，这里是设计知识，而不是代码本身)实现用户需求。

如果你还不了解 MCP，可阅读科普文档：使用 MCP 扩展 Cursor 能力: https://ecn5ehmm9iou.feishu.cn/wiki/EyrOwRg5Cit5e8kKKjpcRe4cnuh

亮点：一键复制组件 Prompt

最让人惊喜的是，组件详情页提供了 Copy Prompt 按钮：

点击即可复制用于实现该组件的 Prompt，用户可将之粘贴到 Curosr 等工具中由 LLM 协助生成该组件的代码，例如用于实现 AI Chat 对话框的组件：

过去，我们在开源市场见到一些惊艳的组件，至少需要经过学习、demo、编码、调试之后才能复用起来，

但 21st.dev 提供的 prompt，真的就能实现一键复刻，即使你完全不读组件代码也不妨碍你的使用和微调，效率高出许多。

亮点：MCP 服务

其次，21st.dev 官方还提供了一套 MCP 服务 (https://github.com/21st-dev/magic-mcp)，可直接配置到各类支持 MCP 的工具中使用：

以 Cursor 为例：

1. 注册 21st.dev 服务，拿到 api key

2.在 cursor 中配置 MCP 服务：

注意几个点：

对应实现效果：

虽然颜色有点丑，但真的能在几分钟能完成初版内容，交互流程比 v0.dev、bolt.new 等工具都流畅许多，

并且所有代码都严格按照我仓库设置的 .cursorrules 规则生成，几乎没有调整成本。

一些启发

私有组件库的复用思路

试用下来，我觉得 21st.dev 的爆火并非偶然，它实在太适合 AI 时代了，

过往都是基于 package 粒度做组件共享，消费者需要阅读理解组件文档后，再嵌入到业务系统中使用，这会引发几个问题：

• 学习成本比较高，开发者需要花时间精力理解这些组件，分析组件质量(通过单测、源码等)；

• 组件代码与版本号绑定，一旦发布，消费者几乎没法修改，作者给了你啥，基本就得吃啥；

• Package 与子 package 之间的相互依赖关系非常复杂，非常容易出现版本管理问题；

而 21st.dev 这种源码共享方式，配合 AI 自动理解、生成、修改代码的能力，则很好解决了上述这些传统组件复用手段的学习成本、版本化与灵活性等方面的问题，

不仅仅大幅降低代码复用成本，还能针对具体场景(技术栈、需求等)自动做好调整适配，某种程度上这已经是一种新的范式：不是代码复用，而是设计逻辑复用了。

沿着这个解题思路，假设将 21st.dev 部署到私域，托管私有组件库，那么我们只需集中精力维护好核心组件的质量、性能、文档工程，

之后借助 21st.dev + cursor 就可以轻易完成私域场景中的业务组件复用、复刻、组装、功能开发等方面的任务，提升开发效率，这是一个非常值得探索的方向。

Prompt 优于代码

如果 21st.dev 只是提供了传统的组件托管、分发能力的话，那这只会是另一个俗套的 npm。

但它创新地为每一个组件都提供了一套有针对性的 prompt，并且进一步提供了集成 MCP 服务，这性质可就变了。

配合 AI 工具后，具体组件的代码(僵化，无法调整的知识)已经不是很重要，取而代之的是指导 AI 实现同类效果的思路(灵活，可调整的知识)，

AI 可以根据实现思路与具体上下文约束，更灵活调整出更适配的具体代码，算是从鱼到渔的转变了。

沿着这个思路，假设你正在开发一些 TO-D 类的产品，其实也可以考虑为每一个具体接口提供定制的 Prompt、功能描述以及集成 MCP 服务，

提供一套转为 AI 优化的知识面板，那么原本面向人类智能的交互，也就能够转换成面向 AI 的交互，

对人类而言学习成本、使用成本都会急剧降低，也就更容易推广。

因此，非常建议做 TO-D 工具的同学都往 AI 友好这个方向思考，包括但不限于：开源产品、Open API 类平台、私有组件库、私有代码库等。

基于 antd 的实践

这只是一个实例，但这种模式其实可以被复用到各种基于 md 的信息场景，

例如私有组件库，代码我已经整理好了：https://github.com/Tecvan-fe/vercel-ai-demo/blob/main/packages/mdc-mcp/package.json

基于上述启发，有没有可能在 antd 基础上配合 Cursor 与 MCP 协议实现代码自动生成效果呢？答案是必然的，并且成本并不高，需要做几件事情：

1.为基础组件梳理完善的使用文档，并且最好是基于 MDX 格式的，方便LLM 理解；

2.开发 MCP 服务，让 LLM 有机会理解 antd 所提供的能力细节，虽然我们也能通过 docs 等方式实现这一点，但出于扩展性与可维护性考虑，这里采用 MCP 方式；

1.可用的组件列表

2.每一个组件的使用方法

3.在 Cursor(其他工具同理) 中配置 MCP 服务；

4.写好 .cursorrules ，让 Cursor 知道我们的编码规范，按正确的规则生成代码；

这些动作，本质上就是把正确的、充足的信息，喂给 LLM ，让它理解私域知识，满足特定上下文下的开发需求(感谢 MCP)。

基于这套 MCP ，我试着做了一个简单页面：

• 原始页面效果：

• 初次实现效果：

• 初次生成代码：

从结果来说，还原度还是比较高的，并且也正确用了各种 antd 的各类组件。

虽然各种样式细节对不上，但我们可以继续要求 LLM 持续优化代码，不断逼近最终要求；

其次，初次生成的代码结构虽然比较粗糙，但也同样可以要求 LLM 持续优化直至符合技术规范。

重点在于，这是一个可持续迭代优化的过程，虽然结果上只能无限逼近理想状态，但也比纯粹靠人力从零开始开发、调优，要高效的多。

并且，假如未来我们进一步整理出更多可复用的基础业务组件，AI 的组件生成能力还可以进一步扩展，业务功能的开发成本还可以进一步降低。

接下来演示具体使用方法，以 Cursor 为例：

1. 配置 MCP 服务，类型是 Command，命令是 npx @tecvan-fe/mdc-mcp@alpha start，例如：

1. 在 Composer 中输入关键词 /ui 以及，你需要实现的效果，建议截图贴进去，例如：

1. 后续针对样式效果和代码结构继续提出优化需求，例如：

不过，真实开发场景是很复杂的，这套逻辑还只能生成静态代码，

后续还是需要继续开发数据交互、用户交互、调试、测试、上线、监控等方面的工作后续我会继续输出如何借助 Cursor 高效编码的更多内容。

问题

说完优点，不能免俗的还是得聊聊 21st.dev 的问题，我目前看到的：

• 底层基于 shadcn 实现，暂时无法脱离 react 技术栈，且从组件代码来看，还深度绑定了 nextjs，有点捆绑销售的意思；

• 好消息是，它为每一个组件都生成了 prompt，可以很方便复制到项目中，之后借助 cursor 等工具做深度优化；

不支持私有化托管，因此虽然能快速做出各种小产品的原型，但对大型项目并不友好；

• 21st.dev 目前仅提供纯前端类型的组件，并没有很好串联起前后端整套机制；

不过，即使如此，Cursor + 21st.dev 组合依然比传统开发方式要高效太多了，非常建议大家深入学习。

文章来自于微信公众号 “Tecvan”，作者 ：范文杰