Awesome Design Skills：别再让 AI 前端只会一种默认脸

我最近用 AI 写前端时，最烦的不是它不会写代码。

是它太会写“AI 味界面”。

卡片、圆角、渐变背景、一个居中的大标题，再来几块看起来很现代的模块。第一次还行，第三次就开始眼熟。你想让它做毛玻璃，要解释一遍；想要极简风，又得重新描述；想做一点像素复古，还要补一堆参考词。

提示词越写越长，最后像在给一个没见过设计稿的人讲审美。

Awesome Design Skills 这个项目，处理的就是这件小事。

它不是再教你怎么写提示词，而是直接整理了 67 套现成的设计系统技能文件。你可以把它理解成一批给 AI 用的“风格包”。

我点进去看了下，它的分类还挺杂。

有毛玻璃、新拟态、像素复古，也有企业级后台、编辑排版这类更常见的产品风格。不是只给几个颜色变量，而是把布局、组件、视觉倾向、交互细节都写成 AI 能读懂的规范。

这里有个设计挺顺手。

每套技能都分成两份文件。

一份是给 AI 编程工具看的指令规范，告诉它这个风格应该怎么落到界面里。另一份是给人看的设计说明，方便你先判断这套风格是不是你想要的，而不是盲选一个名字丢给模型。

这样用起来会少很多废话。

以前你要写：

“请使用毛玻璃风格，背景模糊，层次透明，卡片边缘柔和，整体高级但不要太花……”

现在可以直接把对应技能拉进项目，让 AI 按这套规范生成页面。它不一定一下子就完美，但至少不用每次从零给它补审美上下文。

项目也给了一条命令，可以把这些技能文件一次性拉到当前项目里。

这点对经常用 Claude Code、Codex 写前端的人很实用。你不用复制一堆 prompt，也不用在不同项目间手动搬规则。技能文件进来之后，AI 编程工具就能按对应风格工作。

它还做了交互命令。

可以浏览、预览已有风格，也可以自己生成一套自定义风格。比如你有一套固定的产品审美，按钮怎么做、间距怎么留、卡片要不要阴影、正文排版偏紧还是偏松，都可以慢慢沉淀成自己的技能文件。

我更喜欢它的地方，是它没有把“设计”包装成一个神秘能力。

很多 AI 前端生成出来不好看，并不是模型完全不懂 UI，而是你每次给它的上下文太散。今天一句极简，明天一句高级，后天又说参考某某产品。模型只能现场猜。

Awesome Design Skills 做的事情很笨，但有效：把风格先写成稳定文件，让 AI 每次照着同一套规则走。

对于个人项目、落地页、后台原型、小工具界面，这已经能省下不少来回改稿的时间。

当然，它解决不了产品判断，也不能替你决定页面信息该怎么排。但至少下次你让 AI 写前端时，不用再看着同一张“默认科技风”发愣。

GitHub地址：bergside/awesome-design-skills