awesome-design-skills：67 套现成设计系统，供 agent 工具随取随用

agent 做界面没问题，难的是有人说"做得像被设计过"的那一刻。bergside/awesome-design-skills 是一份面向 Claude Code、Cursor、Codex 等 agent 工具的策展注册库：67 份设计系统 skill 文件——Agentic、Bento、Brutalism、Claymorphism、Clean、Cosmic、Enterprise 这样的命名系统——每套一条命令即可拉取。

为什么这个 Skill 重要

每个条目都是一个文件夹，装着面向两种读者的两个文件：SKILL.md 是给 agent 的指令——设计 token、组件规则、无障碍约束、质量门禁；DESIGN.md 是给人看的设计意图、理由和实现说明。注意交付上的分工：pull 命令只把 SKILL.md 写进你 agent 的配置路径；DESIGN.md 留在注册库里，与对应条目放在一起供团队查阅。

它和 design-md-chrome 同属 TypeUI 生态，但方向互补：Chrome 扩展从在线站点里提取设计系统，这份注册库则在你无物可提取时递上现成系统——绿地页面、原型、或者想先试试再定夺的风格。全部 67 套都可先在 typeui.sh/design-skills 预览再决定拉不拉。

安装

pull 命令会把一套系统的 SKILL.md 直接写进你 agent 的配置路径：

npx typeui.sh pull bento

先逛视觉目录——每个条目在 typeui.sh/design-skills 都有渲染好的预览，你可以像挑主题一样挑系统，而不是看名字盲选。

实战：从第一分钟就带着系统做绿地页面

1. 按产品气质选一套——B2B 看板用 Clean，发布页用 Brutalism，想温和一点用 Cafe——拉下来。
2. 让 agent 指向拉取的 SKILL.md 正常开发；它会约束 token、组件规则和无障碍，产出不会漂出系统之外。
3. 人工评审时去注册库打开配套的 DESIGN.md——它用人话记录意图与理由，评审的火力会落在设计上而不是 diff 上。
4. 方向错了就换一套重生成：注册库的价格体系下，扔掉一套比争论品味便宜得多。

技巧

• 这份注册库与 design-md-chrome 天然成对：公司有真实系统就从线上提取，还没有系统的地方就从这里拉现成的。
• 每个 skill 文件夹都小到可以读完——动手前先扫一眼 SKILL.md 里的质量门禁，看这套系统会强制什么。
• TypeUI 预览站是最快的入围方式；拉三套候选、重生成一个页面，几分钟的事。

何时不用这个 Skill

这些是标准品：独特性维持到你竞品拉下同一套为止。已有设计语言的产品应该提取并执行自己的系统——注册库服务的是还没有系统的那些空间。而且注册库文件带不走你的品牌插画和语言；那些仍然得你自己出。

查看 排行榜 了解更多 skill。