SkillsScout
FRONTEND-DESIGN ／ 前端与设计

ui-widget-developer-microsoft-skills

收录日期 2026-07-26·来源仓库 ↗
受欢迎程度
7
可用程度与相关性
8
安全性
8
7.7SCOUT SCORE

1. 基本信息

项目 内容
名称 ui-widget-developer-microsoft-skills
作者/维护者 Microsoft（官方仓库 microsoft/skills；该子技能由工程师 qfai 提交新增）
来源链接 https://github.com/microsoft/skills/tree/main/.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer
许可证 MIT（数据来自 GitHub API 与仓库根 LICENSE 文件）
GitHub Stars 合集仓库整体 2,819（数据来自 GitHub API，2026-07-26）；该数字属整个 microsoft/skills 仓库，不代表本技能自身热度
Forks 合集仓库整体 317（数据来自 GitHub API）
最新版本 插件 manifest 声明 1.3.1（.claude-plugin/plugin.json）
安装方式 npx skills add 一条命令安装向导；也可克隆仓库后手动复制技能目录

2. 功能介绍与亮点

ui-widget-developer 教 Agent 如何为 Microsoft 365 Copilot Chat 构建能渲染真实交互界面的 MCP Server——不是让 Copilot 只回复一段文字，而是回传结构化数据并渲染成用户可点击、可操作的 Widget（如卡片、图表、表单）。技能会先用 AskUserQuestion 让用户在两条技术路线间做选择：OpenAI Apps SDK（更成熟、目前覆盖 ChatGPT 与 M365 Copilot）或 MCP Apps（更新的官方标准，宿主覆盖面更广）；选定后按对应协议给出 MCP Server 需要实现的完整清单：Streamable HTTP 传输、CORS 配置、Widget 资源注册（ui://widget/*.html）、工具响应中的 structuredContent 与 _meta 字段等。

亮点：① 主文档之外附带 6 篇专项参考文档（最佳实践、协议细节、devtunnel 联调、MCP Server 参考实现、插件 Schema、Widget 编写模式），合计约 6.4 万字符，覆盖面在同类技能中少见；② 强制 React + Fluent UI 组件规范，明确禁止用静态 HTML 拼凑正式 Widget，保证多团队产出界面风格一致；③ 给出本地开发到联调测试的完整闭环（起服务 → devtunnel 暴露 → MCP Inspector 校验工具定义 → 本地 Widget 预览链接）；④ 与同插件族的 declarative-agent-developer 分工明确，遇到智能体本身脚手架/清单类需求会主动移交，避免职责混杂。

3. 适用场景

所属分类：前端与设计

4. 跨 Agent 兼容性

5. 推荐理由

它把“给 M365 Copilot 智能体加一个能渲染真实交互界面的 MCP Server”这件事，从需要通读 OpenAI Apps SDK 与 MCP Apps 两套协议规范、自行摸索 Fluent UI 主题接入与本地联调方式，收敛成一份可直接照做的操作手册：先帮用户在两条技术路线间做选择，再给出协议合规检查清单、Widget 资源注册步骤、devtunnel 联调脚本，最后自动完成端到端校验与部署收尾。对刚接触 Copilot 扩展开发、或想从纯文本 MCP Server 升级到富交互 Widget 的团队，能显著减少来回踩坑的协议细节。

6. 评分

维度 分数 说明
受欢迎程度 7 Microsoft 官方产品线的一部分；MCP Apps / Copilot Widget 这一具体能力已被 Microsoft Learn 官方文档、Microsoft 365 Developer Blog 及至少两篇独立第三方技术博客（Andrew Connell、voitanos.io）分别撰文介绍，但该子技能自身在仓库内仅 1 次提交，未检索到专门讨论其本身的第三方 issue/PR
可用性 8 文档体系完整（主文档 23KB + 6 篇约 6.4 万字符专项参考文档，覆盖协议、最佳实践、devtunnel、Widget 模式等）；但完整跑通需要安装 devtunnel、ATK CLI 并完成登录鉴权，并非零配置即用；该子目录最近一次改动为 2026-06-15
安全性 8 见下方检查清单
综合 7.7 三项均值

安全检查清单：① Shell 命令——会自动安装 npm 依赖、以后台进程方式启动本地 MCP Server 与 devtunnel，并在需要时执行部署命令，权限范围较广但均服务于“跑通一个可联调的 Copilot Widget 项目”这一明确目的；② 联网外发——devtunnel 会把本地 MCP Server 端口临时暴露到公网供 M365 Copilot 调用，CORS 配置限定在 m365.cloud.microsoft 等官方域名，用途在文档中说明清楚；③ API Key/凭据——需要 devtunnel 登录鉴权与 M365 租户信息，SKILL.md 未见硬编码密钥或引导写入不安全存储位置的指令；④ 可疑指令——文档中“全自动完成、不必等待用户确认”的措辞较强，但对照上下文，这些自动化动作（装依赖、起服务、部署）均在用户明确发起“构建 Widget”任务的范围内，未发现越权访问或隐蔽外发指令；⑤ 作者信誉——Microsoft 官方仓库，具名工程师维护；⑥ License——MIT，明确；⑦ 最近维护——该子目录自 2026-06-15 新增以来无进一步改动，母仓库 2026-07-24 仍有推送。

7. 跟同类 Skills 相比的优势

对比对象 定位 与 ui-widget-developer 的差异
declarative-agent-developer（同仓库姊妹技能） 负责声明式智能体本身的脚手架、清单编写与部署 只管“智能体骨架”本身，不涉及 MCP Server 搭建或 Widget 界面渲染，二者是互补而非竞争关系
modelcontextprotocol/ext-apps（MCP 官方组织出品） 走“MCP Apps”跨平台标准路线，提供 create-mcp-app / add-app-to-server 等脚手架技能，覆盖 M365 Copilot、ChatGPT、VS Code 等多个宿主 标准更新、支持宿主更广，但生态尚在成长期；ui-widget-developer 默认的 OpenAI Apps SDK 路线更成熟、生产验证更久，目前主要覆盖 ChatGPT 与 M365 Copilot 两个宿主

8. 用户评价

该技能所在的 microsoft-365-agents-toolkit 插件于 2026-06-15 随母仓库一次性提交上线，目前尚未检索到聚焦该技能本身的具名第三方用户评价或专门的 issue/PR 讨论；其对应的 Copilot Widget / MCP Apps 能力已被第三方技术博主（如 Andrew Connell、voitanos.io）分别撰文介绍过开发流程。

9. 其他补充

SKILL.md 明确说明协议要求语言无关——TypeScript 提供完整参考实现，Python、C# 等语言只需按同一协议清单自行实现即可，不锁定单一技术栈。

10. 安装使用方式

官方安装向导（推荐）：

npx skills add microsoft/skills

在向导中选择 ui-widget-developer 即可，会被安装到对应 Agent 的技能目录（Claude Code 为 .claude/skills/）。

手动安装：

git clone https://github.com/microsoft/skills.git
cp -r skills/.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer your-project/.claude/skills/

使用前需准备：Node.js 环境、devtunnel CLI（首次需 devtunnel user login 完成登录鉴权），以及一个可运行的 MCP Server 工程骨架。安装后无需重启 Agent；首次触发技能时会通过 AskUserQuestion 询问选择 OpenAI Apps SDK 还是 MCP Apps 路径。

11. 注意事项