拿Claude Design改QQ音乐,聊聊这东西到底行不行?

最近claude又更新了一个设计工具,据说是强到不行,有群友让我来做个评测,正好我也准备写一篇测评,所以今天我就带大家一探究竟。

图片

事情是这样的,上周五,Anthropic发布了一个叫Claude Design的新产品,官方定位是让你用聊天的方式做设计稿、原型、PPT、落地页这些东西。消息一出来,Figma股价跌了快7%,Adobe也跟着抖了两下,连Wix和GoDaddy都被带崩。资本市场的反应比设计师还快。

图片

群里做设计的朋友也找我聊,有人说这玩意儿看起来有点吓人,你赶紧试试到底行不行,有人说老板又要拿这个来PUA我们了,你能不能写一篇说它其实没那么强的。

我懂,大家都爱听我说实话。那我就认真试一下。

在宣传片demo和有些自媒体嘴巴里总是很牛逼,感觉分分钟能替代设计师,但真到自己手里,各种细节跟你想的对不上。至少跟老板们在朋友圈看到,然后想象中的那么强还是有很大差距的,但凡你真的去用过这些所谓能替代牛马们的AI工具,就肯定能懂我说的。

但Claude不太一样,我也在各种群里,公众号上给大家安利过它,目前它在AI圈里的定位,我觉得就是智慧担当,基本上也是我日常用到最多的AI。

图片

图片

图片

它不是什么功能都最强,但它对复杂任务的理解力、对上下文的把握能力,确实是感觉更好用的。所以当它出一个专门做设计的产品,我是真的好奇,它这次能不能把那种聪明感延伸到视觉领域。

周末我专门试了一下午,认真搞了一把。

先简单说一下Claude Design是啥,不熟的朋友可以了解下。

它现在是以research preview的形式开放给Pro、Max、Team、Enterprise订阅用户的,直接去claude.ai/design就能进。在首页左边也能看到。

图片

界面也很简单,左边聊天框,右边画布。你跟它说你想要什么,它在右边给你画出来,你可以用聊天继续改,也可以直接在画布上点选元素做行内评论,还可以直接改文字,或者用它自动生成的调节滑块来拖参数。

图片

支持的输入方式挺全的,文本描述、上传图片、DOCX/PPTX/XLSX文档、甚至可以直接抓取网页元素(这个很有意思),还能读取你的代码仓库提取设计系统。导出的格式支持的也多,PPTX、PDF、HTML、ZIP,或者直接甩到Canva继续编辑,或者打包成handoff bundle扔给Claude Code去落地成真代码。

Anthropic 的设计师 Ryan Mather 在 X 上说,不要把 Claude Design 当成传统的画布式设计工具来用。它更像 Claude Code,而不是我们熟悉的那类靠画布拖拽完成工作的工具,比如figma。

图片

https://x.com/Flomerboy/status/2045162321589252458

这句话我一开始没完全get到,用完之后才懂他什么意思。

好,背景介绍完了,下面我打算拿一个实际的项目来测试下效果到底咋样。

我这次选的项目是QQ音乐的首页改版。为什么选这个,两个考虑。一是音乐类产品视觉含量高,封面、卡片、渐变、状态、榜单,各种元素够丰富,能把一个设计工具的上限暴露出来。二是这种产品大家都熟,我说AI做得好不好,你一眼就能看出来。

过程也很简单,总共就几步吧。

第一步,快速生成一个初版

上来先设置项目名,然后选高保真原型设计,点击创建就行。

图片

然后,输入提示词。

我给Claude Design的第一个prompt大概是这样,

帮我设计一个音乐App的首页,参考QQ音乐的产品形态。要包含顶部搜索栏、今日推荐轮播卡片、根据听歌偏好推荐的歌单(横向滑动)、新歌速递、以及底部导航栏。整体风格要有情绪感,年轻化,可以用一些渐变和毛玻璃效果。iOS风格,402x874的手机尺寸。

说实话打完这段话我自己都觉得要求挺具体了,为了确保效果,我还专门给它发了一张QQ音乐的截图,咱们落地的时候肯定是效果怎么能高效出来就怎么操作。

图片

设置好之后,点send发送就行。

接着,回答关键问题,建立约束。

Claude没有直接开画,它先反问了我几个问题,APP品牌名/定位,整体情绪调性等等,目的也是为了完善设计约束,我们实际做项目,这些肯定也是要想的。

图片

这个交互我觉得挺意外,它有点像一个真的在跟你对齐需求的设计师。

图片

我全部选完后,让它开始干活。

UI生成的过程在左边都能实时看到,交互还比较友好。整个第一版出来,总共花了10分钟吧。项目链接,原提示词,修改过程都在这里(https://claude.ai/design/p/03fe7c63-6f5e-408a-9c10-0232efa862dd?file=%E6%BD%AE%E9%9F%B3+Tide+%E9%A6%96%E9%A1%B5.html”rich_pages wxw-img” src=”https://mmbiz.qpic.cn/mmbiz_png/vocxaww2l4EyvWIAxickbt9RJ8AA8dJ6410ReDK3Ivk9UsSxwqa5GyADzDOIm3qicACf5yJZdBicibIicsv1VZibZ8fYdcO5cibgBeDwdxjCAiapA68/640?wx_fmt=png” alt=”图片” data-src=”https://mmbiz.qpic.cn/mmbiz_png/vocxaww2l4EyvWIAxickbt9RJ8AA8dJ6410ReDK3Ivk9UsSxwqa5GyADzDOIm3qicACf5yJZdBicibIicsv1VZibZ8fYdcO5cibgBeDwdxjCAiapA68/640?wx_fmt=png” data-ratio=”0.7555555555555555″ data-s=”300,640″ data-type=”png” data-w=”1080″ data-imgfileid=”100024616″ data-aistatus=”1″ data-original-style=”null” data-index=”15″ data-report-img-idx=”12″ data-fail=”0″ />

怎么说呢,咋一看还挺像那么回事的。

整体布局没啥大毛病,该有的模块都有。卡片的间距、字号层级、底部tab bar的处理,比我见过的那些AI UI工具都专业不少,至少该有的都还是有的吧。

我把同样的提示词和参考图发给了google stitch,项目链接在这里,包括提示词和效果(https://stitch.withgoogle.com/preview/18289618863879818638?node-id=d69d9f342cd147399c97832b885dc93c)效果大家感受下。

图片

因为claude deisgn前面选了不能用真人封面,所以都是渐变封面,感觉还是差了不少。但整体效果还是比较遵循参考图和指令要求的,左边google stitch就显得很放飞自我了。

除了封面问题,咱们真用设计师的眼睛去看,问题也不少。

首先,图标问题真的很严重,对比google就差了很多,真的就是纯纯canvas代码画的,看起来很粗糙,大小比例都不大对。Google可能聪明一些,感觉是找了相近的现成图标库就用过来了。

然后可能是中文设计,一些文字字号,排版细节不太能看。还有不少其他细节就不说了,我们先解决大的。

发现这些问题的时候我就想,好,接下来才是真正考验它的地方。一版能生成个大概不稀奇,关键是能不能改。

第二步,迭代优化

这里我想重点讲一下,因为这其实才是评价一个AI设计工具最关键的环节。一步到位是神话,所有AI生成类工具到底能不能落地,都得看迭代能力。

我用了三种不同的修改方式来测它。

第一种是聊天,让它整体修改。把大的问题看能不能解决,这一步尽量把你的要求和规范说的准确一些,我跟它说,

这一版整体方向是对的,但有三个大问题需要一起解决。我按优先级列一下,你按顺序处理。问题一,图标。现在的图标明显是用canvas路径硬画的,粗糙、比例不准、视觉重量不一致。我要你改成接近iOS系统图标或者Lucide图标库的质感。要求:全页所有图标统一成线性风格,线宽2px,拐角2px圆角尺寸规范:底部导航栏24x24,功能按钮20x20,卡片内辅助图标16x16视觉重量统一,不要有的粗有的细如果你能调用现成图标库(Lucide、Heroicons、Material Symbols),优先用问题二,中文排版。现在的文字层级和字号像是直接套的英文排版,在中文环境里看着生硬。按中文App常见规范调整:主标题:17-18px,字重600(SemiBold),颜色纯白或深黑副标题:13-14px,字重400,颜色次级灰(深色模式下用白色60%透明度)歌手名、播放量这种:11-12px,字重400,颜色三级灰(白色40%透明度)行高按字号的1.4-1.5倍走中文之间不要有多余的字符间距(letter-spacing设成0或接近0问题三,封面配图。我知道内容限制不能用真人封面,但现在全用渐变替代,整个页面看起来像一个配色卡,缺少视觉焦点。改成这样:轮播卡片(首屏banner)用抽象艺术插画或者几何构图,要有明确的视觉主角,不要只是纯色渐变歌单推荐卡片,用每个歌单的主题配色 + 抽象化的符号元素(比如波形图、音符抽象化处理、粒子、噪点纹理)新歌速递这种小卡片,可以用纯色块 + 艺术化字体拼贴的风格,参考Spotify播客封面或Apple Music的艺术家主题封面那种处理三个问题按这个顺序改完,其他元素(整体布局、交互结构、色彩体系)保持不变,不要额外优化。改完之后跟我汇报你每一项具体做了什么。

图片

可能是一次性修改的东西多,它大概又花了5分钟才输出了2.0版本,对比1.0会好一些,但感觉还是差了点意思。水平就相当于一个刚入行的实习生做的图吧。

图片

第二种改法是行内评论。这个交互很像Figma里的comment,你在画布上点选一个元素,直接写评论,它会针对那个具体元素做修改。

我点了金刚区的图标,写了一句,

对比我发给你的参考图,这里的图标不要用颜色底板,直接用面型图标来设计。

图片

它做得很精准,只改了那个图标,其他元素一点没动。

图片

这种精准的修改能力,是比较需要的东西,相当于我们用figma,只不过变成了它帮我们操作而已。以前的工具你说改一个图标,它经常给你连旁边的文字甚至整个模块都重绘一遍,改完之后你还得花时间check它偷偷动了什么。

第三种方式是它自动生成的滑块。这个功能我第一次见,有点意思。

图片

我点了轮播卡片,它在右边弹出来几个滑杆,包括背景图尺寸,位置,整体大小,透明度以及整个盒模型都能调。我直接拖,左边的画布实时在变。整个过程不需要任何语言描述,就是拖。

这个交互让我想起早年用After Effects调关键帧的感觉,纯视觉、纯手感的微调。

但这个功能也有局限,它的滑杆是Claude自己根据内容生成的,也就是说它认为什么参数可以拖,才会出现什么滑杆。它没给我字间距的滑杆,虽然我其实想拖一下字间距。想调这个就只能回去用聊天说。

所以滑块是个锦上添花的东西,核心还是聊天驱动。

好了,到这里我们来算一下账。

从0开始做这个QQ音乐首页改版,如果是我在Figma里手动画,包括前期找参考、定风格、拉组件、排版、调细节,全套走下来,至少要1-2天。

用Claude Design,从第一次prompt到我觉得大概是一个初级原型的版本,我总共花了半个小时吧。效率这个事儿,没什么好争的,就是碾压。

但token的消耗也是很夸张,基本上我调了这么几轮后,当天的额度就快没了。幸好它是跟常规的问答做了额度区分,不然这谁用的起啊,可能下次得换个低版本的claude模型了。

图片

但我要提醒大家一个更重要的问题。

这半个小时能替代掉2天的前提,是我知道自己要什么。

我在跟Claude沟通的过程中,用到了排版,视觉层级、字重搭配、图标一致性、卡片比例这些词,每一个都是设计师的专业语言。AI能快速响应这些要求,是因为它理解这些词。但如果你是一个完全没有设计背景的产品经理,你给它说我觉得这个页面看着不对劲但我说不上来哪不对劲,它就真没办法帮你。

这就是AI和人之间那个永远存在的gap,AI可以帮你跳过从0到6的那段路,但从6到9的那段路,还是得你自己来。

它把你从搬砖中解放出来,但前提是你得有那个审美判断力,知道哪里该改、改成什么样、改了之后是不是更好。这个能力,永远是设计师最核心的护城河。

测完之后,我想跟大家聊一下我的真实感受。

Claude Design最大的优势,是它不是一个画布工具,而是一个思考工具。

回到Ryan Mather说的那句话,它更像Claude Code。你不是在操作它,你是在对话它。它的核心交互是一连串的需求澄清、方案生成、对齐反馈,这个过程本身就是设计师日常工作的前半段。过去这前半段是没人帮你做的,你得自己在脑子里走一遍,自己在纸上打草稿,自己试几个方向再挑一个。现在这一步可以被压缩成一场对话。

它特别擅长的事情,我给大家列一下。

一是快速探索多方向。以前说我这个项目要做3个视觉方向给老板挑,光画3版就要一整天。现在10分钟出3版,老板挑完之后再细化,整个探索阶段的成本被打下来了。

二是做PPT。这块说实话Claude Design是真的强,它导出PPTX的质感超过了我之前见过的所有AI PPT工具。如果你是创业公司做融资、或者是做内部汇报,这一块是绝对值得用的。篇幅有限我没放案例,你自己可以去感受下,真的还行。

三是产品经理做原型。我说真的,产品同学以后可以少骚扰设计师了。你自己把原型做出来给业务方看,等业务方确认了再找设计师精修,整个流程效率能提升很多。

四是设计到开发的交接。它打包的handoff bundle直接可以给Claude Code去实现,这件事一旦跑通,设计交付的痛点会少很多。

但它不擅长做的,我也要诚实地讲。

做品牌级的视觉表达它不行。那种需要深度理解品牌调性、目标用户情绪、文化符号的视觉创作,它给你的东西永远是平均值级别的,不会难看,但也绝对不会让人卧槽。这种差异化的东西,依然需要资深设计师来发挥的地方。

做复杂交互动效它不行。UI能画出来,但真正有设计感的微交互、转场、反馈动画,它给不了你那种想象力。

做系统性的设计规范它不行。它可以执行已有的设计系统,但从0构建一套有哲学、有思想、有逻辑的设计系统,它目前做不到。

对本土化细节的把握不够。中文字体、国产App的视觉语言、本地用户习惯这些,它还是西方设计师视角,需要你手动校准。

说点更大的东西。

每次看到这种新工具,群里总有人问我,设计师是不是要失业了?

我想说的是,失业这件事一直是个伪命题,真正发生的是工种在升维。

十年前报纸上说互联网出来了,设计师要失业了。十年过去,设计师没有失业,只是从平面设计师变成了UI设计师,从UI设计师变成了产品设计师,从产品设计师变成了现在这种既要懂交互又要懂品牌还要懂策略的复合型角色。每一次工具革命,都是一次过滤,把更能适应新的变化的设计师筛选出来。

Claude Design这类工具的出现,也是一样的事情。

它会把那些只会按照PRD画图的设计师淘汰掉,因为这件事AI做得比你快比你便宜。但它也会把那些有审美判断、有品牌感知、有策略思考、有审美直觉的设计师抬得更高,因为这些人的判断力被AI放大了10倍。

你以前一天出1个方案,现在一天出10个方案,但每个方案的审美把关、战略判断,依然是你的事。这些工具将来一定会变得更加厉害,审美更加好,但人在这其中的作用,我相信会一直存在,而且更加重要。因为杂乱的信息制造成本只会更低,但问出一个好问题并做筛选的难度反而是在变大。

所以我今天用完Claude Design,说实话心情是复杂的。一方面我很兴奋,作为一个每天面对设计评审、面对团队管理、面对业务方沟通的设计经理,我看到我的日常工作里至少有30%可以被它吃掉,也就是说我可以把省下来的时间放到更难、更值得的事上去。

另一方面我也体会更深,我这么多年一直在练的审美判断力、品牌理解力、团队管理能力,才是真正不会被替代的东西。那些东西没法被一个prompt加速,只能靠年复一年的实战积累。

我的座右铭一直是多做困难的事,在AI时代更加确信这句话是对的。AI把容易的事做完了,难的事就更值钱了。

朋友,如果你是设计师,别慌,去试一下它,去理解它能做什么不能做什么,没那么吓人。如果你是产品经理、创业者、运营、市场,恭喜你,这个工具是真的把一部分设计能力交到你手里了。

但请记住,再好的工具也不会替代你想做什么,那永远是最难的一件事。

工具永远是工具,有趣的是人。

原文:
https://mp.weixin.qq.com/s/OptVuoX4DOMbJx0dVB2TQg

- Posted in: AI

- Tags:

0 条评论 ,11 次阅读

发表回复

  1. 既然来了,说些什么?

Top