Gemini Canvas
Gemini 应用内的动态工作区。价值在于跳过工程搭建直接看到能点的东西。
核心定位
普通对话里 AI 只能给你一段代码,你要自己建工程、装依赖、跑起来才能看到效果。Canvas 把这段路砍掉了——它在对话旁边给你一个工作区,产出的东西可以直接交互。
它的定位是原型,不是生产代码来源。 想清楚这一点,后面所有取舍都很自然。
核心特性
官方页面把 Canvas 描述为可以与 Gemini 协作创建和精修文档、代码与网页设计的交互式空间,能够实时预览产出。
对开发者最有意义的两点:
看得见的迭代:产出不是静态代码块,你能直接操作它,然后基于"我看到的效果"提下一轮要求,而不是基于"我读代码想象的效果"。
局部精修:可以针对某一部分提要求,不必每次重新生成整份文件。这在调 UI 细节时省下大量时间。
分层推进
这是用 Canvas 唯一重要的方法论。
反模式:一次性要求生成带完整业务逻辑的全尺寸应用。
问题不在于它做不到,而在于你失去了"哪一步开始错的"这个信息。一次生成两百行,出问题你只能整个重来。
做法:
第一层:DOM 结构 + 基础交互 → 确认逻辑没跑偏
↓
第二层:套设计系统(Tailwind / CSS 变量) → 保持代码整洁
↓
第三层:搬进正式工程做类型和测试 → 这一步离开 Canvas每层结束都确认一次。第三层意味着退出 Canvas——不要试图在里面完成工程化,那不是它的强项。
提示词示例
根据以下 JSON 结构,构建一个包含实时收入折线图和客户流失率饼图的业务看板:
- 支持暗黑模式切换
- 响应式布局
- 先只做结构和交互,样式后面再说最后一句是关键——它把这一轮限制在第一层。
适用场景
| 场景 | 适合度 | 说明 |
|---|---|---|
| 一次性原型 | 高 | 验证想法的最快路径,不用投工程资源 |
| 给非技术同事做小工具 | 高 | 对方看得懂能点的东西,看不懂代码 |
| 独立轻量微应用 | 中 | 能做,但迁出去仍需工程化 |
| 生产级应用 | 低 | 容错要求高的系统不要从这里起步 |
与其他产品怎么选
Canvas 不在工程化主线上,它和其他产品不是竞争关系:
- 想要能提交进仓库的代码 → Gemini CLI 或 Antigravity
- 想要先看到效果再决定要不要做 → Canvas
- 想要落地页 / 宣传片 / 产品演示视频 → Google Flow
很实用的组合是:用 Canvas 试三个方向、挑一个,再让 Antigravity 在真实工程里实现它。对外讲这个功能时,再用 Flow 出成片。