前端不该是 LLM 的默认审美

为什么会这样#

LLM 训练数据里充斥着这种”安全模板”：成千上万的中等质量 landing page，配色保守、布局套路、动效为零。模型学到的”前端正确答案”就是这个平均水平。

你让它”做得好看点”，它会加大渐变、加阴影、加 emoji——离”好看”越来越远，离”AI 味”越来越近。

Design Token：把设计决策前置#

跳出默认审美的第一步，是先做设计决策，再写代码。

具体做法是先定义 Design Token——把颜色、字体、圆角、阴影、间距这些视觉原子，抽成命名的变量：

1
color.bg.primary     = #0a0a0f
2
color.text.primary   = #f5f5f7
3
color.accent         = #ff4d8d   // 强调色，品牌锚点
4
font.display         = "Inter Display"
5
font.body            = "Inter"
6
radius.card          = 16px
7
shadow.elevated      = 0 8px 32px rgba(0,0,0,0.3)

把 #ff4d8d 抽象成 color.accent，意义在于：设计决策（用这个粉色）和代码实现（在哪里用）解耦了。改主题只改 token 文件，全局生效。

模型拿到 token 文件后生成，配色就不再是”安全蓝紫”，而是你定的风格。你把决策权从模型手里拿回来了。

Design System：让风格可复现#

Token 之上是 Design System——一套组件的样式契约（按钮的三态、卡片的层级、间距的节奏）。

有了 Design System：

• 换主题 = 换 token 映射表（白标 / 暗色 / 多品牌一键切换）
• 风格统一 = 所有页面共享同一套样式逻辑
• AI 生成 = 给定 token + system，生成的界面风格一致，不是每次随机

组件库（shadcn/ui、Radix）本质就是 Design System 的工程实现——它们用 token 定义基础样式的单一事实源，避免样式碎片化。

几条反默认审美的实践#

1. 先设计后编码 不是”让 AI 写个页面”，而是”先定设计意图（关键词：情绪 / 风格 / 参考站），再让 AI 基于这个意图生成”。设计意图前置，模型才有方向。

2. 用参考站锚定 别用形容词描述设计（“高级感""极简风”模型听不懂），用具体参考站：“像 linear.app""像 stripe.com”。模型对具体站点的视觉特征有记忆，比抽象词靠谱。

3. 强调动效 默认生成是静态的。明确要求”hover 有微动效""滚动有进入动画""主题切换平滑过渡”，模型才会加。动效是页面”活”的关键。

4. 自托管字体 next/font/google 在某些构建工具下会报错（Unknown font）。改用 @fontsource-variable/* 自托管——字体加载稳定、不依赖 Google CDN、国内可访问。

5. 部署前必须真机验证 截图第一次就要 cache-bust（--user-data-dir 独立 profile 绕缓存），否则你看到的是旧版本，改了等于没改。

我的流程#

后端工程师做前端，最大的坑不是”不会写”，是”被 LLM 的默认审美带跑”。我现在的工作流：

1
定设计意图 + 参考站 → 定义 Design Token → 让 AI 基于 token 生成 → 真机验证 → 微调

每一步都把”设计决策”从我手里显式地交给模型，而不是让模型自己拍板。这样出来的前端，才不是 LLM 的默认审美，而是我的审美被工程化实现。

结论#

LLM 的默认前端 = 安全 + 平庸 + 一眼 AI。要跳出这个陷阱：

设计决策前置，模型只负责实现，不负责拍板。

Design Token 和 Design System 是把决策权拿回来的工程工具。前端能力弱的工程师，靠这套流程也能做出有风格、有记忆点的界面——而不是又一个”AI 生成的 landing page”。