Figma 搭配 Claude 与 Weavy AI：从原型到素材的完整工作流
设计不仅仅是画图，更是构建体验。借助 Google AI Studio、Claude、Cosmos 和 Weavy AI 这一套工具组合，我们可以更高效地完成从概念到视觉落地的全过程。下面以一款名为 "Echo Journal" 的音乐日记应用为例，分享这套工作流的具体实践。
1. Google AI Studio：端到端原型构思
Google AI Studio 的优势在于能端到端地辅助原型制定。Gemini 在界面理解上表现不错，适合用来梳理基础逻辑。
2. Claude：定义品牌指南
设计思想决定了产品的调性。就像电影有开头、中间和结尾，用户不希望被强行打断或看到杂乱的信息。利用 Claude 进行头脑风暴，可以帮助我们提炼出核心的品牌原则。
比如，我希望用户感受到平静，针对厌倦手机喧嚣的人群，可以设定这样的基调：「情绪基调是发泄情绪的私人空间，安静的在场感。不催促，不打断，不评判，就像一个好的倾听者」。将这一点中心思想提炼出来，保存为 Figma 中的品牌指南文档。
基于上述指导，让 Claude 生成一份完整的品牌指南文档（Guidelines），包括品牌名称、标语、定位、支柱、声音与语气等。
我们把这款应用叫做 Echo Journal。基于这个名字，帮我写一份完整的品牌指南文档。
内容包括：品牌名称、标语、品牌定位、品牌支柱、品牌声音与语气、核心信息。
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 进行最后的开发验证。对比最初的原型构思，可以看到视觉效果有了显著提升。
