开源模型

Cursor+21dev，低调的MCP 还是不得不火了

2025 年 3 月 12 日

探索MCP在AI万物互联时代的创新应用，发现Cursor和21st-dev如何让MCP火遍开发圈。核心内容： 1. MCP项目的起源和初期发展 2. Cursor和Winsurf支持MCP带来的便利性提升 3. 使用Cursor和21st-dev的MCP快速构建网站案例分析

我最开始说 MCP 是几个月前了，

当时出来的时候我就说它是最顶级的项目，它能让AI 正式进入万物互联的世界，写了几篇文章介绍它。

MCP

但是可能有点绕，加上当时 cline 部分只能用 Claude，所以没什么热度。

最近随着 Cursor 和 Winsurf 相继宣布支持 MCP，加上 cline 还建立了一个 MCP 市场不断的拱火，

MCP 的便利性又慢慢地给人发现了。

不管是大公司还是独立开发者的开源贡献，MCP 的种类数量在慢慢地呈曲线的增加。

今天我以一个网页的功能看大家看看结合了 Cursor 和 21st 的MCP有多好用。

工具：

Cursor，不多说代码 IDE

21st-dev的MCP：最近很火高级感的组件 UI设计网站

replicate 的 MCP：AI 画图

假设我要做一个猫猫的网站：

现在我什么都没有缺图片和缺组件代码，以前我们都需要在网上找 logo 找图片，而实际上我现在只需要在 Cursor +MCP就能完成所有的事情。

让它生成 5张猫咪的生活照片：

（generate-image 是 MCP 的一个工具，调用 Replicate的 API 直接把图片生成在本地的目录）

这个时候图片已经自动在目录生成了，然后让 Cursor 把路径直接改好一个网站的 ui 就成型了。

这里其实不用理会图片的质量，因为我用的只是 flux 最差 shchnell模型，后面随着内卷模型成本降低，API 价格一定会降低，到时候生成的成本会接近 0。

而让 Cursor +MCP生成图有两个好处：

- 能统一图片的风格

- 不用自己写提示词

现在缺一个logo，这里可以使用21st 的寻找 logo 功能：但目前放出的功能还没有很多库，所以还是用他的设计功能：

比如我看中了官网这里的波浪效果：

我只需在 Cursor 让它调用 MCP就能轻松模仿这种波浪的效果，（这里/ui 就是 21st 的一个快捷指令）同时我还能把鼠标的指针自定义换为猫头：

让我比较意外的是，我一开始生成的图片是不成功的，而Cursor 的 agent模式直接就能看出来不对，然后自动开始重新生成，后面把提示词换成英文之后就好了。

目前 21st 还在内测有更好用的实时预览的功能，可以去加入等待名单。

当然除了这两个 MCP 还有很多有价值的：

比如推理思考Sequential Thinking，让模型先完成多步思考再开始任务，

或者联网搜索Brave Search，可以联网搜索更好的提示词去完成作图等等。

怎么去导入呢，有个很简单的方法：

去这儿网站smithery.ai，选择想要的 mcp，直接复制指令到 Cursor，选择 commond 然后粘贴指令就行。

或者你嫌麻烦的话，Cline 还有一个 MCP 的市场，里面汇集了很多官方推出的MCP，直接一键点击就能自动安装。不过 API 调用不像 Cursor 或者 Winsurf 一样不用花钱。

希望今年能看见MCP 的生态高开高走，越来越好。

立即咨询 JOTO

JOTO 提供覆盖企业智能体规划与搭建、AI 平台私有化部署、RAG 知识工程、AI 安全治理、FDE 驻场共创及持续运营优化的全周期 AI 落地服务，帮助企业把验证中的 AI 能力转化为安全、可控、可持续迭代的生产力。联系 JOTO 获取 AI 落地咨询

留下你的场景和痛点,我们帮你判断从哪一步开始。