brand-guidelines

brand-guidelines Skill 多维度简评

类别：品牌 / 设计规范 仓库：anthropics/skills 维护者：Anthropic 官方

一、核心定位与价值

brand-guidelines 是 Anthropic 官方 17 个 Skill 中**最简单但最”反 AI 审美”**的一个——它把 Anthropic 自己的品牌规范固化为可执行的 Skill，让 AI 生成的物料（PPT、网页、海报、文档）自动符合 Anthropic 视觉风格：

关键洞见：这是 Anthropic 内部品牌团队 + 设计团队的合作产物——把这套规范从”设计师脑子”沉淀到 SKILL.md，让所有非设计师（包括 AI）也能产出”Anthropic 味”的设计。

适用场景

• 写 Anthropic 内部材料
• 制作客户展示 PPT
• 编写品牌一致的技术文档
• 设计营销页面
• 跨部门物料保持品牌一致

不适用场景

• 你公司有自己的 VI（用你自己的 brand-guidelines Skill）
• 创意类、艺术类项目（用 canvas-design）
• 暗色 / 亮色主题切换不是核心需求

二、完整配色规范

2.1 主色调（4 色）

:root {
  /* Dark: 用于深色主题文字、强调 */
  --color-dark: #141413;
  /* Light: 用于背景、留白 */
  --color-light: #faf9f5;
  /* Mid gray: 副标题、辅助信息 */
  --color-mid-gray: #b0aea5;
  /* Light gray: 卡片背景、分割线 */
  --color-light-gray: #e8e6dc;
}

使用原则：

• 暗色文字用于亮色背景（对比度 13:1，WCAG AAA）
• 亮色文字用于暗色背景
• 浅灰用于卡片背景
• 中灰用于次要文字

2.2 强调色（3 色）

:root {
  --color-accent-orange: #d97757;  /* 行动召唤、关键按钮 */
  --color-accent-blue: #6a9bcc;    /* 链接、信息 */
  --color-accent-green: #788c5d;   /* 成功、正向 */
}

心理学含义：

• 橙：温暖、活力、紧迫
• 蓝：理性、信任、专业
• 绿：自然、增长、安全

配色禁忌：

• ❌ 同时用 3 个强调色（视觉混乱）
• ✅ 一个主色 + 一个辅助色
• ✅ 橙用于 CTA 按钮（“立即注册”）
• ✅ 蓝用于链接
• ✅ 绿用于成功提示

2.3 对比度验证

结论：所有正文颜色组合都达 WCAG AA 或 AAA。

三、字体系统

3.1 Poppins（标题）

字体特征：

• 几何无衬线字体
• 5-7 个常用字重（Light / Regular / Medium / SemiBold / Bold）
• 现代、友好、易读
• 适合 16-48pt 标题

使用场景：

• H1 / H2 / H3
• 按钮文字
• 导航栏
• 卡片标题

Google Fonts 加载：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

3.2 Lora（正文）

字体特征：

• 现代衬线字体
• 调性优雅
• 适合长文本阅读
• 4 个常用字重

使用场景：

• 段落正文
• 引用块
• 文章内容
• 文档说明

加载：

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet">

3.3 字体配对示例

h1 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2.5rem; }
h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 2rem; }
h3 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.5rem; }
body { font-family: 'Lora', serif; font-weight: 400; font-size: 1rem; line-height: 1.6; }
button { font-family: 'Poppins', sans-serif; font-weight: 500; }

3.4 中文字体回退

body {
  font-family: 'Lora', 'Source Han Serif SC', '思源宋体', serif;
  /* 中文回退到思源宋体 */
}

h1, h2, h3 {
  font-family: 'Poppins', 'Source Han Sans SC', '思源黑体', sans-serif;
  /* 中文回退到思源黑体 */
}

四、SKILL.md 工作流详解

4.1 Step 1：识别品牌

Skill 触发后自动检查：

• 当前是 Anthropic 内部材料吗？
• 还是其他客户 / 项目？
• 是否需要套用 Anthropic 品牌？

4.2 Step 2：加载颜色变量

# SKILL.md 引导 Claude 加载
COLORS = {
    "dark": "#141413",
    "light": "#faf9f5",
    "mid_gray": "#b0aea5",
    "light_gray": "#e8e6dc",
    "orange": "#d97757",
    "blue": "#6a9bcc",
    "green": "#788c5d",
}

FONTS = {
    "heading": "Poppins",
    "body": "Lora",
}

4.3 Step 3：应用规范

/* 应用到 PPT / DOCX / HTML */
.container {
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-body);
}

h1 {
  font-family: var(--font-heading);
  color: var(--color-dark);
}

.button-primary {
  background-color: var(--color-orange);
  color: var(--color-light);
  font-family: var(--font-heading);
}

4.4 Step 4：智能回退

Skill 处理边界情况：

• 没有 Poppins → fallback 到 system-ui
• 中文字符 → 自动切换到思源字体
• 打印场景 → 切到深色文本 + 白背景

五、实战场景

场景 1：制作内部 PPT

# 用 pptx Skill 配合 brand-guidelines
from pptx import Presentation
from pptx.util import Inches, Pt

prs = Presentation()

# 应用品牌色
def apply_brand(slide):
    background = slide.background
    fill = background.fill
    fill.solid()
    fill.fore_color.rgb = RGBColor(0xfa, 0xf9, 0xf5)  # light

    for shape in slide.shapes:
        if shape.has_text_frame:
            for para in shape.text_frame.paragraphs:
                for run in para.runs:
                    if run.font.size and run.font.size.pt >= 24:
                        run.font.name = "Poppins"
                    else:
                        run.font.name = "Lora"
                    run.font.color.rgb = RGBColor(0x14, 0x14, 0x13)  # dark

场景 2：技术文档品牌统一

# 文档标题（Poppins, 32pt, #141413）

## 章节标题（Poppins, 24pt, #141413）

正文段落使用 Lora 字体，14pt，颜色 #141413。
行高 1.6，最大宽度 720px。

### 子章节（Poppins, 18pt, #141413）

代码块使用等宽字体，背景 #e8e6dc。

场景 3：网页设计

<style>
  :root {
    --color-dark: #141413;
    --color-light: #faf9f5;
    --color-orange: #d97757;
    --color-blue: #6a9bcc;
  }
  body {
    background: var(--color-light);
    color: var(--color-dark);
    font-family: 'Lora', serif;
  }
  h1, h2, h3 { font-family: 'Poppins', sans-serif; }
  a { color: var(--color-blue); }
  .btn-primary {
    background: var(--color-orange);
    color: var(--color-light);
  }
</style>

六、与其他 Skill 配合

七、6 条反合理化

八、5 条实战技巧

1. CSS 变量管理颜色：不要硬编码 #141413
2. Google Fonts 预连接 (<link rel="preconnect">)：加速字体加载
3. 本地字体备份：网络受限场景要 fallback
4. A11y 测试：用 axe-core 验证对比度
5. 品牌审计：用 Skill 检查所有文档是否一致

九、Q&A

Q: 必须用 Claude 吗？ A: SKILL.md 是标准 Markdown，可被任何支持 Skill 的 Agent 加载。

Q: 跟我公司 VI 冲突怎么办？ A: 复制一份改颜色和字体即可。

Q: 中文支持？ A: Skill 指令英文，输出物料可包含中英混合内容。

Q: 暗色 / 亮色切换？ A: 通过 CSS 变量 prefers-color-scheme 媒体查询切换。

Q: 打印支持？ A: 自动用 @media print 切到深色文字 + 白底。

Q: 版权问题？ A: Poppins / Lora 都是 SIL OFL 开源字体，可商用。

Q: 移动端？ A: 完全响应式，Poppin / Lora 在移动端可读性也好。

十、Prompt 模板

使用 brand-guidelines Skill 制作以下材料：

[类型] PPT / DOCX / HTML
[主题] 新产品发布
[页数 / 字数] 10 页 / 2000 字
[目标受众] 投资人

要求：
- 主色 #141413（暗）/ #faf9f5（亮）
- 强调色用 #d97757（橙）作为 CTA
- 标题 Poppins，正文 Lora
- 暗色文字 + 亮色背景
- 中文内容用思源黑体 / 思源宋体回退

十一、真实踩坑案例

案例 1：Poppins 没加载

现象：页面显示 Times New Roman 衬线字体。 根因：Google Fonts 链接写错。 解决：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

案例 2：暗色背景深色文字

现象：background: #141413; color: #141413; 完全看不见。 根因：颜色变量用错。 解决：暗色背景配亮色文字，亮色背景配暗色文字。

案例 3：中文字体回退失败

现象：中文显示方块或默认字体。 根因：系统没装思源黑体。 解决：

font-family: 'Poppins', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

案例 4：强调色用太多

现象：一页上橙色 + 蓝色 + 绿色按钮，视觉混乱。 根因：没遵守”一主一辅”原则。 解决：橙色为主 CTA，蓝色为链接，绿色仅用于成功提示。

案例 5：字号层级混乱

现象：H1 = 16pt, H2 = 14pt, H3 = 13pt，没层次。 根因：没用模块化字号系统。 解决：

h1 { font-size: 2.5rem; }  /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */
body { font-size: 1rem; }   /* 16px */

案例 6：跨设备字体大小不一致

现象：Mac 看着正好，PC 看着太大。 根因：不同 DPI 缩放。 解决：用 rem 而非 px，或明确测试多设备。

案例 7：打印模糊

现象：彩色 PDF 打印出来颜色失真。 根因：CMYK 转换问题。 解决：

@media print {
  body { background: white; color: black; }
  /* 隐藏强调色，避免墨水浪费 */
}

十二、设计哲学（Anthropic 官方）

“我们的设计是温暖、诚实、清晰的。 不追求炫技，而是让信息本身成为主角。 颜色克制，留白充足，字体易读。”

• 克制的颜色：4 主色 + 3 强调色，避免视觉过载
• 充足的留白：边距 ≥ 32px，行高 ≥ 1.6
• 易读的字体：衬线 + 无衬线搭配，长时间阅读不累
• 对比鲜明：暗色文字在亮色背景上，AAA 对比度

十三、安装

# Claude Code
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

# 通用
npx skills add anthropics/skills --skill brand-guidelines

十四、总结

核心价值：

• Anthropic 官方品牌规范
• 4 主色 + 3 强调色 + 2 字体
• 反 AI 蓝紫渐变审美
• 高对比度、a11y 友好

适用人群：

• Anthropic 内部员工 / 合作方
• 任何想用”温暖克制”风格的项目
• 投资人 / 董事会演示
• 技术文档 / 学术报告

投入产出比：⭐⭐⭐⭐（4/5）—— 品牌场景必装。

何时不要用：

• 强品牌 VI 已定（用你自己的）
• 创意 / 艺术类项目（用 canvas-design）
• 极简纯文字文档

配套文档：theme-factory 主题 | frontend-design 前端 | canvas-design 海报

参考资料

1. anthropics/skills - brand-guidelines
2. Poppins - Google Fonts
3. Lora - Google Fonts
4. WCAG 2.1 对比度标准
5. Anthropic 品牌设计哲学