Gemini Canvas 怎么用？一句话生成网页/App

30 秒了解：Gemini Canvas 是什么

Gemini Canvas 是 Gemini 网页版自带的「即时预览工作台」：你在左边对话区描述需求，右边的 Canvas 区会直接渲染出可运行的网页、单页 App、长文档或代码片段，改一句话就能看到效果变。 它不是单纯的代码编辑器，更像一个「会自己重写代码 + 自己刷新预览」的搭子。

适合场景：做单页 demo、产品原型、活动页、内部小工具、HTML 邮件模板、文档可视化。不适合：复杂的多页项目、要连后端 / 数据库的应用、生产部署。

下面把启用步骤、5 个进阶玩法、和 ChatGPT Canvas 的差异讲完。

准备工作

• 入口：只在网页版 gemini.google.com 有，手机 App 暂不支持 Canvas
• 账号要求：免费版即可使用，每天有次数限制；AI Plus / Pro 解锁更长上下文和并发
• 浏览器：Chrome / Edge / Safari 都可以，建议关掉广告拦截以免 iframe 预览被屏蔽
• 模型：默认走 Gemini 3 Pro，复杂逻辑会自动切 Thinking 分支

如果你还没注册账号，先看 Gemini 是什么 和 Gemini 登录怎么做 把入口搞定。

详细操作步骤

第 1 步：打开 Canvas 模式

进入 gemini.google.com，在主对话框下方一排工具按钮里找到 Canvas（图标是一个矩形+笔的样式），点亮它。

[此处放截图：Gemini 主对话框底部 Canvas 按钮位置]

如果你看不到 Canvas 按钮，可能是：

• 当前账号还没灰度到（少数地区滞后 1-2 周）
• 你在用手机访问网页版，移动端 Canvas 入口被收起
• 浏览器扩展屏蔽了 Google 的某些 UI 元素，临时关掉扩展再刷

第 2 步：写第一句指令

Canvas 模式打开后，输入框上方会多一行提示「Canvas is on」。这时随便描述一个想要的东西，比如：

帮我做一个个人简历单页网页，深色主题，左边头像 + 联系方式，右边时间线展示工作经历，最下方放一个项目卡片网格。

按回车。Gemini 开始生成代码，几秒钟后右边 Canvas 区直接渲染出可滚动的页面。

[此处放截图：左侧对话 + 右侧 Canvas 实时预览]

第 3 步：用自然语言迭代

不要去手动改代码——直接对 Gemini 说：

把头像换成圆形，时间线的圆点改成蓝色，项目卡片加一个 hover 阴影效果。

Canvas 会只重写改动相关的代码并立刻刷新预览。每一次迭代都是新一轮对话，左侧聊天记录像 Git 的 commit log，可以随时回退。

第 4 步：切到代码视图查看

右上角有两个 Tab：Preview（预览）和 Code（代码）。点 Code 可以看到完整的 HTML / CSS / JS，复制走自己改也行。

如果你想让 Gemini 解释某段代码，选中那段代码 → 点出现的 Ask Gemini → 输入「这段在干嘛」，它会针对性解释。

第 5 步：导出和分享

右上角三个按钮：

• Download：把当前网页打包成 .html 单文件下载
• Share：生成一个只读链接，对方点开能看到 Canvas 预览
• Copy to Docs：如果当前是长文档而不是网页，会一键导出到 Google Docs

提示：Canvas 生成的网页是纯静态 HTML，要部署上线把下载的文件丢到 Cloudflare Pages / Vercel / GitHub Pages 都行，5 分钟搞定。

5 个 Canvas 进阶玩法

玩法 1：把 PRD 直接做成可点击原型

把你写好的产品需求文档复制进去：

下面是一份产品需求文档，请帮我做一个可点击的单页原型，覆盖 PRD 里描述的所有主要页面：
【贴你的 PRD】
要求：

用 Tailwind CSS 做样式，配色用浅色背景 + 主色蓝 #2563eb
左侧固定一个导航，能切到各个页面
每个页面里所有的按钮都加上 onclick 弹出 toast 表示「该功能 demo 中」
不要任何后端调用，所有数据 mock 在 JS 里
不要分文件，所有内容写在一个 HTML 文件里

5 分钟把 PRD 跑成原型，比传统画 Figma 快太多。

玩法 2：让 Canvas 写一个小工具

想要一个小工具但不想下载软件？

帮我做一个网页小工具：图片压缩 + 格式转换。
需求：

支持拖拽上传，也能点按钮上传
上传后预览原图，显示原尺寸和文件大小
一个滑条调质量（10-100），一个下拉选输出格式（jpg/png/webp）
实时显示压缩后的预览和新文件大小
一键下载按钮
所有压缩用浏览器原生 Canvas API 完成，不上传到任何服务器。

跑出来直接能用，下载下来就是你私人的离线工具。

玩法 3：HTML 邮件模板

发营销邮件最怕排版兼容性差：

帮我写一个 HTML 邮件模板，要在 Gmail / Outlook / Apple Mail 都能正确显示：
主题：新功能发布
内容结构：

顶部 logo + 一句话标语
中间 hero 图位（用占位）+ 一段介绍
3 个功能卡片（图标 + 标题 + 一句描述）
一个主 CTA 按钮
底部公司信息 + 退订链接
使用 table 布局（邮件兼容），内联 CSS，不引用任何外部资源。

Canvas 里能直接看到邮件渲染效果，调到满意复制源码丢到 Mailchimp / 火山引擎邮件就能发。

玩法 4：可视化复杂数据

把一份表格数据扔进去，让它画图：

我有一份销售数据，请帮我做一个交互式 dashboard：
【贴入 CSV 或表格】
要求：

顶部 4 个 KPI 卡片：总营收、订单数、平均客单价、环比增长
中间一个折线图：按月份的营收走势
右侧一个饼图：按品类的销售占比
底部一个表格：Top 10 单品，可按列排序
用 Chart.js 画图，所有数据 hardcode 在 JS 里

老板要的「数据故事」5 分钟搞定，比 Excel 拖图清晰多了。

玩法 5：把长文档变成阅读型网页

写了一份长 markdown 想做成漂亮的阅读体验：

请把下面这份长文档转成一个阅读型单页网页：
【贴入 markdown 全文】
设计要求：

杂志风格排版，正文宽度 720px 居中
标题用衬线字体，正文用无衬线
左侧浮动一个目录（TOC），点击锚跳，当前章节高亮
右下角一个返回顶部按钮
自适应深色模式，跟随系统
字号支持 - / + 调节

公司内部分享、个人 blog 文章、读书笔记都能这么做。

5 个 Canvas 常见坑

坑 1：Canvas 不显示预览，只出代码

Canvas 区一片空白，但 Code 视图里有代码。

解法：

• 优先看代码有没有语法错误（生成偶尔会截断）
• 让 Gemini 跟进一句「预览没渲染，请检查代码是否完整并修复」
• 关掉浏览器的广告拦截 / iframe 屏蔽扩展
• 刷新页面，Canvas 状态偶尔会卡住

坑 2：写复杂逻辑时上下文丢失

迭代了十几次后，Gemini 开始「忘记」前面的设计。

解法：

• Canvas 里随时把当前完整代码复制保存一份当 checkpoint
• 觉得乱了就开新对话，把上一轮的最终代码粘进去重启
• 复杂项目分模块做：先做布局，再单独做某个交互组件

坑 3：生成出来的网页不好看

Gemini 默认审美偏「Google Material 朴素风」。

解法：

• prompt 里明确指定参考风格：「Linear 官网那种深色极简」「Stripe 文档的清爽感」「Notion 的灰白克制」
• 指定具体的色板和字体：「主色 #6366f1、辅助色 #f59e0b、字体用 Inter」
• 让它先出 3 个版本：「请给我 3 套不同审美方向的设计草稿」

坑 4：想接后端 API 但跑不通

Canvas 里写 fetch('https://your-api.com/...') 会因为 iframe 沙箱 + CORS 失败。

解法：

• Canvas 只适合纯前端 demo，要带后端就把代码下载到本地用
• 临时演示可以让 Gemini「mock 一份假数据写在 JS 里，500ms 后返回」模拟接口
• 真上线要在 Cloudflare Workers / Vercel Functions 上配 CORS

坑 5：分享链接对方打不开

Share 生成的链接需要登录 Google 账号才能看。

解法：

• 对方没 Google 账号：直接 Download 拿 HTML 文件发过去
• 想让任何人能看：把 HTML 上传到 Cloudflare Pages，2 分钟搞定一个公网链接
• 想长期保留：导出到自己的 GitHub 仓库

Gemini Canvas vs ChatGPT Canvas vs Claude Artifacts

结论：要免费 + 实时预览选 Gemini Canvas；要最稳的代码生成选 Claude Artifacts；要 Python 在沙箱里跑选 ChatGPT Canvas。三家都值得轮流用。

更多 Canvas 玩法看 Gemini 完整使用指南 和 Gemini 三大入口对比。

在中国能用吗

Canvas 跟主 Gemini 一样有地区限制。中国大陆需要相应网络环境 + 海外 Google 账号。详见 Gemini 国内可以用吗 和 Gemini 是否可用一览。

国产可选：

• 字节豆包：自带「画布」模式，做 HTML demo 体验类似
• 智谱清言：可生成可运行的 HTML 单页
• DeepSeek 网页版暂不带 Canvas，但代码输出质量过硬

下一步

把 Canvas 玩熟后继续看：

• Gemini Deep Research 怎么用 — 深度调研模式
• Gemini 版本对比 — Fast / Thinking / Pro 怎么选
• Gems 是什么 — 把 Canvas 模板存成自定义助手
• Gemini Ultra 怎么样 — 249 美元/月版本评估
• Gemini 完整使用指南 — cluster 入口总览

常见问题

Q：Gemini Canvas 免费版有次数限制吗？ A：有。免费版每天大约能跑 10-20 次 Canvas 生成（具体数字 Google 没公开，会随负载调整），用完会提示明日再来或升 AI Plus。

Q：Canvas 生成的代码能商用吗？ A：可以。Google 的服务条款不主张代码版权，下载下来自由使用、改写、闭源都行。但要自查别让 Canvas 误抄了开源库的特定写法。

Q：能直接编辑 Code 视图里的代码吗？ A：暂时不能直接在 Canvas 里改。要么用自然语言让 Gemini 改，要么 Download 下来用 VS Code 编辑。

Q：Canvas 支持 React 项目吗？ A：支持单文件的 React 组件（用 CDN 引 React），但不支持完整的 npm 项目结构。要做 React 多文件项目用 Claude Code 教程 或本地 vibe coding 工具。

Q：Canvas 和 ChatGPT 的 Code Interpreter 是一回事吗？ A：不是。Canvas 是「生成可预览的前端代码」，Code Interpreter 是「真的跑 Python 代码做数据分析」。两者目的不同。

Q：能让 Canvas 帮我做小游戏吗？ A：可以。HTML5 Canvas API 写的 2D 小游戏（贪吃蛇、俄罗斯方块、打砖块）都没问题，Gemini Canvas 几分钟出一个可玩版本。

Q：Canvas 区的预览能多大？ A：默认占右半屏，右上角有一个图标可以全屏化（hide chat），适合演示给别人看时点开。