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

网站地址: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 帮我把网站建设得好看一点。"

接下来的事情让我非常惊喜:

  1. 风格确立 :AI 助手没有再给我生成一套千篇一律的蓝色模板,而是根据 mini-cc 的极客属性,选择了一种 极简粗野主义(Brutalism) 的视觉基调。
  2. 打破常规 :它大刀阔斧地重写了 index.html。背景变成了近乎纯黑(#050505)并带有一层细密的网格纹理;点缀色换成了极具赛博感的荧光黄绿(#CCFF00);卡片去掉了所有柔和的阴影,变成了锐利的硬边框。
  3. 字体反差 :它放弃了 Inter,转而使用 Space Grotesk 作为大标题字体,搭配 JetBrains Mono 作为正文等宽字体,营造出了强烈的代码感和字重对比。
  4. 细节打磨 :我们甚至顺带解决了一些排版问题。比如后来在加入中英文无缝切换 功能时,我发现因为英文排版的 line-height 设置得太小(0.9),导致中文字体(方块字)挤在了一起。AI 也能迅速定位问题,单独为中文标题增加了 line-height: 1.1,恢复了完美的呼吸感。此外,它还帮我纯手写了一段硬核的 SVG Logo,完美融入了网站导航栏。

原理:它是如何改变 AI 思考方式的?

在改造的过程中,我深入研究了这个 Skill 的源码,终于明白了它为什么能让大模型"脱胎换骨"。

大语言模型在训练时吸收了互联网上数以亿计的代码。当你让它"写一个网页"时,它的概率算法倾向于输出最常见、最稳妥、但也最平庸的结果------也就是我们常说的均值回归(Regression to the mean)。

这个 frontend-design Skill 的核心原理,是通过强有力的系统级提示词施加"负向约束"和"正向引导":

  1. 负向约束(Anti-Slop 规则):它在文档中明确列出了"绝对禁止使用"的元素(比如 Inter 字体、紫色渐变、居中网格、柔和阴影)。这就等于直接阻断了模型输出"最常见结果"的概率路径。
  2. 正向引导(提供高阶审美词汇):它向模型提供了专业设计师才会用到的词汇组合,比如"不对称构图"、"极大的字重对比"、"微交互的物理触感"。

所以,当引入这个 Skill 后,AI 的思考方式变了:

  • 以前:"用户要个网页 -> 找个常用的 Bootstrap 模板 -> 居中放标题 -> 下面放 3 个带阴影的白色卡片 -> 完工。"
  • 现在 :"用户要个网页 -> 我必须先定一个基调(极简粗野主义) -> 我不能 用 Inter,我要用 Space Grotesk -> 我不能用蓝色,我要用 #0A0A0A 黑底配荧光黄 -> 我要打破网格,让布局不对称 -> 开始写代码。"

这本《高级设计师内部手册》,硬生生地把 AI 从及格线拉到了专业设计的起跑线上。

思考:如果大家都用这个 Skill,会审美疲劳吗?

看着最终成型的硬核官网,我脑海中冒出了一个问题:

如果后续所有人都一直使用这个 Skill,那么是不是大家的网页风格又会变得相似?慢慢又会导致新的审美疲劳?

这是一个非常深刻的问题。如果大家都不加修改地套用,这确实会变成另一种形式的"AI Slop"。

但仔细推敲后,我认为这个 Skill 在很大程度上试图延缓和打破这种同质化:

  1. 它是"武器库"而非"单一模板" :Skill 明确要求 AI 在每次设计前,从多种美学基调中挑选一种(粗野主义、复古未来主义、杂志风、工业风等)。这相当于提供了多样的"风格种子",强制 AI 每次都掷骰子。我的项目成了粗野主义,你的项目可能就会被设计成黑白复古杂志风。
  2. 强制思考"差异化" :Skill 中有一条元指令:"是什么让这个设计令人过目不忘?"它强迫模型在生成代码前,必须构思一个破坏常规 的亮点。只要 AI 的生成带有一定的随机性(Temperature),每次产生的亮点(比如我那个发光的 _ 光标)都会不同。
  3. 反对平庸,不代表只有一种优秀:它封杀的那 90% 平庸的"AI 塑料感"路径,逼迫 AI 走向剩下 10% 的未开发地带。这 10% 的地带非常广阔,包含了无数种优秀的排版、色彩和布局组合。

真正的破局之道

当然,任何好东西被滥用后都会变得无趣。真正的破局之道在于:把 Skill 当作起点,而不是终点。

这个 SKILL.md 是可以被修改的。我们完全可以在这个文件里加入自己的偏好:"我喜欢包豪斯风格,绝对不要用圆角,只用红黄蓝三原色"。

随着 Agent 框架的进化,未来的 Skill 甚至能联网抓取当下 Awwwards 的最新得奖作品,动态更新自己的审美库。

归根结底,这个 Skill 的存在,是为了把我们从最底层的"塑料感"中解救出来。

至于最终能跑出什么独特的风格,依然取决于作为创造者的我们,向它注入了多少个人的灵魂与个性。


此致,

一个个正在和 AI 结对编程的开发者

相关推荐
沧沧凉凉21 小时前
一段需求、零素材,Claude Code 派了 33 个代理给我做了个 3D 动作游戏
游戏·ai编程·three.js
小虎AI生活21 小时前
315 之后 AI 改规矩了,怎么让豆包和 DeepSeek 认得出你
aigc·ai编程
福兮说1 天前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理1 天前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6661 天前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)1 天前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan1 天前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_1 天前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒1 天前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技1 天前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端