跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
编程语言AI大前端

基于 Figma、Claude 与 Weavy AI 的设计工作流实战

本流程演示了利用 Figma、Claude、Cosmos 及 Weavy AI 构建设计工作流的完整过程。从 Google AI Studio 制定原型开始,通过 Claude 生成品牌指南与情绪板,再利用 Weavy AI 创建配色、素材及 Logo,最终在 Figma 中组合开发。该流程展示了如何借助 AI 工具提升设计效率与视觉一致性,适用于希望快速落地产品原型的团队或个人。

林间仙子发布于 2026/3/16更新于 2026/8/2246 浏览
基于 Figma、Claude 与 Weavy AI 的设计工作流实战

本文分享一套结合 Google AI Studio、Figma、Claude、Cosmos 及 Weavy AI 的设计工作流,旨在通过 AI 辅助快速完成从原型到品牌素材的生成。

文章配图

文章配图

文章配图

1. 端到端制定原型:Google AI Studio

Google AI Studio 的优势在于能端到端完成原型构思。以开发一款音乐日记应用为例,Gemini 在界面设计上的表现相当出色。

文章配图

文章配图

文章配图

文章配图

2. 制定品牌指南:Claude.ai

设计思想是核心。就像电影有开头、中间和结尾,用户不希望被强行打断或看到杂乱广告。利用 Claude 这类工具,我们可以找到想要的点,确定指导原则。

例如,我希望人们感受到平静,针对厌倦手机的用户,Claude 提出:「情绪基调是,发泄情绪的私人空间,安静的在场感。不催促,不打断,不评判,就像一个好的倾听者」。我会将这一点中心思想提炼出来,保存为品牌指南。

我们不需要从零开始建房子,借助工具找灵感,能更自然地明确感受。Figma 中不仅记录品牌指南,还包括所有设计灵感、想法和元素。

文章配图

文章配图

3. 生成品牌文档:基于指导原则

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

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

文章配图

文章配图

文章配图

文章配图

4. 制作情绪板:Moodboard with Cosmos

接下来用到 Cosmos,这是我最喜欢的应用程序之一。通常在这里添加情绪板,我为这个语音应用准备了一个。

非常简单,直接在 Cosmos 里搜索「复古磁带」,点击 + 号选择 mycosmos 类别空间即可。这些元素与我们刚才讨论的氛围相互匹配,模拟设备的质感既不太科技化,也不会让用户反感。

文章配图

文章配图

5. 制作品牌素材:Design with Weavy AI

以前需要设计师查看情绪板再创建素材,现在任何人都可以做到。我会在 Claude 和 Weavy 之间切换,让 Claude 创建放入 Weavy 的提示。

先从颜色开始,就像搭积木一样。从 Cosmos 下载的图片可作为输入,使用 Weavy 的图像模型(如 Flex 2 Pro)。提示词可以这样写:

我需要一个调色板,从参考图像中提取颜色

如果效果不理想,可以让 Claude 优化提示词,例如:

显示磨损的老式音频设备图像的进展

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

文章配图

文章配图

文章配图

文章配图

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 中进行组合后,上传至 Google AI Studio,最终再一次进行最后的开发。可与第一次在 Google AI Studio 的原型作对比,效果限制提升。

文章配图

文章配图

目录

  1. 1. 端到端制定原型:Google AI Studio
  2. 2. 制定品牌指南:Claude.ai
  3. 3. 生成品牌文档:基于指导原则
  4. 4. 制作情绪板:Moodboard with Cosmos
  5. 5. 制作品牌素材:Design with Weavy AI
  6. 6. 制作实际素材和按钮
  7. 7. LOGO 设计
  8. 8. 组合开发
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • MySQL 核心技术与实战全攻略
  • AI 辅助 Java 零基础入门与核心实战教程
  • VRCT 在 VRChat 中的实时翻译与语音转录使用指南
  • Spring Boot RESTful API 开发实战与测试指南
  • 基于 Python 的 Windows 应用程序自动化操作流程实现
  • 2026年3月13日AI热点:芯片大战、Agent爆发、安全争议
  • Gemini 全能 QQ 机器人部署手册
  • AIGC 微电影《编钟》制作全流程复盘
  • Prometheus + Grafana 实现 Java 应用数据监控系统
  • Spring Boot 全局异常处理与日志监控实战
  • 网络安全行业人才缺口与职业发展前景分析
  • Amazon SageMaker 部署 AIGC 应用:训练、优化、部署与 Web 前端集成实践
  • Linux Shell 与脚本基础实战指南
  • NAPI 实现 ArkTS 与 C++ 间的复杂对象传递
  • Web 版 IM 聊天信息加密算法的三种实现方案
  • OpenWebUI联网搜索实战:如何用SearXNG让本地大模型获取实时信息(附百度/360配置)
  • DeepSeek-R1-Distill-Llama-8B Python 爬虫实战:数据采集与清洗
  • Linux 从入门到实践:CentOS 服务器配置与用户管理指南
  • VSCode Copilot 接入智谱 GLM-5.1 实战指南
  • OpenClaw 安装与飞书接入实操

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online