10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
关于我 留言板 小程序 标签云

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
当前位置: 首页 » AI编程开发

用好这几款 MCP 工具,让你的Ai编程体验直接起飞(附用法)

5小时前 AI编程开发 42 0

用好这几款 MCP 工具,让你的Ai编程体验直接起飞(附用法)

前段时间我在用 Cursor 写一个 Next.js 项目,做到后半夜 11 点还在手动复制 SQL 表结构、满世界搜索报错信息。作为一个产品经理,我对前端框架水平以及语法的理解大部分都靠“现查现用”。

那段时间,我几乎每天都在和 AI 助手反复拉扯:不是吐出旧的 React Hooks 写法,就是胡乱生成不靠谱的代码,气到差点摔电脑。

直到我看到大佬们分享的MCP工具,一个个实践下来,真的改观不少!这些工具就像是给 Cursor 装上了“外挂”:不光能解决上下文错乱、文档过时、调试混乱这些问题,还能自动生成 UI、拆解开发任务、查 API 数据,堪称全栈开发必备神器。

今天我就把我用 Cursor 时搭配过的几款 MCP 工具用法分享出来,而且有几个还是Cursor 官方推荐的,可以一键添加到Cursor 。

1. Context 7 MCP

有没有遇到这种情况:你问 AI 一个框架怎么用,它却回你几年前的老写法?比如你刚上手 Next.js 14,它还在让你用 getServerSideProps,这不纯添堵嘛。

Context 7 的核心思路是把最新的框架文档“接”到你的 AI 编程助手上。比如你要用 Next.js 的 App Router,它会自动去查官方文档,然后告诉你:

export default function Profile() {
return <h1>Your Profile</h1>;
}

非常精准、非常快,还能节省 token。自从用上它,AI 简直像打了鸡血,生成代码又新又靠谱。

推荐给:经常接触新框架(Next.js、SvelteKit)的前端开发者。

点击添加到Cursor

2. Supabase MCP

我以前调试 SQL 表结构的时候,字段名写错、类型写错、字符串长度写错是家常便饭。痛苦的不是写 SQL,而是改 SQL!

Supabase MCP 能把你的 Cursor 和 Supabase 数据库打通,最关键的是:你可以用自然语言来控制它。

比如我只要在对话框里说:

“创建一个包含 name 和 email 的 users 表”

它就自动帮我创建,SQL 都不用写,连字段类型都帮你想好了。而且还支持同步 schema,修改逻辑结构也不怕错。

推荐给:不想再写 SQL 的后端 / 全栈开发者。

Github地址:https://github.com/supabase-community/supabase-mcp

3. Browserbase MCP

你是不是调试报错的时候要开 27 个标签页 Google 各种 Stack Overflow?我以前常这样,浏览器窗口常年爆满。

Browser MCP 直接把“网页搜索”集成进了 AI 编程助手里。你只要说:

“ReferenceError: fetch is not defined 是什么问题?”

它会自己查 Node.js 文档,然后告诉你:

import fetch from 'node-fetch';

不需要跳出 IDE,不需要切窗口,信息就在你面前。

推荐给:调试频繁、查文档高频的开发者。

点击添加到Cursor

4. Claude Taskmaster

你是不是有很多 App 点子,但总是不知道从哪一步开始动手?

Claude Taskmaster 是一个能帮你把“想法堆”变成“任务清单”的 AI 助手。比如我说:

“我要做一个支持登录和暗黑模式的 Todo 应用”

它立马分解成一个结构清晰的开发计划,包括接入 Supabase、创建表结构、添加主题切换等。

对我这种身兼数职的独立开发者来说,这就像是请了个不加班、不催活的项目经理。

推荐给:个人开发者 / 1 人公司老板。

Github地址:https://github.com/eyaltoledano/claude-task-master

5. Exa MCP

AI 有时候最让人抓狂的地方,就是它一本正经地胡说八道。尤其是问一些数据问题,它特别爱瞎猜。

Exa MCP 是一个实时联网的“事实查证”插件。比如你问:

“Tailwind CSS 每周下载量是多少?”

它不会编,而是会去查 npm 和 GitHub,给你一个准确数据,比如:

“截至 2025 年 5 月,Tailwind 每周下载量为 1000 万。”

推荐给:做竞品分析、调 API、查趋势数据的开发者。

Github地址:https://github.com/exa-labs/exa-mcp-server

6. Knowledge Graph Memory

如果你经常做类似的项目,比如重复加深色模式、登录功能,其实完全可以让 AI 记住你的“逻辑片段”。

我之前在一个项目里做过暗黑模式,后来只要我说“加个暗黑模式”,它就能自动复用之前的逻辑样式:

/* 暗黑模式样式 */
:root {
--bg: #fff;
--text: #000;
}
.dark {
--bg: #000;
--text: #fff;
}

真正意义上的一次写好、十次复用。

推荐给:喜欢构建自己的组件/功能库的开发者。

Github地址:https://github.com/shaneholloman/mcp-knowledge-graph

7. Magic MCP

我对 UI 设计非常苦手,尤其是那种“登录按钮一看就很丑”的情况,几乎是常态。

Magic MCP 是一个会写前端 UI 的 AI 设计师。比如你说:

“给我一个现代风格的 Tailwind 登录按钮”

它就会生成下面这种按钮,颜值直接在线:

<button class="bg-blue-600 hover:bg-blue-800 text-white font-semibold py-2 px-6 rounded-lg">
Sign In
</button>

再也不用苦苦调颜色、改样式了。

推荐给:想要颜值又不想深耕设计的开发者。

Github地址:https://github.com/21st-dev/magic-mcp

总结

这几款 MCP 工具的核心价值,说白了就是三点:

  • 知识精准(Context 7、Exa):不再瞎猜、不再用老代码。

  • 开发协作(Claude Taskmaster、Knowledge Memory):能拆任务、能记历史。

  • 工具集成(Supabase、Browser、Magic):能写数据库、查资料、做 UI。

如果你是深度使用 Cursor 的开发者,强烈建议挑 1~2 个试试,把这些 MCP 工具整合进你的日常开发流中,开发体验真的不一样了。

AI 本来就是帮你加速的工具,如果你已经用 Cursor 上手了,这些 MCP 工具,会像是在你的“Cursor 飞船”上再加一枚“助推火箭”——速度、效率、准确度,全都往上涨。

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
未经允许不得转载:用好这几款 MCP 工具,让你的Ai编程体验直接起飞(附用法)
#MCP #MCP工具 #Cursor 
收藏 1
Claude Code入门篇:Claude Code 新手入门介绍与使用教程
别再写烂Prompt了!掌握这3个核心技巧,AI编程效率暴涨10倍
推荐阅读
  • .cursorrules废弃.mdc文档该如何写?深度解析新版CursorRules文件特性,结合Google Gemini 2.5 Pro轻松搞定mdc
  • Claude Code完成最后一块拼图,Claude Code支持远程 MCP 服务器,距离干翻Cursor仅一步之遥!
  • 深度解析Cursor 0.5版本的 @folders 命令:提升代码开发效率的必备技能
  • 手把手教你用支付宝订阅 Cursor Pro:国内用户最全开通教程(附取消自动扣费)
  • Cursor 提示词技巧:这三个核心要素,让你的开发效率翻倍!
评论 (0)
请登录后发表评论
分类精选
Cursor 0.46更新,新增支持Claude 3.7 + GPT 4.5,Cursor Pro 无限续杯攻略,全自动化工具使用说明
9129 4月前
学生党0元白嫖!手把手教你解锁Cursor Pro年VIP,超详细申请教程(附避坑指南)
8076 2月前
Cursor代码生成器中文使用教程,Cursor新手入门完全指南,全网最全面详细的Cursor使用教程
7136 6月前
深入解析Cursor的安全性与功能:官方安全文档中披露的代码检索逻辑
4610 6月前
手把手教你上手Cursor安装使用,搭配神级Prompt(Thinking Claude),零基础实战开发谷歌插件小游戏
3398 7月前
用 Cursor 搭配 Context7,让 AI 自动看文档、写对代码的神级MCP插件
3082 1月前
手把手教你用支付宝订阅 Cursor Pro:国内用户最全开通教程(附取消自动扣费)
3004 3周前
Cursor新手3分钟快速搞懂 Ask/Manual/Agent 三种模式及高级技巧
2989 2月前
Cursor 0.47.x更新必看:新增rules、mcp、auto model、主题等,附Cursor免费攻略合集,GitHub开源项目方案大全
2712 3月前
Cursor 0.47 更新Claude 3.7 的 Max 模式,支持长达 200k 上下文,这钱花的值不值
2324 3月前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 用好这几款 MCP 工具,让你的Ai编程体验直接起飞(附用法)
2 Claude Code入门篇:Claude Code 新手入门介绍与使用教程
3 Claude Code 官方已支持Windows系统!手把手教你免费安装使用Claude Code
4 手把手教你在Claude Code 中使用Kimi K2 模型,超简单配置教程分享
5 手把手教你在VS Code & Cline/RooCode 中使用Kimi K2 模型,配置实录+开发实战体验
6 手把手教你在国内免代理使用Claude Code镜像安装,零门槛免费薅100刀
7 Cursor Auto Helper:让Cursor自动开发项目、实时显示用量对话自动继续、断连重试等
8 Cursor 1.2 版本抢先看:新增Agent To-dos、消息队列、PR搜索、Tab补全提速!
9 MCP数据库实战:用Cherry Studio+MCP轻松访问本地数据库,让AI秒变数据库专家
10 高手都在用的神级Cursor Rule:RIPER-5模式可以大大提升 Claude 的性能
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
程序库 免费影视APP 花式玩客 免费字体下载 产品经理导航 Axure RP 10 免费Axure模板 Axure原型设计 Axure元件库下载 申请友联