figma + claude + weavy AI ：从会用到用好

Google ai studio + figma + claude.ai + cosmos + Design with Weavy AI 这套头脑风暴工具看完后，你一定可从其中悟出独特、见解，并为之惊讶。我们不需要自己动手去建房子，我们可以借助不同的工具，去找找灵感，为自己创造东西，自然而然的知道自己的感受，和想要的感受。

1 / GoogleAIStudio 端到端 制定原型

GoogleAIStudio非常好，因为它能端到端完成。然后我发现Gemini在界面设计上真的很厉害！（本次以开发一款音乐日记讲述全流程）。

2 / claude.ai 制定品牌指南 （生成品牌指南 guidelines ）

先谈谈设计思想。

就像电影和电视剧有开头、中间、结尾一样，我们现在还不太在意中间和结尾。用户他们不应该觉得我们在抢他们的注意力，或者强迫他们。用户更不愿意看到一堆广告和各种乱七八糟的东西。

很多人，觉得品牌指南听起来很像企业用语，但我认为如claude、gemin这些头脑风暴工具一定能帮助我们找到想要的点。利用claude制定品牌指南，自己想要什么，我们可以看看这个，可能需要一次或几次这样的聊天，最终从这里挑选到我们满意的指导原则、从这里挑选到你喜欢的观点。

比如我希望人们能感受到平静，针对那些厌倦了手机的人，claude提出一点「情绪基调是，发泄情绪的私人空间，安静的在场感。不催促，不打断，不评判，就像一个好的倾听者」。我就会把这一点中心思想提炼出来放大Figma中保存，作为品牌指南。

我们不需要自己动手去建房子，我们可以借助不同的工具，claude能帮很大的忙。去找找灵感，为自己创造东西，自然而然的知道自己的感受，和想要的感受。

Figma中不单单只记录品牌指南，它包括我们所有的设计灵感、想法、元素等都记录在Figma中 如图5。

3 / claude 基于以上指导（生成品牌指南文档 guidelines ）

我们把这款应用叫做 Echo Journal。基于这个名字，帮我写一份完整的品牌指南文档。

内容包括：品牌名称、标语、品牌定位、品牌支柱、品牌声音与语气、核心信息。

4 / 制作情绪板 MOODBOARD WITH COSMOS

什么意思？就像一个录音按钮，接下来我要用到一个工具Cosmos，是我最喜欢的应用程序之一，说实话，它就是我最喜欢的程序之一。

通常会在这里添加情绪板，所以我为这个语音应用准备了一个情绪板。

非常简单，完全可以直接在Cosmos里搜索「复古磁带」，然后点击+号，就能够选择到mycosmos类别空间里面。

在这里感受到这些元素，都与我们刚才讨论的元素相互匹配的氛围。感觉它都在模拟设备，我们可以借助模拟的氛围，让某些东西感觉像是我们刚才说的一样。既不太科技化，又不会让人感到不知所措，至少不会让用户反感。

5 / 制作品牌素材 Design with Weavy AI

以前是设计师查看情绪板，根据情绪板创建定制素材等等，但现在任何人都可以做到。

我会在claude和 Weavy之间切换，让claude创建我想放入Weavy的提示。

先从颜色开始，颜色就像情绪板，是最原始、最简单的入门方式。然后就像搭积木一样，比如颜色、背景、按钮和图像，可以把它想象成一幅画。

从Cosmos下载的图片可作为输入，然后使用Weavy的图像模型，我们将使用Flex 2 Pro，这是一个非常通用的模型，所以在提示中，我可以这样写「我需要一个调色板，从参考图像中提取颜色」(最好选择英文提示词)，我们来看看它会产生什么效果(图1、2)。

比如我希望最终用户这个人能感受到复古、平静、炫酷的感觉，什么配色能与之匹配。如果你不能在Weavy里获取到你喜欢的配色，就告诉claude，比如对claude说：我想要一个更好的提示，以便从图像中获取更好的调色板。再如给我写一个提示，「显示磨损的老式音频设备图像的进展」，如图3就claude给我的prompt。

做产品的目的不是为了做而做，我们需要把它做的更漂亮。

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中进行组合后，上传至GoogleAIStudio ，最终再一次在 GoogleAIStudio进行最后的开发。可与第一在 GoogleAIStudio 的原型作一个对比效果（如图2为最终效果，第一次效果请返回至制定原型阶段查看，效果限制提升）。

关注我，获取更多编程/AI实战教程！
找我 -> Auwubai