用 Muse Code 做一个 Ray-Ban Display 单按钮网页原型

01｜先做一张卡，不急着做完整应用

先选一个小动作。比如屏幕显示“第 1 步 / 准备中”，用户按眼镜的方向键或点选后，卡片变为“第 2 步 / 已继续”。网页保留可聚焦的按钮，键盘、鼠标和眼镜输入都走同一个更新函数。这个小原型可以检查排版和输入，不需要先接账号、网络或云端资料。

Ray-Ban Display Web App 使用常见的 HTML、CSS 和 JavaScript。Meta 官方示例采用 React 与 UI Toolkit，但它仍是网页体验；Muse Code 在这里是帮你写代码的工具，不是运行在眼镜里的 Meta AI。

02｜先装对开发工具，并分清两个 MCP

Meta 的 Wearables Web App AI Toolkit 仓库提供 Muse Code 插件和项目技能。照仓库当前 README，在 Muse Code 终端运行两条命令添加官方市场并安装插件。第一条是 muse plugins marketplace add meta-wearables https://github.com/facebook/meta-wearables-webapp，接着运行 muse plugins install meta-wearables-webapp@meta-wearables。如果市场内容变化，先查 README 再继续。

仓库还列出 Meta Wearables Docs MCP 地址 https://mcp.developer.meta.com/wearables，它让编程助手检索官方文档。它不是 WebMCP，也不会自动把你的网站按钮交给 Meta AI。不要把 API key 或其它秘密放进普通提示词；这个练习本身不需要密钥。

03｜让 Muse Code 只搭出最小页面

先创建一个空项目，再把任务和验收条件一起交给 Muse Code。可以这样写。

“请按 Meta Wearables Web App Toolkit 当前官方模板创建一个最小 Ray-Ban Display 页面。屏幕只显示标题、状态文字和一个‘继续’按钮。把方向键焦点放在按钮上，Enter/Select 与点击调用同一个 advanceStep 函数；状态只在本地从 step 1 变成 step 2。不接外部服务，不自动发布。请标出启动本地预览的命令，并说明我如何用 Chrome Simulator 检查。”

检查生成的 package 和脚本后再运行安装步骤。不要让工具为了这个原型多接定位、相机、账号或远程服务。UI Toolkit 帮助统一屏幕组件与方向键焦点；普通按钮仍应能被看见、聚焦和操作。

04｜先在 600 × 600 模拟画面里看清楚

Toolkit 的项目通常基于 React、Vite 和 TypeScript。使用项目 README 给出的本地预览脚本；官方示例通常在 http://127.0.0.1:4173/ 提供预览。打开 Chrome 后启用 Meta Ray-Ban Display Simulator 扩展，检查 600 × 600 画布。标题、当前状态和主按钮应一眼能读，别把操作挤到边缘，也别用低对比的小字。

先用模拟器方向键把焦点移到按钮，再按 Enter/Select。另用鼠标点击一次，确认两条路径显示相同结果。模拟器是桌面预览，不等于已在实物眼镜上运行。

05｜再决定要不要给 Meta AI 暴露一个小工具

只有希望 Meta AI 能在 Web App 打开时调用页面动作，才加 WebMCP。官方文档使用 document.modelContext.registerTool() 注册工具；它的 name、description 和 execute 描述工具与动作。这个原型可注册 advance_demo_step，让 execute 和按钮点击共用 advanceStep()，这样语音调用与手动操作不会各写一套状态逻辑。

请把工具说明写得窄而直白，例如“把演示卡片前进到下一步”。不接受任意代码、网址或用户指令作为输入。即使本例不需要参数，也按当前文档给出空对象 schema；在执行函数里仍检查状态并返回一句简短结果。保留页面按钮，让不支持语音工具的用户照样能完成动作。

06｜用 Simulator 检查注册与调用，不只看控制台

在开启 WebMCP 的桌面 Chrome 中，Meta Web Apps Simulator 可以呈现显示区域、方向键输入和工具调试信息。按当前官方 WebMCP 文档，在浏览器打开本地预览后先看页面工具是否被发现；再通过 Simulator 的 chat/voice agent 发起调用，确认状态确实只前进一次、返回内容能让人看懂。不要只直接调用页面里自己的 execute 函数，因为那绕过了工具注册路径。

官方说明提到工具资格可能在 App 启动时判定；如果 document.modelContext 不存在、工具没出现或重复注册报错，先保留按钮回退，再查设备/浏览器资格、命名和注册时机。WebMCP 仍处于早期开发者预览，工具列表和 API 可能变化。

07｜只有具备眼镜时，才检查实际 Meta AI 路径

Meta FAQ 说明，设备端体验需要兼容的 Ray-Ban Display 眼镜并与 Meta AI app 配对；添加 Web App 的入口在 Meta AI app 的 Developer Mode / App Connections 流程。WebMCP 是否可用还取决于设备和 rollout 资格。官方文档说有些设备要启用对应选项，资格可能在 App 启动时判断；改完设置后需要重启眼镜和 Meta AI app 才能重新检查。

如果你没有这套设备，就把完成状态写成“桌面 Simulator 验收通过”，不要写“Meta AI 已能控制眼镜”。公开可访问的 HTTPS 页面是眼镜加载托管应用的要求；本教程没有部署或添加任何应用。Meta Connect 的公开 FAQ 仍把面向公众的目录/提交流程标为后续开放，因此不要承诺已可上架。

08｜用三项检查收尾

把验收记成三项。页面在 600 × 600 区域是否可读；方向键和 Enter/Select 是否能操作同一个按钮；若做了 WebMCP，Simulator 是否通过注册路径调用后得到预期的一次状态更新。遇到任何不确定的工具权限，就留在手动按钮流程。

完成后把本地变更和未验证项记下来，例如“网页布局与模拟输入已检查；未连实机、未发布”。这份记录能避免下次把本地演示误当成已经上线或已经获得设备端语音权限。