AI Rules & MCP 抄作业(附samples)

给"完全零基础"的小伙伴讲清楚两件事:

  1. 最近很火的 MCP(Model Context Protocol)到底是什么?
  2. 经常听说的 "AI Rules" 又是啥?

下面用"人话+例子+一步一步可抄的作业"讲明白,最后再来一张对照表,保证看完就能上手。


一、MCP:把 AI 变成"万能瑞士军刀"的插线板

  1. 一句话定义

    MCP = 给大模型用的"USB-C 插线板"。只要软件/数据/硬件按这个插线板做一个小接头(MCP Server),任何支持 MCP 的 AI(Claude Desktop、Cursor...)就能即插即用,不用每家单独开发插件 。

  2. 生活例子

    你男朋友(LLM)会聊天,但不会点外卖。

    过去:你想吃 KFC,得自己写代码教会他下单。

    现在:KFC 官方做了一个"MCP 接头",男朋友连上后马上知道"哦,原来 get_menu() 可以查菜单,order() 可以下单",直接帮你点好 。

  3. 最小可运行 Demo(10 行代码,复制就能跑)

    场景:让 AI 帮你算"打车花了多少钱"。

    ① 安装

    npm install -g @modelcontextprotocol/sdk

② 新建 fare.js

javascript 复制代码
#!/usr/bin/env node
const { FastMCPServer } = require('@modelcontextprotocol/sdk');
const server = new FastMCPServer('fare-server', '1.0.0');
server.addTool('calc_fare', '计算打车费',
  { km: { type: 'number', required: true } },
  async (args) => {
    const fee = args.km * 2.3 + 10;   // 2.3元/公里 + 10元起步价
    return { fee };
  });
server.start();

③ 给 Claude Desktop 加一条配置(settings → MCP → Add)

json 复制代码
{
  "mcpServers": {
    "fare": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/fare.js"]
    }
  }
}

④ 重启 Claude,聊天框直接说:

"帮我算 12 公里打车费"

→ Claude 自动调用 calc_fare,返回答案 37.6 元。

你就拥有了一个"打车计算器" MCP Server !


二、AI Rules:给 AI 的"员工手册"

  1. 一句话定义

    AI Rules = 存在 GitHub(或本地)的一份"行为守则",AI 每次开工前先读一遍,保证代码风格、变量命名、安全规范全部统一 。

  2. 生活例子

    公司新来的实习生(AI)代码风格千奇百怪。

    你把"React 项目规范"写成 rules.md 放到 GitHub,

    AI 每次写组件前自动拉取这份手册,从此 tab 宽度、命名、目录结构全部一致,再也不用手动 code review 低级问题 。

  3. 最小可运行 Demo(5 分钟搭好)

    ① 在 GitHub 建个空仓库,放一条规则文件
    github.com/yourname/ai...

    内容示例:

diff 复制代码
- 组件名必须 PascalCase  
- 统一使用 TypeScript 严格模式  
- 禁止 any 类型

② 本地安装 Agent-Rules MCP Server

npm install -g agent-rules-mcp

③ 启动(把仓库地址告诉它)

export RULES_REPO=yourname/ai-rules

agent-rules-mcp

④ 在 Cursor 的 .cursorrules 里加一句

ini 复制代码
mcp://agent-rules/get_rules?project=react

⑤ 以后在 Cursor 写代码时输入

"写一个按钮组件"

→ AI 会先拉取 react.md,生成的代码自动符合 PascalCase、TypeScript、无 any 类型 。


三、横向对比一张表

维度 MCP AI Rules
本质 让 AI"能干什么"的插线板协议 告诉 AI"怎么干"的员工手册
解决痛点 不同工具/数据接口碎片化;重复开发插件 项目间规范不统一;AI 输出风格混乱
谁提供内容 第三方服务商/你自己写的 MCP Server 你自己写的 markdown/txt 规则文件
存放位置 本地或远程 MCP Server GitHub 仓库、本地文件、Gist 均可
更新方式 Server 升级即可,AI 端零改动 改规则文件,AI 下次自动拉取最新版
典型操作 "查天气""下单""读数据库" "组件命名用 PascalCase""变量前缀用 $"
见效速度 配置好立即多出 N 个新能力 配置好立即输出符合规范代码
学习成本 需写 10~30 行 JS/Python 做 Server 只需写 markdown,0 代码

四、10 分钟速通清单(直接照做)

  1. 装 Claude Desktop 或 Cursor(已有可跳过)。
  2. 跑一遍"打车费" MCP Server,体会"AI 瞬间多出新技能"。
  3. 把公司/项目现有规范 copy 到 GitHub,搭一个 AI Rules 仓库。
  4. 在编辑器里引用规则,让 AI 写一段代码,肉眼可见风格统一。
  5. 邀请同事:以后谁再手动改 tab 宽度,就请他去写 MCP Server 冷静一下 😉

一句话总结

MCP 负责"让 AI 多长手脚",AI Rules 负责"让 AI 别乱来"。

两个都不难,10 分钟就能各跑通一个最小例子;合起来用,AI 既厉害又听话。

相关推荐
^^为欢几何^^2 小时前
vue3+el-upload+多张图片(20MB左右)+图片压缩上传到后端+可限制条数+懒加载
前端·javascript·vue.js
BD_Marathon2 小时前
Vue3_列表渲染
前端·javascript·vue.js
知其然亦知其所以然2 小时前
为什么说 String 是 JavaScript 中“最安静却最危险”的类型
前端·javascript·程序员
wusp19942 小时前
【超完整】Tailwind CSS 实战教程
前端·css·tailwind
jun_不见2 小时前
nest初体验-用nest实现一个简单的CRUD功能
前端·node.js·全栈
soda_yo2 小时前
React哲学:保持组件纯粹 哈气就要哈得纯粹
前端·react.js·设计
Bigger2 小时前
Tauri (22)——让 `Esc` 快捷键一层层退出的分层关闭方案
前端·react.js·app
大猫会长2 小时前
react中用css加载背景图的2种情况
开发语言·前端·javascript
编程修仙2 小时前
第一篇 VUE3的介绍以及搭建自己的VUE项目
前端·javascript·vue.js