Figma 搭配 Claude 与 Weavy AI：从原型到素材的完整工作流

3. Cosmos：制作情绪板

接下来需要确定视觉氛围。我习惯使用 Cosmos 来搭建情绪板（Moodboard）。对于这款语音应用，我搜索了「复古磁带」元素，并将其添加到项目中。

这些模拟设备的元素能营造出一种既不太科技化、又不会让人感到不知所措的氛围。这种怀旧感与之前设定的'平静'基调非常契合。

4. Weavy AI：生成品牌素材

以前设计师需要根据情绪板手动创建素材，现在通过 Weavy AI 可以大幅简化这个过程。我会结合 Claude 和 Weavy，让 Claude 优化提示词，再交给 Weavy 执行。

先从颜色入手。颜色是最基础的视觉语言。从 Cosmos 下载的图片作为参考，使用 Weavy 的图像模型（如 Flex 2 Pro）提取配色。

提示词示例：「我需要一个调色板，从参考图像中提取颜色」（建议用英文）。如果效果不理想，可以让 Claude 帮你调整提示词，例如要求「显示磨损的老式音频设备图像的进展」。

5. 细化 UI 元素与按钮

产品设计不必追求所有细节完全一致，但颜色和光影必须保持视觉统一。除了录制按钮和扬声器图标外，还需要考虑录音完成后的列表展示。

为了营造模拟感，可以使用生成的配色方案制作一组卡带素材。从书脊视角展示，就像它们竖排在书架上一样，每次录音完成就得到一盘新的磁带。

6. Logo 设计

Logo 部分推荐使用 Weavy 中的 Ideogram V3，它在字体排印上表现更好。品牌名定为 "EchoJournal"。

可以请 Claude 生成几条不同风格的提示词供选择：

• 版本 A：技术感文字标志，类似磁带机面板上的英文字样。
• 版本 B：手写风格，仿佛有人在卡带标签上用笔写下的字。
• 版本 C：磁带标签风格，类似 TDK / Maxell 那种经典视觉。
• 版本 D：极简文字标志，带一个低调的卡带小图标。

别忘了添加负向提示词，避免生成过于普通或 AI 味太重的结果。Weavy Ideogram V3 支持负向提示词，配合 SD3 - Remove Background 去除背景后，可深度与 Figma 组合使用。

7. 最终组装与对比

最后，将所有在 Weavy 中生成的元素导入 Figma 进行组合，并上传至 Google AI Studio 进行最后的开发验证。对比最初的原型构思，可以看到视觉效果有了显著提升。