Brand Guidelines Skill 详解
应用 Anthropic 官方品牌规范
基本信息
| 属性 | 值 |
|---|---|
| 名称 | brand-guidelines |
| 类别 | 工作流程 |
| 输出格式 | 样式化文档/演示文稿 |
| 许可证 | Apache 2.0 |
yaml
name: brand-guidelines
description: Applies Anthropic's official brand colors and typography to
any sort of artifact that may benefit from having Anthropic's look-and-feel.
Use it when brand colors or style guidelines, visual formatting, or
company design standards apply.1. 核心概念
1.1 什么是 Brand Guidelines
通俗比喻：这个 Skill 就像 Anthropic 的"官方视觉身份手册"——确保所有设计作品都符合 Anthropic 的品牌标准。
1.2 适用场景
markdown
**触发关键词**：
- 品牌化 (branding)
- 企业身份 (corporate identity)
- 视觉身份 (visual identity)
- 后处理 (post-processing)
- 样式化 (styling)
- 品牌颜色 (brand colors)
- 排版 (typography)
- Anthropic 品牌
- 视觉格式化 (visual formatting)
- 视觉设计 (visual design)2. 品牌颜色
2.1 主色调
| 名称 | Hex 值 | 用途 |
|---|---|---|
| Dark | #141413 | 主要文本和深色背景 |
| Light | #faf9f5 | 浅色背景和深色上的文本 |
| Mid Gray | #b0aea5 | 次要元素 |
| Light Gray | #e8e6dc | 微妙的背景 |
2.2 强调色
| 名称 | Hex 值 | 用途 |
|---|---|---|
| Orange | #d97757 | 主要强调色 |
| Blue | #6a9bcc | 次要强调色 |
| Green | #788c5d | 第三强调色 |
2.3 CSS 变量
css
:root {
/* 主色调 */
--anthropic-dark: #141413;
--anthropic-light: #faf9f5;
--anthropic-mid-gray: #b0aea5;
--anthropic-light-gray: #e8e6dc;
/* 强调色 */
--anthropic-orange: #d97757;
--anthropic-blue: #6a9bcc;
--anthropic-green: #788c5d;
}3. 排版规范
3.1 字体选择
| 用途 | 主字体 | 备选字体 |
|---|---|---|
| 标题 | Poppins | Arial |
| 正文 | Lora | Georgia |
3.2 字体大小规则
markdown
**标题字体**（24pt 及以上）：
- 使用 Poppins 字体
- 如果 Poppins 不可用，使用 Arial
**正文字体**：
- 使用 Lora 字体
- 如果 Lora 不可用，使用 Georgia3.3 CSS 示例
css
/* 标题样式 */
h1, h2, h3 {
font-family: 'Poppins', Arial, sans-serif;
color: #141413;
}
/* 正文样式 */
body, p {
font-family: 'Lora', Georgia, serif;
color: #141413;
}4. 智能字体应用
4.1 自动规则
markdown
**标题**（24pt 及以上）：
- 自动应用 Poppins 字体
- 如果不可用，自动回退到 Arial
**正文**：
- 自动应用 Lora 字体
- 如果不可用，自动回退到 Georgia
**智能颜色选择**：
- 根据背景自动选择对比色
- 保持可读性4.2 字体管理
markdown
**字体安装**：
- 使用系统安装的 Poppins 和 Lora 字体（如可用）
- 提供到 Arial 和 Georgia 的自动回退
- 无需安装字体——可使用现有系统字体
- 最佳效果：预先安装 Poppins 和 Lora 字体5. 形状和强调色
5.1 应用规则
markdown
**非文本形状**：
- 使用强调色（橙色、蓝色、绿色）
- 循环使用以保持视觉兴趣
- 保持品牌一致性5.2 颜色循环
python
accent_colors = ['#d97757', '#6a9bcc', '#788c5d'] # 橙、蓝、绿
for i, shape in enumerate(shapes):
shape.color = accent_colors[i % len(accent_colors)]6. 技术实现
6.1 使用 python-pptx
python
from pptx.util import Pt
from pptx.dml.color import RGBColor
# Anthropic 品牌颜色
ANTHROPIC_DARK = RGBColor(0x14, 0x14, 0x13)
ANTHROPIC_LIGHT = RGBColor(0xfa, 0xf9, 0xf5)
ANTHROPIC_ORANGE = RGBColor(0xd9, 0x77, 0x57)
ANTHROPIC_BLUE = RGBColor(0x6a, 0x9b, 0xcc)
ANTHROPIC_GREEN = RGBColor(0x78, 0x8c, 0x5d)
# 应用颜色
def apply_brand_colors(shape):
if is_heading(shape):
shape.text_frame.paragraphs[0].font.color.rgb = ANTHROPIC_DARK
shape.text_frame.paragraphs[0].font.name = 'Poppins'
else:
shape.text_frame.paragraphs[0].font.color.rgb = ANTHROPIC_DARK
shape.text_frame.paragraphs[0].font.name = 'Lora'6.2 颜色精确性
markdown
**RGB 值应用**：
- 使用 python-pptx 的 RGBColor 类
- 确保精确的品牌颜色匹配
- 在不同系统间保持颜色保真度7. 完整配色方案
7.1 浅色主题
css
/* 浅色主题配置 */
.light-theme {
background-color: #faf9f5; /* Light */
color: #141413; /* Dark */
}
.light-theme h1,
.light-theme h2 {
color: #141413;
}
.light-theme .accent {
color: #d97757; /* Orange */
}7.2 深色主题
css
/* 深色主题配置 */
.dark-theme {
background-color: #141413; /* Dark */
color: #faf9f5; /* Light */
}
.dark-theme h1,
.dark-theme h2 {
color: #faf9f5;
}
.dark-theme .accent {
color: #d97757; /* Orange */
}8. 使用示例
8.1 触发方式
"给这个演示文稿应用 Anthropic 品牌样式"
"使用 Anthropic 品牌颜色设计这个文档"
"apply Anthropic branding to this slide deck"
"style this report with corporate identity"8.2 应用流程
mermaid
graph LR
A[加载原始文档] --> B[识别元素类型]
B --> C[应用字体规则]
C --> D[应用颜色规则]
D --> E[输出品牌化文档]9. 最佳实践
9.1 一致性
markdown
- 在整个文档中一致使用品牌颜色
- 保持标题和正文字体的区分
- 使用强调色突出重点，但不要过度使用9.2 可读性
markdown
- 确保文本和背景有足够对比度
- 遵循无障碍访问指南
- 在不同屏幕和打印条件下测试可读性9.3 字体回退
markdown
- 始终提供备选字体
- 测试在没有自定义字体时的显示效果
- 确保设计在回退字体下仍然美观10. 本节小结
| 要点 | 说明 |
|---|---|
| 主色调 | Dark #141413, Light #faf9f5 |
| 强调色 | Orange, Blue, Green |
| 标题字体 | Poppins (备选 Arial) |
| 正文字体 | Lora (备选 Georgia) |
| 智能应用 | 自动字体和颜色选择 |
返回：Skills 目录