告别设计AI 泥浆：拿捏大模型“设计品味”的硬核指南

大家好，我是蓝戒。本篇我们来聊聊：提升AI大模型设计品味的底层逻辑与实操。

一、 为什么你的AI生成的界面，总弥漫着一股“AI垃圾感”？

近两年大模型和 AI Coding 工具（从 Cursor、Claude 到各种 Agent）风头无两，几句 Prompt 就能五秒吐出一个完整的前端组件或页面。但你有没有发现一个尴尬的现象：

你让 AI 写个弹窗或者动效，它生成得飞快，跑起来也毫无 Bug。但当你退后两步仔细审视那个界面——

• 进场动画用了令人发窒的 ease-in（缓入），卡顿感直接贴在脸上；
• 卡片边框直接套了个死板的 1px solid #ccc，而不是带有层次感和高质感的半透明阴影（Semi-transparent shadow）；
• 按钮 hover 效果花里胡哨，把不该动的东西全都动了一遍，活像 2000 年代初的 Flash 炫技网站。

这种东西，业内有个非常贴切的英文词汇——AI Slop（AI 泥浆/AI 垃圾）。

为什么会这样？是大模型智商不够吗？

答案很残酷：不是 AI 智商低，而是 AI 本质上毫无“品味（Taste）”。

AI 的生成逻辑是基于海量训练数据的概率统计。而在互联网浩瀚的 Frontend 代码库里，优雅、克制、具备极致细节的代码永远只占 1%。剩下的 99%，都是粗制滥造的快餐代码。如果你不给它清晰的审美干预，AI 默认吐出来的，必然是那 99% 的公约数——也就是“精致的垃圾”。

二、 解码 GitHub 26K+ Star 项目：Emil Kowalski 给出的破解方案

前 Vercel / Linear 的资深设计工程师 Emil Kowalski 在 GitHub 上开源了一个爆炸级项目：emilkowalski/skills。这个项目一经推出便火速斩获 2.6 万+ Star，风靡整个前端与 AI Developer 圈子。

安装命令：

npx skills@latest add emilkowalski/skills

Emil 在项目 README 中开宗明义地提出了一个核心观点：

“Agents don't have great taste.”（AI Agent 根本没有好品味。）

AI 不会取代人类的领域专业知识（Domain Expertise），相反，AI 是专业知识的放大器。在 AI 生成物充斥网络的“垃圾海”（Sea of Slop）中，品味才是你唯一的护城河。

Emil Kowalski 在项目里做了一件非常酷的事：他把自己在 Vercel 和 Linear 这两家全球 UI/UX 巅峰公司积累多年的设计规范、动效法则（如 improve-animations、apple-design、animation-vocabulary 等），打包成了结构化的 AI Agent Skills（技能包）。

通过分析这个开源仓库，我们可以总结出注入大模型“设计品味”的三大核心提炼：

1. 动效领域的“语法规训”：别让 AI 瞎选参数

AI 最喜欢在动效上犯低级错误，比如进入动画（Enter Animation）错误地使用 ease-in（导致物体像撞墙一样猝不及防地停住），而真正符合物理规律和人类视觉舒适度的是 ease-out 或 spring。

在 Emil 的技能库中，他将复杂的动效拆解为标准的“动效词汇表（Animation Vocabulary）”。当你提示 AI 时，不能只说“加个好看的动画”，而是注入规则：

• 进入（Enter）： 必须用 ease-out（快速出现，平缓停下）。
• 退出（Exit）： 必须用 ease-in（平缓启动，加速消失）。
• 交互响应（Micro-interactions）： 优先使用基于物理弹簧（Spring-based）的衰减，而非死板的固定时长 CSS linear。

2. 界面质感的“细节暗号”：去掉硬边框，拥抱透明与光影

初级 AI 最爱给 UI 元素套上生硬的纯色实线边框（Solid Borders）。而在专业设计工程师眼中，极简与高级感的秘密在于光影的细腻度。

Emil 的 Skill 规则直接明确约束 AI：

• 禁止使用高对比度的粗暴实线边框。
• 推荐使用微小的半透明投影（Semi-transparent shadow）、高斯模糊（Backdrop Blur）以及 1px 极低透明度的内边框（Inner border/Ring），模拟真实物体的边缘反光。

3. 拒绝“过度动效”：找到 Animation Opportunities

很多开发者误以为“品味 = 酷炫动效”。AI 在受到“加点动效”的指令时，恨不得把整张页面的每一颗按钮都抖动一遍。

Emil Kowalski 的 find-animation-opportunities 给出了极其克制的硬准则：告诉 AI 什么“不应该”动。动效的作用是引导用户注意力、表达层级关系（Contextual Transition），而不是为了动而动。凡是干扰阅读体验、增加用户认知负荷的平移与闪烁，必须一律剔除。

三、 实战：如何三步把“高级品味”喂给你的 AI 大模型？

了解了原理，作为开发者或产品人，我们在日常使用 Cursor、Claude code 或 Codex 时，究竟该如何系统化地提升 AI 的输出品质？

大模型品味提升三部曲：

• 1. 结构化喂养(Rules/Skills)
• 2. 建立禁忌清单 (Anti-patterns)
• 3. 引入专职Review (Design Audit)

第一步：将设计规范“技能化”（Skills/Rules 化）

不要在 Prompt 里敲“请设计一个优雅的界面”。这种模糊的指令毫无意义。

你需要将高级设计法则转化为具体的、可被 AI 严格执行的规则文件（例如项目根目录下的 .cursorrules 或 Agent Skill 文件）。参考 Emil 的架构：

Markdown

# UI & Motion Design Rules
- **Easing**: Always use `ease-out` for enter transitions and `ease-in` for exit transitions. Never use `ease-in` on enter animations.
- **Borders & Shadows**: Prefer layered, low-opacity box-shadows over solid border strokes.
- **Color Discipline**: Limit color palette; use semantic HSL variables with subtle alpha channels for dark/light mode balance.
- **Component Choices**: When building complex primitives (Toasts, Drawers), utilize battle-tested headless libraries (e.g., Vaul, Sonner) instead of inventing custom DOM logic.

第二步：建立清晰的“反模式清单”（Anti-Patterns List）

大模型非常擅长做“排除法”。列出它绝对不能干的事，比告诉它“做漂亮”有用一百倍：

• ❌ 严禁在页面首次载入时对非核心视觉元素施加 Stagger（交错）延迟动画。
• ❌ 严禁使用毫无意义的 3D 翻转或剧烈缩放特效。
• ❌ 严禁在模态框背景遮罩层使用 100% 纯黑遮罩，必须使用带有 Blur 的半透明灰度。

第三步：引入专职的“设计審查”（Design & Animation Review Agent）

在代码生成阶段之后，加入一道审核工序。就像 Emil Kowalski 仓库里的 improve-animations 或 review-animations 模块一样，你可以让另一个 Agent 扮演“严苛的 Design Engineer”：

“请逐行审计上述前端代码中的 UI 与动效实现。根据 Linear/Vercel 的高标准设计规范，检查是否存在 Easing 参数选错、边框过于生硬、缺少物理过渡等问题，并输出可执行的重构代码。”

四、 总结：AI 时代的竞争，终究是“人”的品味竞争

Emil Kowalski 的 skills 仓库之所以能在全球开发圈引发如此强烈的共鸣，是因为它给所有在 AI 时代感到焦虑的开发者解开了困惑：

当 AI 能够一秒吐出成百上千行代码时，编写代码本身（Coding）的边际成本正在归零；但决定“什么才是好界面”的品味（Taste）与领域专长（Domain Expertise），其价值反而成倍上升。

提升 AI 大模型的设计品味，从来不是依靠大模型自己“悟”出来，而是依靠人类将深厚的设计经验转化为精准的 Prompt 结构、规则库与审核机制，去约束它、引导它、精炼它。

别再让你的 AI 继续制造“数字垃圾”了。从今天起，用正确的规则武装你的 Agent，在平庸的 AI 生成物大海中，创造出真正让人眼前一亮的产品吧！