Cursor 提效实战:我的前端 Prompt、审查 SKILL、MCP 接入完整方法

你的 AI 编程助手为什么总不稳定?

很多人用 Cursor 或其他 AI 编程助手时,会遇到同一个问题:有时很聪明,有时很跑偏。根因通常不是模型本身,而是没有把 Prompt、SKILL、MCP 分层配置好。本文用一个简单比方讲清三者差异,并给出我自己的前端 Prompt 与 SKILL 实战片段,附 Cursor 最短配置步骤,帮助你把 AI 从"会聊天"升级为"可交付"。


目录

  • [1. 先讲结论:三者分工](#1. 先讲结论:三者分工)
  • [2. 一个小比方秒懂三者区别](#2. 一个小比方秒懂三者区别)
  • [3. 我的 Prompt(前端规则)示例](#3. 我的 Prompt(前端规则)示例)
  • [4. 我的 SKILL 示例(已发布)](#4. 我的 SKILL 示例(已发布))
  • [5. MCP 入门:没用云效先玩高德](#5. MCP 入门:没用云效先玩高德)

1. 先讲结论:三者分工

  • Prompt:约束 AI 的思考方式、输出风格和工程边界
  • SKILL:把高频任务沉淀为标准流程(SOP)
  • MCP:给 AI 接入外部工具与实时数据能力

一句话:Prompt 管"怎么说",SKILL 管"怎么做",MCP 管"能做什么"。


2. 一个小比方秒懂三者区别

把 AI 当成一个新同事:

  • Prompt = 你给他的"团队做事规范"
  • SKILL = 你给他的"岗位作业手册"
  • MCP = 你给他的"系统权限账号"

没有 Prompt:会做事但不按你团队规范。

没有 SKILL:同一件事每次做法都不一样。

没有 MCP:懂很多,但拿不到实时信息和工具能力。


3. 我的 Prompt(前端规则)示例

Cursor提示词配置 :

.cursor/rules/你的规则名.md
可选四种引用方式:

始终应用:全局生效,所有聊天、Cmd+K 都生效

智能应用:AI 自动判断,相关场景才生效

应用于特定文件:只在匹配指定文件 / 路径时生效

手动应用:仅 @提及时才触发

规则文件路径:

/.cursor/rules/vue3-typescript-vite.mdc

提示词案例(提示词最好不要写的超过五百行):

md 复制代码
你是资深前端工程师,专精 Vue 3 组合式 API、TypeScript 类型工程化、Vite 构建体系。

- 仅使用 <script setup>,禁用 Options API
- 基础类型/单值用 ref,复杂对象用 reactive
- 禁止隐式 any,注入值必须有类型和兜底
- 样式写在 <style scoped lang="scss">,避免全局污染
- 必须做防御性编程:接口返回、inject、用户输入都要空值/类型校验

这类 Prompt 的价值是:把"个人经验"变成"团队统一标准"。


4. 我的 SKILL 示例(已发布)

CursorSKILL配置

.cursor/skills/你的规则名.md

我发布的 Skill:

Skill 关键片段:

md 复制代码
## Required Review Output
1. Critical
2. Major
3. Minor
4. Test Gaps
5. Pass Summary

## Execution Workflow
- [ ] Step 1: Collect diff context
- [ ] Step 2: Run correctness and regression scan
- [ ] Step 3: Run Vue 3 + TS rule scan
- [ ] Step 4: Run UI and style consistency scan
- [ ] Step 5: Run testing and risk scan
- [ ] Step 6: Produce structured findings

如何用:

  • 在 Cursor 对话直接输入:/project-review-checklist
  • 或直接说:按 project-review-checklist 审查这次改动

这会让代码审查从"看心情"变成"有门禁、有标准、有输出模板"。


5. MCP 入门:没用云效先玩高德MCP


相关推荐
总要学点什么16 分钟前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质
10share27 分钟前
基于大模型的 i18n 方案:把中文原文当 Key,轻松搞定多语言维护
前端·vue.js
古茗前端团队3 小时前
由 key 引发的思考
前端·javascript·react.js
kyriewen3 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
鹏多多3 小时前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
火山引擎开发者社区3 小时前
构建专属的飞书群开发助手,AgentKit Studio 一键部署 DeepSeek Harness Super-Agent
前端
啾咪orJIUMI6 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
掘金者阿豪6 小时前
AI数据库不只是向量检索:从数据语义到库内智能计算的技术演进
前端
梦里寻码6 小时前
我用 NestJS + Vue3 写了一套完整的研发管理系统(58 表 / 229 API / 130 项断言,全开源
前端·后端·算法
FRing036 小时前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2