网站地址：mini-cc.raingpt.top/
这篇文章记录了我为开源项目
mini-cc重新设计官方网站的全过程，探讨了大语言模型（LLM）的“廉价审美（AI Slop）”问题，以及如何通过系统级的 Skill（技能）来改变 AI 的设计思维。
起因：受够了千篇一律的 AI 模板
作为一名开发者，我最近在推进我的轻量级 AI 编程智能体框架——mini-cc。
代码写得差不多了，为了更好地向大家展示这个项目，我顺手让 AI 帮我写了一个官网。
第一版官网的功能很全：有四种编程语言版本的介绍、核心机制的说明、甚至还留了文档导航的入口。
但是，当我打开浏览器时，一股浓烈的 “AI 塑料感（AI Slop）” 扑面而来：
- 毫无生气的黑色背景配上通用的 Inter 字体。
- 几个带柔和阴影的黑色卡片，毫无新意地居中排列。
- 点缀色是经典的 Tailwind 默认蓝（
#3B82F6）。 - 按钮上加了一点毫无必要的毛玻璃（Glassmorphism）效果。
这看起来就像是千万个没感情的套壳网站之一，完全体现不出 mini-cc 作为一个 “极客、硬核、轻量级 AI 框架” 的气质。
我决定给它来一次彻底的 “整容”。
过程：引入 frontend-design 技能
我在 GitHub 上之前注意到了 Anthropics 团队提供的一个叫做 frontend-design 的 Skill。这是一个专门为了让大模型“好好做设计”而编写的提示词（Prompt）集合。
我把这个 Skill 加入到了我的项目（.trae/skills/frontend-design/SKILL.md）中，并告诉 AI 助手：“请借助这个 skill 帮我把网站建设得好看一点。”
接下来的事情让我非常惊喜：
- 风格确立：AI 助手没有再给我生成一套千篇一律的蓝色模板，而是根据
mini-cc的极客属性，选择了一种 极简粗野主义（Brutalism） 的视觉基调。 - 打破常规：它大刀阔斧地重写了
index.html。背景变成了近乎纯黑（#050505）并带有一层细密的网格纹理；点缀色换成了极具赛博感的荧光黄绿（#CCFF00）；卡片去掉了所有柔和的阴影，变成了锐利的硬边框。 - 字体反差：它放弃了 Inter，转而使用
Space Grotesk作为大标题字体，搭配JetBrains Mono作为正文等宽字体，营造出了强烈的代码感和字重对比。 - 细节打磨：我们甚至顺带解决了一些排版问题。比如后来在加入中英文无缝切换功能时，我发现因为英文排版的
line-height设置得太小（0.9），导致中文字体（方块字）挤在了一起。AI 也能迅速定位问题，单独为中文标题增加了line-height: 1.1，恢复了完美的呼吸感。此外，它还帮我纯手写了一段硬核的 SVG Logo，完美融入了网站导航栏。
原理：它是如何改变 AI 思考方式的？
在改造的过程中，我深入研究了这个 Skill 的源码，终于明白了它为什么能让大模型“脱胎换骨”。
大语言模型在训练时吸收了互联网上数以亿计的代码。当你让它“写一个网页”时，它的概率算法倾向于输出最常见、最稳妥、但也最平庸的结果——也就是我们常说的均值回归（Regression to the mean）。
这个 frontend-design Skill 的核心原理，是通过强有力的系统级提示词施加“负向约束”和“正向引导”：
- 负向约束（Anti-Slop 规则）：它在文档中明确列出了“绝对禁止使用”的元素（比如 Inter 字体、紫色渐变、居中网格、柔和阴影）。这就等于直接阻断了模型输出“最常见结果”的概率路径。
- 正向引导（提供高阶审美词汇）：它向模型提供了专业设计师才会用到的词汇组合，比如“不对称构图”、“极大的字重对比”、“微交互的物理触感”。
所以，当引入这个 Skill 后，AI 的思考方式变了：
- 以前：“用户要个网页 -> 找个常用的 Bootstrap 模板 -> 居中放标题 -> 下面放 3 个带阴影的白色卡片 -> 完工。”
- 现在：“用户要个网页 -> 我必须先定一个基调（极简粗野主义） -> 我不能用 Inter，我要用 Space Grotesk -> 我不能用蓝色，我要用 #0A0A0A 黑底配荧光黄 -> 我要打破网格，让布局不对称 -> 开始写代码。”
这本《高级设计师内部手册》，硬生生地把 AI 从及格线拉到了专业设计的起跑线上。
思考：如果大家都用这个 Skill，会审美疲劳吗？
看着最终成型的硬核官网，我脑海中冒出了一个问题：
如果后续所有人都一直使用这个 Skill，那么是不是大家的网页风格又会变得相似？慢慢又会导致新的审美疲劳？
这是一个非常深刻的问题。如果大家都不加修改地套用，这确实会变成另一种形式的“AI Slop”。
但仔细推敲后，我认为这个 Skill 在很大程度上试图延缓和打破这种同质化：
- 它是“武器库”而非“单一模板”：Skill 明确要求 AI 在每次设计前，从多种美学基调中挑选一种（粗野主义、复古未来主义、杂志风、工业风等）。这相当于提供了多样的“风格种子”，强制 AI 每次都掷骰子。我的项目成了粗野主义，你的项目可能就会被设计成黑白复古杂志风。
- 强制思考“差异化”：Skill 中有一条元指令：“是什么让这个设计令人过目不忘？”它强迫模型在生成代码前，必须构思一个破坏常规的亮点。只要 AI 的生成带有一定的随机性（Temperature），每次产生的亮点（比如我那个发光的
_光标）都会不同。 - 反对平庸，不代表只有一种优秀：它封杀的那 90% 平庸的“AI 塑料感”路径，逼迫 AI 走向剩下 10% 的未开发地带。这 10% 的地带非常广阔，包含了无数种优秀的排版、色彩和布局组合。
真正的破局之道
当然，任何好东西被滥用后都会变得无趣。真正的破局之道在于：把 Skill 当作起点，而不是终点。
这个 SKILL.md 是可以被修改的。我们完全可以在这个文件里加入自己的偏好：“我喜欢包豪斯风格，绝对不要用圆角，只用红黄蓝三原色”。
随着 Agent 框架的进化，未来的 Skill 甚至能联网抓取当下 Awwwards 的最新得奖作品，动态更新自己的审美库。
归根结底，这个 Skill 的存在，是为了把我们从最底层的“塑料感”中解救出来。
至于最终能跑出什么独特的风格，依然取决于作为创造者的我们，向它注入了多少个人的灵魂与个性。
此致，
一个个正在和 AI 结对编程的开发者
