同一个站让 AI 做两遍:一次裸奔,一次喂它 54 个大厂的设计系统

QUOTE

你的 AI 不是不会设计，是它压根没见过好设计。

本文 AI 辅助创作，实验过程与数据来自本人真实环境实测，截图未修饰。

上周在 X 上刷到一条帖，两天 2340 赞。发帖的人叫 Himanshu，做了七年的网页设计，今年测了一百多个 vibe coding 资源，最后留下 40 个。他甩出一句话：

我第一反应是不服。好歹我也让 AI 做过十几个站了。但回头一想，我自己的站，比如那个 Palworld 配种计算器，每次让 AI 重新出一版首页，出来的东西总有一股说不出的「电器城促销感。

功能都对。就是一眼假。

本文看点

先说结论：问题不在模型，在输入。

AI 见过的「好设计」不是没有——它训练数据里 Linear、Stripe、Vercel 的页面都见过。但你让它做站的时候，它默认掏出来的，是训练数据里出现频率最高的那套东西：深色底、紫蓝渐变按钮、渐变大标题、绿点状态徽章。

这套东西出现频率最高，恰恰因为人人都让 AI 这么做。于是 AI 越做越多，越做越像，最后所有 AI 做的站长成了同一张脸。

AI 不是在抄袭谁，它是在取平均数。而平均数，就是没有脸。

那怎么办？他帖子里留下的 40 个资源里，排第一的是 land-book.com——一个专门收录获奖落地页的网站。逻辑很简单：你没见过好设计，就喂给它看。

但光给链接看没用，AI 吃不下一整个网站。真正管用的是把好设计拆成参数喂给它。

我手边正好有个现成弹药库：54 个真实大厂的设计系统拆解，Stripe、Linear、Vercel 这些，每个都拆到了具体数值——色板、字号阶梯、间距规则、组件样式。

拆开看你会发现，这些站的美感其实是纪律，不是灵感。

拿 Linear 举例，它的规则粗暴到可以直接抄：背景近黑 #08090A，正文文字用灰 #A8A9AB，标题才配用近白；全页只有一个强调色靛蓝，链接、按钮、焦点态全用它，不许第二个彩色出现。

Vercel 更狠：字号全页只有 4 档，间距只用 4 的倍数。没有 13px 配 22px 这种随心所欲，所有留白都踩在网格上。

我照着这些规则，写了一份给 AI 看的「设计系统说明书」：色板定死几个值、字号只许 4 档、间距只能是 8/16/24/32/48/64、禁止渐变、禁止第三种彩色。加上一句气质要求：参考 linear.app，做成工具站，不要游戏官网。

实验对象就是我自己那个站：BreedRoute，一个 Palworld 配种计算器——这种小工具站，就是普通人做出海被动收入的最小单元。同一个首页需求，同一个模型（GLM-4.5），唯一变量是喂不喂那份设计系统说明书。

A 组裸奔：只给功能描述——导航、标题、输入框、按钮、三个功能卡片。AI 十几秒交卷，页面完整，没有 bug。

但一截图，那个熟悉的配方又来了：渐变标题、渐变按钮、渐变 logo、背景还垫了一层紫色光晕。我数了数，一页里 8 处渐变、15 种颜色、7 种圆角值——2px 到 999px 全谱系乱斗。

— A 组裸奔版：渐变 8 处，颜色 15 种

B 组喂料：同一份需求，后面跟上那几段设计参数。

出来的东西，说实话我盯着看了半分钟。近黑背景、灰色正文、唯一的彩色是那颗靛蓝按钮。没有渐变——一处都没有。圆角只有 6px 和 8px 两档，踩得死死的。

顺带说个细节：我要求字号只许 4 档，它交出来 5 档——AI 也没有百分百听话。但比起 A 组的 7 档圆角随机乱斗，这点越界已经无伤大雅。纪律不是完美，是从随机收敛到可数。

— B 组喂料版：零渐变，单色克制

把硬数据摆出来更直观：

代码体积少了 39.6%。为什么更少的代码反而更好，我没深究，猜测是不用堆渐变和光晕之后，AI 把力气花在了层级和留白上——但这只是猜测，欢迎懂行的评论区指路。

我还把两张截图丢给视觉模型盲评——没告诉它哪张是哪组。A 组的评语是「AI 出生证明写在脸上」，B 组的评语是「可以冒充一个初创产品的官网」。

— 两组硬数据对比

同一个模型，十分钟内，交出了两种水准的东西。

这个实验真正拿得出手的结论不是「AI 能做好设计」——是你喂什么，它就是什么水平。所以缺的不是模型，是你的审美教材。三步攒一套：

第一步，存好站。land-book.com 收获奖落地页，godly.website 同类。看到喜欢的站先截图存下来，攒一个自己的灵感库。

第二步，拆参数。对着截图问 AI：「把这个站的设计系统拆出来，色板、字号、间距、组件样式，全部给具体数值。」拆完你就有了自己的那张参数表。

第三步，喂下去。下次做站，需求后面把参数表整个贴上。你会发现 prompt 变长了，但来回返工的次数变少了——以前是「不行，太丑，重做」循环五轮，现在一轮就到能用的程度。

把我这次喂的核心参数收拢在这儿，直接抄：

完整的 54 站拆解版，我整理好作为下一篇发出。

我的 BreedRoute 首页，最后就是按 B 组的路子重做的。不是每篇教程都有立竿见影的效果，这篇有。

谢谢你看到这里。一个人做站最孤独的时刻，就是页面丑得自己都不想打开，还不知道从哪改起。

你现在让 AI 做的站，卡在哪一步？是配色总乱、还是排版总飘？评论区说一声，下一篇的 54 站参数表我优先整理你们卡住的那几个。

点个关注，下一篇我拆 Stripe 的定价页——它是怎么让你觉得贵的有道理的，这套路一个人企业直接能用。

觉得有用的话，帮忙转发给你那个「让 AI 做了个站然后不敢发朋友圈」的朋友，这对我是最大的支持。