Awesome Design Skills 设计系统合集
收集 67 个设计风格的 DESIGN.md 与 SKILL.md，帮助 Codex、Claude Code、Cursor 生成一致、可访问的界面。
技能说明
Bergside 维护的 MIT 许可设计技能合集，收录 67 个设计系统风格，每个风格配有给 Agent 使用的 SKILL.md 和给人阅读的 DESIGN.md。README 提供 TypeUI 预览和 npx typeui.sh 拉取命令，适合在写页面前确定视觉方向、统一设计规则或做可访问性检查。它是设计指导集合，不是现成组件库；使用时仍需结合项目技术栈、品牌要求和实际可访问性测试。
关于此技能
一个面向 AI 界面开发的设计系统技能合集，收集 67 个设计风格目录。每个风格包含给 Agent 读取的 SKILL.md，以及给人查看的 DESIGN.md，帮助把审美方向、设计令牌、组件规则、可访问性和质量检查落实到页面实现中。
核心能力
67 种设计方向
覆盖 Agentic、Ant、Roku、Material、shadcn、玻璃拟态、极简、复古等多种视觉方向，可按风格单独拉取。
实现规则完整
技能文件不仅描述外观，还包含颜色、排版、间距、组件状态、响应式和可访问性约束。
跨 Agent 使用
README 明确支持 Claude Code、Cursor、Codex 等 Agent，技能按目录和 SKILL.md 标准组织。
适用场景
为新页面确定视觉方向
在写页面代码前，先从目录选一个风格，统一色彩、字体、间距和组件状态。
统一产品设计语言
给已有页面补充 DESIGN.md 和 SKILL.md 约束，减少不同页面由 Agent 生成时的风格漂移。
做可访问的界面评审
用技能中的对比度、键盘操作、焦点状态、触控尺寸和减少动效规则做上线前检查。
使用步骤
- 01
浏览可用风格
先运行 npx typeui.sh list 或查看 TypeUI 预览，选择最贴近产品定位的一种风格。
- 02
拉取单个技能
按 README 使用 npx typeui.sh pull <slug>，例如 npx typeui.sh pull glassmorphism；也可以按项目需要选择 cursor 或 claude 目标。
- 03
落实并检查
让 Agent 读取 SKILL.md 和 DESIGN.md，生成页面后检查响应式、交互状态、语义结构和可访问性。
- 04
保留项目约束
把真正适用于项目的令牌和组件规则沉淀到自己的设计文档中，不要盲目复制风格示例。
常见问题
它是现成的 UI 组件库吗？+
不是。它主要提供设计风格和实现约束，具体组件代码仍由项目技术栈和 Agent 生成。
怎么安装？+
README 推荐使用 npx typeui.sh pull <slug>，例如 npx typeui.sh pull agentic；先用 npx typeui.sh list 查看可用名称。
支持哪些 Agent？+
README 明确列出 Claude Code、Cursor、Codex 和其他支持 SKILL.md 或 DESIGN.md 的工具。
使用时有什么限制？+
仓库整体采用 MIT 许可，但仍应检查实际拉取的文件和第三方字体、图片或示例资源是否适合你的项目。
npx typeui.sh pull <slug>