关于 awesome-design
awesome-design 为构建或改版界面的 Agent 和开发者提供按品牌整理的 `DESIGN.md` 参考。每份文件记录品牌产品设计中的设计令牌和使用指引。
主要功能
- 01按品牌整理的设计令牌参考
- 02颜色语义和字体层级
- 03组件样式与状态
- 04间距、网格、阴影和断点
- 05品牌设计注意事项
适用场景
- 01将品牌文档样式用于界面
- 02查询集合中是否有指定品牌参考
- 03查看预览文件以作视觉参考
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/awesome-design确认已加载。
详细介绍
Awesome Design：品牌参考库
精选的 DESIGN.md 文件合集——每个品牌一份，提取该产品的真实设计令牌：调色板及语义角色、字体层级、组件样式（按钮／卡片／输入框／导航及其状态）、间距／网格、阴影／层级系统、响应式断点，以及注意事项。来源：voltagent/awesome-design-md（致谢 VoltAgent——此技能仅对其进行封装以便于安装；参考内容及其许可证归该仓库所有）。
一次性设置
如果 ${CLAUDE_PLUGIN_DATA}/awesome-design-md/ 尚不存在——用户要求“设置 awesome design”，或需要品牌参考但尚未克隆该仓库——请克隆它：
mkdir -p ${CLAUDE_PLUGIN_DATA}
git clone https://github.com/voltagent/awesome-design-md ${CLAUDE_PLUGIN_DATA}/awesome-design-md
完整克隆（非浅克隆），以便之后在该目录中运行 git pull 时，能够获取上游后续新增的品牌。此操作只需运行一次——克隆内容会在插件的数据目录中跨版本更新保留。
使用品牌参考
- 在
${CLAUDE_PLUGIN_DATA}/awesome-design-md/design-md/中查找所需品牌的文件夹（名称为小写并以连字符分隔，例如design-md/stripe/DESIGN.md）。 - 如果没有完全匹配的品牌，请列出目录中最接近的选项（例如相似类别——金融科技、开发工具、SaaS），并请用户选择；或者直接说明该品牌不在此合集内，而不要猜测设计令牌。
- 阅读该品牌的
DESIGN.md，如果用户需要视觉参考，也阅读preview.html／preview-dark.html，然后在构建或重新设计所需 UI 时应用其中的设计令牌——颜色、字体比例、组件状态、间距、阴影和断点。将其视为“该品牌的 UI 实际呈现效果”的依据，而不只是情绪板。
完整品牌列表
阅读 ${CLAUDE_PLUGIN_DATA}/awesome-design-md/README.md 的 Collection 部分，或直接列出 design-md/ 目录。如果用户寻找的品牌可能是在首次克隆后新增的，请先在该目录中运行 git pull。
评论
支持 Markdown