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

演示视频见：https://bytedance.larkoffice.com/minutes/obcn95t7sk49616ow721huv5?from=ai_minutes 核心代码已脱敏到：https://github.com/Tecvan-fe/vercel-ai-demo/tree/main/packages/mdc-mcp

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

1. 它参考 shadcn/ui(一个 unstyled components 框架)的设计理念，提供了一种原子化的、Code Out 形式的依赖安装与管理模式；
2. 更具启发性的是，它为每一个组件都提供了一套用于生成组件代码的 Prompt，用户可以借此在特定项目上下文中生成适配度更高的组件效果。

借助 21st.dev 与 Cursor，我做了一个 demo（演示视频）。这一切都是在 5 分钟内、不写一行代码的情况下实现的。更值得称道的是，21st.dev 的功能设计真正做到了 AI 友好，能很好地应用在各类 AI 工具中（Cursor、v0.dev、bolt.new、cline 等），并且这套设计逻辑还非常适合复用到各种 TO-D 场景中。

1. 21st.dev 是什么

21st.dev 是一个开源的 React UI 组件市场，专门为设计工程师和前端开发者提供高质量的 UI 组件。它的灵感来自 shadcn/ui，旨在帮助开发者快速构建精美的用户界面，尤其适用于 AI 产品的开发。21st.dev 目前已经托管了海量开源组件，类型涵盖各种极具设计感（由官方审核）的头像、dialog、按钮、日历，甚至完整 Page，应有尽有，且都经过官方审核，质量比较有保证。

与 npm 等市场相比，主要差异点有两个：

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

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

2. 怎么用

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

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

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

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

使用 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 能力》。

3. 亮点：一键复制组件 Prompt

最让人惊喜的是，组件详情页提供了 Copy Prompt 按钮。点击即可复制用于实现该组件的 Prompt，用户可将之粘贴到 Cursor 等工具中，由 LLM 协助生成该组件的代码。例如用于实现 AI Chat 对话框的组件：

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

4. 亮点：MCP 服务

其次，21st.dev 官方还提供了一套 MCP 服务，可直接配置到各类支持 MCP 的工具中使用：

以 Cursor 为例：

1. 注册 21st.dev 服务，拿到 api key；
2. 在 Cursor 中配置 MCP 服务：

配置时注意两点：Type 设置为 command；Command 中输入如下命令：

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

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

对应的实现效果：

虽然颜色有点丑，但真的能在几分钟内完成初版内容，交互流程比 v0.dev、bolt.new 等工具都流畅许多，并且所有代码都严格按照我仓库设置的 .cursorrules 规则生成，几乎没有调整成本。

5. 一些启发

5.1 私有组件库的复用思路

试用下来，我觉得 21st.dev 的爆火并非偶然，它实在太适合 AI 时代了。过往都是基于 package 粒度做组件共享，消费者需要阅读理解组件文档后，再嵌入业务系统中使用，这会引发几个问题：

• 学习成本比较高，开发者需要花时间精力理解这些组件、分析组件质量（通过单测、源码等）；
• 组件代码与版本号绑定，一旦发布，消费者几乎没法修改，作者给了你啥，基本就得吃啥；
• Package 与子 package 之间的相互依赖关系非常复杂，非常容易出现版本管理问题。

而 21st.dev 这种源码共享方式，配合 AI 自动理解、生成、修改代码的能力，很好地解决了上述这些复用手段在学习成本、版本化与灵活性方面的问题。它不仅大幅降低代码复用成本，还能针对具体场景（技术栈、需求等）自动做好调整适配。某种程度上，这已经是一种新的范式：不是代码复用，而是设计逻辑复用了。

沿着这个思路，假设将 21st.dev 部署到私域、托管私有组件库，那么我们只需集中精力维护好核心组件的质量、性能与文档工程，之后借助 21st.dev + Cursor 就可以轻易完成私域场景中的业务组件复用、复刻、组装、功能开发等任务，提升开发效率。这是一个非常值得探索的方向。

5.2 Prompt 优于代码

如果 21st.dev 只是提供了组件托管、分发能力，那它只会是另一个俗套的 npm。但它创新地为每一个组件都提供了一套有针对性的 Prompt，并进一步集成了 MCP 服务，性质就变了。配合 AI 工具后，具体组件的代码（僵化、无法调整的知识）已经不那么重要，取而代之的是指导 AI 实现同类效果的思路（灵活、可调整的知识）——AI 可以根据实现思路与具体上下文约束，更灵活地调整出更适配的代码，算是从鱼到渔的转变。

沿着这个思路，假设你正在开发一些 TO-D 类的产品，其实也可以为每一个具体接口提供定制的 Prompt、功能描述以及集成 MCP 服务，提供一套为 AI 优化的知识面板。那么原本面向人类智能的交互，就能转换成面向 AI 的交互，对人类而言学习成本、使用成本都会急剧降低，也就更容易推广。

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

例如，最近 Coze 团队开源的 flowgram.ai 是不是也能这么做——提供一些一键复制的 Prompt，就能在本地跑起来、用起来？

6. Coze Monorepo 中的实践

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

1. 为基础组件梳理完善的使用文档，最好是基于 MDX 格式，方便 LLM 理解。这件事我们在季度初就启动了，目前已经比较完整：Coze Design 文档站；
2. 开发 MCP 服务（参考《使用 MCP 扩展 Cursor 能力》），让 LLM 有机会理解 Coze Design 提供的能力细节。虽然也能通过 docs 等方式实现，但出于扩展性与可维护性考虑，这里采用 MCP 方式，让它暴露可用的组件列表，以及每个组件的使用方法；
3. 在 Cursor（其他工具同理）中配置 MCP 服务；
4. 写好 .cursorrules，让 Cursor 知道我们的编码规范，按正确的规则生成代码。

这些动作，本质上就是把正确、充足的信息喂给 LLM，让它理解私域知识，满足特定上下文下的开发需求。为此我们提交了两个 MR：

• 以 MDX 方式梳理 Coze Design 组件库的知识（MR），这一步大部分工作都是 LLM 完成的；
• 开发 MCP 服务、配置 rules 规则等（代码，求顺便来个 star），大部分工作也是 LLM 完成的：

基于这套 MCP，我试着做了一个简单页面。从原始设计到初次生成的效果与代码如下：

原始页面效果：

初次实现效果：

初次生成代码：

从结果看，还原度比较高，也正确用上了各种 Coze Design 的私有组件。虽然样式细节对不上，但可以继续要求 LLM 持续优化代码，不断逼近目标；初次生成的代码结构虽然粗糙，同样可以要求 LLM 持续优化直至符合技术规范。

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

后续代码合入主干后，在 Coze Monorepo 开发的同学就可以用上这个功能。以 Cursor 为例：

1. 配置 MCP 服务，类型是 Command，命令是 npx @flow-infra/coze-design-mcp@latest start：

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

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

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

7. 问题

说完优点，也得聊聊 21st.dev 目前的问题：

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

即便如此，Cursor + 21st.dev 的组合依然比人工主导的开发方式高效太多，非常建议大家深入学习。