Awesome Design Skills：用 AI 写前端，终于不用反复念“毛玻璃咒语”了

用 AI 写前端界面，最烦的不是它写不出来。

是它每次都写得差不多。

按钮圆角、卡片阴影、渐变背景、居中大标题，一眼看过去就知道：嗯，又是 AI 默认审美。

想要毛玻璃效果，要在提示词里补一大段。

想要极简风，又得重新描述留白、字体、层级、颜色克制。

写两次还行，写多了真有点累。

我刷到 Awesome Design Skills 这个项目时，第一反应就是：这不就是给 AI 编程工具准备的“设计风格包”吗？

它把常见前端视觉风格拆成了一套套技能文件。

目前一共提供了 67 套现成设计系统技能。

覆盖得挺杂，也挺实用。

毛玻璃、新拟态、像素复古、企业级后台、编辑排版风格，都有。

这类东西听起来不复杂，但实际很省事。

因为 AI 写界面时，最大的问题往往不是不会写 CSS，而是不知道该稳定遵守哪套审美规则。

你今天说“高级一点”，它可能给你渐变。

你明天说“极简一点”，它可能只是把颜色变淡。

Awesome Design Skills 的做法，是把风格提前规范好。

每套技能里有两份文件。

一份是给 AI 读的指令规范。

另一份是给人看的设计说明。

前者负责约束生成结果，后者方便你快速判断这套风格到底适不适合当前项目。

用法也不重。

一条命令就能把这些技能文件拉到项目里，然后直接让 AI 按指定规范生成界面。

不用每次在 prompt 里从“请使用毛玻璃效果”开始讲起。

对经常用 Claude Code、Codex 这类 AI 编程工具写前端的人来说，这个点挺舒服。

尤其是做 demo、官网落地页、后台原型、小工具页面时，视觉风格经常不是最核心的活，但它又很影响第一眼观感。

AI 默认生成一版，你再慢慢改，时间就耗进去了。

这个项目等于把“风格控制”单独抽出来。

你可以交互式浏览、预览不同风格，也可以自己生成一套自定义风格。

这比每次复制一大段提示词要干净很多。

当然，它不是让 AI 直接变设计师。

复杂产品的信息架构、品牌气质、交互细节，还是要人盯。

但如果你的痛点是“别再给我生成同一种 AI 味页面”，那 Awesome Design Skills 确实能省不少提示词口水。