产品经理的AI工具之Stitch

今天介绍Stitch的用法。Stitch适用于产品最早期，即产品还只是想法或创意，没有明确的功能边界时，它可以速转成产品页面，提高沟通效率，推动需求更加明确、推动产品逐渐成型。

https://stitch.withgoogle.com/

1、首页

进入stitch的首页可以看到上图页面，其中左侧显示近期自己创建的stitch项目或别人分享给自己的项目。主页面即为用来设计页面的对话框页面，如果设计APP就选择APP，如果设计web页面就选Web。（如果一不小心忘了选，也没关系，后面调整细节时可以修正）

可选的模型包括：Gemini 3 Flash，Gemini 3.1 pro，Nano Banana pro，Ideate。一般在选用前两个比较多，在修正页面细节时，可以选择Nano Banana。

2、提示词

建议设计页面使用的提示词包括：AI工具的角色、要解决什么问题/任务、输出是什么？有什么约束？提示词越具体得到的结果越接近。例如：你是一个富有经验的高级网站设计师，现在要设计一款笔记产品——简易个人笔记，包括文档编辑器模块、笔记库 & 文件夹管理模块、搜索检索模块、双向链接或内部引用模块。用户在使用产品时，可以沉浸式输出，并方便笔记管理。网站采用商务稳重风。

3、细节调整

根据上述示例的提示词，生成如上图的产品页面。

左侧上面 ".."点开后可以看到模型执行的结果情况，比如用了什么风格，什么设计系统，设计亮点是什么；

左侧下面”Agent log“点开可以展示每次跟模型的对话，选中某条对话，这个页面便会展示该对话的生成结果。这样便于定位修改过程中的不同版本。

页面中间是无限画布，可以继续修改生成更多的页面。可以借助右侧的工具栏选中某页面或拖拽整个页面，也可以对页面上的具体文案进行修改。

设计系统：所生成页面的第一个是改产品的“设计系统”，它决定了整个产品采用的设计风格。双击该页面可以直接修改设计的配色，也可以在对话框中提出设计风格的修改或上传一个链接要求设计参考链接产品的风格。调整后，所有产品页面随之全部进行风格的调整，非常方便。

具体页面调整：

单击选中某个页面后，最上方出现工具条

• 如果产品想要做成web版，但在生成页面时忘记选择web，可以用Generate下的Desktop web version生成相应的web版。生成时看着web页面一点一点被画出觉得很酷、很解压。
• 如果想要对页面的组件进行修改，一般使用Modify下面的Annotate。比如选中某个下拉框，在对话框中告诉模型，把这个下拉框去掉，改成平铺的tab。

4、导出

经过一系列的页面细节调整，页面基本达到预期。可以使用页面右上角的功能进行下一步操作。

• 选中产品的所有页面，点击播放按钮，可以预览整个产品，包含页面间的跳转等简单交互。
• 使用Export可以将页面导出到本地、ai studio、figma等工具中，进行更进一步的细节交互设计。

以上。