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 既厉害又听话。

相关推荐
于慨20 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz20 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶20 小时前
前端交互规范(Web 端)
前端
CHU72903521 小时前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing21 小时前
Page-agent MCP结构
前端·人工智能
王霸天21 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航21 小时前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
@大迁世界21 小时前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript
PieroPc21 小时前
一个功能强大的 Web 端标签设计和打印工具,支持服务器端直接打印到局域网打印机。Fastapi + html
前端·html·fastapi
悟空瞎说21 小时前
深入 Vue3 响应式:为什么有的要加.value,有的不用?从设计到源码彻底讲透
前端·vue.js