把一句心事读成一顿麦当劳，再让三个陌生人决定这顿吃不吃。

零依赖 · 单文件 · 静态部署 · 菜单与营养数据取自麦当劳中国 MCP 的真实返回

在线体验：https://tom123223.github.io/maimen-xinshi/ ｜ 一键跑完五步：https://tom123223.github.io/maimen-xinshi/?demo=1

一个基于麦当劳中国 MCP Server 的 Skill：写下今天的心事，Skill 用 query-meals、list-nutrition-foods、calculate-price 等工具把它读成一份能解释得通的餐；点单之后，再交给三个陌生人审你的菜单——加点、扣点、不批，三人审完才定稿。

本仓库是这次参赛作品的完整交付，不只一个页面：

目标用户：一个人点单、又在犹豫“这顿该不该吃”的人——加班到十点、不想被推荐沙拉的人；想点四样、需要有人拦一下的人。

边界：只做决策辅助，不调用任何下单类工具。

点单这件事，很少是“饿了”决定的。三个观察构成了这个项目的起点：

1. 点单是情绪行为。 加班、被否、吵架之后，人点的东西和平时不是同一份；而现有推荐系统只看“你爱吃什么”，不看“你今天怎么了”。
2. 推荐系统只会加，不会减。 你选了四样，它就帮你凑到五样；没人会告诉你“这一份太多了”。真正缺的不是更多推荐，是有人拦一下。
3. 没有外部约束，决定撑不过三分钟。 自己给自己定的“冷静一下”，通常在电梯里就失效了。

所以我们做了两件事：先把心事翻译成一顿能解释得通的饭；再把“该不该吃、吃多少”交给三个不认识你的人。

输入今天发生了什么，选一个情绪标签（疲惫 / 挫败 / 焦虑 / 孤独 / 委屈 / 兴奋 / 平静 / 奖励自己）、一家门店，生成一份配餐。八个情绪不是装饰——每个都对应一组“想要什么口感、排斥什么、关键词是什么”的规则。

同一顿饭给出两份互不冲突的结论：快乐报告看你被满足了多少，热量报告看这顿占了多少配额。下面是三位虚拟麦友的表态——有人点头，有人劝你换个饮品，最后汇成一句综合意见。

结果面板最后一步是一张实体小票卡。它随指针倾斜，背后有厚度，贴纸挂在不同景深层；可以复制定稿文案、切纯文本版、生成分享链接。整张卡是 CSS 3D，不是图片。

这是本项目的主打功能，也是“理性吃饭”落地的地方。

五步读成一顿饭：写下心事 → 只能点麦当劳的菜 → 交给三个陌生人 → 三个人各自加点 / 扣点 / 不批 → 菜单定稿。页面顶部有一条五步进度条，跟着你最新的那张单子走。

第一步写心事，第二步点菜，商品是硬限制的。 页面里没有任何自填商品名的输入框，选品只能点菜单里的 22 个 chip（8 主食 / 7 配餐 / 7 饮品），价格和热量自动带出；一次 1–5 样，选满后其余置灰，留点余量让人扣。

三个人审完，菜单才定稿。 审议单上有三格固定座位：谁审了、做了什么动作、加了或扣了哪一样、原话是什么，全部摆在同一行。被扣的那行在原菜单上划掉并标「扣掉」，加进来的标「加点」——一眼看得出这顿饭是怎么被改的。图中上面那张是“不批”的结果，下面那张是“定稿”的结果。

投票必须选边、必须挑具体菜品、必须写满 6 个字。 三个动作各有一个按钮：加点（从菜单里给他加一样）、扣点（划掉他点的一样）、不批（整单不同意）。动作和理由矛盾会被拦下——选了不批却写“可以吃”，提交不了。

分发与反馈。 别人的单子进入待审池，显示心事、菜单、剩余时间和已审人数；审过并结算的单子移入「我审过的」，并标注你那一审和结果一致还是相反。陌生人的原话会留在理由墙上。

裁决规则只有一条，收在一个纯函数里（trJudge()）：三个人全部审完才定稿；不批 ≥ 2，或菜单被扣到一样不剩 → 这顿没有了；其余 → 菜单定稿，定稿菜单 = 原菜单 − 扣点 + 加点。24 小时内凑不满三个人则过期，菜单不生效——沉默不是默许。

八个指标收在底部，回答“我被加过什么、被扣过什么”。

移动端单栏排布，弹层贴底弹出，审议单的三个座位折成两列。

星座食运、此刻天气、麦门签。天气会反向影响配餐倾向（下雨推热的、闷热推冰的），星座与签按日期确定性生成——同一天同一星座结果固定，不做随机数糊弄。

页面底部列出 8 个真实工具，点开可以看到当时的真实请求参数与返回结构（样例取自实际响应，已裁剪）。

不需要 npm install，不需要 API Key，不需要构建。

# 方式一：直接打开
# 双击 index.html 即可完整运行（个别浏览器会限制 file:// 下的 localStorage，
# 若陌生人模块无法保存记录，改用方式二）

# 方式二：起一个本地静态服务（推荐）
cd maimen-xinshi
python -m http.server 8765
# 打开 http://localhost:8765

# 方式三：一键演示（自动填入示例心事并跑完五步）
# http://localhost:8765/?demo=1

要求：任意现代浏览器（Chrome / Edge / Safari / Firefox 近两年版本）。

页面之外，本项目的主体是一个可装载的 Skill。三步：

1. 申请 MCP Token：打开 https://open.mcd.cn/mcp，手机号登录 → 右上角【控制台】→【激活】，同意协议后复制 Token。

2. 配置连接器：WorkBuddy 侧边栏【专家·技能·连接器】→【连接器】→ 右上角【自定义连接器】→【配置 MCP】，填入：

{
  "mcpServers": {
    "mcd-mcp": {
      "type": "streamablehttp",
      "url": "https://mcp.mcd.cn",
      "headers": { "Authorization": "Bearer ${MCD_MCP_TOKEN}" }
    }
  }
}

保存后回到【自定义连接器】把 mcd-mcp 设为【启用】。

3. 装载 Skill：把本仓库放进 ~/.workbuddy/skills/maimen-xinshi/，重开会话即可；或直接说“用麦门心事帮我配一餐”。

不要把真实 Token 写进仓库（参赛声明第三章明确要求）。仓库内所有示例一律用 ${MCD_MCP_TOKEN} 占位。

不带 Skill、纯命令行也能试：

# 取一份门店菜单，确认餐品编码
python scripts/mcd_client.py --list-meals --store-code 1990102

# 生成热量报告
python scripts/nutrition.py --items "麦辣鸡腿堡,中薯条,可口可乐(中)"

场景 A：加班一周，想给自己一顿。

1. 心事框写“这周连着加班，今天终于把方案交出去了”，选「奖励自己」
2. 生成 → 得到双层吉士汉堡 + 苹果片 + 冰浓浓黑巧中杯，¥43.9 / 596 kcal，配一句“甜是今天唯一不用解释的东西”
3. 快乐报告与热量报告分开看：这顿占了多少配额、钠是否偏高；麦友建议把饮品换成锡兰红茶
4. 想要准确价格就点「应付合计」，走 calculate-price 复核逐项计价

场景 B：想点四样，交给陌生人裁决。

1. 在「先过三个陌生人」里写下心事，勾四样菜（麦辣鸡腿汉堡、中薯条、麦乐鸡5块、冰浓浓黑巧中杯），点「把菜单交给三个陌生人」
2. 三位陌生人陆续审完：小满扣掉中薯条（“四样已经够了，你不是饿，是不甘心”）、阿葵加上纯悦、你那一票加上苹果片
3. 定稿 5 样、¥64.9、865 kcal——原本的四样变成“一个汉堡 + 麦乐鸡 + 苹果片 + 一杯水 + 一杯甜的”
4. 若其中两人选了「不批」，这张单直接作废，理由会留在陌生人墙上

现场演示的三条路径：

整页预览（点击查看原图）：

• 桌面端整页
• 移动端整页
• 卡片区特写

┌──────────────────────────────────────────────────────────┐
│  数据侧（构建期 / 运行期均可）                            │
│  麦当劳中国 MCP  ──Bearer──▶  代理服务 / Skill / 脚本     │
│  query-meals · calculate-price · list-nutrition-foods …   │
│                    │                                      │
│                    ▼  生成快照（菜名 / 价格 / 营养 / 门店）│
├──────────────────────────────────────────────────────────┤
│  呈现侧（本仓库，纯静态）                                 │
│  index.html                                               │
│   ├─ MEALS 22 项 + STORES 3 家        ← 快照数据          │
│   ├─ EMO_RULES 8 条情绪规则           ← 配餐决策          │
│   ├─ pickMeals() 选餐 / 减量 / 保意图 ← 算法层            │
│   ├─ 陌生人模块  trJudge() 单一裁决   ← 规则层            │
│   └─ 渲染层：面板 / 3D 卡片 / 审议单  ← 视图层            │
└──────────────────────────────────────────────────────────┘

为什么前端不直连 MCP。 MCP 走 Authorization: Bearer 鉴权，Token 放进浏览器等于公开泄露，浏览器端另有 CORS 限制。所以正式形态是“后端 / Skill 侧调 MCP → 生成结果 → 前端只负责呈现”，本仓库演示的是后半段，数据是调用后的快照。

几个关键实现：

体积与性能：单文件约 180 KB，无外链字体、无图标库、无 CSS 框架；首屏无网络请求，file:// 直接可跑。

落地边界（评审关心"能不能真跑"，这里写清楚哪些是演示、哪些要补）：

maimen-xinshi/
├── README.md                 # 本文件
├── SKILL.md                  # Skill 主指令（WorkBuddy / Claude Skill 格式）
├── CONTEST_DECLARATION.md    # 官方参赛声明，原文未改动
├── MCP_INTEGRATION.md        # MCP 接入说明：Server / Tool / 调用流程 / 业务价值
├── workbuddy.md              # 使用 WorkBuddy 开发的对话上下文
│
├── index.html                # 演示前端：HTML + CSS + JS 单文件（零依赖）
├── docs/images/              # README 截图（15 张）
├── preview-*.png             # 桌面 / 移动 / 卡片区整页预览
├── verify_page.js            # 自检：语法、数据一致性、卡片等宽、8 情绪端到端
├── test_trial.js             # 「先过三个陌生人」E2E（67 项断言）
│
├── scripts/
│   ├── mcd_client.py         # MCP 调用封装（streamable HTTP）
│   ├── nutrition.py          # 热量报告计算
│   ├── card.py               # 心事卡片生成
│   └── check_snapshot.py     # 快照 vs 实时数据三维比对
├── data/
│   ├── emotions.yaml         # 情绪 → 口味偏好映射
│   ├── mayou.yaml            # 三位虚拟麦友的人设与话术
│   └── snapshot/             # 门店菜单与营养快照（2026-10-21）
├── examples/
│   └── sample_session.md     # 一次完整会话示例
└── server/                   # 本地 MCP 代理服务（Node 单文件）
    ├── server.js
    └── start.bat

注意：不要把 MCP Token 写进前端。本仓库前端不发起任何需要鉴权的请求。

页面数据全部来自麦当劳中国 MCP 的真实返回，但它是「调用后的快照」，不是浏览器里的实时请求。

刻意的诚实设计：营养数据缺失时显示「暂未获取」并排除在合计之外，不做估算填充；页脚写明数据时点；实际以下单时麦当劳官方渠道为准。

三个脚本可复现，证明页面上的数字不是编的。

# 0. 先起静态服务：E2E 用无头浏览器从这里加载页面
python -m http.server 8765

# 1. 页面自检：语法、22 项 vs 快照、卡片等宽、8 种情绪端到端
node verify_page.js

# 2. 陌生人模块 E2E：67 项断言
node test_trial.js

# 3. 快照 vs MCP 实时数据：在售状态、价格、热量三维比对
set MCD_MCP_TOKEN=<your-token>
cd scripts && python check_snapshot.py

verify_page.js 覆盖：脚本语法、22 个品项与快照一致、三张卡片等宽、8 种情绪的端到端（价格合计、热量合计、理由与餐食自洽）。

test_trial.js 用无头 Edge 的虚拟时间驱动，覆盖：

最近一次结果（2026-10-21）：

• check_snapshot.py 核对的 6 个工具均真实返回，111 项餐品全部在售，营养数据零变动；
• 页面 22 项与实时挂牌价逐项一致；
• 8 种情绪端到端全部通过；
• 陌生人模块 67 项断言全部通过；
• 1440 / 390 两种宽度下逐组件量过 scrollWidth === clientWidth，无横向溢出。

Q：为什么不能自己输入想吃的菜？ A：这是刻意的限制。能自填就能写“一份炸鸡”，那审核就没有边界了。菜单来自门店真实挂牌数据，价格与热量才有依据。

Q：三个陌生人是真人吗？ A：演示版是本地模拟器（trBotVotes() 按时间轴生成立场），真实产品必须由服务端把单子分发给三位真人，并做用户去重与防刷。要补的五项见「技术方案与架构 · 落地边界」。

Q：票数够了为什么不立刻给结果？ A：给。现在的规则就是「三个人审完即定稿」，不用等满 24 小时，24 小时只是等人到齐的上限。早前的购物冷静期版本要求"票够也要等满 24 小时"，两者都成立，区别在于约束的是时间还是人——审核菜单时，人比时间重要。

Q：可以直接商用吗？ A：不可以。这是参赛作品，非麦当劳官方产品，商标与菜单数据归麦当劳中国所有。

Q：手机上怎么演示？ A：python -m http.server 起服务后，手机访问 http://<电脑内网IP>:8765/?demo=1，加速模式下一个完整审议闭环约 20 秒。

欢迎提 Issue 讨论规则与文案，提 PR 前请确认：

1. 改动 index.html 后跑 node verify_page.js 与 node test_trial.js，两者都必须全绿；
2. 新增菜品只能来自 MCP 返回，不要手写价格与营养；新品类需要同时补 cat 与营养字段；
3. 新增情绪标签要在 EMO_RULES 里补齐 want / ban / kw 三维，否则配餐会退回默认规则；
4. 改动陌生人模块的裁决逻辑，只能动 trJudge()，不要在其他地方另写一套判断；
5. 截图请放在 docs/images/，命名用小写短横线（例：trial-form.png）。

代码风格：原生 ES5 语法（不用箭头函数与模板字符串），CSS 变量统一走文件顶部定义，注释用中文、写“为什么”而不是“是什么”。

参赛形式：个人参赛（1 人），独立完成产品设计、前端实现、数据接入与测试。

致谢：

• 麦当劳中国 MCP 提供菜单、价格、营养与门店数据；
• 麦当劳程序员节创意开发大赛提供命题与展示机会；
• 视觉上参考了丝网印刷与 zine 拼贴的排版语言，“先过三个陌生人”的产品逻辑参考了「钱包请等等」的冷静期思路。

本项目为麦当劳程序员节创意开发大赛参赛作品的演示前端，由参赛者独立开发，非麦当劳官方产品，与麦当劳中国无隶属或合作关系。餐品、价格、营养数据取自麦当劳中国 MCP 的真实返回（2026-10-21 时点），可能随门店与时段变化，实际以麦当劳官方渠道实时结果为准。页面内的天气、星座、麦门签为趣味内容，不构成营养、医疗、心理或任何专业建议。