用途：该技能是构建可在 ChatGPT、Claude 等聊天界面中渲染交互 UI 的应用的参考规则集，关注从 MCP 工具设计到 UI 资源接线、桥接通信、显示模式、状态管理、安全边界、视觉打磨与跨宿主分发的全流程。据资料，截至 2026 年 1 月，这些平台共用 MCP Apps 标准（@modelcontextprotocol/ext-apps），由 Claude、ChatGPT、VS Code 和 Goose 渲染；OpenAI Apps SDK 是其超集，额外提供 window.openai 桥；MCP-UI（@mcp-ui/server 与 @mcp-ui/client）为社区实现。
核心心智模型：应用先是 MCP 工具，其次才是 UI。模型调用工具，工具返回数据及指向 UI 资源的链接，宿主在沙箱 iframe 中渲染该资源，iframe 通过定义好的桥回传。链条前段出错会导致什么都不渲染，后段出错则渲染破损、不安全或不精致。
主要能力：共 46 条规则，分 8 类并按影响优先级排序。工具与发现设计（tool-）和 UI 资源接线（wire-）为关键项；宿主-组件数据桥（bridge-）、显示模式与响应式布局（display-）、状态与模型上下文（state-）、安全与数据边界（sec-）为高优先；视觉设计与体验打磨（design-）中高；分发与跨宿主可移植性（dist-）中等。规则涉及 structuredContent/content/_meta 契约、output schema、安全注解、resourceUri 与 mcp-app MIME 类型、ui:// 方案、自包含打包、postMessage 来源校验、显示模式回退、setWidgetState、CSP 允许列表、服务端鉴权、WCAG AA 对比度、减少动效偏好、无 UI 时的文本回退、提交元数据与宿主能力探测等。
使用方式：阅读各参考文件中的完整说明与正误代码示例，从类别 1 和 2 开始，先解决能否渲染的问题，再处理显示与设计。参考文件包括 references/_sections.md（类别定义与影响排序）、assets/templates/_template.md（新规则模板）、metadata.json（版本与参考 URL）及 AGENTS.md（全部规则目录）。相关技能 build-mcp-server 为该技能 UI 规则所依赖的 MCP 服务器设计入口。
适用场景：设计聊天应用的 MCP 工具与返回契约时；将工具接至组件时；编写 iframe 组件及其桥时；选择显示模式、状态、主题与布局时；加固应用（CSP、沙箱、密钥、OAuth）或准备目录提交时；评审或重构现有 ChatGPT 应用、Claude 应用或 MCP-UI 代码时。
限制：具体安装命令、收费、平台覆盖与效果资料未提供；规则的具体代码示例需查阅各参考文件。