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

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 / 制作实际的素材和按钮

产品设计的好处在于,你不需要让脸看起来完全一样」。应用程序设计、网页设计你只需要让颜色、阴影和光照看起来视觉一致,这比起视频模型中的人物一致性要简单很多。

再次,排版处理,我们还需要一个录制按钮和一个类似录音机的扬声器。

视觉上还缺少一个元素,录制完之后它看起来像什么样子,它就像一个列表。但如果我们想营造一种模拟的,使用以上这一套配色方案生成一组卡带。从书脊视角展示这些卡带,就像它们被竖着排在书架或收纳盒里一样,视觉上每次录音完成,我们就得到一盘新的磁带。

现在来说 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

Read more

C++11新特性(下)----《Hello C++ Wrold!》(26)--(C/C++)

C++11新特性(下)----《Hello C++ Wrold!》(26)--(C/C++)

文章目录 * 前言 * lambda表达式 * 可变参数模板 * 展开参数包的方法 * 应用 * 包装器 * fiction包装器 * bind函数 * 作业部分 前言 在 C++11 标准带来的诸多革命性特性中,“简化代码编写” 与 “统一可调用对象管理” 是两大核心目标。lambda 表达式解决了传统仿函数 “定义繁琐、复用性低” 的痛点,让局部场景下的自定义逻辑(如排序规则、回调函数)能以更简洁的匿名函数形式实现;可变参数模板则打破了模板参数数量固定的限制,为 STL 容器(如emplace_back)和通用函数设计提供了灵活的参数处理能力;而 function 包装器与 bind 函数,则进一步整合了函数指针、仿函数、lambda 等不同类型的可调用对象,实现了统一管理与参数适配,甚至让可调用对象存储到容器中成为可能。 这些特性并非孤立存在 ——lambda 的底层依赖仿函数实现,可变参数模板为emplace系列接口提供了技术支撑,

By Ne0inhk
C++日新月异的未来代码:C++11(上)

C++日新月异的未来代码:C++11(上)

文章目录 * 1.统一的列表初始化 * 1.1 普通{ }初始化 * 1.2 initializer_list * 2.声明 * 2.1 auto、nullptr * 2.2 decltype * 3.左值右值 * 3.1 概念 * 3.2 左值引用与右值引用比较 * 3.3 左值引用与右值引用的应用 * 3.4 完美转发 * 希望读者们多多三连支持 * 小编会继续更新 * 你们的鼓励就是我前进的动力! C++11 能更好地用于系统开发和库开发、语法更加泛华和简单化、更加稳定和安全,不仅功能更强大,而且能提升程序员的开发效率,公司实际项目开发中也用得比较多,所以我们要作为一个重点去学习 1.统一的列表初始化 1.1

By Ne0inhk
Re:从零开始的 C++ 入門篇(十一):全站最全面的C/C++内存管理的底层剖析与硬核指南

Re:从零开始的 C++ 入門篇(十一):全站最全面的C/C++内存管理的底层剖析与硬核指南

◆ 博主名称: 晓此方-ZEEKLOG博客 大家好,欢迎来到晓此方的博客。 ⭐️C++系列个人专栏: Re:从零开始的C++_晓此方的博客-ZEEKLOG博客  ⭐️踏破千山志未空,拨开云雾见晴虹。 人生何必叹萧瑟,心在凌霄第一峰 目录 0.1概要&序論 一,布局模型与常见误区解析 1.1C/C++内存布局 1.2内存布局易误解点 二,复习C语言的内存管理方法 2.1malloc 2.2calloc 2.3relloc 2.4free 2.5罗列常见的内存管理错误 三,C++内存管理方法 3.1new/delete管理体系 3.1.1开辟单个空间与释放 3.1.2开辟多个连续的空间与释放

By Ne0inhk
华为OD技术面八股文真题_C++_3

华为OD技术面八股文真题_C++_3

文章目录 * 变量的声明和定义的区别 * 内存泄露是什么意思?怎么避免内存泄露 * 怎么排查内存泄漏,遇到内存泄漏情况,一般怎么解决 * 说一下define和const的区别 * define和typedef的区别 * 宏函数和内联函数的区别 * 类和结构体的区别 * 结构体(struct)和联合体(union)差别 * 静态库和动态库区别 * 介绍一下C++的编译过程 变量的声明和定义的区别 * 变量的声明是告诉编译器变量的名称和类型,不分配存储空间; * 变量的定义会为变量分配存储空间并建立实体。 * 一个变量可以在多个地方声明,但只能在一个地方定义。 使用 extern 修饰的变量通常是声明,表示该变量在其它文件中定义,但 如果 extern 变量带初始化,则该语句仍然属于定义。 内存泄露是什么意思?怎么避免内存泄露 内存泄漏是指程序在动态申请内存后,后续失去对该内存的控制,导致这块内存无法被释放,从而造成内存资源浪费的现象。内存被申请了,却释放不了。 内存泄漏的危害如下: 1. 程序内存占用不断增大,导致系统可用内存减少,性能下

By Ne0inhk