最近我把MCP正式接入了日常开发用的AI编辑器Figma、数据库、浏览器分别配好之后最大的感受是以前靠人肉搬运的“设计稿切图、对着Navicat翻表、开着Chrome人工验证”这些事现在都可以在编辑器的对话框里直接下指令完成。不少人把MCP叫作“给AI编辑器外挂”这个说法不算错但它更像一套标准插座——插上哪个工具AI就获得哪方面的感觉和手脚。这篇文章我不打算讲太深奥的协议原理就从三条最值得先打通的链路讲起Figma、数据库、浏览器。每个场景我都会给出具体的配置方法、使用过程、踩过的坑和最终判断适合正在用Cursor、Claude Code、Codex这类AI编程工具的开发者参考。1. MCP不是外挂是给AI编辑器装上“眼睛”和“手”1.1 先从“AI只能聊天”这个痛点说起我用AI写代码的时间不短但很长一段时间里保持着同一个别扭的状态AI能理解我贴进去的代码能生成修复建议可一旦遇到“帮我看看这个接口返回了什么结构”“把Figma里这个页面的配色提出来”这种需求它就完全无能为力。原因很简单——AI编辑器本身只有聊天的上下文和改代码的能力它看不到编辑器外面的世界。MCPModel Context Protocol模型上下文协议解决的正是这个问题。它把外部工具的能力抽象成标准接口AI应用通过这个协议去调用Figma、数据库、浏览器甚至内部API。打个比方MCP就像USB-C接口标准你的电脑没有USB-C口时显示器、U盘、扩展坞得各接各的线有了统一标准以后谁支持这个口插上就能用。AI编辑器是那台电脑MCP Server就是那些支持USB-C的外设。1.2 MCP的架构逻辑三端如何协作MCP整个体系分三块MCP HostAI应用本身比如Claude Code、Cursor、Codex这类编程代理以及Claude Desktop这类聊天产品。MCP Server提供工具的进程它可以是一个本地Node脚本也可以是远程HTTP服务。这个进程负责把外部能力暴露给Host。MCP Client通常在Host内部负责和Server建立连接、发送请求、接收工具调用结果。整个协作过程非常简单粗暴AI在对话里判断“需要调用某个工具”Host通过MCP Client发一个tools/call请求Server执行后把结果返回给AI。AI拿到结果再继续回答或生成内容。整个过程对用户是透明的你在编辑器里发一句话背后可能已经完成了一次数据库查询或一个浏览器页面访问。1.3 三大原语tools、resources、promptsMCP协议里定义了三种核心原语刚开始用容易混我用一句话分别概括Tools可调用的动作比如“查询数据库”“打开网页”“读取Figma文件”这是最常用的能力相当于给AI装了手。Resources可读取的数据比如一个文件内容、一张表结构、一段文档AI可以把它们当作上下文来引用相当于给AI装了眼睛。Prompts可复用的提示模板比如“生成一份SQL报表”这类固定流程减少重复描述。实操中我们最常接触的是Tools。配置一个MCP Server本质就是告诉AI“这个进程能提供哪些具体的工具”AI会通过tools/list拉取所有工具清单再决定什么时候调用。所以配置完MCP后你经常能在聊天窗口看到它列出的一长串工具名——这就是AI在“认识”它的新设备。2. 先啃硬骨头Figma到代码的“直读图层”改造2.1 设计稿到开发之间的断链问题做前端开发的都知道拿到Figma设计稿之后最耗时间的不是写代码而是“翻译”的过程看设计稿里这个标题字号是多少、按钮圆角多少、间距多少然后再对着图层一个个量坐标手写在代码里。传统做法是装个Figma汉化插件辅助理解界面再用标注工具导出但本质还是人肉搬运。接Figma MCP以后这个链路被压缩成了对话。AI可以直接读设计稿的图层结构、组件属性、文本样式甚至导出SVG然后基于这些信息生成或修改代码。它不是在“看截图”而是真的在读结构化的设计数据。我第一次让AI根据Figma里的页面生成React组件时它直接把间距、颜色、字体大小都排对了那种感觉确实像给编辑器开了眼。2.2 Figma Developer MCP配置过程Figma官方提供了一套MCP实现叫Figma Developer MCP我们直接用它。重点先说配置前置条件你需要一个Figma账号并且在Figma的Settings → Security → Personal access tokens里创建一个访问令牌token。如果你在团队里也可以用服务账号但个人token做技术验证足够了。拿到token后配置分两步。第一步在终端单独跑一下Server确认能正常启动npx figma-developer-mcp --stdio --figma-api-key你的Figma_TOKEN看到类似“MCP server running on stdio”的输出就说明工具本身没问题。第二步把这个命令注册到你使用的AI编辑器里。以Claude Code为例项目根目录执行claude mcp add figma -- npx -y figma-developer-mcp --stdio --figma-api-key你的Figma_TOKEN如果你用的是Cursor或Codex是在各自的MCP配置页面/配置文件里加上同样的command、args和env。不同编辑器的写法略有差别但核心参数就是这三样。配置完成后重启编辑器AI就能看到Figma相关工具了。2.3 Codex接Figma时的授权注意事项这里单独说一下Codex接入Figma MCP的授权问题因为平时问的人最多。Codex配置MCP时不是直接配stdio就行它更习惯接HTTP/SSE端点的服务。如果你的Codex无法找到MCP大概率是给了它stdio命令但它没把进程拉起来。我实测的稳妥做法是先用命令行直接启动一个Figma MCP的SSE服务比如通过npx figma-developer-mcp --sse --port 8000然后在Codex的MCP配置里填http://localhost:8000/sse这样的端点地址。这样Codex启动时会主动去连接这个地址授权校验也在Figma侧完成了AI这边不需要额外的账号登录。这个过程中最容易翻车的点是token权限和文件权限。Figma token默认不带任何文件访问权限你在创建token时如果没勾选对应的file content权限AI调用工具时会直接报403或“file not found”。我建议创建token时直接勾选“File content”和“File metadata”两类权限后面省很多事。2.4 实测让AI读图层结构配好之后我常用的一个指令是“读取这个Figma文件的页面结构列出所有frame和关键组件的层级关系”。AI会请求工具返回整个设计稿的树状结构。接着我会让它“提取导航栏部分的样式变量”AI就能把背景色、字体、间距这些值直接整理成CSS变量。这里有个实际使用的提醒Figma MCP返回的数据往往很庞大一个复杂页面可能几千个节点AI处理时容易截断上下文。技巧是先让它列大纲再按模块精确读取不要一次塞太多。另外涉及设计稿版权或保密内容时不要轻易把整个文件丢给AI尽量只开放你需要的框架或分词后的文件。3. 数据库查询智能化让AI跑“只读”业务库3.1 从“查表”到“问数”接数据库MCP之前我日常有两个很烦的重复动作一是写代码时忘了表字段名打开数据库管理工具看一遍结构二是排查问题时想查一条业务数据得手写SQL然后在工具里执行。用MCP把MySQL或SQLite接进来之后这些都可以直接在编辑器里完成。你可以直接说“看下orders表里最近7天订单量按日的分布”AI自己会去查表结构、拼SQL、执行查询、把结果整理成文字或表格。你还能让它“把这几个查询结果做成一个Python分析脚本”数据和代码链路直接打通。3.2 数据库MCP Server选型数据库MCP Server的选型我的建议是按规模和类型分SQLite直接用官方参考实现modelcontextprotocol/server-sqlite启动命令是npx -y modelcontextprotocol/server-sqlite --db 你的数据库文件路径。SQLite本地文件是最容易接入的零依赖适合技术验证和小项目。MySQL/PostgreSQL社区里有很多成熟实现用法基本一致——给Server一个数据库连接字符串启动后工具里就会暴露query、list_tables、describe_table这类操作。如果你用的是MySQL一般需要填mysql://用户:密码主机:端口/数据库名格式的URI。内部管理平台类工具比如你平时喜欢用dbx这类图形化的数据库管理工具MCP的意义不是替代它而是把“查看数据”和“围绕数据继续写代码”这两件发生在不同界面里的事合并到同一条工作流里。图形工具留着给人做复杂操作MCP给AI走自动化路径。配置到编辑器时我建议直接在MCP Server的环境变量里设连接字符串而不是跟着命令写在参数里这样日志里不太容易泄露密码。下面是一段Claude Code的配置示例claude mcp add db -- npx -y mcp-server-mysql mysql://只读账号:密码localhost:3306/你的库名3.3 权限控制只读账号是底线接数据库MCP最容易踩的大坑就是我一开始图省事用了有写权限的账号。AI确实很强但它只按你的指令和它的理解走当你说“把这条数据的status改成1”时它真的会执行。更隐蔽的风险是AI自动生成的SQL可能出现全表扫描比如让它统计某张表时它直接SELECT *几百万行回来直接把连接拖死。我的做法是三条铁律MCP只连只读账号一个能查information_schema但不能INSERT/UPDATE/DELETE的数据库用户最合适。连接默认指向开发环境或本地库生产库无论如何不接进AI编辑器。如果确实有生产查数需求走跳板机或数据脱敏后的副本。在工具的prompt或系统提示里明确“所有查询默认加LIMIT 200”减少AI写全表查询的概率。3.4 踩坑记录AI写SQL不是万能的说一个我真实的翻车经历。有天我问AI“查一下用户表里字段的含义”它直接对一个无索引的日志表做了全表扫描数据库卡了快一分钟。问题不是AI不会写SQL而是它上下文里没有表和索引信息生成了低效查询。加了EXPLAIN在前置提示词里以及明确禁止无WHERE条件的查询之后情况改善了很多。还有个小坑是表结构变更。AI会缓存它查过的表结构如果你在数据库里改了字段名但没重新触发“查看表结构”的动作它可能还在按旧字段写SQL报错后才会更新。所以每次数据库有结构变更我会习惯性让AI“重新读取该表结构”。4. 浏览器自动化Playwright MCP和Browser Use MCP到底选谁4.1 浏览器为什么要接MCP编辑器接浏览器最常见的理由有四个验证前端页面效果、跑端到端测试、抓取表单信息、排查线上页面问题。以前这些要么人肉操作要么写一套独立脚本。MCP接入以后AI可以自己打开浏览器、点击按钮、填写输入框、截图反馈结果全程在对话流里闭环。4.2 Playwright MCP稳定、直接的浏览器控制Playwright官方MCP是目前最稳的浏览器方案它的核心命令就一行npx playwright/mcplatest默认是headless模式也就是无界面运行。想要可视化地看AI操作浏览器加一个--headed参数。我非常推荐在开发时使用--headed因为你能直观看到AI每一步在干什么它打开页面、点击元素、输入文字的过程都像有一个实习生在帮你操作电脑。另外保留浏览器登录状态也是个实用技巧。Playwright MCP支持--user-data-dir指定一个独立的浏览器配置文件你可以先手动登录一次目标站点后续AI启动浏览器时就会带上这些登录态省去每次重新登录。把它注册到编辑器后我日常会用类似这样的对话“打开localhost:3000的首页点击登录按钮截图给我看看弹出的表单”。AI会依次执行打开浏览器、访问URL、点击选择器、截图然后把截图路径返回给我。这个流程验证UI改动效率极高。4.3 Browser Use MCP多了一层“AI视觉”Browser Use MCP是另一个热门方案它的思路和Playwright不太一样。它除了调用Playwright之类的底层浏览器控制能力还接了一个视觉语言模型让AI能“看”到网页截图结合任务目标自己规划下一步操作。这就让定位元素的方式从“按选择器找”变成了“看屏幕找”容错率更高。启动Browser Use MCP通常需要配一个LLM的API key比如OPENAI_API_KEY你的key uvx mcp-server-browser-use用起来的感觉是你给它一个目标比如“搜索这个关键词并把第一页结果整理成列表”它自己判断该去哪里点击、怎么翻页。而Playwright MCP更像一把精确的手术刀你让它点哪个按钮它就点哪个没有太多自主规划。4.4 两者对比与我的选型建议我把两个方案的差异整理成一张简表方便你按场景选对比维度Playwright MCPBrowser Use MCP元素定位方式基于DOM选择器精确可控结合视觉截图模糊容错底层依赖Playwright相对轻量需要LLM API key成本更高自主规划能力低按指令执行高能拆解复杂任务稳定性高网络波动影响小受视觉模型输出影响较大适合场景点按钮、填表单、截图验证跨页面调研、数据抓取类任务我个人现在主力用的是Playwright MCP原因是开发场景里我需要对操作过程有绝对控制不希望AI“自由发挥”。当遇到“根据页面内容做多步探索”的任务时再切到Browser Use MCP。如果你刚入门建议从Playwright MCP开始先把“AI能操控浏览器”这件事跑通再考虑让它变得更聪明。浏览器MCP用起来特别容易上头但有一个边界必须守住任何自动化操作应该限定在自己的项目、本地站点或明确允许自动化的测试环境里。拿MCP批量访问别人的站点做数据抓取既不稳定也不合规。5. MCP接入的通用配置与排错清单我踩过的所有坑5.1 一份标准的MCP Server配置长什么样不同编辑器的MCP配置入口不同但最终落到文档里都长这样{ mcpServers: { figma: { command: npx, args: [-y, figma-developer-mcp, --stdio], env: { FIGMA_API_KEY: 你的token } }, sqlite: { command: npx, args: [-y, modelcontextprotocol/server-sqlite, --db, ./dev.db] } } }关键就三个字段command是启动方式、args是传给Server的所有参数、env是需要的环境变量。只要理解了这条JSON结构不管在Cursor、Claude Code还是Codex里配置你都能把它迁过去。5.2 起不来的常见原因和完整排查链路MCP接入失败80%的情况是Server在启动阶段就挂了AI根本连接不上。如果你遇到“MCP connected失败”或工具列表为空按下面这条链路排查先在终端手动跑一遍command和args组成的完整命令看能不能正常启动、有没有报错。这一步能排除80%的环境问题。确认你的Node版本。很多MCP Server要求Node 18以上低版本启动直接报语法错误。用node -v看一眼不行就升级。检查环境变量。env里缺了API key或连接串Server就算启动了也会在首次调用时报错比如Figma的401或数据库的Access denied。在编辑器里查看MCP状态。Claude Code可以用/mcp命令列出所有已配置的Server和当前状态Cursor在MCP面板里能看到连接标识。如果显示failed日志里一般会有具体错误。排查PATH问题。尤其用npx启动时如果编辑器进程拿不到完整的PATH环境可能找不到npx命令。解决方案是把command写成npx的绝对路径或者用node /全局路径/mcp-server.js这种形式。5.3 环境变量和网络问题的高频翻车现场我再补充几个细碎但很常见的问题。如果是远程MCP ServerSSE/HTTP方式最常见的坑是地址可达性问题。你把localhost:8000/sse配给Codex但Codex运行在WSL里而MCP Server跑在Windows宿主机上两者网络不互通。这种情况检查一下是不是需要在WSL里用宿主机IP而不是localhost。另一个高频翻车点是配置里多个MCP Server互相冲突。有一次我同时配了Figma和浏览器两个MCP输出日志里浏览器一直报错后来发现是某个环境变量在全局shell里被污染了所有子进程都继承了这个变量。排查时一个个把env改小范围问题才浮出来。还有MCP Server进程“挂”了。有些Server跑一段时间后会内存溢出或连接超时编辑器不会自动帮你重启工具列表看起来还在但调用永远超时。这时候去编辑器MCP设置里手动断开重连或者干脆重启编辑器是最快的解法。5.4 团队协作里怎么共享MCP配置如果你在一个小团队里做企业后台项目MCP配置是可以放进代码库里共享的。项目根目录放一个MCP配置文件团队同事拉下来代码后只需各自补上私有的API key或数据库连接串就能获得一致的AI能力。这里我强烈建议把密钥和服务器地址分开。仓库里提交的配置只用占位符比如env里的DATABASE_URL写成mysql://user:passwordlocalhost:3306/项目名_dev每个人再通过本地的.env文件或编辑器环境变量覆盖。如果你直接把生产库连接串提交进仓库基本等于把数据库密码贴在公告栏上。现在不少企业内部后台系统也在折腾MCP集成比如把用户查询、权限校验、日志检索这些高频操作封装成MCP工具让AI编辑器直接对接内部服务。思路完全可行但前期务必做好身份鉴别和权限审计条件允许的话先在小范围项目里灰度跑起来。6. 最后再分享一点我的体会把Figma、数据库、浏览器这三条链路都跑通之后我现在写前端页面的效率确实提升了不少。最明显的变化是我不再需要频繁切换工具窗口设计稿、表结构、页面效果都变成了AI对话上下文的一部分。遇到改动需求我可以让AI读取Figma组件属性、查询对应表结构、生成代码、然后自己打开浏览器验证——四步全部在编辑器里完成。如果你也想折腾MCP我最后的建议是先选一个你每天都会重复的动作试水。比如读设计稿、查一条数据、打开一个页面哪个最烦就从哪个开始。只要这个动作能变成AI的一条指令你基本就回不去了。MCP生态还在快速增长新Server更新很频繁但核心的配置套路就这一套。先把最小闭环跑通后面再慢慢加新工具你会有种给编辑器不断换配件的感觉踏实且上头。