本文演示了利用 Google AI Studio、Figma、Claude、Cosmos 及 Weavy AI 协作完成产品设计的全流程。
1. Google AI Studio 端到端制定原型
Google AI Studio 非常好，因为它能端到端完成。Gemini 在界面设计上表现突出（本次以开发一款音乐日记讲述全流程）。
2. Claude.ai 制定品牌指南
先谈谈设计思想。用户不应该觉得我们在抢他们的注意力，或者强迫他们。用户更不愿意看到一堆广告和各种乱七八糟的东西。
很多人觉得品牌指南听起来很像企业用语，但利用 Claude 等头脑风暴工具可以帮助我们找到想要的点。通过聊天挑选满意的指导原则和观点。
例如我希望人们能感受到平静，针对那些厌倦了手机的人，Claude 提出一点「情绪基调是，发泄情绪的私人空间，安静的在场感。不催促，不打断，不评判，就像一个好的倾听者」。我会把这一点中心思想提炼出来放大 Figma 中保存，作为品牌指南。
Figma 中不单单只记录品牌指南，它包括我们所有的设计灵感、想法、元素等都记录在 Figma 中。
3. 基于指导生成品牌文档
我们把这款应用叫做 Echo Journal。基于这个名字，帮我写一份完整的品牌指南文档。
内容包括：品牌名称、标语、品牌定位、品牌支柱、品牌声音与语气、核心信息。
4. 使用 Cosmos 制作情绪板
通常会在这里添加情绪板，所以我为这个语音应用准备了一个情绪板。 非常简单，完全可以直接在 Cosmos 里搜索「复古磁带」，然后点击 + 号，就能够选择到 mycosmos 类别空间里面。 在这里感受到这些元素，都与我们刚才讨论的元素相互匹配的氛围。感觉它都在模拟设备，我们可以借助模拟的氛围，让某些东西感觉像是我们刚才说的一样。既不太科技化，又不会让人感到不知所措，至少不会让用户反感。
5. 使用 Weavy AI 制作品牌素材
以前是设计师查看情绪板，根据情绪板创建定制素材等等，但现在任何人都可以做到。 我会在 Claude 和 Weavy 之间切换，让 Claude 创建我想放入 Weavy 的提示。 先从颜色开始，颜色就像情绪板，是最原始、最简单的入门方式。然后就像搭积木一样，比如颜色、背景、按钮和图像，可以把它想象成一幅画。 从 Cosmos 下载的图片可作为输入，然后使用 Weavy 的图像模型，我们将使用 Flex 2 Pro，这是一个非常通用的模型，所以在提示中，我可以这样写「我需要一个调色板，从参考图像中提取颜色」(最好选择英文提示词)，我们来看看它会产生什么效果。 比如我希望最终用户这个人能感受到复古、平静、炫酷的感觉，什么配色能与之匹配。如果你不能在 Weavy 里获取到你喜欢的配色，就告诉 Claude，比如对 Claude 说：我想要一个更好的提示，以便从图像中获取更好的调色板。再如给我写一个提示，「显示磨损的老式音频设备图像的进展」。 做产品的目的不是为了做而做，我们需要把它做的更漂亮。
6. 制作实际素材与按钮
「产品设计的好处在于，你不需要让脸看起来完全一样」。应用程序设计、网页设计你只需要让颜色、阴影和光照看起来视觉一致，这比起视频模型中的人物一致性要简单很多。 再次，排版处理，我们还需要一个录制按钮和一个类似录音机的扬声器。 视觉上还缺少一个元素，录制完之后它看起来像什么样子，它就像一个列表。但如果我们想营造一种模拟的，使用以上这一套配色方案生成一组卡带。从书脊视角展示这些卡带，就像它们被竖着排在书架或收纳盒里一样，视觉上每次录音完成，我们就得到一盘新的磁带。
7. 设计 Logo
现在来说 logo。我打算改用 Weavy 中的 Ideogram V3，因为它在字体排印方面表现更好。 品牌名是 EchoJournal。 请帮我写 4 条 logo 生成提示词：
- 版本 A：技术感文字标志，就像磁带机面板上的英文字样。
- 版本 B：手写风格，好像有人在卡带标签上用笔写下来的字。
- 版本 C：磁带标签风格，类似 TDK / Maxell 那种品牌视觉。
- 版本 D：极简文字标志，带一个非常低调的卡带小图标。 另外，请给我一条负向提示词，用来避免生成那种很普通、很 AI 味的垃圾 logo。 把这段提示词丢到 Claude.ai 中，可以得到 5 组提示词版本，「其中一组为负向提示词」，Weavy Ideogram V3 有一个优点就是可以支持负向提示词，就是我们不希望看到什么。当然，在 Weavy 中使用 SD3 - Remove Background 可去除背景，可深度与 figma 组合。
8. 组合开发与最终效果
将以上在 Weavy 得到的所有元素，在 Figma 中进行组合后，上传至 Google AI Studio，最终再一次在 Google AI Studio 进行最后的开发。可与第一次在 Google AI Studio 的原型作一个对比效果（如图 2 为最终效果，第一次效果请返回至制定原型阶段查看，效果限制提升）。
