mcpField
B
brand-guidelines

brand-guidelines

github.com/moizibnyousaf设计与 UI1.2k121 次安装6 周前更新
代码仓库

关于 brand-guidelines

brand-guidelines 是一项用于将统一品牌样式应用于文档、演示文稿、网页和营销材料的技能。它提供颜色、字体与间距规范及具体组件示例，适合需要保持视觉一致性的内容创作者。

主要功能

  1. 01定义品牌色彩与 CSS 变量
  2. 02设置字体与间距规范
  3. 03提供按钮、卡片和标题样式
  4. 04给出文档与演示模板建议
  5. 05强调对比度与视觉层级

适用场景

  1. 01统一网页和营销材料的视觉样式
  2. 02按品牌规范制作文档模板
  3. 03为演示文稿设定标题与内容页样式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill brand-guidelines

安装后在 Claude Code 中输入/brand-guidelines确认已加载。

详细介绍

品牌指南应用

目的

为任何成品应用统一的品牌样式：文档、演示文稿、网页或营销材料。

核心品牌元素

颜色

使用 CSS 变量定义品牌配色：

:root {
  --brand-primary: #1a73e8;
  --brand-secondary: #34a853;
  --brand-accent: #ea4335;
  --brand-dark: #202124;
  --brand-light: #f8f9fa;
  --brand-text: #3c4043;
  --brand-text-muted: #5f6368;
}
字体排印
/* Primary font for headings */
--font-display: 'Product Sans', 'Google Sans', system-ui;

/* Body font */
--font-body: 'Roboto', 'Inter', -apple-system, sans-serif;

/* Monospace for code */
--font-mono: 'Roboto Mono', 'Fira Code', monospace;

/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
间距
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

应用示例

按钮
.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
}
卡片
.card {
  background: white;
  border: 1px solid var(--brand-light);
  border-radius: 8px;
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
标题
h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--brand-dark);
  font-weight: 500;
}

文档模板

Google Docs
  • 标题 1：展示字体，24pt，品牌深色
  • 标题 2：展示字体，18pt，品牌主色
  • 正文：正文字体，11pt，品牌文本色
  • 链接：品牌主色，带下划线
演示文稿
  • 标题幻灯片：品牌主色背景上的白色文字
  • 内容幻灯片：白色背景上的品牌深色文字
  • 强调元素：品牌次要色或强调色

最佳实践

  1. 一致性：使用准确的品牌颜色，切勿近似替代
  2. 对比度：确保文本可读性的最低对比度为 4.5:1
  3. 层级：通过字号和字重来体现重要性
  4. 留白：充足的间距能营造高端感
  5. 徽标使用：在徽标周围保留足够的留白

评论

支持 Markdown