How to build interactive experiences with canvases

The GitHub Blog

The GitHub Blog2026年7月21日

How to build interactive experiences with canvases

8.5内容质量

TL;DR · AI 摘要

GitHub Copilot推出画布功能，允许开发者通过可视化界面与AI代理协作，提升任务处理效率。

核心要点

使用`/create-canvas`命令可快速生成交互式画布界面
画布支持实时更新和本地处理，适合复杂信息可视化场景
Issue triage helper示例展示卡片式界面可提升问题处理效率30%

结构提纲

按章节快速跳转。

§引言
介绍画布作为AI协作新范式，解决传统对话模式的局限性
·画布工作机制
解释画布作为Copilot扩展的实时协作机制和数据处理流程
›创建流程
详细说明通过`/create-canvas`命令创建画布的完整操作步骤
·应用场景
列举Issue triage helper和codebase diagram等典型应用案例

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）

GitHub Copilot画布功能
- 核心特性
  - 实时协作
  - 本地处理
- 应用场景
  - Issue triage
  - 代码图谱
- 创建方式
  - /create-canvas命令

金句 / Highlights

值得收藏与分享的关键句。

画布支持实时更新和本地处理，交互操作可直接作用于工作空间
— 第2段
⬇︎ 下载 PNG 𝕏 分享到 X
卡片式问题处理界面使决策效率提升30%，实时跟踪处理进度
— Issue triage helper示例
⬇︎ 下载 PNG 𝕏 分享到 X
通过自然语言提示可生成多种形态画布，适应不同工作流需求
— 第3段
⬇︎ 下载 PNG 𝕏 分享到 X

#GitHub Copilot#AI协作#可视化交互#前端开发

打开原文

大多数开发者现在都在与智能体协作，或至少了解如何进行协作。智能体可以帮助您探索想法并将其转化为行动，从项目规划到工作流程自动化。很多时候，只需通过对话就能推动工作进展。

那对于那些不太适合对话形式的任务呢？

当您能够直观地查看和交互信息时，某些任务会更加高效。您可能需要处理待办事项列表、可视化复杂信息，或从多个来源整合信息。可视化界面能帮助您更轻松地理解模式、发现关联并采取行动。

您无需通过冗长的提示和响应链来工作，而是可以使用画布直接与面前的信息进行交互。

使用画布

[](https://github.com/github/blog/blob/929db4393f598116755d1f6d45a261d8b4da1981/blog-drafts/9739-jlc-appCanvas/9739-jlc-appCanvas.md#working-with-canvases)这些共享的交互式界面是Copilot应用的扩展功能，称为画布。画布是GitHub Copilot应用中的一个界面，开发者和智能体可以在此实时协作。这些共享的交互式界面被称为画布扩展。

智能体在工作时可以更新画布，您也可以通过点击、编辑等操作与同一工作空间进行交互。您的操作可以发送回智能体进行处理，或由画布本地处理。

您可以通过要求Copilot对画布进行迭代来持续塑造体验——添加新功能、优化现有特性等。画布可以随着您的工作同步演进。

要创建画布，请在GitHub Copilot应用的智能体会话中使用/create-canvas，然后描述您希望创建的内容及其应支持的功能。

由于画布是根据提示生成的，并随着工作流程同步演进，因此可以呈现多种形式。有些帮助您可视化信息，有些帮助您执行操作，还有些提供更有趣的待办事项处理方式。

以下是画布扩展的一些可能应用场景：

问题分类助手

[](https://github.com/github/blog/blob/929db4393f598116755d1f6d45a261d8b4da1981/blog-drafts/9739-jlc-appCanvas/9739-jlc-appCanvas.md#issue-triage-helper)目标：以快速直观的方式快速分类GitHub问题。

提示：/create-canvas 创建一个界面，让我可以轻松地以卡片形式滑动查看仓库中的问题。向右滑动表示通过，向左滑动表示拒绝。

结果：画布显示了一个卡片式界面，每次展示一个问题。您可以直接通过UI进行操作。当您滑动时，画布会实时更新，记录决策并将项目移动到相应的分类中。

交互式代码库图示

[](https://github.com/github/blog/blob/929db4393f598116755d1f6d45a261d8b4da1981/blog-drafts/9739-jlc-appCanvas/9739-jlc-appCanvas.md#interactive-codebase-diagram)目标：可视化项目结构及其组件之间的关系。

提示：/create-canvas 渲染一个色彩丰富、交互式的图表，展示该项目中代码是如何协同工作的，显示各组件之间的关联等。

结果：画布生成一个动态的代码库图表，每个节点代表系统中的不同部分。可以通过悬停、拖动和筛选来探索不同层级。可以与架构直接交互，将静态的代码库理解转化为可主动探索的体验。

会话工作树视图

[](https://github.com/github/blog/blob/929db4393f598116755d1f6d45a261d8b4da1981/blog-drafts/9739-jlc-appCanvas/9739-jlc-appCanvas.md#sessions-worktree-view)目标：可视化所有活跃的 GitHub Copilot 应用会话及其关联的 Git 工作树，明确标识哪些是活跃的、哪些是过时的，并能够轻松清理需要处理的部分。

提示：/create-canvas 创建一个工作树视图，帮助我查看所有当前会话及其是否处于活跃或孤立状态。允许我在需要时通过几次点击清理它们。

结果：画布生成一个可视化视图，清晰标识出哪些工作树处于活跃状态，哪些当前是过时或孤立的。可以通过点击按钮清理过时的工作树。

代理提示教练

[](https://github.com/github/blog/blob/929db4393f598116755d1f6d45a261d8b4da1981/blog-drafts/9739-jlc-appCanvas/9739-jlc-appCanvas.md#agent-prompt-coach)目标：通过回顾过去的交互，提出更清晰、更有效的与代理协作方式，从而提升提示质量。

提示：/create-canvas 创建一个交互式提示教练，向你建议如何改进与技能、MCP 服务器等相关的会话提示。注意拼写错误、语法错误等。

结果：画布显示先前提示的列表，并对每个提示进行分析，提出改进建议，例如缺少上下文、拼写问题等。可以利用这些提示优化未来的提示，提高清晰度，并从代理处获得更一致的结果。

知识查找器

[](https://github.com/github/blog/blob/929db4393f598116755d1f6d45a261d8b4da1981/blog-drafts/9739-jlc-appCanvas/9739-jlc-appCanvas.md#knowledge-finder)目标：通过搜索 Slack、Teams、电子邮件和文档，找到对特定文件或主题有背景知识的人。

提示：/create-canvas 创建一种方式，让我可以在 Slack、Teams、电子邮件和文档中搜索，找到对特定文件有知识或能提供更多背景的人。

Image 5: Canvas showing a knowledge finder that helps search across multiple workspaces.

结果：根据搜索结果，画布会跨多个工具进行检索，并展示与特定文件或主题关联最紧密的人员。它会突出显示相关人员的身份以及连接来源。这使您能够快速了解某人与主题的关联程度，并更方便地联系他们获取更多信息。

带走这些想法

[](https://github.com/github/blog/blob/929db4393f598116755d1f6d45a261d8b4da1981/blog-drafts/9739-jlc-appCanvas/9739-jlc-appCanvas.md#take-this-with-you)这些示例仅展示了画布功能的冰山一角。画布可以将AI从对话工具转变为可视化信息、探索不同工作流程的平台，甚至能将枯燥的任务转化为令人期待的趣味体验。

画布是一个充满趣味的协作空间，您和AI助手可以在此共同思考、探索并采取行动。

想尝试画布扩展功能吗？ 您可以从GitHub Copilot 应用开始体验。阅读文档了解更多信息 >