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

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

它参考 shadcn/ui 的设计理念提供了一种原子化的，Code Out 形式的依赖安装、管理模式；
并且更具有启发性的，它为每一个组件都提供了一套用于生成组件代码的 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 等传统市场的主要差异点：

21st.dev 偏向于一次性交付，安装后会把代码 clone 到本地，之后就算是跟市场本身脱钩了，这种方式缺点是无法持续跟进组件本身的迭代；但好处则是这会大大减少版本概念带来的复杂性(《NPM 依赖管理的复杂性》)，并且，代码被复制下来后，可按项目的具体上下文做任意调整，比较适合一些复杂度不是很高的代码复用场景；
21st.dev 提供了一些 AI 友好的交互，一是为每一个共享组件都设置了用于生成组件代码的 Prompt，用户可直接复制粘贴到 LLM 工具中(推荐用 Cursor)，即可生成对应组件代码；其次，它还提供了 MCP 实现，用户可将之接入到各类支持 MCP 协议的工具中；

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

怎么用

使用之前，建议先进入市场内(21st.dev/)看看有那些可用组件，...%25E7%259C%258B%25E7%259C%258B%25E6%259C%2589%25E9%2582%25A3%25E4%25BA%259B%25E5%258F%25AF%25E7%2594%25A8%25E7%25BB%2584%25E4%25BB%25B6%25EF%25BC%258C%25E6%2595%25B4%25E4%25BD%2593%25E8%25B4%25A8%25E9%2587%258F%25E5%25BE%2588%25E4%25B8%258D%25E9%2594%2599%25E3%2580%2582 "https://21st.dev/)%E7%9C%8B%E7%9C%8B%E6%9C%89%E9%82%A3%E4%BA%9B%E5%8F%AF%E7%94%A8%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%95%B4%E4%BD%93%E8%B4%A8%E9%87%8F%E5%BE%88%E4%B8%8D%E9%94%99%E3%80%82")

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

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

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

使用 21st.dev MCP 服务 ：参考：github.com/21st-dev/ma... 文档，配置 MCP 服务接口，之后在 prompt 中使用 /ui 指令明确要求调用 21st.dev 生成组件(具体用法，下面有详细介绍)；

这里强烈推荐使用第三种：MCP 服务，这种方式相当于将 21st.dev 的组件知识外挂到 cursor 等 IDE，之后这类 IDE 可根据实际场景中的上下文，自行规划实现路径，以及自行判定如何基于 21st.dev 提供的组件设计知识(注意，这里是设计知识，而不是代码本身)实现用户需求。

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

亮点：一键复制组件 Prompt

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

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

过去，我们在开源市场见到一些惊艳的组件，至少需要经过学习、demo、编码、调试之后才能复用起来，但 21st.dev 提供的 prompt，真的就能实现一键复刻，即使你完全不读组件代码也不妨碍你的使用和微调，效率高出许多。

亮点：MCP 服务

其次，21st.dev 官方还提供了一套 MCP 服务 (github.com/21st-dev/ma...%25EF%25BC%258C%25E5%258F%25AF%25E7%259B%25B4%25E6%258E%25A5%25E9%2585%258D%25E7%25BD%25AE%25E5%2588%25B0%25E5%2590%2584%25E7%25B1%25BB%25E6%2594%25AF%25E6%258C%2581 "https://github.com/21st-dev/magic-mcp)%EF%BC%8C%E5%8F%AF%E7%9B%B4%E6%8E%A5%E9%85%8D%E7%BD%AE%E5%88%B0%E5%90%84%E7%B1%BB%E6%94%AF%E6%8C%81") MCP 的工具中使用：

以 Cursor 为例：

注册 21st.dev 服务，拿到 api key
在 cursor 中配置 MCP 服务：

注意几个点：

bash 复制代码

   Type 设置为 `command`

复制代码

      Command 中需要输入如下命令：

json 复制代码

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{"TWENTY_FIRST_API_KEY":"your-api-key"}"

配置完成，并且确认 MCP 服务状态正常可用后，使用 /ui 开头的 prompt 生成组件，例如：

对应实现效果：

虽然颜色有点丑，但真的能在几分钟能完成初版内容，交互流程比 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 的信息场景，例如私有组件库，代码我已经整理好了：github.com/Tecvan-fe/v...

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

为基础组件梳理完善的使用文档，并且最好是基于 MDX 格式的，方便LLM 理解；
开发 MCP 服务，让 LLM 有机会理解 antd 所提供的能力细节，虽然我们也能通过 docs 等方式实现这一点，但出于扩展性与可维护性考虑，这里采用 MCP 方式；
1. 可用的组件列表
2. 每一个组件的使用方法
在 Cursor(其他工具同理) 中配置 MCP 服务；
写好 .cursorrules ，让 Cursor 知道我们的编码规范，按正确的规则生成代码；

这些动作，本质上就是把正确的、充足的信息，喂给 LLM ，让它理解私域知识，满足特定上下文下的开发需求(感谢 MCP)。基于这套 MCP ，我试着做了一个简单页面：

原始页面效果：

初次实现效果：

初次生成代码：

从结果来说，还原度还是比较高的，并且也正确用了各种 antd 的各类组件。虽然各种样式细节对不上，但我们可以继续要求 LLM 持续优化代码，不断逼近最终要求；其次，初次生成的代码结构虽然比较粗糙，但也同样可以要求 LLM 持续优化直至符合技术规范。

重点在于，这是一个可持续迭代优化的过程，虽然结果上只能无限逼近理想状态，但也比纯粹靠人力从零开始开发、调优，要高效的多。并且，假如未来我们进一步整理出更多可复用的基础业务组件，AI 的组件生成能力还可以进一步扩展，业务功能的开发成本还可以进一步降低。

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

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

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

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

不过，真实开发场景是很复杂的，这套逻辑还只能生成静态代码，后续还是需要继续开发数据交互、用户交互、调试、测试、上线、监控等方面的工作后续我会继续输出如何借助 Cursor 高效编码的更多内容。

问题

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

底层基于 shadcn 实现，暂时无法脱离 react 技术栈，且从组件代码来看，还深度绑定了 nextjs，有点捆绑销售的意思；好消息是，它为每一个组件都生成了 prompt，可以很方便复制到项目中，之后借助 cursor 等工具做深度优化；
不支持私有化托管，因此虽然能快速做出各种小产品的原型，但对大型项目并不友好；
21st.dev 目前仅提供纯前端类型的组件，并没有很好串联起前后端整套机制；

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