告别 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 结对编程的开发者

相关推荐
甲维斯1 小时前
《坦克大战2026》游戏升级!加入无敌道具!
ai编程·游戏开发
kyriewen2 小时前
别再 console.log 了:5 个 Chrome DevTools 调试技巧,用过就回不去了
前端·javascript·面试
Hyyy3 小时前
Temperature 与 Top-p:控制模型输出的两个参数
llm·ai编程
IT_陈寒4 小时前
Python搞不定字符串编码?这破玩意坑我两小时!
前端·人工智能·后端
小白跃升坊5 小时前
Codex 增强部署:基于 Codex++ 接入 DeepSeek
ai·ai编程·codex·deepseek·ai coding·codex++
DigitalOcean5 小时前
Laravel 开发者已在 DigitalOcean 上开通超过 10 万台服务器
前端·laravel
星始流年6 小时前
从 Tool 到 Skill——基于 LangChain 的服务端Skill实现
前端·langchain·agent
程序员老赵6 小时前
10 分钟部署 OpenCode:Docker 一键安装,浏览器打开就能用 AI 写代码(附完整命令与排错)
docker·容器·ai编程
李惟6 小时前
开源本地通信库,纯客户端 RPC,像聊天一样通信
前端
YAwu116 小时前
深入解析 React 炫彩鼠标跟随标题组件:从坐标定位到动画性能
前端·react.js