MCP应用

• 可以直接让agent安装常用的mcp，无需手动安装

cursor配合MCP

• 1、在设置中，找到MCP
• 2、添加MCP

MCP服务

• 通过MCP服务，可以让ai干活，比如读取最新的文档、读取figma项目来生成页面等等

MCP 服务	能做什么
filesystem	ai模型可以读写你的本地文件
git	ai模型可以查看、创建、提交 Git 代码
figma mcp	ai模型可以读取你的 Figma 项目
context7	ai模型可以执行你自定义的业务逻辑、访问数据库等

Context7 MCP

• Context7 MCP的作用很实用：帮助AI读取第三方库的最新文档。

figma MCP

• 让AI能读取 Figma 设计稿，适合你快速生成 Vue 组件、H5 页、CSS 变量等。
• 智能体开始调用 Figma AI Bridge 中的工具和服务，读取设计稿的内容，自动生成文件，填入前端代码，并生成一个 index.html 文件供你预览效果

相关包

• figma-developer-mcp 是 npm 上的第三方包，它支持用 FIGMA_API_KEY 这类环境变量去访问 Figma 数据

ApiFox MCP

• 通过Apifox MCP读取某个接口，生成相关代码，参考样板文件xxx.ts"

• 为了让AI更好地理解接口格式，建议在项目里创建api-example.ts文件，把接口的类型定义和请求示例都放进去

chrome devtools mcp

• 让agent操作网页
• 让 AI 可以像开发者一样操作浏览器调试工具
  • 读取DOM
  • 找css问题
  • 检查js报错
  • 分析网络请求

使用：

• 为什么这个按钮操作没有反应？
  • ai就会自动去网页上操作分析，检查dom、检查控制台、分析network情况

Playwright mcp

• 让agent做网页自动化
• 自动填写表单、点击、导航、提取内容
• 可支持不同浏览器执行

前端应用

通过MCP服务可以为前端做很多事情，比如如下

• 1、分析代码、查代码
• 2、调试页面
• 3、抓取网页分析