MCPModel Context Protocol模型上下文协议大概是这两年 AI 编辑器圈子里最让我觉得早该有了的东西。它解决的问题非常直接你的 AI 编辑器再聪明默认也只能看到你喂给它的文本看不到你的 Figma 设计稿、查不到你的数据库更没法自己去浏览器里点两下按钮。MCP 就是把外部这些工具变成 AI 的外设相当于给编辑器接上了手和眼睛——用标题里的话说叫外挂也不算夸张。这篇文章不打算讲纯理论而是把我实际跑通的方案完整分享出来Figma MCP 怎么接、数据库 MCP 怎么玩、浏览器 MCP 怎么控以及我在这个过程中踩过的坑和排查思路。如果你在用 Claude Code、Cursor、VS Code Copilot 这类 AI 编辑器又想让它们不只是聊天机器而是真正能参与设计走查、数据排查和端到端调试那这篇就是为你准备的。1. MCP 协议拆解为什么 AI 编辑器需要一个万能插座1.1 从聊文本到用工具MCP 补齐的关键能力先想一个问题为什么没有 MCP 之前AI 编辑器总差点意思本质原因是模型的输入输出都是文本它没有感知外部世界的能力。你给它看一段 HTML它能分析但你想让它打开本地项目跑一下测试看看线上页面某个按钮的实际渲染结果它就无能为力了——因为它没法执行命令、没法调用接口、没法打开浏览器。早期大家靠什么解决插件。GitHub Copilot 有插件Cursor 也能执行终端命令但每个功能都要单独做一套集成而且 AI 需要的是结构化上下文不是简简单单把数据塞进聊天框。MCP 的出现给了标准答案把工具能力暴露成一个 AI 可理解和调用的函数列表编辑器作为宿主统一管理这些工具。说白了MCP 做的事跟 USB-C 接口有点像——以前每个设备都要自己的充电线现在统一接口谁都能插。MCP 就是把 Tool Calling、资源读取、指令模板这些能力统一成一套协议谁家 AI 都能接。1.2 三个核心角色Host、Server、Client要上手 MCP脑子里得有这张最简单的地图MCP Host宿主、MCP Server服务端、MCP Client客户端。Host 就是你的 AI 编辑器它负责收集用户意图决定调用哪个工具Server 是能力的提供方比如 Figma Server 提供读取设计稿文件的工具、数据库 Server 提供执行 SQL 的工具Client 则是编辑器内部负责跟 Server 通信的组件形式上可以是内部集成的 SDK也可以是命令行包装的传输层。传输方式最常见的有两种。本地开发默认用 stdio编辑器起一个子进程通过标准输入输出跟 MCP Server 通信简单稳定不占端口。需要远程共享或者多人协作时用 HTTP/SSE 或 Streamable HTTPServer 跑在一台机器上编辑器通过网络调用。我的建议很朴素自己本机玩一律 stdio团队共享再考虑远程部署。MCP 的能力模型有三个维度Tools工具、Resources资源、Prompts提示模板。Tools 是最常用的比如 get_design_tokens 这种函数AI 看到名字和参数说明就知道怎么调。Resources 可以理解成 Server 暴露的可读取文件比如一个设计稿的 JSON 描述。Prompts 则是预定义的指令模板相当于官方帮你写好的一段怎么用我这个 Server的提示词。理解这三者的区别排错时会少走很多弯路。2. 场景规划与工具选型Figma、数据库、浏览器该接哪个2.1 三个场景分别解决什么问题很多人一听说 MCP 很火就恨不得把所有 Server 全塞进编辑器结果上下文一长AI 反而不知道该用哪个工具。我自己的原则是先想清楚痛不痛再决定接不接。Figma MCP 解决的是设计到代码的鸿沟。以前前端拿到设计稿纯靠眼睛量间距、猜字号、抠颜色一个页面下来大半天没了。有了 Figma MCPAI 可以直接读取图层树、取色、拿布局参数甚至整节点导出 CSS 变量相当于把看图说话变成读数据生成代码。数据库 MCP 解决的是 AI 对业务数据的幻觉问题。你让 AI 写一个订单统计 SQL它可能一本正经地编一个不存在的字段名。但如果让它先通过 MCP 连接数据库查看表结构、采样数据再写 SQL准确性立刻不一样。更进阶的玩法是让 AI 直接查生产库做排查比如线上用户反馈某个订单状态不对你让 AI 自己去库里查这个订单详情的完整流转记录效率比人肉开 Navicat 高太多。浏览器 MCP 解决的是端到端的验证问题。AI 改完前端代码能不能让它自己打开页面、点按钮、填表单、看 console 报错Playwright MCP 就是干这个的。它把浏览器自动化能力封装成工具AI 可以驱动真实浏览器截图、点击、输入、读取 DOM。调试交互问题的时候这个能力几乎不可替代。2.2 常用 MCP Server 清单与选型先说 Figma 这边最常用的是官方 Figma MCPDev Mode 相关和社区流行的 figma-developer-mcp。前者适合有 Dev 版权限的团队后者通用性更好支持通过 API 读取文件节点、获取图片资源。国内团队常用的蓝湖也有 MCP 方案如果你项目协作主要靠蓝湖而不是 Figma可以直接用蓝湖 MCP思路一样。数据库这块选择很多。我的推荐排序是本地开发首选 SQLite MCP比如 mcp-server-sqlite零依赖、起个文件就能玩生产环境用 Postgres 官方出的 mcp-postgres支持只读模式很稳MySQL 生态里也有不少社区实现选的时候重点看两件事——支不支持只读连接、能不能限流。数据库这个东西接错了后果很严重后面我会单独拿一节讲安全。浏览器这边我实测下来最好用的是 Playwright MCPplaywright/mcp。它封装了 Browser 相关工具AI 能控制浏览器执行点击、输入、导航、截图等操作还支持读快照snapshot来感知当前页面结构。BurpSuite MCP 之类的属于安全测试方向的延展普通开发暂时用不上。Blender MCP 这类创意工具的 Server 也很多说明 MCP 生态正在向各领域扩散但核心逻辑是一样的一个 Server 暴露一组工具给 AI 调用。2.3 我建议的起步架构如果你是第一次接触 MCP我建议别贪多踏踏实实先做三件事。第一用 Claude Code 或 VS Code Copilot 里已经支持的 MCP 客户端配置一个 Figma Server跑通AI 读取设计稿这一个场景第二加一个本地 SQLite Server让 AI 查一个小型业务库观察它怎么拆解问题、怎么调用工具第三启动 Playwright MCP让 AI 打开你自己的本地开发页面做个简单的冒烟验证。这三个跑通之后你会对AI 与工具协作的节奏有体感再决定要不要接更多 Server。我见过不少人上来就配了八个 MCP结果每次对话光看工具列表就要十几秒AI 还经常选错工具。MCP 不是多多益善而是少而精。3. Figma MCP 接入手记设计稿到代码骨架的实用流程3.1 准备工作API Token 与文件定位Figma MCP 的接入本质是让 AI 通过你的 Figma 账号读取设计文件。第一步是在 Figma 的 Account Settings 里生成 Personal Access Token权限一定要选Read only只读就好不要让这个 Token 有写权限免得被误调用。生成之后存进环境变量 FIGMA_API_KEY。接下来要拿到设计文件的 file key。打开 Figma 文件看浏览器地址栏比如 figma.com/file/abc123xyz/项目名 中间那段 abc123xyz 就是 file key。MCP 的很多工具都要求输入 file key 才能定位文件。3.2 接入配置全过程我目前在 Claude Code 里用 figma-developer-mcp配置很简单。在项目根目录的 .mcp.json 里加一段{ mcpServers: { figma: { command: npx, args: [-y, figma-developer-mcp, --stdio], env: { FIGMA_API_KEY: 你的只读Token } } } }保存后重启编辑器用 MCP 客户端列表检查连接状态正常的话会看到一组以 figma_ 开头的工具名比如 get_figma_file、get_figma_node、get_figma_image。这一步如果失败八成是环境变量没读到或者 Node 版本太低figma-developer-mcp 要求 Node 16 以上这个我踩过。另外很多人在配置时会提到 Figma 汉化插件或者安装字体的问题——这跟 MCP 没直接关系但我的经验是开发机上的 Figma 客户端不用汉化因为 MCP 走的是 API跟界面语言无关字体问题则会真实影响截图效果如果 MCP 导出的渲染图缺字体建议先在 Figma 里把字体装上再调试。3.3 实际使用从设计稿到组件代码配置完成后的标准流程是这样我会给 AI 一段指令比如读取文件 xxx 中第一个 Frame 的全部图层结构和样式生成 React 组件代码。AI 会依次调用 get_figma_file 拿整体结构再用 get_figma_node 定位到目标 Frame拿到嵌套矢量、文字节点、填充色、圆角、间距这些原始数据。实测下来MCP 返回的数据非常结构化AI 不需要看图猜字直接就能用。生成 React Tailwind 组件时颜色、字号、内外边距都能从数据里精确拿到。对我来说最实用的场景是生成设计变量表让 AI 扫描整个设计文件的颜色和字体自动产出一份 tailwind.config 的扩展内容以前人工整理要一两个小时现在几分钟搞定。3.4 踩坑提示与注意事项这个方案有几个明显的边界先说明白免得你走弯路。第一Figma MCP 的目的是拿数据不是完美切图。虽然它能获取节点图片资源但如果你想要批量的切图导出直接用 Figma 的Export功能更高效MCP 更适合拿结构和样式生成代码骨架。第二嵌套组件的解析复杂性。设计稿里到处都是原子组件套容器再套最终组件的情况MCP 返回的 JSON 会很长。如果 AI 一次性读整个页面很容易上下文爆炸。我的做法是分步先读文件大纲锁定目标 Frame 的 id再单独读那一个 Frame。这个先定位再深挖的策略非常重要。第三节点命名规范会直接影响产出质量。如果设计师全用Frame 238这种默认名AI 生成的代码语义就差很多。能推动团队给关键 Frame 起名字的强烈建议规范化命名这是花小钱办大事。4. 数据库 MCP 实战让 AI 直接查库、分析、写 SQL4.1 选一个顺手的数据库 MCP Server数据库 MCP 的选型我的建议是按项目复杂度来分档。玩具项目、本地调试用 mcp-server-sqlite 就够了一个文件搞定正式项目的 Postgres直接用官方 mcp-postgres它支持 read_only 模式MySQL 场景我试过社区的开源实现基本能满足查询和 schema 读取但稳定性和权限控制水平参差选之前先看看最近一个月的 commit 记录。数据库类型推荐 MCP Server特点SQLitemcp-server-sqlite轻量、文件级、适合本地演示和测试PostgreSQLmcp-server-postgres官方、支持只读模式、生产可用MySQL社区 mysql-mcp-server可用但需关注更新活跃度和权限配置4.2 连接配置与最小权限原则用 mcp-server-postgres 的配置示例如下{ mcpServers: { postgres: { command: npx, args: [-y, mcp-server-postgres, postgresql://user:passlocalhost:5432/business_db] } } }注意这个连接串里的用户绝不能是超级管理员。我强烈建议专门创建一个只读账号只授予 SELECT 权限生产环境更是如此。这不是技术洁癖而是逻辑必然AI 生成 SQL 是有概率出错的哪怕错误率只有 5%一旦它有 DELETE 权限一条烂 SQL 就能把表清空。只读账号让风险从灾难降级为最多查得慢。如果业务需要 AI 写变更语句那就让 AI 生成迁移脚本人工审核后再执行不要直接把写权限交给 AI。这也是我在团队里反复强调的底线。4.3 实战让 AI 分析业务数据并生成报表代码我曾经用这套方案做过一次真实的订单数据排查。反馈说某个区域订单价格异常我在 AI 编辑器里给出一条指令连接本地的 orders 表分析最近 7 天成交均价异常的区域。AI 的调用链大致是先列出数据库中的表和字段list_tables、get_schema然后写一条聚合 SQL 按区域分组统计发现异常区域后再写一条针对该区域的明细查询。整个过程我几乎没动手写 SQLAI 自己完成 schema 感知、SQL 生成、执行和结果解读。更有意思的是它还能接着生成可视化代码查询结果没问题我让它用 Python 的 pandas 和 matplotlib 生成一个区域成交对比图它直接就把绘图脚本写出来了。本质上是因为 MCP 给它提供了真实数据它基于真实数据做分析和编码不再是凭空想象。4.4 数据库安全注意事项除了最小权限还有几个细节值得留意。一是连接池问题MCP Server 每次工具调用都可能新建连接高并发场景下要关注数据库连接数上限必要时让 Server 复用连接池避免连接风暴。二是超时控制AI 生成的 SQL 一旦缺乏条件可能全表扫描好几亿行我的做法是给工具设置执行超时比如单条 SQL 最多 5 秒超时直接终止。三是数据脱敏涉及用户手机号、身份证这类敏感字段要么在视图层做脱敏要么干脆不让 MCP 账号看到这些列。5. 浏览器 MCP 实战用 Playwright 让 AI 自己操作网页5.1 Playwright MCP 是什么Playwright 大家都不陌生是一个强大的浏览器自动化框架支持 Chromium、Firefox、WebKit。Playwright MCP 就是把它封装成了 MCP ServerAI 编辑器可以通过工具调用操作一个真实浏览器比如打开页面、点击按钮、输入文本、滚动、截图、读取页面快照。别看描述简单这个能力对前端开发的意义很大。以往 AI 改完代码你要么自己手动刷新页面验证要么写一堆 E2E 测试脚本。现在让 AI 直接看页面实际渲染效果读取 console 报错甚至自己点一遍主流程相当于 AI 有了眼睛和手。5.2 启动与配置启动这个 Server 很简单。前提是你本机已经装了 Node.js 和浏览器Chrome 或 Edge 都行。项目目录下执行npx playwright/mcplatest默认会以 stdio 模式运行编辑器接入后就能看到浏览器相关工具。也可以带参数启动加 --headless 让浏览器无头运行适合跑自动化任务加 --browser chrome 指定用哪个浏览器内核。首次运行可能需要安装 Playwright 的浏览器内核直接执行 npx playwright install chromium 就行。注意一点MCP 控制的是它自己的浏览器实例不是跟你日常用的浏览器共用会话。所以登着淘宝的 Cookie 它读不到需要登录的站点得让 AI 自己走一遍登录流程或者通过 --profile 指定一个 Chrome 用户目录复用你的本地登录态。5.3 三个实战场景E2E 验证、页面提取、表单调试先说最常用的场景本地开发冒烟测试。项目起在 localhost:3000让 AI打开首页截图给我看然后点击登录按钮看看有没有报错。AI 会依次调用 browser_navigate、browser_snapshot、browser_click。我对这个场景最满意的点是AI 能看到真实渲染结果不再是盲人摸象。第二个场景是表单调试。有一次用户反馈注册页面某个校验规则不生效我让 AI 打开页面、输入不合规的邮箱、点提交再读取页面上出现的错误提示文本。AI 完整走了一遍最后定位到是前端正则和接口校验不一致。整个排查过程十分钟不到以前我得人肉操作还要反复切换浏览器和控制台。第三个场景是页面结构化提取。比如把某个页面的表格数据按指定格式导出来。AI 通过 snapshot 拿到页面结构再调用 JS 执行工具提取数据。这种场景要特别注意目标和边界只操作你有权限的页面不做任何越权的数据获取。5.4 操作细节与限制Playwright MCP 的几个限制提前知道能省不少事。第一AI 在没有看到页面快照的情况下点击操作经常不准所以要让 AI 养成习惯每次导航后先 browser_snapshot 获取页面结构再决定下一步操作。第二页面加载有延迟要给 AI 足够的时间等待必要时明确告诉它等待 3 秒后再读取结构。第三它对 iframe 内的元素操作有一定复杂性碰到嵌套 iframe 的页面AI 偶尔会摸不着头脑这时需要你手动提示一下框架层级。还有人会问浏览器 MCP 能不能做登录态的自动化入库测试。答案是可以但务必当心让 AI 在无人值守的浏览器里跑 SQL 和表单操作等于把生产库和业务操作都托付给模型判断风险极大。我的建议是这类场景只用来做测试环境验证生产环境永远留给人来点按钮。6. 高频问题排查与三个提效技巧6.1 问题速查表我把自己和周围同事踩过的坑汇总了一下按出现频率排序症状可能原因解决思路MCP Server 启动失败Node 版本太低 / 依赖未安装升级 Node 16重启编辑器看启动日志工具列表为空配置格式错误 / 环境变量缺失检查 .mcp.json 格式确认 env 字段拼写Figma 工具调用 401API Token 过期或权限不足重新生成 Token确认 Read only 可用数据库查询超时SQL 无索引 / 全表扫描给工具加超时限制先看 explain 再执行浏览器点击无效AI 未获取页面快照就操作强制先 browser_snapshot 再点击上下文过长一次性读取了超大文件 / 页面分步获取细化工具参数避免一次拉全量排查的时候有个最笨但最有效的方法打开 MCP Server 的调试日志。Claude Code 里可以用 --debug 日志模式观察工具调用的输入输出大多数AI 为什么这么做的问题看日志就明白了。6.2 三个让效率翻倍的小技巧第一个技巧是给 MCP 写一份使用说明。在项目目录放一个 MCP_CAPABILITY.md用自然语言写明这个项目接入了哪些 MCP Server分别擅长做什么调用顺序是什么。AI 每次启动会把这个文件作为上下文它就不容易乱用工具。这招比反复在对话里解释高效太多。第二个技巧是让 AI 按顺序调用工具不要一把抓。比如查数据时先 get_schema 再 query不要让它跳步。这本质上是引导模型建立先感知、再行动、后验证的工作习惯。第三个技巧是把常用指令模板化。比如读取 Figma 文件核心 Frame 并生成组件代码这种操作整理成一段标准 prompt 存成编辑器片段以后一键唤起。MCP 本身的确强大但真正让它物尽其用的是你对使用场景的设计和打磨。最后说一个心态上的建议MCP 不是银弹它只是把AI 能用工具这件事标准化了。我刚上手那阵子巴不得给所有工具都包一层 MCP结果效率反而下降。后来收敛到 Figma、数据库、浏览器这三个高频场景把每个都玩透才真正感受到AI 从助手变成协作者的分水岭。你也不妨从一个小场景开始先跑通再扩展这条路走起来远比想象中快。