告别 AI 塑料感：我是如何用 frontend-design skill 重塑项目官网的

网站地址https://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-designSkill 的核心原理是通过强有力的系统级提示词施加“负向约束”和“正向引导”负向约束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 结对编程的开发者