Gemini Canvas 和 Stitch 都能帮助你从自然语言开始探索网页，但两者的工作对象不同。Canvas 更适合在 Gemini 对话中创建或编辑文档、应用和代码并查看预览；Stitch 更适合从文字、图片或线框快速探索桌面与移动 UI。把它们放进同一条流程，关键是明确交付物，再由设计师把结果整理到 Pixso。关于 Gemini Design 的入口和工具区别，可先阅读 Gemini Design 中文专题。
一、先看交付物，再选工具
如果目标是“验证一个网页交互是否可行”，Canvas 的代码与预览更合适；如果目标是“比较信息层级、色彩和多屏布局”，Stitch 的界面探索更合适。两者都不能替代需求评审、真实数据检查和无障碍测试。Google 官方资料称 Canvas 可创建或编辑应用与代码，Stitch 可从自然语言、图片或线框生成 UI 与对应前端代码；这些描述不等于每次都能得到可上线产品。
| 任务 | Canvas | Stitch | 进入 Pixso 前的动作 |
|---|---|---|---|
| 快速讨论产品结构 | 适合文字与代码草案 | 适合视觉方向探索 | 整理页面清单和用户流 |
| 网页交互验证 | 可预览应用或代码 | 可连接屏幕做原型探索 | 人工检查状态与边界 |
| 多屏视觉比较 | 需额外描述视觉规则 | 适合生成桌面、移动方向 | 统一组件、字号、间距 |
| 团队交付 | 导出或复制结果后整理 | 按当前入口确认代码与设计导出方式 | 格式确认后导入或参考重建 |
手机端可横向滑动表格查看全部列。选型时还要考虑团队是否需要源文件、变量、批注和版本记录。
二、流程第一段：在 Gemini Canvas 明确网页逻辑
先用 Canvas 写一份小型产品说明：用户、目标、页面、字段、状态和验收条件。以“读书活动报名页”为例，要求预览一个可点击的单页原型，包含场次选择、表单校验、成功和失败反馈。把真实接口、登录和短信发送明确标记为“未接入”，避免把演示代码误当成生产功能。
创建一个中文读书活动报名页原型：包括活动信息、场次选择、姓名和手机号字段、成功与失败状态。生成 390px 手机和桌面预览；使用虚构数据；点击提交时只模拟反馈，不调用真实服务。请先列出页面状态与待人工检查项，再生成界面。
Canvas 官方帮助说明，应用和代码可以在 Canvas 中继续编辑，代码视图可查看错误、日志和近期改动。出现异常时记录触发步骤和错误文本，再要求局部修复；不要用“全部重做”覆盖仍然可用的部分。
三、流程第二段：在 Stitch 探索视觉与多屏结构
当逻辑范围明确后，把页面清单、内容样例和品牌限制带到 Stitch，分别请求桌面和移动方向。提示词可以写“保留报名按钮的主层级，提供高对比、低饱和、插画感三种方案”，并要求展示空状态、已满状态和成功状态。选定方向后，人工记录颜色、字体、间距、圆角和组件状态，形成一份设计规则。
Google 的 Stitch 介绍提到，工具支持自然语言、图片或线框输入，也可将屏幕连接成可预览的交互流程；较新的官方介绍还提到设计系统上下文和从设计到代码的衔接。功能可能随实验版本变化，页面上出现的入口和账号资格应以当前 Google Labs 页面为准。
四、流程第三段：把结果整理进 Pixso
导入前先确认格式和用途。若拿到的是 CSS/HTML 或图片，不能默认存在可编辑的原生图层；可以先整理素材、手工重建关键组件，再把原始输出作为参考。若当前版本提供 Figma 或其他格式出口，也要打开文件检查字体、图片、约束、交互连线和文本可编辑性。本文不承诺原生一键导入或无损转换。
在 Pixso 中建立页面结构、组件和变量，给按钮、输入框、标签和错误状态补齐命名。通过 Pixso UI 设计协作邀请产品和开发一起看标注与批注，避免只评审一张“漂亮截图”。最终交付应包含设计规则、状态说明、资源清单和待开发项。
五、移动端与可用性检查
用 390px 和 360px 检查首屏标题、表单、键盘弹起后的提交按钮，以及长姓名和长错误提示。表格或对比信息使用独立横向滚动，不要裁掉列；文本放大后仍可读。再走一遍空结果、已满、网络失败和重复提交路径，确认用户知道下一步做什么。
如果只完成了视觉草图，要在交付说明中标注“待开发交互”；如果 Canvas 预览使用模拟数据，也要把数据边界写清楚。这样团队不会把实验结果当成已经上线的功能。
六、按项目规模选择协作方式
个人快速验证可先 Canvas 再 Stitch；需要多屏视觉比较时直接从 Stitch 开始；多人项目则无论从哪一端开始，都应在 Pixso 统一版本、组件和反馈。需要将生成工具连接到设计或开发环境时，可阅读 Gemini Design MCP 教程，了解权限、格式和人工复核边界。准备好后可进入 Pixso 工作台建立可追踪的项目。
更多提示词写法见 Gemini UI 设计提示词教程。好的流程不是让某个工具一次完成全部工作，而是让每个阶段都留下可检查、可讨论、可继续编辑的结果。
文档核验日期：2026 年 9 月 13 日。对比依据为 Google 官方帮助和 Google Labs/Blog 公开资料；Canvas、Stitch 的名称、入口、功能和地区可用性可能变化，发布前请以当前官方页面为准。
资料依据：Google Canvas 使用说明；Google Stitch 设计画布更新。示例为原创练习，界面操作以当前产品为准。
