实战：拿Claude Design改一版QQ音乐

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

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

[图示已省略]

然后，输入提示词。

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

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

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

[图示已省略]

设置好之后，点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&via=share），大家可以看看。

[图示已省略]

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

整体布局没啥大毛病，该有的模块都有。卡片的间距、字号层级、底部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的视觉语言、本地用户习惯这些，它还是西方设计师视角，需要你手动校准。