7.13 Theme Factory Skill - 主题工厂
概述
Theme Factory Skill 提供了一套专业的主题工具包，用于为各种 artifact 应用一致的视觉风格。它包含 10 个预设主题，每个都有精心选择的颜色调色板和字体配对，也支持即时生成自定义主题。
适用场景
可应用于以下类型的 artifact：
- 演示文稿幻灯片
- 文档
- 报告
- HTML 着陆页
- 其他需要一致视觉风格的内容
预设主题
10 个可用主题
| 编号 | 主题名称 | 风格描述 |
|---|---|---|
| 1 | Ocean Depths | 专业、平静的海洋主题 |
| 2 | Sunset Boulevard | 温暖、充满活力的日落色彩 |
| 3 | Forest Canopy | 自然、接地气的大地色调 |
| 4 | Modern Minimalist | 干净、当代的灰度风格 |
| 5 | Golden Hour | 丰富、温暖的秋季调色板 |
| 6 | Arctic Frost | 清凉、清新的冬季灵感主题 |
| 7 | Desert Rose | 柔和、精致的尘土色调 |
| 8 | Tech Innovation | 大胆、现代的科技美学 |
| 9 | Botanical Garden | 清新、有机的花园色彩 |
| 10 | Midnight Galaxy | 戏剧性、宇宙感的深色调 |
主题详情
每个主题都定义在 themes/ 目录中，包含完整规范：
theme-name/
|-- colors.md # 颜色调色板（HEX 值）
|-- fonts.md # 字体配对
|-- examples/ # 应用示例使用流程
+---------------+ +---------------+ +---------------+ +---------------+
| Step 1 | --> | Step 2 | --> | Step 3 | --> | Step 4 |
+---------------+ +---------------+ +---------------+ +---------------+
| 展示主题展示 | | 询问用户选择 | | 等待确认 | | 应用主题 |
| theme- | | 哪个主题 | | 具体主题 | | 到 artifact |
| showcase.pdf | | | | | | |
+---------------+ +---------------+ +---------------+ +---------------+Step 1: 展示主题展示
显示 theme-showcase.pdf 文件，让用户可以直观地看到所有可用主题。不要修改此文件；只需显示供查看。
Step 2: 询问用户选择
问用户想要应用哪个主题到他们的文档或 artifact。
Step 3: 等待确认
获取关于所选主题的明确确认。
Step 4: 应用主题
一旦选择了主题：
- 从
themes/目录读取相应的主题文件 - 在整个文档中一致地应用指定的颜色和字体
- 确保适当的对比度和可读性
- 在所有幻灯片/页面中保持主题的视觉标识
主题结构示例
Ocean Depths 主题
yaml
name: Ocean Depths
description: 专业、平静的海洋主题
colors:
primary: "#1a365d" # 深海蓝
secondary: "#2b6cb0" # 海洋蓝
accent: "#63b3ed" # 浅蓝色
background: "#ebf8ff" # 非常浅的蓝色
text: "#2d3748" # 深灰色
fonts:
heading: "Montserrat"
body: "Open Sans"Tech Innovation 主题
yaml
name: Tech Innovation
description: 大胆、现代的科技美学
colors:
primary: "#0d1117" # 深色背景
secondary: "#238636" # 绿色强调
accent: "#58a6ff" # 蓝色链接
background: "#161b22" # 略浅的背景
text: "#c9d1d9" # 浅灰色文本
fonts:
heading: "JetBrains Mono"
body: "Inter"创建自定义主题
如果现有主题都不适合 artifact，可以创建自定义主题。
步骤
- 收集输入：基于用户提供的描述
- 选择颜色/字体：根据描述选择合适的组合
- 命名主题：给主题一个描述性名称
- 展示审查：显示主题供审查和验证
- 应用主题：按照上述流程应用
自定义主题示例
用户请求："我需要一个适合医疗健康行业的专业主题"
yaml
name: Clinical Care
description: 干净、专业的医疗健康主题
colors:
primary: "#0077b6" # 医疗蓝
secondary: "#00b4d8" # 青色
accent: "#90e0ef" # 浅青色
background: "#ffffff" # 纯白
text: "#023e8a" # 深蓝色文本
fonts:
heading: "Roboto"
body: "Source Sans Pro"应用示例
示例 1：演示文稿应用
python
def apply_theme_to_presentation(prs, theme):
"""将主题应用到演示文稿"""
for slide in prs.slides:
# 设置背景
background = slide.background
fill = background.fill
fill.solid()
fill.fore_color.rgb = theme['colors']['background']
# 应用字体和颜色到文本
for shape in slide.shapes:
if shape.has_text_frame:
for paragraph in shape.text_frame.paragraphs:
for run in paragraph.runs:
if is_heading(run):
run.font.name = theme['fonts']['heading']
run.font.color.rgb = theme['colors']['primary']
else:
run.font.name = theme['fonts']['body']
run.font.color.rgb = theme['colors']['text']示例 2：HTML 页面应用
html
<!DOCTYPE html>
<html>
<head>
<style>
/* Ocean Depths 主题 */
:root {
--primary: #1a365d;
--secondary: #2b6cb0;
--accent: #63b3ed;
--background: #ebf8ff;
--text: #2d3748;
}
body {
background-color: var(--background);
color: var(--text);
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3 {
color: var(--primary);
font-family: 'Montserrat', sans-serif;
}
a {
color: var(--secondary);
}
.accent {
color: var(--accent);
}
</style>
</head>
<body>
<h1>Ocean Depths 主题示例</h1>
<p>这是应用了 Ocean Depths 主题的页面。</p>
</body>
</html>主题应用检查清单
应用主题后，确保：
- [ ] 所有颜色一致应用
- [ ] 字体正确配对（标题 vs 正文）
- [ ] 文本与背景有足够对比度
- [ ] 强调色用于重要元素
- [ ] 整体视觉标识保持一致
总结
Theme Factory Skill 提供了一套专业的主题系统：
10 个预设主题：
- 从海洋蓝到宇宙深紫
- 涵盖各种行业和风格需求
每个主题包含：
- 精心选择的颜色调色板（HEX 值）
- 互补的字体配对
- 适合不同上下文和受众的视觉标识
自定义能力：
- 基于描述生成新主题
- 灵活适应任何品牌需求
使用此 Skill 为任何 artifact 应用一致、专业的视觉样式，无论是演示文稿、文档还是网页。