Skip to content

Gemini Canvas

Gemini 应用内的动态工作区。价值在于跳过工程搭建直接看到能点的东西

核心定位

普通对话里 AI 只能给你一段代码,你要自己建工程、装依赖、跑起来才能看到效果。Canvas 把这段路砍掉了——它在对话旁边给你一个工作区,产出的东西可以直接交互。

它的定位是原型,不是生产代码来源。 想清楚这一点,后面所有取舍都很自然。

核心特性

官方页面把 Canvas 描述为可以与 Gemini 协作创建和精修文档、代码与网页设计的交互式空间,能够实时预览产出。

对开发者最有意义的两点:

看得见的迭代:产出不是静态代码块,你能直接操作它,然后基于"我看到的效果"提下一轮要求,而不是基于"我读代码想象的效果"。

局部精修:可以针对某一部分提要求,不必每次重新生成整份文件。这在调 UI 细节时省下大量时间。

分层推进

这是用 Canvas 唯一重要的方法论。

反模式:一次性要求生成带完整业务逻辑的全尺寸应用。

问题不在于它做不到,而在于你失去了"哪一步开始错的"这个信息。一次生成两百行,出问题你只能整个重来。

做法

第一层:DOM 结构 + 基础交互      → 确认逻辑没跑偏

第二层:套设计系统(Tailwind / CSS 变量)  → 保持代码整洁

第三层:搬进正式工程做类型和测试   → 这一步离开 Canvas

每层结束都确认一次。第三层意味着退出 Canvas——不要试图在里面完成工程化,那不是它的强项。

提示词示例

根据以下 JSON 结构,构建一个包含实时收入折线图和客户流失率饼图的业务看板:
- 支持暗黑模式切换
- 响应式布局
- 先只做结构和交互,样式后面再说

最后一句是关键——它把这一轮限制在第一层。

适用场景

场景适合度说明
一次性原型验证想法的最快路径,不用投工程资源
给非技术同事做小工具对方看得懂能点的东西,看不懂代码
独立轻量微应用能做,但迁出去仍需工程化
生产级应用容错要求高的系统不要从这里起步

与其他产品怎么选

Canvas 不在工程化主线上,它和其他产品不是竞争关系:

  • 想要能提交进仓库的代码 → Gemini CLIAntigravity
  • 想要先看到效果再决定要不要做 → Canvas
  • 想要落地页 / 宣传片 / 产品演示视频Google Flow

很实用的组合是:用 Canvas 试三个方向、挑一个,再让 Antigravity 在真实工程里实现它。对外讲这个功能时,再用 Flow 出成片。

官方资源

相关页面

为前端工程师打造 · 基于 VitePress 构建