AI编程新范式：6大MCP工具实战揭秘

MCP 完整实战：Figma、Chrome DevTools 如何接入 AI 编程

MCP 的价值是让 AI 通过受控工具读取设计、浏览器调试信息或项目数据，而不是给 AI 一把"能访问所有东西"的钥匙。本文用一个咖啡豆展示网站（Next.js + Supabase）完整走通 6 个 MCP：Figma、shadcn、Chrome DevTools、Supabase、Apifox、GitHub。全程用 Cursor Agent 模式，你只需要复制提示词、盯住验证结果。

开头先问你一个问题

AI 功能最容易做成一段惊艳演示，也最容易在真实用户、成本和权限面前失效。先看清这条功能链路，再开始接模型。

先把基础概念说清楚

AI 功能通常由输入、受控服务端调用、结构化结果、人工确认和可追踪记录组成。模型输出是候选信息，不是可以直接相信的最终事实。

MCP 全称模型上下文协议（Model Context Protocol），是"AI 如何调用外部工具"的标准，可类比 HTTP：请求地址、方法、状态码、请求头（如 Cookie）、响应体，浏览器与服务器按约定通信，AI 与工具之间按 MCP 约定通信。有了它，Agent 才能调用 Figma、浏览器、数据库等外部系统。

用 MCP 前记住三个注意点：① 配置方式各异，Cursor / Claude Code / Codex / VSCode 都不一样，必须照官方文档，本文统一演示 Cursor；② MCP 工具会占用宝贵上下文（GitHub MCP 默认 100+ 个工具），不是越多越好，用不到的关闭；③ 不一定方便，有些操作（如 GitHub 建仓）手动更快，要亲自尝试判断。MCP 可配在全局 （用户目录，所有项目可用），也可配在项目 （项目根目录 .cursor/mcp.json）。

一、准备项目：Supabase + 咖啡豆模板

1.1 新建 Supabase 项目

1. Supabase 官网 → 组织 → New Project ，项目名 mcp-test，设数据库密码，地区选新加坡（或按 Smart Region Selection 推荐）；

2. Project Settings → Data API

   复制 Project URL ；API Keys 处复制 anon （公钥）与 service_role（私钥）。

1.2 下载模板、填环境变量

下载 mcp-tutorial-beike-main.zip（约 3.7MB）解压，用 Cursor 打开；把根目录 .env.example 复制为 .env.local，填入 3 个值：

.env.local

NEXT_PUBLIC_SUPABASE_URL=your-project-url

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=your-anon-key

SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

⚠️ service_role 会绕过行级安全（RLS），只能放服务端，绝不能出现在浏览器端代码或 NEXT_PUBLIC_ 前缀变量里。

1.3 建表并导入数据

Supabase 后台 SQL Editor 粘贴以下语句并运行：

create table public.beans (

id uuid not null default gen_random_uuid(),

name text not null,

flavor_profile text not null,

origin text not null,

tags text\[\] null default array\[\]::text\[\],

image_url text not null,

created_at timestamp with time zone null default timezone('utc'::text, now()),

constraint beans_pkey primary key (id)

) TABLESPACE pg_default;

Table Editor → Insert → Import data from CSV 导入 beans_rows.csv（约 5 条示例数据）。示例 image_url 填的是 public/ 下本地图片（bean_01.png ~ bean_08.png）；实际项目更规范的做法是传到 Supabase Storage 或图床，存完整远程 URL。

1.4 运行与登录

pnpm install

pnpm run dev

访问 http://localhost:3000：首页可打开，点"咖啡豆"页会提示登录。注册账号 → 邮箱点击 Confirm your sign up → 登录，刷新咖啡豆页应显示 5 条数据。建议先 git init，每完成一个 MCP 功能提交一次，方便对比改动。

二、Figma MCP：一句提示词还原落地页

Figma MCP 把设计稿节点信息（布局、颜色、字体、组件）交给 AI，实现"读设计 → 生成代码"。目前仅付费会员可用，是否收费、版本要求以当前官方文档为准；不付费可只看流程。

2.1 安装与授权

1. Figma MCP 官方文档（Guide to the Figma MCP server / Remote server）选 Remote server（Cursor 受支持）；

2. Cursor → Settings → Tools & MCP → Add Custom MCP，粘贴：

{

"mcpServers": {

"figma": {

"url": "https://mcp.figma.com/mcp",

"type": "http"

}

}

}

1. 回 MCP 列表点 Connect ，浏览器授权页点 Agree ；看到绿点及 4 个工具、1 个提示词即成功。

2.2 复制设计稿节点

Figma Community 打开咖啡类落地页设计稿（Open in Figma 进画布）：还原整页就选中外层整页 Layer，还原单卡片就选中该组件，右键 Copy link to selection。

2.3 还原并验证

Cursor 切 Agent 模式 ，把 {url} 换成复制的链接：

请使用Figma MCP，在 @page.tsx 页面还原落地页设计：{你所复制的url}

AI 会调工具获取代码和截图后开始写页面，等待 5~20 分钟（实测约 5 分钟）。完成后刷新首页、缩放到 100% 检查还原度------实测还原度很高，图片也是从设计稿复制过来的。

2.4 还原后必改两点

1. 图片本地化

   ：AI 可能直接引用 Figma 域名的远程图片 URL 导致加载慢，把图片保存到项目目录、压缩优化后改本地地址，再做 CDN；

2. 导航栏丢失

   ：还原时顶部导航栏、注册/登录/退出按钮可能被"吞掉"，用提示词修复并中文化：

目前首页没有导航栏，丢失了用户登录，请加入导航栏并修改成为和首页样式类似的主题风格。

修改首页样式：1. 顶部 NAV 导航栏使用"首页"+"咖啡豆"，移除掉其他的；

2. 咖啡豆页面是浅色背景，需要修改文字颜色适配（浅色背景用深色字，深色背景用浅色字）；

3. 首页所有文案改成中文，价格改成人民币。

验证后 git commit。注意还原不是 100% 像素级（字体、遮罩图层可能有差异），Figma 是视觉参考，不等于完整业务规则。

三、shadcn MCP：弹框表单 + 第三方组件

shadcn MCP 的价值：组件来自实时注册表 而非预训练数据（保证时效性）；不只支持官方组件，还支持注册表里的第三方组件库；搜索引用更方便。项目终端执行（项目内安装）：

pnpm dlx shadcn@latest mcp init --client cursor

到 Tools & MCP 打开它，绿点且出现 7 个工具即可。

3.1 实现"新增咖啡豆"弹框提交

开发 @beans/page.tsx 页面前后端功能，用户能够提交对应的：

1. 在 @beans/page.tsx 中增加一个右下角的悬浮按钮，点击后出现弹框；

2. 弹框需要使用 shadcn 的弹框组件，使用 shadcn mcp 引入并生成；

3. 弹框要填写 beans 表中的字段：咖啡名称、口味描述、产地、标签（字符串数组）、图片 url 链接，

用户提交需要校验字段，必须所有填写完成才可以点击提交；

4. 用户填写后通过接口保存到数据表 beans 中。

AI 会调用 shadcn MCP 搜索并引入 dialog 组件，再生成后端接口；页面报错就把报错信息复制给 AI 修复。

验证 ：点悬浮按钮开弹框，填名称、口味描述、产地（如中国云南）、标签、图片地址（如 /bean_06.png）提交。注意标签是字符串数组，多个标签用英文逗号 分隔。提交后到 Supabase Table Editor 刷新，beans 表应新增一条记录（后端走 POST 接口）。

3.2 引入第三方组件：MagicUI 的 Tweet 卡片

第三方组件库要先在 components.json 注册：

{

"registries": {

"@magicui": "https://magicui.design/r/{name}.json"

}

}

使用shadcn mcp，引入magicui的tweet卡片，在 @beans/page.tsx 页面引入一个板块叫做「社区热议」，

热议中有3个用户的卡片，id分别为：

1976382199965602022

1976437762950824362

914134197413072898

刷新页面，底部应出现 3 张推特卡片（tweet 卡片必须传推文 ID ，即推文 URL 最后一段数字）。经验：shadcn MCP 搜索组件不一定 100% 好使，耗时可能比手动安装还长；更快的做法是先在组件官网找到组件，再用 pnpm dlx shadcn@latest add <组件名> 手动安装，非官方组件务必先看文档确认必传参数。

四、Chrome DevTools MCP：自动化、样式落地、修报错

DevTools MCP 让 AI 直接操作真实浏览器：读取控制台、网络请求、页面元素，还能自动点击、填表、提交。它适合查证 而不是替代测试------要求 AI 报告具体请求路径、状态码、错误文本和复现步骤，不要接受"我已经修好了"。安装：DevTools MCP 的 GitHub 首页点 Add to Cursor 自动安装，成功后出现 26 个工具。

4.1 自动化提交表单

请你在 @beans/page.tsx 页面，使用chrome devtools帮我实现自动化提交2个亚洲的咖啡品种的咖啡豆。

图片地址填写 bean_06.png和 bean_07.png，其他的内容你自动创建咖啡相关的内容。

AI 会打开 Chrome 窗口，自动点弹框、填字段、提交，两个亚洲咖啡豆（如越南罗布斯塔等）入库，全程不碰代码，最后截图确认。这个功能有两个特有坑：

坑	现象	处理
浏览器实例冲突	报"浏览器实例冲突"或打不开页面	把所有已打开的 Chrome 窗口全部关闭（含你自己调试的），再让 AI 重新执行
沙箱没有登录态	AI 打开的浏览器是隔离沙箱，拿不到你日常浏览器的 Cookie	暂停任务，在 AI 打开的浏览器窗口里手动登录一次再继续

安全边界：DevTools MCP 只读当前本地页面的调试信息，不要把浏览器全部历史、全部 Cookie 暴露给 AI。

4.2 调试样式落成代码

在 DevTools 里调样式（如把悬浮按钮宽高改成 100px、背景色深红）后，刷新页面样式就没了------调试不落代码。现在直接告诉 AI：

我在chrome devtools中修改了咖啡豆页面的悬浮按钮的样式，请你应用我的样式修改代码，和我调试的样式保持一致。

AI 截图读取当前调试样式，对比代码差异后直接改对应文件；同样适用于调按钮定位（如 right 值）这类"调好了但找不到代码"的场景。需要一点 CSS 基础，但不用自己找文件。

4.3 自动修复控制台报错

前端报错在浏览器 Console，AI 默认看不到；以前要手动复制报错，现在直接说：

console中有一个报错，请你使用chrome devtools查看报错并修复。

实测：人为制造排序报错（读取不存在的属性）后，AI 调 list console messages 定位 fetch 数据错误，修复后再查一次控制台确认已清空，全程自动。排查口诀：前端报错看浏览器 Console，后端报错看终端运行日志------后端报错仍要你把终端日志贴给 AI。

五、Supabase MCP：口喷建表 + 生成点赞后端

Supabase MCP 能代理建表、查文档、列项目/表、获取项目 URL 和公钥，不用再去后台手写 SQL。安装：官方文档点 Add to Cursor ，安装后点击授权，成功出现 29 个工具。

5.1 用 MCP 创建点赞表

我现在需要实现一个用户点赞的后端逻辑，用来保存用户的点赞咖啡豆的情况。

该表需要能够记录用户点赞的咖啡id、用户id、点赞时间。

请你使用supabase MCP 在 mcp-test 这个项目中帮我创建这个表。

特有失败分支 ：账号下如有多个 Supabase 项目，AI 可能把表建到另一个项目 里（实测表被建到别的项目，刷新找不到）。发现后新开对话，强调"在 mcp-test 这个项目中创建"，AI 才会建对地方。验证：Supabase 后台 Table Editor 刷新，应看到 beans_likes 表创建成功，全程没手动执行建表 SQL。

5.2 生成点赞后端接口

现在请你实现用户点赞、取消点赞功能后端接口，只生成后端接口，不要实现对应的前端逻辑。

AI 会生成点赞、取消点赞、获取点赞状态等接口（对应 app/api/likes/route.ts），确认后 git commit。

六、Apifox MCP：用接口文档驱动前端

Apifox 管理后端接口文档，在前后端分离项目（小程序、iOS、H5 等纯前端不含后端）里价值最大：后端写好文档，前端让 AI 通过 MCP 读文档写代码。Next.js 前后端一体项目作用有限，可跳过。

1. 准备接口文档

   ：Apifox 新建项目，把上一步的后端接口按文档创建（添加点赞、取消点赞等）；注意请求方式与参数位置------咖啡 ID 可能在路径里（/api/likes/{id}），也可能在请求体 body 里（字段如 bean_id），按实际接口调整并保存；接口地址开发环境改成 http://localhost:3000。

2. 接入 Apifox MCP

   ：按官方文档《通过 MCP 使用 Apifox 项目内的 API 文档》配置------个人头像 → 设置 → API 访问令牌 新建令牌（如 mcptest）并复制；项目项目设置 里复制项目 ID ；Cursor MCP 配置填入 accessToken 和 projectId（Mac/Windows 命令写法不同，以官方文档为准）。绿点且 3 个工具即成功。

3. 让 AI 按文档写前端

   ：

给 @beans/page.tsx 页面添加对应的喜欢逻辑，要求在咖啡豆右边添加喜欢的icon，

用户点击后能够请求后端，喜欢该咖啡豆，或者移除喜欢该咖啡豆。接口文档参考 apifox mcp。

AI 调用 Apifox MCP 获取接口的方法、地址、请求参数和响应参数后写前端。验证：点心形 icon → 点赞成功 → 刷新 beans_likes 表出现记录；再点取消 → 刷新后记录消失。

安全边界：Apifox 访问令牌只给当前项目最小权限，不粘进聊天或日志；任务结束撤销或轮换。

七、GitHub MCP：最小权限 token 建仓推送

7.1 创建最小权限 token

1. GitHub → Settings → Developer settings → Personal access tokens → Generate new token；

2. 名称填 cursormcp，有效期按需选择（选项以当前官方文档为准），仓库范围选"所有仓库"或"指定仓库"；

3. 关键一步

   ：勾选 administration 权限（仓库创建/删除），权限级别设 Read and write------不勾这个，MCP 无法创建仓库；

4. 生成后复制 token，粘贴进 Cursor 时保留前面的 Bearer 前缀和空格，只替换 token 部分。

安全边界：这个 token 相当于 GitHub 账号的钥匙。只给本任务需要的最小权限（如只保留仓库创建相关），用不到的工具（workflow、actions 等）直接关闭------GitHub MCP 默认工具很多，全放开风险高；不把 token 粘进聊天或日志；任务结束或怀疑泄露立即撤销重新生成。

7.2 建仓并推送

请你在我的github账号{你的账号名称}下，创建一个私有仓库，叫做 coffee-bean-mcp，

并把这个项目提交到远程仓库。

提示词必须说清三件事：在哪个账号下 （profile 路径就是账号名）、私有还是公开 、仓库名称，少一个 AI 都会追问。实测账号名有歧义时，AI 会判断"可能是用户自己的仓库而非组织"，自动降级创建到用户仓库下并成功推送。验证：打开 AI 返回的仓库地址，代码应已完整推送。

八、通用安全与流程规范

8.1 最小权限审计表

接入任何 MCP 前，先对照这张表问一句"它能读什么、能写什么、谁能调用"：

工具	最低权限	不应授予
Figma MCP	指定文件/节点只读	整个团队写权限
DevTools MCP	当前本地页面调试	浏览器全部历史与 Cookie
Supabase MCP	当前项目	其他项目与生产库写权限
GitHub MCP	仓库创建 + 当前仓库读写	全部仓库管理、workflow 权限
Apifox MCP	当前项目接口文档	其他项目令牌

把表写进仓库或团队文档，之后任何人新增 MCP 都能判断是否超出任务必要范围。

8.2 任务拆成"读、计划、写、验"

任何工具可以直接写代码时，都要保留四步：读 （读取指定设计节点或一次失败请求）→ 计划 （列出将碰到的文件、数据和风险）→ 写 （仅修改已确认的文件）→ 验（本地复现、跑 build、检查 diff，再由人决定是否合并）。AI 的速度来自缩短信息传递，不应省掉变更审查。

8.3 断开轮换与连接失败三查

任务结束后撤销不再需要的 token、清理本地配置、轮换意外暴露的凭据；MCP 连接不是永久资产，权限越强生命周期越应短。

连接失败先查三件事：① 服务是否启动（DevTools 需要浏览器可被驱动）；② 当前账号/项目是否真的有最低权限（GitHub token 是否勾了 administration）；③ 配置的地址或 token 是否属于当前环境（Figma 的 https://mcp.figma.com/mcp、Supabase 项目名是否写对）。排查用变量名、权限范围和脱敏错误信息，不把完整 token 粘进聊天或日志。

深度实战：25 MCP完整实战 Figma和ChromeDevTools接入AI编程

概念与边界

MCP 把 Figma 设计事实与 DevTools 运行证据交给模型：Figma 提供布局、间距、颜色 token、组件状态等"可实现信息"，DevTools 提供控制台、网络请求、页面元素等运行证据。两者都按最小只读权限接入并与生产会话隔离------Figma 只读指定节点，DevTools 只读当前本地页面、不读全部 Cookie。

从零实现

1. 初始化

   ：Supabase 建 mcp-test 项目，填 3 个环境变量（URL / anon / service_role），建 beans 表，导入 beans_rows.csv，pnpm install && pnpm run dev 跑通 localhost:3000；

2. 读设计类

   ：Figma MCP 填 https://mcp.figma.com/mcp 还原落地页（修导航栏、本地化图片、中文化）；shadcn MCP 实现弹框提交写入 beans、注册 @magicui 引入 tweet 卡片；

3. 运行证据类

   ：DevTools MCP 自动化提交 2 个亚洲咖啡豆、样式落代码、修 Console 报错；

4. 数据与交付类

   ：Supabase MCP 指定 mcp-test 建 beans_likes 表；Apifox MCP 配 accessToken + projectId 写点赞前端；GitHub MCP 最小权限 token 建仓推送。

失败分支与处理

失败分支	处理
Figma 还原等待过久	正常，5~20 分钟，期间不要重复提交提示词
还原后导航栏/登录按钮丢失	追加"加入导航栏并适配主题风格"，再中文化、适配深浅色
图片引用 Figma 远程 URL 加载慢	图片下载到项目目录、压缩优化、CDN 加速
DevTools 浏览器实例冲突 / 无登录态	关闭所有已打开的 Chrome 窗口；沙箱无 Cookie 时在 AI 打开的窗口手动登录
控制台报错 AI 看不到	用 DevTools MCP 让 AI 自己 list console messages；后端报错仍贴终端日志
shadcn MCP 搜不到/太慢	手动 pnpm dlx shadcn@latest add <组件名>；第三方组件先看文档确认必传参数
Supabase MCP 把表建错项目	提示词必须写明项目名（mcp-test），建错后新开对话纠正
GitHub token 建不了仓库	检查是否勾选 administration 且为 read and write
标签字段填了中文逗号	字符串数组用英文逗号分隔

可验证验收

1. 首页为 Figma 还原落地页（导航含"首页/咖啡豆"、中文文案、人民币价格）；shadcn Dialog 提交后 beans 表新增记录，底部出现 3 张推特卡片；

2. DevTools 自动提交 2 条亚洲咖啡豆入库；样式调试后 AI 改码与调试一致；Console 报错被 AI 自动修复并清空；

3. beans_likes

   表由 Supabase MCP 创建，点赞/取消后记录出现/消失；GitHub 出现私有仓库 coffee-bean-mcp 且代码已推送。

发布前检查清单

6 个 MCP（Figma/shadcn/DevTools/Supabase/Apifox/GitHub）均按最小权限接入

service_role 未出现在浏览器端代码，NEXT_PUBLIC_ 前缀变量无密钥

GitHub / Apifox token 只勾必要权限，用完已撤销或轮换

DevTools 未读取浏览器全部 Cookie 与历史

Figma 还原后图片已本地化，不依赖远程 URL

beans 表结构与建表 SQL 一致，tags 用英文逗号分隔

多 Supabase 项目场景建表已指定项目名，未建错项目

控制台零报错，网络请求无 4xx/5xx

每个功能完成后 git commit，diff 已人工确认

价格、版本、额度等易变信息已标注"以当前官方文档为准"