审美不是一个 skill 文件：从组件到产品的三级练法

核心内容#

有人问我：前端有什么好的设计 skill。下面从这个问题出发，把「做出好的前端产品」倒推成可以练的三级，并记下我会去翻的组件库、参考站，以及怎么用 AI 出的多版来练眼：

• 现成的设计 skill 在做什么，它为什么不够
• 第一级：认组件、记名词，让你能准确地对人和 AI 说话
• 第二级：看成熟产品的页面和完整用户 workflow，盯住转化率
• 贯穿三级的练法：让 AI 出几版，先凭直觉选，再讲出为什么
• 第三级：从产品属性出发做整体设计，以及为什么抽卡替代不了判断
• 一份可以照着做的学习路径

要点整理#

1. 为什么现成的设计 skill 不够#

问题是「前端有什么好的设计 skill」。我去看现在市面上那些前端设计 skill、提升审美的 skill，发现本质都是把一批固定模板内化进去：别人已经挑好的、稍微好看一点的、比普通水平高一点的东西。打开那些仓库的 README 看一眼就明白。比如 Anthropic 官方的 frontend-design ↗、Zara Zhang ↗ 的仓库，还有之前那些爆火的仓库，里面都是一堆模板，就像 PPT skill 一样。

Zara Zhang 最出名的 frontend-slides ↗ 是一个很好的例子。它本身就是一个做网页幻灯片的 skill，内置一套风格模板让你挑。用它做出来的东西多半确实好看。

那问题在哪？有两层。第一，好看未必是真的好，它好不好取决于模板是否适合你的产品。第二，也是更关键的，它很局限：模板替你做了选择，你只是在别人的选项里挑，自己并没有学会怎么选。一旦你的产品不在模板覆盖的范围里，或者你想做出和别人不一样的东西，skill 就帮不上了。

这并不是说 skill 没用。把它当成「参考答案」很好：看它为什么选这个字号、这个间距、这个配色，再对照你自己的判断。真正要警惕的是把它当成「审美外包」，以为装上一个 skill，审美问题就解决了。

所以我换了一个思路。培养前端审美要一步一步来，先把大问题拆成小问题。终极目标是设计出一个好的前端产品，包括网页端、移动端、桌面端，UI、UX 和用户交互放在一起算。从这个目标往回倒推，最小的单位是一个组件；再往上，是一个页面和一条完整的用户 workflow；再往上，才是整个产品。越往右越难速成。第三级没有可以照抄的捷径。

2. 第一级：组件，先把名词学会#

最小的单位是组件。去翻好的组件库，它们设计出来的东西默认就是优秀的，你看得越多，眼睛的基准线就越高。这一级要同时培养两样东西：认识基础组件，以及认识动效。

基础组件库：先认全名字#

先看比较基础、比较 base 的组件库，去看它们的 component 页面。

这一步要练的是叫得出名字。hover、tab、dialog 这些要能区分。为什么这么重要？不管你后面是和人交流还是和 AI agent 交流，你起码不能说「我想要做一个页面」，然后用一段语义描述、模糊描述去讲。这永远不如直接把专业名词说出来。

举个对比。「做一个点了会弹出来的框，里面能填东西」，AI 可能给你 Dialog，也可能给 Popover、Sheet 甚至新页面。说「点按钮打开一个 Dialog，里面是两个 Input 和一个主按钮，提交后用 Toast 提示成功」，第一版就八九不离十。

入门时至少分清这几组容易混的：

• Dialog / Alert Dialog / Sheet / Drawer：都是弹出层。Dialog 居中；Alert Dialog 用于必须确认的危险操作；Sheet 从屏幕边缘滑出；Drawer 在移动端从底部拉起。
• Popover / Tooltip / Hover Card / Dropdown Menu：都是「附着在某个元素旁边」的浮层，区别在于怎么触发、里面能不能交互。
• Tabs / Segmented Control / Accordion：都是在有限空间里切换内容。
• Toast / Alert / Badge：都是提示，从临时到常驻，打扰程度依次不同。
• Skeleton / Spinner / Progress：都是加载状态，适用的等待时长不同。

炫酷、带动效的组件库：找感觉#

基础库把「好用」的底线垫高了，下一步是找「会记住」的感觉。我拿来看的炫酷组件库是 React Bits ↗，组件页上就是一排可以点进去的效果卡片。

同类型的库还有很多。它们的共同点是：基于 React + Tailwind，大多用 Motion ↗ 做动画，可以直接复制代码，或者用 shadcn CLI 装进项目。

一个实用的分工：基础库决定产品「好不好用」，炫酷库决定「好不好记」。一个页面里炫酷效果最好只放一到两处，通常是首屏和一个关键转化点。全页都在动，反而显得廉价。

动效名词：不用背，有印象就行#

想再进一步，可以学一些动效的专业名词，比如 GSAP ↗、Three.js ↗、Motion ↗ 这些库里的说法。小红书上也有不少帖子专门整理动效名词。不是要完全背下来，而是培养印象。

三个库的分工不一样：

入门最值得先记的一批词：ease-in-out（缓动曲线）、spring（弹簧动画）、stagger（依次错开出现）、parallax（视差）、scroll-triggered（滚动触发）、layout animation / shared element（元素在两个状态间平滑变形）、marquee（跑马灯）、micro-interaction（按钮点击、开关切换这类小反馈）。

有了这些词，你跟 AI 说「卡片列表用 stagger 0.05s 依次淡入，hover 时用 spring 轻微上浮」，结果会比「加点动画」好得多。

3. 第二级：页面和 workflow，看成熟产品怎么带新人#

认完组件，往上一级是页面。我推荐两个网站：Mobbin ↗ 和 Dribbble ↗。它们把市面上大大小小的产品，不管是手机端还是桌面端，界面都截下来存在一个地方。你就不用一个个产品去搜、去注册。

以 Mobbin 为例，我的用法是：进首页，平台统一先选 Web（网页端最广，大家最常做），然后随便点进一个产品。产品页里有三类内容：

1. Screens：一个一个完整的页面。
2. UI Elements：一个一个组件，正好和第一级接上。你会看到真实产品里同一种组件有多少种做法。
3. Flows：完整的用户 workflow，比如注册、新建项目、付费，有录屏视频也有逐页截图。我比较推荐看这一类，看哪一类随你。

为什么要看完整 workflow：转化率#

我推荐看 Flows 的理由是：设计产品时，你还要考虑用户的 onboarding 过程，也就是转化率。

为什么转化率那么难做？假设你做的是一个 agent 产品，类似网页版的 Codex。从用户点进你链接的那一刻开始计时，到注册账号、打开一个新任务、第一次按正确的方式用起来。比如在 Codex 里建了第一个 project、输入第一个 prompt、跑出第一个结果，有了产出才算转化成功。每个产品的「第一次成功」不一样，但都要先定义清楚。

这条路上任何一步设计得不好，用户就会流失：页面来回跳、用户不知道从哪开始、中间某一步卡住。就像游戏的新手引导，引导做得不好，你就不想玩了。除非你是那种奇才，自己就能摸索出来怎么用，但大部分人不是。

看的时候就跟着 workflow 一页页往下翻，去抠细节。这些都是成熟产品，一般不会有很低级的问题，但仍然能讲出东西。比如 Gumloop 注册引导里的这一步：问你从哪知道 Gumloop，选项有十几个。如果用户想全选，这里并没有「全选」按钮。这就是一个可以讲出来的点。

其他可以讲的点还包括：点击按钮有没有动效、圆角、间距、按钮的对齐、颜色，以及左侧导航之类的周边区域。不一定每页都有问题。重点是逼自己去看、去说。

看一个 workflow 时可以带着一张固定的清单：

• 步数：从落地页到第一次产出，一共几步？哪些步骤可以跳过（像图 5 底部的 Skip）？
• 每一步只问一件事吗：一页塞了多少决定给用户？
• 进度感：用户知不知道自己在第几步、还剩几步（图 5 底部的进度点就是在做这件事）？
• 空状态：用户第一次进入主界面时看到的是一片空白，还是示例和引导？
• 为什么要问这个：比如「你从哪知道我们的」，对产品方有用，对用户没有，所以它通常是可跳过的。

Dribbble：看视觉，不看 workflow#

两个网站的定位不太一样。

所以 Mobbin 用来学 workflow 和组件用法，Dribbble 用来找配色、插画、排版上的灵感。

4. 贯穿的练法：让 AI 出几版，做 A/B 对照#

如果你觉得从第一级跳到第二级跨度太大，自己看不出门道，可以借一个「有点审美」的前端模型来搭梯子。

下面是我的个人体感，不是严格评测：

具体的做法分两步：

1. 只选：让 AI 给同一个需求出几个版本，你只挑出更好的那个，不需要说理由。
2. 讲清楚：为什么你选的那个更好？好在哪？没选的那个差在哪？要怎么改？这些都要想清楚。

为什么要这样？我用写语文作文打比方：

如果你面前只有一篇作文，你很难说出它哪里好、哪里坏，更难打分；只要摆两篇在面前，你马上就能说出哪篇更好。

判断比生成容易，比较又比单独评价容易。先用比较把直觉喂起来，再逼自己把直觉翻译成语言。说得出来的判断，下次才能复用，也才能变成给 AI 的指令。

几个让这个练法更有效的做法：

• 每次只变一个维度：让 AI 出三版「只改配色」或「只改布局」，比三版完全不同的页面更容易看出差别。
• 用第一级的名词写理由：别写「这版更舒服」，写「这版卡片间距 24px，留白多，主按钮对比更强」。
• 把理由反喂回去：把「差的那版要怎么改」直接作为下一轮 prompt，看 AI 能不能按你的判断改好。改不好，说明你的话还不够准。
• 留存记录：把每次的选择和理由记在一个文档里。几周后回看，这就是你自己的设计原则，比任何模板 skill 都适合你。

5. 第三级：整体产品，只能靠积累#

前两级的分析，都还停在单个页面或一张截图上。你可能也会考虑到这一页的交互模式，但不会站在整个产品属性的高度去看。从整体产品属性出发看设计，是一件很难、也需要长期培养的事。这一点我给不出一个最直接的学习方法。它就像画画、练乐器、弹钢琴，是一个积累的过程。

AI 抽卡的成功率会一直变高，为什么还要练#

当然，你也可以说：我直接让 AI 抽卡，多生成几次总有一版能用。我承认，AI 抽卡的成功率肯定是一直在提升的。我依然觉得这项能力值得培养，因为如果你未来要做自己的个人产品，一整个产品不是靠抽卡能抽出来的。

抽卡的成功率会越来越高，原因至少有三个：

1. 模型本身在变强：前端代码是模型训练里数据最多、最容易验证的领域之一。每一代模型写出来的页面都更规整、更像成熟产品，「一眼 AI 味」的默认风格在被逐步修掉。
2. 喂给模型的参考越来越好：skill、设计规范、组件库源码、Mobbin 这类参考库，现在都能直接塞进 agent 的上下文。Mobbin 首页本身就在强调「给 agent 用」。模型不再只靠训练里的平均审美，而是对着好的样本做。
3. 人给的审美输入越来越准：当你能说出组件名、动效名、间距和配色的具体要求，能附上一张参考截图，模型命中的概率自然更高。这一点恰恰取决于你在第一、二级练出来的东西。

这三点合起来是什么意思？生成一个「看起来不错」的页面会越来越便宜，几乎人人都能做到。当产出不再稀缺，稀缺的就变成了：从十版里挑出对的那一版，并说清楚为什么；知道这个产品为什么该长这样，而不是那样；在几十个页面之间保持一致的风格和体验。抽卡解决的是「单张图好不好看」，而一个产品要回答的是「这一整套东西是否适合这群用户」。后者是判断，抽卡替代不了。

换句话说，AI 越强，审美和判断从「锦上添花」变成了「唯一的差异」。这也是为什么前面两级的练法都落在「选」和「说」上，而不是落在「自己从零画」上。

一个例子：面试手记为什么用马卡龙配色#

我拿自己在做的面试准备产品举例。网站是 joyehuang.dev ↗（「面试手记」）。现在上线的是一个预约页，后面的产品页已经做好了。

它的视觉是马卡龙配色、糖果配色，加上手绘风格，字体用接近手写的那种。为什么这样设计？因为「面试」这个词，对于还没毕业的学生，不管是找实习还是找正式工作，都是有压力的。我自己其实还好，我觉得面试是一种享受，但对大部分人来说不是。准备面试、准备找工作的过程本身就有压力：运气占了很大一部分，市场也比较严峻。所以设计要往轻松的方向走，配色像马卡龙、像糖果。

我也坦白一个「违反原则」的地方：页面上把题目数量做得很醒目。严格按「不要给人压力」来说，这里不该放数字。放上去，是为了引流，想把数字凸显得更大。但如果这个数字是 1000、3000，用户还没登录就会想：「难道我拿一个 agent 开发的实习 offer，要准备 3000 道题？」这肯定不可能。所以这个产品后面也不会把几百道题直接丢给用户去刷。

这个例子示范的是第三级的思考顺序：先问用户是谁、处在什么情绪里，再决定视觉。同样是面试题库，如果目标用户是准备跳槽的资深工程师，克制、高信息密度的风格可能更合适；面向焦虑的学生，降低压力就是第一位。题目数量那个取舍也很典型。设计原则和增长目标经常冲突。第三级的能力不是永远选「对」的那边，而是清楚自己在牺牲什么、为什么值得。

产品和开发正在变成同一个岗位#

我的结论是：产品的 UI、UX 设计、产品属性，一直到后面的软件开发，是一环扣一环的。我现在已经觉得产品和开发是同一个职位。产品要懂开发，开发要懂产品，所以提前培养不是什么坏事。

我喜欢前端。去年开始找实习的时候，大家还不太说全栈，多数人会偏向前端或后端。前端的吸引力在于即时反馈很强：学一点就能做出一个个人网站，自己看着爽，给别人展示也爽。到现在我也很喜欢做小组件、好看的页面，觉得这些都是很有意义的事。

在 AI 写代码的时代，这种即时反馈变得更快了。从想法到一个能点的页面可能只要几分钟。这让审美训练的成本也大大降低。以前要自己写完才能比较两版，现在可以一下午看几十版。

那些「其实可以更好」的小细节#

审美不只是配色和排版。很多差别落在很小的交互上，用户说不出哪里不一样，但会觉得顺手、靠谱。我把一些前端小技巧放在博客的 Lab（实验室） ↗ 里，每条都是一个可交互的小样，再配一段为什么。挑几条有代表性的：

• 加载提示晚一点出现：请求通常很快回来时，别一点就转圈，等 200ms 左右还没回来再显示。
• 骨架屏比转圈显得快：先用灰块画出最终版式，用户知道在等什么，内容到了也不会跳。
• 会变的数字，用等宽数字：否则跳动的计时器会左右晃，表格里的金额也对不齐。
• 能点的范围，比看起来大：图标可以画得小，但点击区域不该跟着小。
• 弹出层从触发它的地方长出来：动作本身就交代了它从哪来。
• 高频操作别加动画：一天触发几百次的操作，第一次看着精致的动画，到第一百次就只剩等待。

这些细节单独看都很小。能注意到它们，并说出「为什么」，正是第二级抠细节、第三级从用户出发的能力落到代码上的样子。人在等待时会焦虑，手指会点偏，眼睛会被晃动的数字干扰。审美更多是对使用者感受的体贴。

6. 可执行的学习路径#

把上面的内容排成一个可以照着做的计划：

1. 第 1–2 周：认组件。把 shadcn/ui 的组件列表从头到尾过一遍，每个组件写一句「它是什么、什么时候用」，特别分清第二节列的那几组易混组件。
2. 第 2–3 周：认动效。在 React Bits、Magic UI、Aceternity UI 里各挑 3–5 个喜欢的效果，记下名字，再试着用 stagger、spring、parallax 这类词描述它在做什么。
3. 第 3–4 周：拆 workflow。在 Mobbin 的 Web 平台挑 3 个你常用的产品，看它们的 onboarding workflow，用第三节的清单记录：几步到第一次产出、哪一步最卡、有哪些细节可以改。
4. 持续：做 A/B 练习。每做一个页面，让 AI 出 2–3 版，先选，再用专业名词写三行：好在哪、差在哪、怎么改。把「怎么改」作为下一轮 prompt。
5. 长期：从产品属性倒推。做任何东西之前先写下用户是谁、处在什么情绪里、第一次成功是什么，再决定配色、字体和信息密度，就像面试手记选马卡龙色那样。

留一个练习：打开你最近用 AI 做的一个页面，不改任何代码，只用第一级学到的名词写一段「如果重做，我会怎么跟 AI 描述它」。写不出来的地方，就是下一步要补的地方。

当前理解#

skill 和抽卡都能给你好看的起点。它们解决的是「这一张看起来不错」。一个产品要回答的是另一件事：这一整套东西适不适合这群用户，从第一次点进来，到第一次真正用出结果。

这条路可以拆开练。先叫得出组件和动效的名字，你才说得清自己要什么。再去看成熟产品怎么把人带到第一次成功，你才知道单个页面之外还有一条 workflow。最后才谈得上从用户是谁、处在什么情绪里，决定这个产品该长成什么样。AI 出的版本会越来越多，也越来越好。会选、会说的人，会越来越值钱。