上周有个朋友问我AI 编辑器天天吹得天花乱坠但让它照着 Figma 设计稿写页面它只会给出应该怎么实现的一大段建议就是不落地是不是智商税我的回答是不是 AI 不行是你没给它手。大模型默认就是个聊天窗口你贴截图它就看图你贴文字它就读字它看不到你本地的数据库结构打不开你 Figma 里的图层树也不会自己开浏览器去验证页面到底什么样。信息进不去能力自然出不来。当我开始用 MCPModel Context Protocol模型上下文协议给编辑器接上各种外挂之后情况彻底变了——AI 能直接读 Figma 设计稿的每一个图层和样式能自己连上 MySQL 查表、看索引还能开一个真实浏览器去点击、截图、验证流程。如果你也在用 Cursor、Windsurf、Claude Code 这类 AI 编程工具或者正处于听过 MCP 但不知道它能干嘛的阶段这篇文章就是给你准备的。我按自己实际的接入顺序把三个最实用的 MCP 场景——Figma、数据库、浏览器——从原理到配置再到底层坑完整走一遍。1. 为什么 AI 编辑器突然需要外挂模型的天然局限1.1 MCP 解决的是AI 只能聊不能干活的尴尬先说明一下背景。MCP 是 Anthropic 在 2024 年底开源的一个开放协议全称 Model Context Protocol模型上下文协议。它做的事情用一句话说就是给大模型提供一个标准化的插座让模型能通过这个插座去调用外部工具、读取外部数据。在 MCP 出现之前如果你想用 Claude 去操作数据库、读取设计稿基本只有两条路要么把数据手动复制粘贴到对话框里要么给每一个大模型单独做一套接口集成。前者累死人后者则是典型的重复造轮子——每个 IDE 插件、每个 Agent 框架都要对接一遍对方的 API生态碎片化严重。MCP 就是把这件事标准化工具方只需要实现一个 MCP Server所有支持 MCP 的客户端Claude Desktop、Cursor、Windsurf、VS Code、Claude Code都能直接复用。这个思路和 USB-C 接口很像。以前出门要带一堆线现在一根线解决几乎所有设备。MCP 对 AI 生态的意义也是如此它让模型和工具解耦谁也不用迁就谁的私有格式。1.2 MCP 的工作机制三个角色和一个 JSON理解配置之前先把角色捋清楚。一个 MCP 架构里通常有三个角色MCP Host承载 AI 的宿主程序比如 Claude Desktop、Cursor、Windsurf或者是 Claude Code 这种命令行工具。文章标题里的AI 编辑器基本都属于这一类。MCP Server提供具体能力的服务进程比如读取 Figma 的服务、连接 MySQL 的服务、控制浏览器的服务。它独立于 AI 运行通过标准协议暴露三种能力Tools可以被 AI 调用的函数、Resources可供读取的数据、Prompts可复用的提示词模板。MCP Client内嵌在 Host 里的协议客户端负责在 AI 和 Server 之间转发请求。实际配置起来你只需要把一个描述服务器地址的 JSON 交给 Host比如{ mcpServers: { figma: { command: npx, args: [-y, figma-developer-mcp, --stdio] } } }Host 启动时会按这个配置拉起对应的服务进程AI 在对话中感知到有哪些工具可用然后在合适的时机自己决定调用哪个工具。你不需要在提示词里写什么特殊咒语自然语言对话里说帮我看看这个 Figma 文件里登录页的颜色就行。传输方式上本地工具一般走 stdio标准输入输出远程服务走 SSE 或 HTTP。开发时用 stdio 最省事团队共享服务才需要部署远程 MCP。2. Figma MCP 实测AI 读设计稿的方式彻底变了2.1 Figma MCP 能拿到什么数据、拿不到什么数据Figma 这块我最早接入因为痛点最明显。以前让 AI 照着设计稿写前端你得自己截图、测量间距、记录色值再把这些信息压缩成一段文字丢给它光描述就够写一屏。用上 Figma 的 MCP Server 之后AI 可以直接读取设计文件的结构化数据文件里有哪些页面、每个页面有哪些 Frame、图层树长什么样、每个节点的位置尺寸x、y、width、height、填充色、圆角、字体字号、文本内容、以及组件实例的属性。这意味着什么AI 看到的不再是一张图而是一棵带完整属性的节点树。它知道这个按钮是 120x40、背景色是 #2563EB、圆角 8px、文本字号 14px——这些都是生成前端代码时最关键的信息而且不用你手动抄写。我用的主要是社区方案figma-developer-mcpFigma 官方也推出了面向 Dev Mode 的 MCP Server。两者大同小异官方版更强调设计稿到代码的衔接社区版更灵活、更新快。国内团队常用的蓝湖Lanhu同样提供了 MCP 服务配置思路类似在开放平台拿 Token然后指向具体设计文件适合团队资产本来就在蓝湖上的场景。要注意的是MCP 从 Figma 拿的是设计数据不是设计资源本身。它能返回某个 Frame 的渲染图图片 URL但它不会给你打包好的切图文件也不会替你生成 SVG 资源。这点后面专门说。2.2 拿到一个可用的 Figma MCP 需要四步第一步生成 Figma 访问令牌。进 Figma 的 Account Settings → Security → Personal access tokens新建一个 token权限范围选择 File content: Read-only 就够了。这个 token 本质上代表只读访问你的设计文件不要勾写权限。第二步拿到文件 File Key。打开一个 Figma 设计文件看浏览器地址栏figma.com/file/后面那串字符就是 File Key。如果你要读的是文件里的某个 Frame还需要节点 ID在 Figma 里用 Dev Mode 或者右键 Copy link 可以拿到类似12:345这种格式的节点 ID。第三步配置 MCP Server。在 Claude Desktop 里是编辑claude_desktop_config.json在 Cursor 和 Windsurf 这类编辑器里直接去设置面板搜 MCP或者编辑项目根目录的.mcp.json{ mcpServers: { figma: { command: npx, args: [-y, figma-developer-mcp, --stdio], env: { FIGMA_API_KEY: figd_你的令牌 } } } }第四步重启会话验证连接。在对话里问一句你现在能用哪些工具如果返回里出现 figma 相关的工具列表就说明连上了。然后就可以直接说读取这个 Figma 文件https://figma.com/file/xxx的登录页 Frame提取颜色、字体和间距帮我生成一个 React 页面。2.3 回答热搜里的那个问题Figma MCP 能直接切图吗这个问题我见很多人问答案要分两层。严格意义的切图把图层导出成 PNG、SVG、切片的资源文件MCP 本身不干这个活因为 Figma API 对图片导出有调用限制和计费规则MCP Server 出于稳定性和成本的考虑通常也只提供 Frame 级别的渲染图获取。你可以让 AI 拿到某个 Frame 的图片地址下载下来当参考图但你没法让它像 Figma 插件那样逐个图层批量导出资产。那 MCP 在切图流程里有什么用我的经验是它更适合做代码生成前的信息提取而不是资源导出的替代品。真要交付切图资源还是走 Figma 自身的导出或者用蓝湖这类标注工具的切图功能。如果你是想把 Figma 里的 UI 导入 Unity 这类引擎通常也是导出 SVG/PNG 后走引擎资源管线MCP 能帮的是把设计参数尺寸、颜色、层级准确导出来方便你搭 UI 结构。3. 数据库 MCP从帮我写 SQL到AI 自己连库查表3.1 数据库 MCP 的能力边界与选型数据库这块是另一个高频需求。以前让 AI 写 SQL你得把表结构 DDL 复制给它现在有了数据库 MCPAI 能自己连库先看有哪些表和字段再根据你的自然语言描述生成并执行查询甚至能帮你分析索引和慢查询。市面上的实现不少常见的有数据库常见 MCP 实现适合场景SQLitemcp-server-sqlite官方示例本地小项目、学习入门、Demo 验证MySQLmysql-mcp社区公司业务库、Web 项目PostgreSQLpostgres-mcp、Supabase MCP偏重服务端业务其他各云厂商也在出托管数据库 MCP云上数据库控制台操作选型建议很简单先拿 SQLite 练手因为零配置、一个文件就是一个库最适合理解AI 连数据库到底是怎么一回事。跑通之后再上 MySQL 或者 PostgreSQL。能力边界要提前想清楚。数据库 MCP 本质上就是把你的数据库操作权限交给了 AI 的对话流程。它能列出表、读取 schema、执行 SELECT如果你的配置允许它也能执行 INSERT、UPDATE、DELETE 甚至 DDL。这个能写到什么程度完全取决于你怎么配而不是 AI 自己决定的。所以安全设计不是可选项是必选项。3.2 安全配置给 AI 单独开一个只读账号我的原则是能读就不写能隔离就隔离。凡是接生产库一律创建一个专用数据库账号只授予所需库的 SELECT 权限必要时只允许访问指定表。AI 对话是概率性的你无法保证它每条指令都正确写权限一旦放开一个误解就等于一次错误的线上变更。MySQL 上建只读账号的 SQL 大概是这样CREATE USER mcp_reader% IDENTIFIED BY 强密码; GRANT SELECT ON your_db.* TO mcp_reader%; FLUSH PRIVILEGES;然后用这个账号配置 MCP Server。以社区常用的 mysql-mcp 为例通过环境变量传入连接信息配置看起来像这样{ mcpServers: { mysql: { command: npx, args: [-y, mysql-mcp], env: { MYSQL_HOST: 127.0.0.1, MYSQL_PORT: 3306, MYSQL_USER: mcp_reader, MYSQL_DATABASE: your_db, MYSQL_PASSWORD: 这里填密码 } } } }如果你确实需要 AI 写数据我建议单独准备一个开发库在开发库里开一个带写权限的专用账号明确定位为测试环境专用只对有数据的测试库开放写操作。生产环境的写操作无论如何都别交给 MCP。3.3 实测效果从查表到生成统计报告在实际使用中数据库 MCP 给我最大的感受是省去了上下文搬运。以前我要分析一个订单表的日增长情况得先查表结构、查数据、整理格式、再贴给 AI。现在直接说连上 order 库看看 orders 表最近 7 天的日订单量趋势顺便分析一下哪些状态的数据异常。 AI 会自己列出库里的表、读取字段注释、执行聚合查询然后给你一份带结论的分析。另外一个很实用的场景是反向生成表结构文档。让 AI 用数据库 MCP 扫一遍所有表直接输出一份包含字段含义、索引、主外键关系的数据库文档。这个文档用于团队协作、新人入职比手写快太多。有几个细节要注意一是连接串里别把密码写进项目代码配置文件的 env 也要注意别提交到公开仓库二是数据库 MCP 首次运行会通过 npx 下载依赖慢是正常的别以为卡死了三是长查询要设超时防止 AI 不小心执行一个全表扫描把线上库拖垮这也是为什么我一直强调只读账号。4. 浏览器 MCP让 AI 自己开网页、点按钮、做验证4.1 Playwright MCP 能做什么如果说 Figma MCP 和数据库 MCP 解决的是读数据那浏览器 MCP 解决的是动手验证。目前最主流的方案是微软出的 Playwright MCP它把 Playwright 的浏览器自动化能力包装成 MCP 工具AI 可以直接在对话里操控浏览器打开网页、点击元素、填写表单、滚动页面、截图、读取控制台日志、执行 JavaScript。这个能力对我的日常工作影响非常大。以前验证 AI 生成的前端代码我得手动起服务、手动开浏览器、手动点来点去发现问题再回到对话里描述。现在我可以直接跟 AI 说启动本地开发服务器打开这个页面点击登录按钮看看是不是跳转到 /dashboard然后截图给我。 AI 自己就能完成这一整条链路。和传统爬虫脚本相比Playwright MCP 的差别在于每一步都是 AI 根据当前页面状态动态决策的。不是写死的选择器而是 AI 看到截图和 DOM 信息之后判断下一步该点什么、该填什么。这让它非常适合做端到端功能验证、UI 回归检查、以及那些一次性的临时自动化任务——你没必要为了验证一个按钮写一套完整测试框架。4.2 从安装到跑通的完整链路配置很简单同一个 JSON 思路{ mcpServers: { playwright: { command: npx, args: [-y, playwright/mcplatest] } } }首次运行记得先安装浏览器内核否则启动报错。在终端执行npx playwright install chromium然后重启编辑器会话。你可以让 AI 打开任意公开网页试一下用浏览器打开 https://example.com 截图给我看。如果它能返回截图并描述页面内容说明链路通了。几个常用参数我列一下方便你按需求调整参数作用--headless无头模式不弹出浏览器窗口适合后台跑--browser firefox/--browser webkit换浏览器内核--device iPhone 13模拟移动端设备--save-trace保存操作轨迹方便调试失败过程我的习惯是日常调试开有头模式能看着它操作发现问题更直观跑批量验证时开无头模式省资源、速度快。4.3 浏览器 MCP 的局限别指望它万能用了一段时间我得老老实实说它的几个短板。第一登录墙和验证码。需要扫码登录、短信验证、人机验证的站点AI 基本搞不定或者搞起来非常费劲。验证码本身就是为了阻止自动化设计的MCP 靠截图和 AI 识别能蒙对几次但不是稳定方案。第二视觉理解有成本。AI 通过截图理解页面每次截图都要消耗大量 token尤其是页面复杂、图片大的时候。而且视觉模型的推理没有那么稳定偶尔会看错元素位置。我的做法是限定任务范围让 AI 只截关键区域或者用 DOM 信息做判断减少对截图的依赖。第三反爬和风控。很多站点对自动化浏览器有检测轻的弹个验证重的直接限制访问。Playwright MCP 不是为绕过风控设计的别拿它去做高风险的采集既不稳定也有合规风险。第四权限边界要自己管。浏览器 MCP 默认能访问任何 URL所以我会在项目级的 MCP 配置里明确告诉 AI只允许操作本地开发地址localhost和测试环境域名不准访问生产后台、更不准用真实账号登录敏感系统。这种约定不是硬限制AI 是否遵守取决于它是否理解上下文所以更稳妥的做法是把敏感操作交给人工完成。5. 三个 MCP 串起来一个完整的落地工作流5.1 实战场景从设计稿到接口验证的一条龙单个 MCP 各有价值真正让人真香的是把它们串起来用。我拿一个实际操练过的场景举例给一个登录页做前端实现并验证功能逻辑。第一步用 Figma MCP 读取设计稿。我会给 AI 一个 Figma 链接指定登录页那个 Frame 的节点 ID让它提取出页面结构、配色、字体、按钮尺寸、间距生成对应的 React 代码。因为是直接从节点树读的属性色值和间距基本不会出错比我以前手动量图精准太多。第二步用数据库 MCP 核对落库字段。登录功能要对接 user 表我会让 AI 连上开发库查看 users 表的字段名、类型、约束然后根据真实表结构调整前端表单字段和接口请求参数。这一步能避免最常见的问题——前端字段和后端字段对不上。第三步用浏览器 MCP 做端到端验证。AI 启动本地开发服务器打开登录页填一个测试账号点击提交观察控制台是否有报错查看网络请求的返回状态最后截图确认页面样式是否和设计稿一致。如果登录失败AI 还能自己看报错信息然后回来修改代码再试一次。整个流程走下来我作为开发者的角色从执行者变成了审核者我只需要检查 AI 每一步的结论和代码质量而不是自己去操作浏览器、查数据库、量设计稿。当然这只在需求边界清晰的小功能上靠谱越复杂的业务AI 的自主空间要越小、人工把关要越密。5.2 红线清单给 AI 划定权限要像给新员工划定权限一样既然 AI 能操作外部系统了权限管理就必须跟上。我给自己定了几条红线生产数据库绝不接 MCP或者只接只读副本。写操作只在隔离的开发库进行。Figma Token 只给只读权限文件密钥File Key不要外传。浏览器 MCP 只允许访问 localhost、本地局域网和测试环境。真实生产系统、支付页面、个人账户操作一律不碰。MCP 配置文件如果放在项目仓库里密码和 Token 一律走环境变量不要明文写进 JSON。远程 MCP 服务要谨慎。如果使用的是第三方托管 MCP 服务你要知道你的数据会经过那个服务敏感信息不要轻易走远程通道。6. 避坑记录高频报错和处理经验6.1 配置层的常见坑我把配 MCP 时最容易踩的坑整理成了一张表基本覆盖九成以上的启动问题现象原因解决办法提示 MCP server not foundServer 进程启动失败在终端手动运行同样的 npx 命令看具体报错提示 spawn npx ENOENTNode.js 不在宿主程序的 PATH 里找到 npx 绝对路径在配置里用绝对路径启动连接建立后立即断开stdio 服务崩溃退出检查日志多半是环境变量配置错误Figma 请求返回 401Token 无效或权限不足重新生成 Token确认勾选 File content read-onlyFigma 返回超时文件太大读取内容过多缩小范围指定具体的 Frame 或节点 ID数据库查询无响应执行了长查询或连接被挂起设置超时参数检查账号连接数限制Playwright 启动报浏览器缺失浏览器内核未安装执行 npx playwright install chromium最容易被忽略的是 PATH 问题。很多编辑器是图形界面启动的它继承的环境变量和你在终端里看到的不一样node、npx的位置可能找不到。解决办法是执行which npx拿到绝对路径写进配置的 command 里。6.2 使用层面我最想强调的三条心得第一配置完 MCP 一定要重启会话。这不是废话我犯过好几次配完没生效的错最常出现在 Cursor 和 Windsurf 这类编辑器里——MCP Server 是在启动时拉起的中途改配置文件不会生效必须重启会话或重启编辑器。第二截图是昂贵的用的时候省着点。浏览器 MCP 每截一张图就要吃一笔不小的视觉 token如果你让它一口气截十张图账单先不说处理速度也会明显变慢。我会让它先描述 DOM 结构判断元素只在关键节点要求截图确认。第三把 MCP 能做的事拆成小任务而不是一个大而全的指令。比如别让 AI 同时读 Figma、改数据库、测浏览器三件事一起干它会顾此失彼。我通常是一个阶段一个目标先出设计稿参数再写代码最后验证。每完成一步我确认一次效率比一次性大指令高得多。用 MCP 接完这三个场景之后我的感受是AI 编辑器从一个很会说话的同事变成了一个能自己跑腿办事的实习生但前提是你得给它配好工具、划清边界。Figma、数据库、浏览器只是我接入的第一批这个协议还在快速演进以后模型能触达的外部系统只会越来越多。对开发者来说理解 MCP 的配置逻辑和权限思路比追着某个具体工具升级版本更重要——因为这套方法论是通用的。最后分享一个我在日常里用得最频繁的小技巧把常用的 MCP 配置按项目分类维护数据库配置、浏览器配置、设计稿配置分开写用的时候按需加载不要一股脑全部挂上。挂的 MCP 越多AI 每次决策时的候选工具列表就越长不仅容易选错token 消耗也会变大。少挂精挂AI 反而更靠谱。