Figma + Claude + Weavy AI 协同设计工作流实践

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 为最终效果，第一次效果请返回至制定原型阶段查看，效果限制提升）。