现在用 Codex、Claude Code、Cursor 这类 AI Coding Agent 做前端，真正让人头疼的问题已经不一定是：

“它能不能把页面写出来？”

大多数情况下，它确实能写。

真正的问题反而是：

每次写出来的页面风格都不太稳定。

你跟 AI 说：

帮我做一个高级、简洁、有设计感的 SaaS 官网。

第一次可能给你一个黑白极简页面。

第二次开始疯狂使用渐变。

第三次又变成满屏圆角卡片。

按钮尺寸、字号、间距、阴影和颜色，每一页都可能重新决定一次。

原因很简单。

“高级”“简约”“现代”“科技感”这些词，对 AI 来说依然非常模糊。

而最近这个开源项目：

Awesome Design Skills

提供了另外一种思路。

与其每次花几百字告诉 Agent：

“我想要什么样的设计。”

不如直接给它一整套已经结构化好的：

Design Skill。

目前 Awesome Design Skills 已经整理 67 套设计系统 Skill，面向 Claude Code、Cursor、Codex 等 AI Agent 工具使用，而且每一套风格都包含 SKILL.md 和 DESIGN.md 两个文件。

对于正在使用 Vibe Coding、AI Coding、AI 前端生成、Codex、Claude Code 或 Cursor 做网站和产品界面的人来说，这个项目非常值得收藏。

一、Awesome Design Skills 是什么？

Awesome Design Skills 是 Bergside 维护的一个开源 Design Skill Registry。

项目的定位非常明确：

把不同 UI / UX 设计风格整理成 AI Agent 能直接理解的结构化设计规则。

目前仓库收录了 67 套 Design Skill，其中包括：

Minimal；

Bento；

Glassmorphism；

Brutalism；

Editorial；

Material；

Retro；

Shadcn；

Neobrutalism；

Neumorphism；

Claymorphism；

Riso；

Vintage；

Futuristic；

Corporate；

Professional；

Modern；

Flat；

Geometric；

Artistic；

Premium；

Storytelling；

以及其他大量视觉方向。

它并不是简单整理：

“67 个 UI 风格名称。”

真正重要的地方，是每一种风格都被进一步写成了一套 Agent 可以执行的规则。

二、它和普通 Prompt 最大的区别是什么？

以前让 AI 做 UI，最常见的方法就是写 Prompt。

例如：

帮我设计一个现代、简洁、高级的后台管理系统，使用黑白灰配色，大圆角，简洁卡片，注意留白。

这种方式当然可以用。

问题是：

大量描述依然存在解释空间。

到底多大的圆角算“大”？

标题应该多大？

Card 间距是多少？

按钮 Hover 怎么处理？

Focus State 怎么处理？

错误状态是什么颜色？

移动端怎么响应？

输入框高度是多少？

弹窗怎么设计？

无障碍要求是什么？

如果这些东西没有提前定义，Agent 就只能自己判断。

每生成一个新组件，都可能重新做一次设计决策。

于是很容易出现：

第一页挺好看；

第二页开始风格变化；

第三页组件已经不是一个设计系统。

Design Skill 的思路则完全不同。

它不是只告诉 AI：

“做得像什么。”

而是继续告诉它：

“具体应该怎么做。”

三、每套 Design Skill 都有 SKILL.md + DESIGN.md

Awesome Design Skills 当前的每一个设计风格目录，都包含两个核心文件：

SKILL.md
DESIGN.md

官方 README 对两个文件的职责也进行了明确区分。

SKILL.md：主要给 AI Agent 看

SKILL.md 是整个项目最重要的部分。

它是直接提供给 AI Agent 或 LLM 的设计说明。

里面不是简单写：

Minimal 风格应该比较简洁。

而是进一步把设计拆成可以执行的规则。

按照项目当前的结构，一套 SKILL.md 可以包括：

• Brand & Mission；
• Design Philosophy；
• Typography；
• Color Palette；
• Spacing System；
• Component Families；
• Accessibility；
• Writing Tone；
• Do / Don't Rules；
• Quality Gates。

也就是说：

字体、颜色、间距、组件、交互、无障碍，甚至页面里的文案语气，都可以统一约束。

这已经很接近把一套 Design System 写成 Agent Instructions。

四、DESIGN.md 又是干什么的？

如果说：

SKILL.md 主要是写给 AI Agent 的，

那么：

DESIGN.md 更偏向给人阅读。

按照项目说明，DESIGN.md 主要记录：

• Design Overview；
• 设计方向与视觉意图；
• 为什么使用这些 Pattern；
• Token 设计依据；
• References；
• Implementation Notes；
• Maintenance Notes。

所以一套 Design Skill 实际形成了两层：

DESIGN.md
↓
给设计师 / 开发者理解设计意图

SKILL.md
↓
给 AI Agent 执行具体设计规则

这点很有意思。

因为以前 Design System 更多是在解决：

“团队成员怎么保持统一。”

现在又增加了一个新的使用者：

AI Agent。

五、为什么这种方式特别适合 Vibe Coding？

现在 Vibe Coding 最大的爽点就是：

想法 → Prompt → 页面

速度非常快。

例如告诉 Codex：

做一个 AI 图片生成工具首页。

Agent 很快就能：

创建项目；

写 React；

搭布局；

加组件；

补响应式；

甚至自己运行和修改。

但速度越快，一个问题反而越明显：

设计决策也被一起交给 AI 了。

如果没有规则，Agent 每次都需要自己决定：

这个按钮是什么样；

这个 Card 多圆；

这个页面留多少白；

标题多大；

应该用渐变还是纯色；

边框是浅灰还是没有；

Shadow 强度多大。

结果就容易变成：

功能能用，但 UI 很 AI。

常见的 AI Coding 页面大家应该已经看得非常熟悉：

大圆角；

紫蓝渐变；

发光背景；

三列功能卡片；

巨大 Hero；

各种 Pill；

满屏 Emoji 或 Lucide Icon。

单独看可能没什么问题。

但做多了以后，非常容易撞脸。

Awesome Design Skills 的思路，就是在 Agent 写第一行 UI 代码之前：

先给它一套视觉规则。

六、举个例子：Minimal 不只是“做简单一点”

例如项目中的：

Minimal Design Skill。

安装以后，它并不是只告诉 Agent：

Keep it minimal.

而是定义了非常具体的规则。

目前 Minimal Skill 使用 Open Sans 作为主要正文字体、Inter 作为 Display 与 Heading 字体，代码场景使用 Inconsolata；Spacing 则统一采用：

4 / 8 / 12 / 16 / 24 / 32px

这样的比例系统。

颜色也不是：

“尽量黑白灰。”

而是提供具体的 Semantic Token。

同时还定义了：

Buttons；

Inputs；

Cards；

Tables；

Navigation；

Modal；

Drawer；

Toast；

Tabs；

Command Palette；

Onboarding；

Pricing；

Search 等大量组件类型。

交互组件还需要考虑：

Default；

Hover；

Focus-visible；

Active；

Disabled；

Loading；

Error。

并且 Minimal Skill 明确把 WCAG 2.2 AA 作为无障碍目标，要求键盘交互和清晰的 Focus State。

这就是：

“极简风 Prompt”

和

“极简 Design Skill”

之间的区别。

七、Glassmorphism 也不是简单加一个 backdrop-blur

再来看大家很熟悉的：

Glassmorphism。

以前写 Prompt 可能是：

使用玻璃拟态效果，卡片半透明，加一点 Blur。

然后 Agent 就可能疯狂使用：

backdrop-filter: blur(20px);

每张卡都透明。

最后整个页面糊成一片。

而 Glassmorphism Design Skill 会进一步告诉 Agent：

什么情况下应该使用 Glass；

不同层级 Blur 强度是多少；

Surface 透明度应该控制在哪里；

Border 应该怎样处理；

不同 Glass Layer 如何建立 Z 轴关系；

什么背景适合 Glass；

什么情况下应该退回普通 Surface。

例如当前规则中将不同玻璃层的 Backdrop Blur 细分到大约：

8–12px
16–20px
24–32px

并对半透明 Surface、边框以及内容可读性提出具体限制。

更重要的是：

玻璃拟态很容易出现文字 Contrast 不足。

所以这个 Skill 同样加入了：

WCAG 2.2 AA；

最低透明度；

Fallback Solid Background；

Focus State；

Reduced Motion

等无障碍约束。

它不只是告诉 AI：

“把页面做成玻璃风。”

而是在告诉 AI：

“玻璃风应该怎么正确实现。”

八、还有专门的 Shadcn 风格

如果经常使用 AI Coding，应该对现在很流行的：

shadcn/ui 风格

非常熟悉。

Awesome Design Skills 里同样提供了一套：

Shadcn

Design Skill。

它强调比较克制的：

黑白配色；

简洁 Surface；

精确 Typography；

减少多余装饰；

通过字号、字重、透明度、Border 和间距建立视觉层级。

当前 Shadcn Design Skill 使用 Geist 作为主要字体，并将默认颜色控制得非常克制，让视觉层级更多依赖 Typography 和 Spacing，而不是大量彩色元素。

如果你经常让 Agent 做：

SaaS；

Dashboard；

开发者工具；

AI 工具；

后台；

效率产品。

这套方向会比较容易直接用起来。

九、67 套风格，基本可以覆盖大量常见网页方向

目前 Awesome Design Skills 中的 67 个 Skill 并不只是大家最熟悉的几个 Web Design Trend。

它覆盖的方向其实非常广。

例如：

极简与现代

Minimal
Clean
Modern
Refined
Sleek
Spacious
Professional

适合：

SaaS、企业官网、工具类产品、后台。

卡片与组件型设计

Bento
Shadcn
Material
Ant

适合：

Dashboard、产品首页、Web App、管理系统。

强视觉设计

Bold
Dramatic
Expressive
Artistic
Creative
Colorful
Vibrant

适合：

品牌官网、创意网站、作品集、Landing Page。

特殊视觉风格

Glassmorphism
Neumorphism
Claymorphism
Brutalism
Neobrutalism
Dithered
Riso
Paper

适合：

需要建立明显视觉识别度的产品。

复古方向

Retro
Vintage
Sega
Pacman
Tetris
Matrix

适合：

游戏、活动页、实验网站、主题产品。

内容与编辑设计

Editorial
Storytelling

适合：

媒体网站；

博客；

杂志；

品牌故事；

内容型官网。

这些风格名称与对应 Skill 都可以直接在当前仓库中找到。

十、安装也非常简单：一条命令 Pull Design Skill

Awesome Design Skills 已经和 TypeUI CLI 打通。

现在不一定需要自己：

打开 GitHub；

找目录；

下载 SKILL.md；

复制到项目。

可以直接使用：

npx typeui.sh pull <slug>

例如想使用 Glassmorphism：

npx typeui.sh pull glassmorphism

想使用 Minimal：

npx typeui.sh pull minimal

想使用 Shadcn：

npx typeui.sh pull shadcn

仓库当前也提供：

npx typeui.sh list

用于浏览可用 Skill。

十一、还可以指定给 Cursor 或 Claude 使用

TypeUI CLI 还允许指定 Provider。

例如：

npx typeui.sh pull glassmorphism -p cursor,claude

CLI 会根据配置把 SKILL.md 写入相应 Agent 的项目路径，例如 .cursor/skills/、.claude/ 等位置。

另外还可以使用：

npx typeui.sh pull glassmorphism --dry-run

先查看将要写入哪些内容，而不直接修改项目。

对于已经在使用：

Codex；

Claude Code；

Cursor；

Windsurf；

GitHub Copilot；

ChatGPT

等 AI 工具的人来说，本质上只要工具允许：

Context File；

Knowledge；

Project Instructions；

Rules；

Markdown Context

这类机制，就可以参考这些 Design Skill。TypeUI 也明确将这些 Skill 定义为标准 Markdown 文件，可作为不同 AI Coding 工具的上下文使用。

十二、Vibe Coding 可以怎么使用？先挂 Skill，再说需求

以前的工作流可能是：

Prompt
↓
Agent
↓
React
↓
发现 UI 不好看
↓
继续 Prompt
↓
“再高级一点”
↓
“圆角小一点”
↓
“不要这么多渐变”
↓
“按钮统一一下”

现在可以换一种方式：

选择 Design Skill
↓
把 SKILL.md 加入项目
↓
Agent 读取设计规则
↓
再描述具体页面需求
↓
生成 UI

例如：

先安装：

npx typeui.sh pull minimal

然后再告诉 Agent：

使用当前项目里的 Minimal Design Skill，为我创建一个 AI 图片生成 SaaS 首页。包含导航、Hero、模型选择、案例展示、价格方案和 FAQ。严格遵循 Skill 中的 Typography、Color Token、Spacing、Component State 和 Accessibility 规则，不要自行创建新的视觉体系。

这样 Prompt 本身反而可以变短。

因为：

设计规则已经提前写在 Skill 里面。

十三、做 Dashboard，可以试试 Bento + Agent

例如你正在 Vibe Coding 一个：

AI 数据分析 Dashboard。

过去可能写：

做成 Bento Grid 风格，现代一点，卡片有层次感，布局丰富……

现在可以直接先：

npx typeui.sh pull bento

然后告诉 Agent：

根据 Bento Design Skill 创建一个 AI 数据分析 Dashboard。包含 KPI、趋势图、最近项目、AI Insights、任务状态和侧边导航。所有视觉规则遵循当前 Skill。

核心区别在于：

Prompt 负责定义：

“做什么。”

Skill 负责定义：

“长什么样，以及怎么实现。”

这两件事拆开以后，Agent 执行通常会更加清晰。

十四、做品牌官网，可以先选 Editorial 或 Storytelling

如果是：

设计工作室；

个人作品集；

媒体网站；

品牌官网；

内容型 Landing Page。

不一定非要用现在最常见的 SaaS UI 风格。

可以尝试：

npx typeui.sh pull editorial

或者：

npx typeui.sh pull storytelling

这样 Agent 一开始拿到的视觉方向就不同。

再配合自己的：

品牌内容；

Logo；

图片；

文案；

产品信息。

最终生成的页面，更容易形成明确的整体设计方向，而不是又回到默认 AI SaaS 模板。

十五、最有价值的不是 67 套模板，而是“设计约束”

如果把 Awesome Design Skills 理解成：

“67 个网页模板。”

其实低估了它。

它真正值得关注的是：

把设计约束结构化。

一个设计系统真正稳定，依靠的从来不是：

每次设计师临场发挥。

而是已经提前约定：

Color；

Typography；

Spacing；

Radius；

Components；

States；

Accessibility；

Writing Tone；

Do / Don't。

Awesome Design Skills 只是进一步把这些规则写成：

AI Agent 能直接读取的 Markdown。

这恰好解决 Vibe Coding 很常见的一个问题：

Agent 写代码很快。

但没有 Design Constraints。

于是页面越做越多以后，视觉一致性反而越来越差。

十六、Do / Don't 对 AI Agent 特别重要

传统 Prompt 经常只告诉 AI：

应该做什么。

实际上，对于生成 UI 来说：

不要做什么

有时候更重要。

Awesome Design Skills 的 SKILL.md 中明确包含 Do / Don't 和 Anti-pattern 规则。

比如一个 Minimal 系统可以规定：

不要使用低对比度文字；

不要破坏统一 Spacing Rhythm；

不要出现模糊的交互 Label。

Glassmorphism 则会限制：

不要因为透明效果牺牲可读性；

不要把多个冲突的视觉风格随意混在一起；

透明 Surface 无法保证 Contrast 时要使用 Fallback。

这类规则对 Agent 很有效。

因为 AI 最容易出现的问题之一就是：

什么都会一点，于是什么都想往页面里塞。

有了明确的禁止项，反而更容易保持风格纯度。

十七、Quality Gates：生成完还可以自己检查

每套 Skill 还可以包含：

Quality Gates。

它不是单纯告诉 Agent如何设计。

还提供可以用于验收的标准。

于是整个工作流可以继续变成：

读取 Design Skill
↓
生成页面
↓
根据 Skill 自检
↓
发现违反设计规则
↓
自动修改
↓
再次检查

例如可以直接告诉 Agent：

页面完成后，根据 SKILL.md 中的 Quality Gates、Accessibility 和 Do / Don't 对整个界面进行一次 Design Review。列出所有违反设计系统的地方，并直接修复。

这就比一句：

帮我看看页面好不好看。

具体得多。

十八、你甚至可以生成自己的 Design Skill

Awesome Design Skills 并不是只能使用官方整理好的 67 套设计风格。

TypeUI CLI 当前还提供：

npx typeui.sh generate

通过交互方式生成自己的 Design System Skill。

这意味着真正长期的使用方式可能不是：

永远从 67 套风格里选一个。

而是：

先选择一个接近自己的 Base Skill；

然后逐渐修改：

字体；

颜色；

间距；

按钮；

Card；

Input；

Navigation；

文案语气；

设计规范。

最后变成：

你自己的品牌 Design Skill。

十九、团队自己的设计系统，也可以开始考虑 Skill 化

这个方向对团队其实更加有价值。

假设一家公司已经有：

Figma Design System；

React Component Library；

Design Token；

Brand Guidelines；

Content Guidelines。

过去这些东西分别存在：

Figma；

Storybook；

Notion；

代码库；

品牌手册。

但 Agent 并不一定知道。

以后完全可以进一步整理成：

company-design-skill/
├── SKILL.md
└── DESIGN.md

然后明确规定：

品牌颜色；

字号；

Spacing；

Grid；

组件使用方式；

禁止出现的 Style；

响应式规则；

Accessibility；

文案 Tone；

Quality Gate。

这样无论使用：

Codex；

Claude Code；

Cursor；

还是其他 Agent，

进入项目以后都先读取：

同一套设计规则。

这其实比反复写：

“请按照我们公司的设计风格。”

要明确得多。

二十、Design Skill + Figma MCP + Code Connect 会更有意思

如果再把它和现在逐渐成熟的：

Figma MCP

以及：

Code Connect

结合起来，整个工作流会更加完整。

Design Skill 解决：

页面应该遵循什么视觉规则。

Figma MCP 解决：

Agent 如何获得真实设计上下文。

Code Connect 解决：

Figma 组件对应真实代码库中的哪个生产组件。

Coding Agent 则负责：

真正实现页面。

整个链路可以逐渐形成：

Design Skill
↓
定义整体设计规则

Figma MCP
↓
提供具体页面设计上下文

Code Connect
↓
关联真实生产组件

Codex / Claude Code / Cursor
↓
生成和修改代码

这种方式比单纯：

“截图 → Prompt → 生成代码”

多了很多结构化上下文。

对于有成熟 Design System 的团队尤其值得研究。

二十一、Awesome Design Skills 适合哪些人？

这个项目并不只是给设计师使用。

它反而特别适合下面几类人。

Vibe Coding 用户

如果你经常用自然语言快速生成网站，这套 Skill 可以帮助控制 UI 风格。

独立开发者

不一定有专职 UI 设计师，也可以先通过 Design Skill 给 Agent 一个相对完整的设计体系。

前端开发者

减少每个新页面重新决定 Typography、Spacing、Color 和 Component Style 的时间。

AI 产品团队

可以为自己的产品建立固定 Design Skill，让不同 Agent 输出保持一致。

UI / UX 设计师

可以尝试把自己的 Design System 转换成 Agent 可以直接读取的结构化规则。

Codex / Claude Code / Cursor 用户

这些 Agent 本身编码能力已经很强，加入 Design Skill 后，可以补充更明确的 UI 设计上下文。

二十二、它会取代设计师吗？

不会。

Design Skill 更适合解决的是：

一致性和约束。

它可以告诉 Agent：

按钮应该多高；

标题应该多大；

这个颜色能不能用；

组件状态应该有哪些；

Spacing 应该怎么处理。

但产品设计仍然需要大量：

信息架构；

用户研究；

业务判断；

交互设计；

品牌判断；

视觉创意。

尤其是：

为什么这个页面应该这样设计？

仍然不是一套通用 Skill 可以完全决定的。

更合理的使用方式，是：

设计师负责制定规则；

Agent 负责大量执行。

这样才真正发挥 Skill 的价值。

结语

Awesome Design Skills 这个项目最有意思的地方，并不是简单整理了：

67 种 UI 风格。

而是把过去写给设计师和开发者看的 Design System，开始整理成：

AI Agent 可以直接读取和执行的设计规则。

目前仓库中的每套 Design Skill 都由：

SKILL.md

和

DESIGN.md

组成，并把 Typography、Color、Spacing、Components、Accessibility、Writing Tone、Do / Don't 和 Quality Gates 等内容进一步结构化。

对于 Vibe Coding 来说，这种工作方式非常实用。

以后做页面，不一定要从：

“帮我做得高级一点。”

开始。

而可以先：

npx typeui.sh pull minimal

或者：

npx typeui.sh pull shadcn

再告诉 Agent：

按照当前 Design Skill 创建页面。

Prompt 负责告诉 Agent 做什么，Design Skill 负责告诉 Agent 应该怎么设计。

当项目从一个页面增加到十个、几十个页面以后，这种结构化设计上下文的价值会越来越明显。

尤其是现在 Codex、Claude Code、Cursor 等 Coding Agent 已经可以连续创建和修改大量前端代码，如何让它们：

写得快的同时，也写得统一。

可能会成为 Vibe Coding 下一步非常值得关注的问题。

GitHub：

https://github.com/bergside/awesome-design-skills