本文分享一套结合 Google AI Studio、Figma、Claude、Cosmos 及 Weavy AI 的设计工作流,旨在通过 AI 辅助快速完成从原型到品牌素材的生成。



1. 端到端制定原型:Google AI Studio
Google AI Studio 的优势在于能端到端完成原型构思。以开发一款音乐日记应用为例,Gemini 在界面设计上的表现相当出色。




2. 制定品牌指南:Claude.ai
设计思想是核心。就像电影有开头、中间和结尾,用户不希望被强行打断或看到杂乱广告。利用 Claude 这类工具,我们可以找到想要的点,确定指导原则。
例如,我希望人们感受到平静,针对厌倦手机的用户,Claude 提出:「情绪基调是,发泄情绪的私人空间,安静的在场感。不催促,不打断,不评判,就像一个好的倾听者」。我会将这一点中心思想提炼出来,保存为品牌指南。
我们不需要从零开始建房子,借助工具找灵感,能更自然地明确感受。Figma 中不仅记录品牌指南,还包括所有设计灵感、想法和元素。


3. 生成品牌文档:基于指导原则
我们把这款应用叫做 Echo Journal。基于这个名字,帮我写一份完整的品牌指南文档。
内容包括:品牌名称、标语、品牌定位、品牌支柱、品牌声音与语气、核心信息。




4. 制作情绪板:Moodboard with Cosmos
接下来用到 Cosmos,这是我最喜欢的应用程序之一。通常在这里添加情绪板,我为这个语音应用准备了一个。
非常简单,直接在 Cosmos 里搜索「复古磁带」,点击 + 号选择 mycosmos 类别空间即可。这些元素与我们刚才讨论的氛围相互匹配,模拟设备的质感既不太科技化,也不会让用户反感。


5. 制作品牌素材:Design with Weavy AI
以前需要设计师查看情绪板再创建素材,现在任何人都可以做到。我会在 Claude 和 Weavy 之间切换,让 Claude 创建放入 Weavy 的提示。
先从颜色开始,就像搭积木一样。从 Cosmos 下载的图片可作为输入,使用 Weavy 的图像模型(如 Flex 2 Pro)。提示词可以这样写:
我需要一个调色板,从参考图像中提取颜色
如果效果不理想,可以让 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 的原型作对比,效果限制提升。




