前端Vibe Coding探索：Cursor+MCP打造沉浸式开发流（使用MCP与Cursor Rules让Vibe Coding更快速与精准）

许久不见，关注哈士奇的xdm，很久没有写文章了，哈士奇从公司新人培训结束，刚刚回来工作两个月，最近工作也算是走入正轨了，之前写出来的AI Review的工具也在组里面使用了一段时间，最后因为某些特殊原因还是没有继续使用下去。

最近哈士奇也在不断学习一些新的技术和开发模式，所以这次来和大家聊聊最近学习到的一些内容，并且分享一些自己的看法。

在前端开发领域，"效率" 与 "沉浸感" 始终是我们开发者追求的核心目标。随着 AI 工具与工作流协同技术的发展，一种全新的开发模式 ------Vibe Coding（氛围编码）逐渐兴起。它不再局限于单一工具的效率提升，而是通过与agent的对话，去除程序员对于代码的介入，构建符合个人开发节奏、降低认知负荷的沉浸式开发环境。

其中，AI 编辑器 Cursor 与 MCP（Model Context Protocol，模型上下文协议）的组合，成为前端 Vibe Coding 的核心实践方案。本文将从概念解析、工具配置到生态协同，全面探索这一开发模式并进行一些更优雅的使用。（对这些概念了解的直接折叠第一章的絮叨）

一、核心概念解析

1. Vibe Coding

Vibe Coding 直译是 "氛围编码"，它作为一种新兴的编程范式，由OpenAI联合创始人、前特斯拉AI部门总监Andrej Karpathy于2025年2月在社交平台X上首次提出。其核心内涵是让开发者能够通过自然语言表达编程意图，指导AI编写、测试、优化代码。它强调让开发者专注于设计产品和思考创意，通过自然语言表达编程意图，而并非繁琐的代码实现。前端开发中，通过直接向ai提问获取自己想要的界面展示和逻辑展示。比如下面：

我可以通过直接与ai对话来生成一个APP，并帮助我进行解决问题，而自己不需要去查看代码逻辑，只需要观察页面上面的展示，告知ai帮我修改优化。

2. Cursor

cursor.com/cn/docs

Cursor 是一款由 AI 驱动的代码编辑器，能够理解你的代码库，并通过自然语言助你更快编写代码。只需描述你想要构建或修改的内容，Cursor 就会为你生成相应的代码。（更好的大模型需要付费）

2.1.Cursor是什么

Cursor 基于 VS Code 内核开发（界面、操作逻辑和 VS Code 高度一致，上手成本极低），但聚焦「AI 辅助编码」，而非全功能编辑器。它的核心优势是：

AI 原生集成：无需安装额外插件，打开就能用 AI 功能，响应速度比 VS Code + AI 插件更快；
轻量高效：体积比 VS Code 小，启动快，专注编码场景，无冗余功能；
精准适配开发者：AI 模型针对代码场景优化，支持多种编程语言、框架，代码生成 / 修改的准确率更高。

2.2.主要功能（核心亮点）

1. 实时 AI 代码建议（Inline Suggestions）

编码时自动联想补全代码，支持单行、多行甚至整个函数的生成；
例如：输入注释 // 用 JavaScript 实现数组去重，或输入函数名 function uniqueArr()，AI 会实时弹出完整实现方案，按 Tab 即可采纳。

2. 自然语言转代码（Chat to Code）

用日常语言描述需求，AI 直接生成对应代码，支持复杂逻辑（如算法、业务逻辑、配置文件等）；
操作：打开左侧「AI Chat」面板，输入指令（例："用 Python 写一个爬虫，爬取掘金文章标题和链接，保存为 CSV 文件"），AI 会生成完整可运行的代码，并附带注释。

3. 代码解释 / 重构 / 调试

解释代码：选中陌生代码，右键选择「Explain Code」，AI 会用通俗语言说明代码功能、逻辑流程、潜在问题；
重构代码：选中需要优化的代码，右键选择「Refactor Code」，AI 会自动优化结构、简化逻辑、提升性能（如将冗余代码精简、转换为更优雅的写法）；
调试报错：遇到报错时，复制错误信息到 AI Chat 面板，或直接选中报错代码，AI 会分析报错原因、给出修复方案，甚至直接生成修正后的代码。

4. 对话式编程（AI Chat 面板）

像和 ChatGPT 聊天一样，与 AI 讨论技术问题、询问语法细节、设计方案；
支持上下文关联：例如先让 AI 生成一个函数，再追问 "如何优化这个函数的时间复杂度"，AI 会基于之前的代码给出针对性建议。

5. 支持多语言与场景

编程语言：覆盖 Python、JavaScript/TypeScript、Java、Go、C++、PHP 等主流语言，以及 HTML/CSS、SQL 等；
场景适配：支持框架（React、Vue、Django 等）、算法题、脚本编写、配置文件生成等。

3. MCP

modelcontextprotocol.io/docs/gettin...

MCP（Model Context Protocol）是一种用于将 AI 应用程序连接到外部系统的开源标准。使用mcp可以让ai连接到对应的数据源（比如对应应用的数据库或者本地）或者是特定的工具（比如浏览器）还有工作流程，可以让ai了解到特定的关键信息执行对应任务。

总而言之，假设我们需要充手机电，但是我有很多个手机：vivo、oppo、小米、华为，我可以通过一个充电线，把电传给不同的手机，同样的我很多个手机想要传输数据到我的电脑里面，也只要通过同一根充电线就行了。MCP就是把不同的应用连接到大模型的充电线。

这张图经典永流传哈

二、使用 Agent 进行 Vibe Coding的问题

我们在vibe coding的时候可能会碰到这样的问题：

询问agent进行生成代码以后，浏览器出现问题，需要从控制台复制问题原因交给agent，告知他们代码出现啥问题了，但是实际上，这一步就增加了人工操作的过程（复制问题，粘贴到对话框，询问ai发生什么事情了），如果报错信息很长的话甚至会超出询问限制。
复制设计稿图片给agent以后，agent总会出现生成不准确，使用错误的语言的问题，或者使用figma或者蓝湖官方生成代码大模型的时候，没有使用想要的自定义组件的问题（公司指定或者自己封装的），这种情况下ai生成的代码是没有意义的，因为不满足使用需求。下面是我把问题一的图片复制到蓝湖的Mastergo里面大模型提示的

三、解决

针对上述问题的解决方法如下

针对调试问题

使用chrome-devtools-mcp

这个mcp是由chrome官方推出的mcp，可以方便ai直接读取我们需要检查的页面的devtools，并且分析页面内的内容是否有问题，尤其是分析网页性能.

我们进入官网直接添加到cursor，然后我们看到下面的和chrome-devtools有关的mcp变绿就行

最后我们来看看

针对设计稿还原问题

使用 Rules+ figma MCP

Rules

cursor支持四种Rules

Project Rules 和 User Rules 可以直接在cursor里面配置

Project Rules是针对项目进行配置的规则，它可以针对项目下的每个文件夹编写特定的规则，每个文件夹的规则不会影响其他文件夹

bash 复制代码

project/
  .cursor/rules/        # 项目级规则
  backend/
    server/
      .cursor/rules/    # 后端专用规则
  frontend/
    .cursor/rules/      # 前端专用规则

最新的Project Rules可以有四种选择

Always 始终包含在模型上下文中
Intellgently 根据描述匹配
Specific Files 当和指定模式匹配的时候
Manually 仅在 @模型名称 明确提及时才会包含

markdown 复制代码

## 项目信息
- 项目: example
- 技术栈: Vue 3.3.7 + JavaScript + Vite + Pinia + Ant Design Vue 4.2.6
- 子应用: 
## Vue 组件结构顺序
1. `<template>` 模板
2. `<script setup>`:
   - import 导入
   - Props 定义
   - Emits 定义
   - Store/Composables
   - 响应式数据 (ref/reactive)
   - 计算属性 (computed)
   - 方法 (functions)
   - 生命周期 (onMounted 等)
3. `<style scoped lang="less">` 样式
## 代码风格
- 使用 Composition API (`<script setup>`)
- 优先使用 CSS 处理样式，避免 JS 样式计算（除非 CSS 无法实现）
- 禁止内联样式和滥用 `!important`
- 使用 Prettier + ESLint 格式化
- 函数遵循单一职责原则
- 变量作用域合理，避免全局污染
- 避免深层嵌套，使用解构
## 注意事项
1. Vue 文件超过 500 行必须拆分
2. JS 文件超过 800 行必须拆分
3. 优先复用团队基础组件
4. 大数据量必须使用虚拟列表
5. 所有异步操作必须有错误处理
6. 所有用户文本必须国际化

User Rules则是针对使用者的Rules，使用cursor的时候就会自动读取

复制代码

请使用中文回复
请简洁回复

AGENTS.md需要在项目的根目录下面配创建并写入对应的规范，在向agent提出需求的时候会自动对文件读取并加入提示词

markdown 复制代码

# 项目说明

## 代码风格

- 所有新文件使用 TypeScript
- React 中优先使用函数组件
- 数据库列使用 snake_case 命名

## 架构

- 遵循仓储模式
- 将业务逻辑保持在服务层中


## 目录结构

example
├── components/      # 公共组件
├── directives/      # Vue 指令
├── filters/         # 数据格式化函数
├── mock/            # MSW 模拟数据
├── pages/           # 所有页面
├── plugins/         # Pinia 插件
├── services/        # 服务抽象（接口/埋点/三方服务）
├── stores/          # Pinia 状态管理
├── util/            # 工具类
├── locales/         # 国际化
├── assets/          # 静态资源
├── styles/          # 样式文件
├── main.js          # 主入口
└── router.js        # 路由配置

Team Rules 一般是团队用的，这个暂且不提

figma mcp

配置：

复制代码

首先全局下载  npm install -g figma-developer-mcp

这里我们选择个人token并且创建一个新的token

给上对应的项目权限，在这里哈士奇给了所有的项目的读取权限，给了三个月的token有效期

记得保存好token，不然需要重新创建了

点开cursor

json 复制代码

windows
"Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key= 写你的touken ",
        "--stdio"
      ]
    },
    
mac
"Figma MCP": { 
    "command": "npx", 
    "args": [ 
    "-y", 
    "figma-developer-mcp", 
    "--figma-api-key= 写你的touken ", 
    "--stdio" 
    ]
  },

绿豆出现就可以用了

使用：

我们去figma找到对应的设计稿，复制设计稿的链接

接下来直接复制给agent使用就可以了

优点

直接获取链接可以获得更详细的设计稿数据，相比较截图生成能够有更好的设计稿还原
使用rules确定了整个项目的代码风格，最重要的是可以把项目的自定义组件带入，相比较普通的设计稿的大模型生成可以更符合组内规范

总结

总的来说通过chrome-devtools-mcp（调试自动化）+cursor Rules（代码风格约束）+figma mcp（设计稿数据确定）是目前哈士奇探索出来的最佳的vibe coding模式，如果大家有更好的ai使用方法欢迎与哈士奇分享。