Gemini Canvas
Gemini Canvas 提供了一个与传统聊天窗口并排的动态工作区，允许生成代码或复杂文档时进行细粒度的实时修改。
核心定位
Canvas 最具颠覆性的特性在于其生成式用户界面（Generative UI）。传统的 AI 助手大多只能在聊天框中输出静态的纯文本或 Markdown 格式的代码块。
核心特性
Generative UI
Gemini Canvas 能够利用后台原生代码执行和 WebGL 技术，直接在视图中渲染：
- 动态布局
- 可点击的交互式图表
- 3D 模型
当用户调整视图中的滑块或切换按钮时，界面能够实时响应更新。
局部重绘
开发者可以高亮代码中的特定函数或 UI 组件的一小段 HTML/CSS，要求系统"仅对选中的部分进行重构，优化动画过渡效果"，而无需重新生成整个文件。
极速原型流程
传统方式 vs Canvas 方式
传统方式（为非技术部门快速开发内部数据看板）：
- 配置 React
- 引入图表库（D3.js 或 Recharts）
- 设置状态管理
- 编写 CSS
Canvas 方式：
1. 输入提示词 → Canvas 渲染微应用
2. 审查交互逻辑 → 后续提示词精炼 UI
3. 复制代码片段 → 企业主代码库工程化封装示例提示词
根据以下 JSON 结构，构建一个包含实时收入折线图和客户流失率饼图的自由职业者业务仪表盘，要求：
- 支持暗黑模式切换
- 使用 Recharts 库
- 响应式布局分层渐进策略
反模式
一次性要求 Canvas 生成带有复杂业务逻辑的全尺寸应用。
最佳实践：分层渐进
第一层：DOM 结构 + 基础 JavaScript 交互
↓ 确认逻辑无误
第二层：应用企业设计系统（Tailwind CSS / CSS 变量）
↓ 保持代码整洁
第三层：工程化封装（TypeScript / 测试 / 文档）适用场景
| 场景 | ROI 评级 | 说明 |
|---|---|---|
| 一次性原型设计 | ⭐⭐⭐ | 快速验证想法，无需投入工程化资源 |
| 内部工具快速孵化 | ⭐⭐⭐ | 为非技术部门快速开发小工具 |
| 微应用生成 | ⭐⭐ | 独立完整的轻量级应用 |
| 生产级应用 | ⭐ | 容错率低，不适合严谨的生产系统 |