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

全网都在刷的 AI Skills 怎么用?别死磕 Claude Code,OpenCode 才是国内首选!

全网都在刷的 AI Skills 怎么用?别死磕 Claude Code,OpenCode 才是国内首选!

最近,“Skills”在AI圈子里太火了! 大家都在用它给 AI 加各种“buff”,让它自动写代码、做表格等等 但很多小伙伴看着 GitHub 上那些 Skills 兴奋不已,真到了本地想玩一把时,使用Claude code有很多不便的地方 之前就有很多小伙伴问我OpenCode,整好借着Skills,来聊聊OpenCode的安装部署和使用 很简单,不管你是想用图形界面还是命令行,这篇保姆级教程都能让你轻松上手! 咱们这就开始,带你入门OpenCode玩转 Skills! 目录: 1. 1. ✅ 如何下载安装OpenCode 2. 2. ✅ 如何安装和配置Skills 3. 3. ✅ 环境变量的设置方法 4. 4. ✅ 常用指令和操作技巧 5. 5. ✅ 遇到问题如何解决 6. 6. ✅ 如何创建自己的Skills  一、下载安装,超级简单 下载地址: https:

By Ne0inhk
AI实践(7)工具函数调用

AI实践(7)工具函数调用

AI实践(8)工具函数调用 Author: Once Day Date: 2026年3月2日 一位热衷于Linux学习和开发的菜鸟,试图谱写一场冒险之旅,也许终点只是一场白日梦… 漫漫长路,有人对你微笑过嘛… 全系列文章可参考专栏: AI实践成长_Once-Day的博客-ZEEKLOG博客 参考文章:Prompt Engineering Guide提示词技巧 – Claude 中文 - Claude AI 开发技术社区Prompting strategies for financial analysis | ClaudeDocumentation - Claude API DocsOpenAI for developers在LLM中调用函数 | Prompt Engineering GuideAI大模型Function Call技术教程:从入门到精通-ZEEKLOG博客详解 OpenAI 函数调用(Function Calling):让模型具备数据获取与行动能力 - 大A就是我 -

By Ne0inhk

彻底解放AI生产力!OpenClaw + Ollama本地部署终极指南

彻底解放AI生产力!OpenClaw + Ollama本地部署终极指南 还在为天价API费用发愁?受够了网络波动导致AI服务中断?今天,零度带你解锁真正100%本地运行的AI助手解决方案!只需跟着以下步骤操作,你的电脑将变身全能AI工作站,完全免费、断网可用、多模型自由切换! 🔥 为什么选择本地部署? 三大核心优势让你无法拒绝: * 零费用:无需任何API Key,彻底告别按token计费 * 断网可用:飞机上、地下室、偏远山区照样畅快使用 * 模型自由:一键切换GPT-OSS、Qwen 3、GLM 4.7等顶尖模型 🛠️ 五分钟部署全流程 第一步:环境准备 以管理员身份打开PowerShell,依次执行: winget install git.git 若出现权限错误,追加执行: Set-ExecutionPolicy RemoteSigned -Scope CurrentUser Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

By Ne0inhk
从新加坡《Companion Guide on Securing AI Systems 》看可信AI全生命周期防护框架构建

从新加坡《Companion Guide on Securing AI Systems 》看可信AI全生命周期防护框架构建

从新加坡《AI系统安全指南配套手册》看可信AI全生命周期防护框架构建 一、引言 1.1 研究背景与意义 近年来,人工智能(AI)技术以前所未有的速度蓬勃发展,已然成为推动各行业变革与创新的核心驱动力。从医疗领域辅助疾病诊断,到金融行业的风险预测与智能投顾,再到交通领域的自动驾驶技术,AI 的身影无处不在,为社会发展带来了巨大的效益 。据国际数据公司(IDC)预测,全球 AI 市场规模在未来几年将持续保持高速增长态势,到 2025 年有望突破千亿美元大关。 然而,随着 AI 技术的广泛应用,其安全问题也逐渐浮出水面,成为制约 AI 健康发展的关键因素。AI 系统面临着来自传统网络安全威胁以及 AI 技术特有的新兴安全挑战。在传统网络安全威胁方面,诸如网络钓鱼、DDoS 攻击、恶意软件入侵等问题屡见不鲜,这些攻击手段不仅会破坏 AI 系统的正常运行,还可能导致数据泄露、隐私侵犯等严重后果。

By Ne0inhk