Gemini Canvas 是 Google Gemini 的交互式创作模式，从文字提示直接生成功能性产物——网页、信息图、测验、闪卡和自定义应用。输出不是文字描述，而是在沙箱 iframe 中渲染的可交互成品。

TL;DR 核心要点

身份定位：Gemini 内置的可视化创作面板，把 AI 从问答工具变成“能交付成品”的工作台。
六种模板：网页、信息图、测验、闪卡、音频概述、自定义应用——覆盖从学习卡片到交互式计算器的广泛场景。
迭代工作流：生成后通过对话改（“标题换深蓝”“加一列对比表”“适配移动端”），每次修改基于上一版 context。
沙箱安全：所有生成代码跑在 iframe 隔离环境，无法访问主应用 Cookie、localStorage 或系统资源。
对标 Artifact：定位与 Claude Artifacts、ChatGPT Canvas 同类，但更模板驱动、更面向非技术用户。
桌面端大屏优势：左右分栏（对话 + 实时预览）布局在桌面端发挥最好，移动端体验受限。

核心功能

Canvas 把 Gemini 从问答工具变为创作工具。六种模板类型——

网页：从描述直接生成完整响应式 HTML 页面，包含 CSS 样式和基础交互 JS，可以是产品落地页、个人简历、活动邀请函、单页文档。

信息图：HTML + SVG 驱动的数据可视化，文字可选中（SEO 友好），矢量无损缩放，适合 PPT 嵌图、公众号配图、内部汇报。

测验：交互式单选/多选题，带自动评分、即时反馈、错题提示，适合教学、培训、社群活动。

闪卡：CSS 翻转动画学习卡片，支持键盘导航、随机排列、进度追踪，面向语言学习、考试复习、概念记忆。

音频概述：对选定内容生成语音摘要——先用 Gemini 浓缩文字再经 TTS 合成语音，类似 NotebookLM Audio Overview 的轻量版。

自定义应用：最开放的模式，用 HTML/CSS/JavaScript 构建任意交互应用——计算器、单位转换器、抽奖工具、小游戏、数据仪表板，基本可以交付一个原型级 MVP。

工作原理

触发 Canvas 后，Gemini 生成 HTML + CSS + JavaScript 代码，在沙箱 iframe 中渲染。沙箱是安全边界——生成的代码无法访问你的 Cookie、localStorage 或系统资源，即使提示词里有恶意指令，注入的代码也只在隔离环境执行，保护宿主应用安全。

关键工作流是迭代。生成后通过对话修改——“把标题改成深蓝”“加一列对比表”“做成移动端适配”“表格多一行说明”。每条指令修改现有输出而非重新生成，Canvas 维护完整 context（已有的 HTML 结构、数据、样式），支持反复的创作对话。大多数场景下 5-10 轮对话就能得到接近可发布的成品。

技术栈方面，Canvas 主要用原生 HTML/CSS/JS（不需要框架），对于复杂应用可以调用 CDN 加载 Tailwind、Chart.js、Alpine.js 等轻量库。输出可以导出为独立 HTML 文件（拷贝到自己的服务器部署）或保存在 Gemini 账号里继续迭代。

代码执行支持的语言

自定义应用模式下，Canvas 支持的执行语言以浏览器原生为主：HTML/CSS 用于页面结构和样式；JavaScript（ES2020+） 作为主要逻辑语言，可使用 Fetch API、Canvas 2D、SVG 操作、localStorage（沙箱内有效但页面刷新丢失）；WebGL 可以渲染基础 3D 场景。对需要计算密集任务的场景，可以引入 pyodide（浏览器端的 Python 运行时）来运行 Python，或者 Lua/Wasm 等轻量脚本。不支持的：Node.js 服务端、任何需要后端数据库的语言（Java/Go/Rust 的服务端逻辑），这类需求应该直接用 Deep Research 做技术评估后转到正式的开发环境。

与主流 Artifact 工具对比

产品	厂商	代码技术栈	模板	导出	协作	定价
Gemini Canvas	Google	HTML/CSS/JS	6 种 + 自由模式	HTML 文件 / Docs / Drive	分享链接	免费含基本功能，Advanced 解锁全部
Claude Artifacts	Anthropic	React + HTML	自由模式为主	复制代码 / 分享链接	分享链接	Claude Pro $20/月
ChatGPT Canvas	OpenAI	文档编辑为主	文档 + 代码	导出 Markdown/代码	分享链接	ChatGPT Plus $20/月
GitHub Spark	GitHub	React Native	全栈应用	GitHub 仓库	GitHub 协作	Copilot Pro $10/月

定位差异：Claude Artifacts 更面向开发者——基于 React 组件的结构化能力更强，可做复杂数据可视化和工具原型；ChatGPT Canvas 更像协作写作工具，侧重长文档编辑（分段改写、版本对比）、弱于交互式内容生成；Gemini Canvas 更模板驱动、对非技术用户友好——教师、营销、教育、中小企业可以不写代码就拿到成品；GitHub Spark 走向更重的全栈 AI App 路线。

Canvas vs Claude Artifacts：更细致的对比

如果一定要在 Canvas 和 Artifacts 之间二选一，决策的关键点在下面几个维度：

代码复杂度：Artifacts 默认用 React 组件，对有 React 基础的开发者来说非常顺，可以直接写出带状态管理的复杂应用（Todo List 带 localStorage、带图表的数据仪表板）；Canvas 用原生 JS 起步，适合没有 React 背景但会写简单 JS 的产品经理和营销。

模板驱动度：Canvas 有 6 种开箱模板（测验、闪卡、信息图等），一句话就能出成品；Artifacts 几乎没有预设模板，更依赖用户自己描述想要什么。对不知道从哪开始的初学者，Canvas 的模板是降低门槛的关键。

迭代粒度：Canvas 的对话式迭代更偏“整块替换”——“整个页面换一种风格”能很顺地执行；Artifacts 更精细——可以说“只改第三个卡片的按钮颜色”而保持其余不变。

协作与分享：两者都有分享链接，但 Canvas 和 Google Docs/Drive 生态集成更好，Artifacts 和 Claude Project 工作空间集成更好。

与 Deep Research 的组合用法

Canvas 和 Deep Research 的组合是 Gemini 生态最强的双打。典型工作流：先用 Deep Research 做一份调研报告（比如“电动汽车市场竞品分析”），拿到 15 页 Markdown 和数十个引用；然后把报告粘进 Canvas，说“基于这份报告做一个信息图，突出前 5 家的市占率和关键差异”——Canvas 会解析数据，用 SVG 画出对比条形图和品牌时间轴。一份纯文字调研几分钟内就变成可以发给客户或上传微信公众号的视觉内容。

另一个常用组合是“调研 + 测验”：先用 Deep Research 调研某个技术主题，再用 Canvas 把关键点转成 20 题带答案的测验，用于团队学习或招聘笔试题。

导出到 Google Docs / Notion 流程

Canvas 的产出最常见的去向是 Google Docs、Notion、Obsidian 三个目的地：

导出到 Google Docs：点击 Canvas 右上角“Export to Docs”，Canvas 会把文字类内容（网页的段落、信息图的文字部分）转成 Docs 格式，保持标题层级和链接。SVG 信息图会被转成 Docs 内嵌图片（失去可交互性但保留视觉）。

导出到 Notion：目前没有一键导出，需要手动——复制 Canvas 生成的 Markdown（点击右上角“Copy as Markdown”），粘到 Notion 页面。表格、代码块、链接都能正确转换；但自定义 CSS 动效会丢失。

导出到 Obsidian：同 Notion 的手动流程，复制 Markdown 粘贴。Obsidian 的本地文件系统友好，适合把 Canvas 当成“一次性生成的外部工作空间”，再把精华搬到本地知识库。

真实用例

教师与培训师：为知识点快速出一套 20 题测验发给学生、生成闪卡让学生课后复习、做信息图当课件配图。不需要 PPT 模板、不需要图形设计软件，一句“生成 20 道中学数学几何题带答案和解析”就出成品。

内容创作者：为公众号文章配自定义信息图（数据可视化）、为 B 站视频做一张交互式预告网页、为小红书笔记做单页活动邀请函。比找设计师或拍素材快一个数量级。

产品经理 / 创业者：MVP 级别的工具原型——“做一个根据体重和目标瘦身计算每日热量缺口的计算器”“做一个根据用户输入的产品分类推荐竞品的抽卡式 Web 应用”。不一定能发给真实用户，但足够给团队演示或早期验证想法。

市场与运营：活动落地页快速出（“为公司周年庆做一个带倒计时的庆祝页面”）、内部培训测验、邮件订阅表单、简单数据看板。

学生与自学者：把教材章节转成闪卡系统、把复杂概念转成信息图帮助记忆、用自定义应用模式做模拟题或编程练习。

限制与边界

目前做不到：真正的后端（没有数据库、无持久化、刷新即丢；需要后端的场景可以把 Canvas 产出作为前端原型，后端另外接）、复杂第三方集成（无法直接调用需要 API Key 的服务，只能用公开 CDN 库）、高精度像素级设计（设计师的 Figma/Sketch 级精度仍是 Canvas 短板）、多页面应用（Canvas 一次只渲染一个 page，多页跳转需要拼接）、实时协作（不同于 Google Docs 的多人同时编辑，Canvas 是单人对话式创作）。

已知边界：免费版有模板配额限制，自定义应用和音频概述一般需要 Advanced；生成复杂自定义应用时（数百行 JS）单次生成可能超时，需要分段迭代；导出选项有限（主要是 HTML 文件或账号内保存，对接到 WordPress/Wix 这类 CMS 需要手动处理）。

Windows 情境

Google 至今没有原生 Gemini Windows app——2026-04-14 发布的 “Google app for desktop” 只是 Alt+Space 搜索浮窗，不支持 Canvas 这类多面板创作工作流，还有 20MB 上传限制。Windows 用户要用 Canvas 生成网页、信息图、交互式应用并导出 HTML 到本地，建议用 GeminiDesktop——原生 Windows 二进制提供左右分栏大屏创作体验，迭代比浏览器标签页快。详见 Windows 安装指南和与 Google app 对比。

常见问题

Q：Canvas 和 Claude Artifacts 选哪个？ A：看场景。做教学/营销/非技术类成品（闪卡、信息图、测验、落地页）选 Canvas，模板直接；做开发者原型（React 组件、复杂数据可视化、工具 app）选 Artifacts，React 基础提供更强结构能力。

Q：生成的网页可以部署到自己域名吗？ A：可以。导出独立 HTML 文件后上传到 Vercel、Netlify、Cloudflare Pages、GitHub Pages 等静态托管服务，或自己服务器。注意外部依赖（CDN 库）的可用性。

Q：生成的代码可以直接用于生产吗？ A：一般不推荐。Canvas 适合原型和中低复杂度成品，生产级代码的安全性、可维护性、性能优化仍需人工审核或用 Deep Research 先做技术评估。

Q：Canvas 支持嵌入图片吗？ A：支持，可以通过 Nano Banana 2 生成的图片在对话中上传然后嵌入 Canvas 网页或信息图，也可以贴 URL 链接外部图片。

Q：生成的成品属于谁？可以商用吗？ A：Google 条款允许用户对 Canvas 生成内容拥有使用权，包括商用。但生成代码中若调用第三方库（MIT/Apache 协议的 CDN 资源）仍需遵守各自协议。

Q：能否与 Google Docs 联动？ A：可以。Canvas 的部分产出（特别是文字类内容）可导出到 Google Docs 继续编辑，形成“Canvas 创作 → Docs 精修”的工作流。

桌面端体验

GeminiDesktop 提供跨平台原生 Canvas 体验——macOS Intel + Apple Silicon、Windows、Linux 二进制。左右分栏大屏布局（对话在左、Canvas 预览在右）让迭代节奏比浏览器标签页切换更紧凑，Retina/高 DPI 渲染更清晰，生成的 HTML/信息图/应用可直接导出到本地文件系统。相比 Google Windows 搜索客户端（对比）的英文限制和 20MB 上限，GeminiDesktop 支持中/日/韩文 UI 和完整 Canvas 工作流。下载：geminidesktop.app。

什么是 Gemini Canvas？AI 驱动的文档和应用创作