主题工厂 (theme-factory)

主题工厂（theme-factory）

概述

theme-factory 是用于为产物应用主题的技能。它的核心是：为 PPT、文档、报告、HTML 页面等提供专业的主题样式。

作为设计师/开发者，你可能遇到过：

• “做 PPT 不知道选什么配色”
• “想统一风格但不懂设计”
• “需要专业但不知道如何配色”

theme-factory 就是解决这些的。

主题系统

10 个预设主题

主题	风格	适用场景
Ocean Depths	海洋专业感	商业演示
Sunset Boulevard	暖色活力	营销演示
Forest Canopy	自然大地色	环保/有机
Modern Minimalist	极简现代	科技/专业
Golden Hour	秋季暖色	生活方式
Arctic Frost	冬日清爽	寒冷/冬季
Desert Rose	粉土色调	时尚/优雅
Tech Innovation	科技感	技术演示
Botanical Garden	新鲜有机	园艺/自然
Midnight Galaxy	宇宙深邃	创意/戏剧

主题内容

每个主题包含：

1. 配色方案
   - 主色
   - 辅助色
   - 点缀色
   - 背景色

2. 字体配对
   - 标题字体
   - 正文字体
   - 代码字体

使用流程

第一步：展示主题

向用户展示 theme-showcase.pdf

让用户可以看到所有主题的视觉效果

第二步：询问选择

问用户想要哪个主题

提供主题名称和特点

第三步：确认主题

等待用户明确确认

不要提前开始应用

第四步：应用主题

确认后，应用主题到产物：

1. 设置配色
2. 应用字体
3. 调整样式
4. 统一风格

主题示例

Ocean Depths

配色：
- 主色：#1a5276（深蓝）
- 辅助：#2980b9（中蓝）
- 点缀：#85c1e9（浅蓝）
- 背景：#f8f9fa（浅灰）

字体：
- 标题：Playfair Display
- 正文：Source Sans Pro

Tech Innovation

配色：
- 主色：#0d0d0d（近黑）
- 辅助：#00ff88（霓虹绿）
- 点缀：#ff006e（荧光粉）
- 背景：#1a1a2e（深紫黑）

字体：
- 标题：Space Grotesk
- 正文：Inter
- 代码：JetBrains Mono

Modern Minimalist

配色：
- 主色：#000000（纯黑）
- 辅助：#333333（深灰）
- 点缀：#0066ff（亮蓝）
- 背景：#ffffff（纯白）

字体：
- 标题：Helvetica Neue
- 正文：Georgia

应用场景

1. PPT 演示

步骤：
1. 选择主题
2. 应用配色到母版
3. 设置字体
4. 调整图表样式

2. 文档

步骤：
1. 选择主题
2. 设置文档样式
3. 应用配色
4. 统一格式

3. 网页

步骤：
1. 选择主题
2. 生成 CSS 变量
3. 应用到组件
4. 调整细节

最佳实践

1. 主题选择

考虑因素：
- 演示场景
- 目标受众
- 品牌调性

建议：
- 正式场合：Ocean Depths / Modern Minimalist
- 创意场合：Midnight Galaxy / Tech Innovation
- 温暖场合：Sunset Boulevard / Golden Hour

2. 保持一致

应用原则：
- 全局使用同一主题
- 不要混用主题
- 保持风格统一

3. 适度使用

配色原则：
- 主色占 60%
- 辅助色占 30%
- 点缀色占 10%

CSS 变量生成

/* 主题示例：Ocean Depths */
:root {
  /* 颜色 */
  --color-primary: #1a5276;
  --color-secondary: #2980b9;
  --color-accent: #85c1e9;
  --color-background: #f8f9fa;
  --color-text: #2c3e50;

  /* 字体 */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Source Sans Pro', sans-serif;
  --font-code: 'JetBrains Mono', monospace;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

检查清单

应用前

• 展示所有主题
• 解释每个主题特点
• 了解用户需求

应用中

• 等待确认
• 应用配色
• 设置字体
• 调整样式

应用后

• 检查一致性
• 验证可读性
• 确认效果

速查卡片

10 个主题

Ocean Depths Sunset Boulevard Forest Canopy Modern Minimalist Golden Hour Arctic Frost Desert Rose Tech Innovation Botanical Garden Midnight Galaxy

流程

展示 → 询问 → 确认 → 应用

适用场景

PPT、文档、网页、报告

原则

保持一致、适度使用

---

查看源文件: GitHub原始文件