b
bergside/awesome-design-skills
List of 67 awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools
agent-skillsagentic-aiagentic-workflowagentsaiai-agentsai-toolsawesomeawesome-listawesome-readmeclaude-designcodexcursordesigndesign-mddesign-systemgoogle-stitchskills
MIT创建于 2026/3/9更新于 今天
README
由 Gemini 翻译整理
Awesome Design Skills 
一个包含 67 个设计系统技能文件的精选合集，专为 Claude Code、Cursor、Codex 等 AI 智能体工具设计。通过单一命令即可将任何技能导入你的项目中。
每个技能均以文件夹形式发布，包含：
SKILL.md：用于 AI 智能体指令（tokens、组件规则、可访问性约束、质量门禁）DESIGN.md：供人类阅读的设计意图、原理和实现说明
快速开始
使用 TypeUI CLI 将任何设计技能直接拉取到你的项目中：
npx typeui.sh pull
例如，要拉取 Glassmorphism（磨砂玻璃）设计技能：
npx typeui.sh pull glassmorphism
或者交互式浏览所有可用技能：
npx typeui.sh list
什么是设计技能 (Design Skill)？
一个设计技能是一个包含 SKILL.md 和 DESIGN.md 的文件夹。
SKILL.md 是 AI 智能体和 LLM 的指令来源。它包含：
- 品牌与使命 — 设计理念和视觉识别
- 样式基础 — 排版比例、配色方案、间距系统
- 组件家族 — 按钮、输入框、卡片、模态框、导航等
- 可访问性规则 — 符合 WCAG 2.2 AA 标准、键盘优先交互
- 写作语调 — 内容与语气指南
- 准则/禁止规则 (Do/Don't) — 明确的模式与反模式
- 质量门禁 — 可测试的代码审查验收标准
DESIGN.md 是供人类读者和维护者参考的配套文档。它记录了：
- 设计概览 — 视觉方向的简洁总结
- 原理与参考 — 解释模式/tokens 存在的原因
- 维护说明 — 指导如何随着时间推移保持设计决策的一致性
当 AI 智能体读取技能文件时，它会遵循 SKILL.md 中的指南，生成一致、易用且忠实于设计系统的 UI 代码。
设计技能列表
浏览全部 67 个设计技能。点击任何缩略图可在 typeui.sh/design-skills 上打开实时预览，或复制下方的拉取命令将其添加到你的项目中。
| 技能名称 | 拉取命令 |
|---|---|
| Agentic | npx typeui.sh pull agentic |
| Ant | npx typeui.sh pull ant |
| Application | npx typeui.sh pull application |
| Artistic | npx typeui.sh pull artistic |
| Bento | npx typeui.sh pull bento |
| Bold | npx typeui.sh pull bold |
| Brutalism | npx typeui.sh pull brutalism |
| Cafe | npx typeui.sh pull cafe |
| Claymorphism | npx typeui.sh pull claymorphism |
| Claude | npx typeui.sh pull claude |
| Clean | npx typeui.sh pull clean |
| Codex | npx typeui.sh pull codex |
| Colorful | npx typeui.sh pull colorful |
| Contemporary | npx typeui.sh pull contemporary |
| Corporate | npx typeui.sh pull corporate |
| Cosmic | npx typeui.sh pull cosmic |
| Creative | npx typeui.sh pull creative |
| Dashboard | npx typeui.sh pull dashboard |
| Dithered | npx typeui.sh pull dithered |
| Doodle | npx typeui.sh pull doodle |
| Dramatic | npx typeui.sh pull dramatic |
| Editorial | npx typeui.sh pull editorial |
| Elegant | npx typeui.sh pull elegant |
| Energetic | npx typeui.sh pull energetic |
| Enterprise | npx typeui.sh pull enterprise |
| Expressive | npx typeui.sh pull expressive |
| Fantasy | npx typeui.sh pull fantasy |
| Fiction | npx typeui.sh pull fiction |
| Flat | npx typeui.sh pull flat |
| Friendly | npx typeui.sh pull friendly |
| Futuristic | npx typeui.sh pull futuristic |
| Glassmorphism | npx typeui.sh pull glassmorphism |
| Gradient | npx typeui.sh pull gradient |
| Immersive | npx typeui.sh pull immersive |
| Impeccable | npx typeui.sh pull impeccable |
| Levels | npx typeui.sh pull levels |
| Lingo | npx typeui.sh pull lingo |
| Luxury | npx typeui.sh pull luxury |
| Material | npx typeui.sh pull material |