Gemini Canvas 改变了 Gemini 的定位。没有 Canvas，Gemini 是聊天机器人——打字提问、得到文字。有了 Canvas，Gemini 变成创作工具。描述你要什么，Gemini 直接构建：网页、交互式测验、带翻转动画的闪卡、HTML+SVG 信息图。输出不是描述，输出就是产物本身。

TL;DR 快速参考

触发方式：完整聊天窗口（⌥ ⇧ Space）→ 输入栏点「Canvas」按钮，或在提问末尾加「用 Canvas 展示」
六种模板：网页、信息图、测验、闪卡、音频概述、自定义应用
输出形式：侧栏实时预览（HTML/CSS/JS 内嵌 iframe 沙箱渲染）
导出：下载为 .html、复制源代码、截图导出、分享只读链接
迭代方式：对话式改动——「把按钮换成绿色」「加一个返回按钮」，即刻重渲染
支持模型：Gemini 2.5 Pro 及以上（部分模板需 Gemini 3）
文件大小上限：生成的 HTML 约 800KB，超过会被截断
对标：Claude Artifacts（更开发者向）、ChatGPT Canvas（文档协作向）

如何在桌面 app 上使用 Canvas

按 ⌥ ⇧ Space 打开完整 Gemini 窗口（迷你浮窗不支持 Canvas）
在模型选择器里确认用的是 Gemini 2.5 Pro 或 Gemini 3
输入栏右侧有 Canvas 图标（调色板样式），点击选择模板或让它自动判断
输入需求，例如「做一个简历网站，主题色深蓝，含姓名、简介、工作经历、项目、联系方式」
右侧自动展开 Canvas 预览面板，代码生成流式呈现，完成后自动渲染
继续对话修改：「把字体改成 Inter」「联系方式加 LinkedIn 图标」
导出：点预览顶部的「⋯」选「Download HTML」或「Copy source」

六种模板

网页——从文字描述生成完整 HTML 页面：作品集、落地页、简历。自包含、响应式，关键在于迭代：生成后改配色、加表单、重排布局，实时预览中完成。

网页模板使用 Tailwind CSS + vanilla JS（不引入 React/Vue，避免依赖），所有代码内联到一个 HTML 文件里。优点是「开箱即用」：下载下来双击就能在浏览器打开，不需构建链。缺点是复杂交互需要手动拆分到多文件。

信息图——HTML+SVG 视觉化数据展示。文字可选中，SVG 任意分辨率清晰缩放，通过对话修改数据点或重构布局。

典型用法：「把这段季度财报数据做成信息图，用堆叠柱图+趋势线」「做一个全球咖啡消费量地图」。生成的 SVG 可直接嵌入 PPT 或 Figma——与位图（PNG/JPG）相比保留矢量可编辑性。

测验——交互式选择题，带评分和即时对错反馈。提供主题或粘贴材料即可生成。适合教师出练习题、培训师做知识检查，或将任何长文转化为自测工具。

测验内置计分逻辑：每题选完显示对错、最后给总分和错题回顾。学生可重做同一份题（题序随机化）。导出的 HTML 离线可用，适合内网培训场景。

闪卡——CSS 翻转动画学习卡片，正面问题背面答案，支持导航和随机洗牌。除教育场景外，也适合新员工入职培训和产品功能速览。

闪卡的 3D 翻转效果用纯 CSS（transform: rotateY）实现，无需 JS 库。支持键盘导航：空格翻面、左右切换。可导出为 Anki 兼容的 CSV 格式（若明确要求）。

音频概述——对粘贴内容生成语音摘要，先浓缩文字再 TTS 转音频。通勤或运动时听完要点。类似 NotebookLM 音频摘要但直接集成在 Gemini 对话流中，无需切换产品。

音频概述默认约 5–10 分钟，支持中英日韩多语种主播声线。输出的 MP3 文件可下载到本地或 AirDrop 给 iPhone。与 NotebookLM 的区别：NotebookLM 生成双人对谈播客格式，Gemini Canvas 偏向单人解说。

自定义应用——最开放模式，描述交互应用由 Gemini 用 HTML/CSS/JS 构建。揭示 Canvas 本质：代码生成引擎加实时预览，其他五个模板是约束特化。

适合做：TodoList、番茄钟、简单游戏、单位换算器、Markdown 预览器。局限：单文件 HTML，没有后端、没有持久化（刷新即丢状态除非用 localStorage）。

Canvas vs Artifact（Claude）vs ChatGPT Canvas

维度	Gemini Canvas	Claude Artifacts	ChatGPT Canvas
定位	模板化创作	代码生成 + 组件沙箱	文档/代码协作编辑
默认输出格式	HTML + Tailwind + vanilla JS	React + Tailwind（沙箱渲染）	Markdown 文档 / 代码
模板数	6 种显式模板 + 自定义	无显式模板	无显式模板（写作/代码二选一）
交互性	高（测验/闪卡/自定义应用）	高（React 组件）	低（偏文档）
导出	单文件 HTML	导出代码，React 需自行构建	复制 Markdown/代码
代码执行	iframe 沙箱，无服务端	iframe 沙箱，无服务端	内置 Python 执行器（数据分析）
迭代方式	对话式指令	对话式指令	段落级 inline 编辑
最适合	非技术用户出「看得见的成品」	开发者快速验证组件	作家/程序员深度编辑文档

选择建议：

要做「给人看的东西」（网页、信息图、测验）→ Gemini Canvas
要做「组件原型」（React 按钮、图表库）→ Claude Artifacts
要做「长文写作 + 协作批注」→ ChatGPT Canvas
要做「数据分析报告 + 图表」→ ChatGPT Canvas（因有 Python 执行）

与 glossary-canvas 的关系

本文聚焦「Canvas 在桌面 app 里怎么用」；通用 Canvas 概念、历史、竞品全景请看词条：Canvas。简而言之：Canvas 是 2024–2025 年主流 AI 产品普遍采用的一种范式——把聊天输出从「文字」扩展到「可交互、可预览、可编辑的产物」，对应三种主流实现（Artifacts / Canvas / Workbench）。

代码执行与安全模型

Gemini Canvas 在 iframe 沙箱里渲染生成的代码：

沙箱隔离：<iframe sandbox="allow-scripts">——可以运行 JS，但不能访问父页面 DOM、不能调用父页面的 window.parent、不能读 localStorage（除了自己沙箱内的）
跨域限制：只能加载 Google CDN 上的资源（Tailwind、Google Fonts、Chart.js），不能 fetch 第三方 API（CORS 会拦）
网络：默认无网——生成的应用不能调用外部服务，保证可重现
本地存储：沙箱内独立的 localStorage，重启浏览器或切会话即消失

这意味着：Canvas 适合展示/原型/演示，不适合做「真实的生产应用」。想做生产应用，把代码下载到本地，加后端、接 API、部署到 Vercel/Cloudflare。

导出格式

导出方式	产物	适用场景
Download HTML	单文件 `.html`	邮件附件、U盘分发、本地离线打开
Copy source	源代码到剪贴板	粘贴到 VS Code、CodePen、JSBin 继续改
Export as PNG	快照位图	放 PPT、发朋友圈、微信传图
Share link	只读在线链接	发 Slack/飞书；需登录 Google 才能看
Export to Drive	存到 Google Drive	跨设备访问、团队协作
Export MP3（仅音频概述）	单文件 `.mp3`	AirDrop 给手机、上传播客平台

桌面 app 的一大价值：下载下来就是本地文件，可以进你的 Obsidian / Notion / iCloud 任何笔记工作流，不被聊天记录绑架。

进阶技巧

指定 CSS 框架：默认用 Tailwind，但你可以指定「用 Bootstrap 5」「用 Pico.css」「用原生 CSS 不要框架」
锁定某个模块：说「保持头部不变，只改底部」——Gemini 会只重渲染指定部分，迭代更快
引用实际数据：把 CSV 粘贴到对话里，说「用这份数据生成信息图」，比让 Gemini 自己编数字可靠得多
与 Deep Research 联动：先跑 Deep Research 生成研究报告，再让 Gemini「把这份报告做成一页信息图」，研究+可视化一气呵成
嵌入浏览器扩展：导出的 HTML 可以改造成浏览器新标签页——把内容保存为 newtab.html，在 Chrome 设为启动页

故障排查

Canvas 按钮灰色：模型选错了。Canvas 需要 Gemini 2.5 Pro 或 Gemini 3，切到 Flash 系列不可用。
生成的页面空白：多半是 JS 语法错误或 CDN 资源加载失败。打开浏览器开发者工具看 Console 红字。请求 Gemini「检查并修复刚才的代码」。
字体不对：Google Fonts 在国内部分网络环境不稳定。让 Gemini「用系统字体，不要加载 Google Fonts」即可。
图片不显示：沙箱默认只能加载来自 https:// 的图片且需 CORS 友好。使用 Unsplash、Placehold.it 等支持 CORS 的图源。
测验提交后没反应：浏览器阻止了表单提交（沙箱策略）。让 Gemini「把表单改成纯 JS 事件处理，不要 submit」。
下载的 HTML 在 Safari 打开异常但 Chrome 正常：常见于 CSS :has() 或 ES2022 特性。指定「避免使用最新 CSS/JS 特性，兼容 Safari 15」。
页面加载很慢：生成时引入了大型库（如 Chart.js 完整版）。请求「用 Chart.js 的 ESM tree-shaking 版本」或「改用 vanilla SVG」。
导出的链接别人看不到：只读链接需要 Google 登录。分享给不想登录的人，建议下载 HTML 直接发。

桌面端优势

侧栏实时预览：左边聊天右边预览，迭代时实时更新，不用切标签页。iframe 沙箱保证安全——生成的代码与宿主应用隔离，不能访问你的数据或系统资源。桌面工作流集成：下载 HTML 部署、复制源代码到项目、截图信息图用于演示、导出闪卡离线学习。桌面的文件系统和应用生态让 Canvas 产出从临时物变为可操作的交付件。

与浏览器版的实际差距体现在三处：

文件拖拽：桌面 app 支持把生成的 HTML 拖到 Finder 直接保存，浏览器要右键下载
窗口并排：桌面 app 的 Canvas 面板可独立拉到第二屏，浏览器只能在同一 tab 内切分
离线缓存：桌面 app 把最近生成的 Canvas 缓存到本地，断网也能看历史；浏览器依赖在线

Windows 用户如何用 Canvas？

Google 没有为 Windows 出原生 Gemini 聊天客户端，Windows 上的 Google app for desktop（2026-04-14 发布）只做搜索和文件，不含 Canvas 功能。详见 Google 没做 Gemini Windows app 与 Gemini Windows app vs Google app for desktop 对比。

Windows 用户想用 Canvas 的选项：

浏览器版 gemini.google.com 提供完整 Canvas 体验，与 Mac 端功能一致
GeminiDesktop for Windows 把浏览器版 Canvas 封装为原生 Tauri app，Alt+Space 呼出，支持独立 Canvas 窗口。参考原生 Gemini Windows app 与 Gemini Windows 安装指南

GeminiDesktop 实现

GeminiDesktop 把 Canvas 作为核心功能：Tauri webview 原生侧栏、Retina 渲染；迭代式 AI 编辑——每条指令更新预览、上下文贯穿；本地导出为 HTML 文件，可移植、离线可用。

差异化：

支持 Canvas 与 Claude Artifacts、ChatGPT Canvas 混用（同一应用内多模型切换）
本地 Canvas 历史持久化到 SQLite，随时检索过往产物
自定义导出目录（默认 ~/Documents/GeminiDesktop/Canvas/），与 Obsidian 库直接联动
导出时自动生成 Markdown 元数据文件（标题、创建时间、模型、原始 prompt），便于后续管理

FAQ

Q1：Canvas 生成的内容能直接用到生产环境吗？ 可作为原型和演示素材。生产场景需补充：后端 API、真实数据源、完整的错误处理、跨浏览器兼容性测试、SEO/可访问性优化。Canvas 给你的是「一个足够能看」的起点。

Q2：Canvas 支持上传图片做参考吗？ 支持。在 Canvas 提问时附上一张设计参考图，Gemini 会尝试还原视觉风格（配色、布局、字体感觉）。复现度取决于模型版本，Gemini 3 明显更准。

Q3：免费用户能用 Canvas 吗？ 基础 Canvas 功能对免费用户开放，但受模型等级限制（Flash 系列不含 Canvas 或功能受限）。完整 6 模板体验需要 Gemini Advanced 订阅或 AI Studio 额度。

Q4：可以让 Canvas 连我的数据库吗？ 沙箱内不行。导出到本地后可改造，但这超出 Canvas 的范围——本质上是让 AI 生成的代码连你的系统，属于正常的 Web 开发。

Q5：Canvas 和「Deep Research + 报告」有什么差别？ Deep Research 输出是带引用的长文档（Markdown 或 PDF）；Canvas 输出是交互式网页/信息图/测验。两者可串联：Deep Research 产内容，Canvas 做呈现。

Q6：生成的 Canvas 内容会被 Google 用来训练模型吗？ 付费订阅用户默认不用于训练；免费用户可能用于训练。详情以 Google 隐私政策为准。

延伸阅读

Canvas 改变了桌面 AI 的价值主张：从比回答质量变成比产出质量。桌面用户需要的是交付物，不只是文字回复。试试 GeminiDesktop。