主题配色工厂

Other

为幻灯片、文档、报告、HTML页面等应用专业主题配色和字体。 内置10套精选主题,也可以按需生成自定义主题。当用户说"换个配色"、 "美化这个文档"、"选个专业的字体"、"生成一套主题"时使用。

Install

openclaw skills install theme-factory-cn

主题工厂

为任何内容应用专业、协调的配色和字体方案。让你的PPT、文档、网页看起来像专业设计师做的!


🎯 什么时候使用

立即触发:

  • 用户说"帮我美化一下"、"换个配色"
  • 用户要做PPT、报告、文档,需要好看的主题
  • 用户问"用什么字体比较专业"
  • 用户要生成一套自定义的配色方案

不要触发:

  • 纯代码,不需要视觉设计
  • 数据处理,不涉及展示

🎨 10套精选内置主题

主题预览速览

编号主题名称风格描述适用场景
1🌊 深海蓝调专业、平静的海洋色调商务报告、正式场合
2🌅 日落大道温暖、活力的橙红渐变创意、营销、发布会
3🌲 森林树冠自然、稳重的大地色系环保、健康、农业
4⚪ 现代极简干净、克制的黑白灰科技、设计、作品集
5🌟 金色时刻浓郁、温暖的秋色调高端产品、庆典
6❄️ 北极霜冻清冷、锐利的冬日感科技、冰雪运动、医疗
7🌹 沙漠玫瑰柔和、精致的灰粉色时尚、美妆、女性向产品
8💡 科技创新大胆、现代的赛博感科技发布会、产品演示
9🌿 植物园清新、有机的绿色调食品、健康、生活方式
10🌌 午夜银河戏剧化、深邃的暗色调高端产品、艺术、晚宴

📋 每套主题详细参数

1. 🌊 深海蓝调 (Ocean Depths)

/* 配色 */
--primary: #0D4C6B;      /* 深海蓝 - 主标题 */
--secondary: #2E8B8B;    /* 青蓝 - 副标题 */
--accent: #F5A962;       /* 暖橙 - 强调色 */
--background: #F8FAFB;   /* 近白背景 */
--text: #1A2E38;         /* 深灰文字 */

/* 字体 */
--header-font: 'Playfair Display', serif;  /* 高雅标题 */
--body-font: 'Source Sans Pro', sans-serif; /* 易读正文 */

适用: 金融报告、学术答辩、正式商务演示


2. 🌅 日落大道 (Sunset Boulevard)

/* 配色 */
--primary: #D9534F;      /* 珊瑚红 */
--secondary: #F0AD4E;    /* 日落黄 */
--accent: #5BC0DE;       /* 天蓝点缀 */
--background: #FFF9F5;   /* 暖白背景 */
--text: #3C2A21;         /* 深棕文字 */

/* 字体 */
--header-font: 'Montserrat', sans-serif;  /* 现代粗体 */
--body-font: 'Lato', sans-serif;          /* 圆润正文 */

适用: 营销方案、创意提案、产品发布会


3. 🌲 森林树冠 (Forest Canopy)

/* 配色 */
--primary: #2D5016;      /* 森林深绿 */
--secondary: #6B8E23;    /* 橄榄绿 */
--accent: #CD853F;       /* 古铜色点缀 */
--background: #F5F5F0;   /* 米白背景 */
--text: #2C2C2C;         /* 纯黑文字 */

/* 字体 */
--header-font: 'Lora', serif;           /* 人文气息 */
--body-font: 'Merriweather', serif;     /* 经典易读 */

适用: 环保报告、农业项目、健康产品


4. ⚪ 现代极简 (Modern Minimalist)

/* 配色 */
--primary: #1A1A1A;      /* 纯黑 */
--secondary: #666666;    /* 中灰 */
--accent: #E63946;       /* 正红强调(唯一亮色) */
--background: #FFFFFF;   /* 纯白背景 */
--text: #1A1A1A;         /* 纯黑文字 */

/* 字体 */
--header-font: 'Inter', sans-serif;     /* 现代中性 */
--body-font: 'Inter', sans-serif;       /* 全用统一字体 */

适用: 科技公司、设计作品集、极简风格产品


5. 🌟 金色时刻 (Golden Hour)

/* 配色 */
--primary: #8B4513;      /* 马鞍棕 */
--secondary: #DAA520;    /* 金麒麟色 */
--accent: #B22222;       /* 砖红点缀 */
--background: #FFF8E7;   /* 奶油色背景 */
--text: #3A2E1F;         /* 暖棕文字 */

/* 字体 */
--header-font: 'Playfair Display', serif;  /* 奢华感 */
--body-font: 'Crimson Text', serif;        /* 精致正文 */

适用: 高端产品、奢侈品、庆典活动、酒店餐饮


6. ❄️ 北极霜冻 (Arctic Frost)

/* 配色 */
--primary: #1E3A5F;      /* 深蓝 */
--secondary: #4A90A4;    /* 冰蓝 */
--accent: #88D8B0;       /* 薄荷绿 */
--background: #F0F5F9;   /* 冷白背景 */
--text: #1C2B3A;         /* 冷灰文字 */

/* 字体 */
--header-font: 'Poppins', sans-serif;    /* 清爽现代 */
--body-font: 'Open Sans', sans-serif;    /* 清晰易读 */

适用: 医疗健康、科技产品、冰雪运动


7. 🌹 沙漠玫瑰 (Desert Rose)

/* 配色 */
--primary: #9A8C98;      /* 灰紫 */
--secondary: #C9ADA7;    /* 干燥玫瑰 */
--accent: #F2E9E4;       /* 裸粉 */
--background: #FFFFFF;   /* 纯白 */
--text: #4A4E69;         /* 深灰紫 */

/* 字体 */
--header-font: 'Cormorant Garamond', serif;  /* 优雅衬线 */
--body-font: 'Karla', sans-serif;             /* 圆润无衬线 */

适用: 时尚美妆、女性向产品、生活方式品牌


8. 💡 科技创新 (Tech Innovation)

/* 配色 */
--primary: #0F172A;      /* 深蓝黑 */
--secondary: #3B82F6;    /* 科技蓝 */
--accent: #10B981;       /* 荧光绿 */
--background: #0F172A;   /* 深色背景(深色模式) */
--text: #F8FAFC;         /* 白色文字 */

/* 字体 */
--header-font: 'Space Grotesk', sans-serif;  /* 科技感 */
--body-font: 'DM Sans', sans-serif;           /* 现代感 */

适用: 科技发布会、产品Demo、黑客松项目


9. 🌿 植物园 (Botanical Garden)

/* 配色 */
--primary: #2C5F2D;      /* 深叶绿 */
--secondary: #97BC62;    /* 嫩绿 */
--accent: #FFBA00;       /* 明黄点缀 */
--background: #F8F9F4;   /* 淡绿米白 */
--text: #1E2F1E;         /* 深绿灰文字 */

/* 字体 */
--header-font: 'ABeeZee', sans-serif;      /* 圆润可爱 */
--body-font: 'Nunito', sans-serif;         /* 柔和易读 */

适用: 食品有机、健康生活、园艺植物


10. 🌌 午夜银河 (Midnight Galaxy)

/* 配色 */
--primary: #0C0C1E;      /* 接近黑的深蓝 */
--secondary: #1A1A40;    /* 深紫蓝 */
--accent: #7B68EE;       /* 中紫闪星 */
--accent-2: #00CED1;     /* 青蓝星芒 */
--background: #0C0C1E;   /* 深色背景 */
--text: #E8E8F0;         /* 亮白文字 */

/* 字体 */
--header-font: 'Orbitron', sans-serif;    /* 未来感 */
--body-font: 'Rajdhani', sans-serif;      /* 锐利正文 */

适用: 人工智能、太空主题、高端晚宴、艺术展


🔧 如何应用主题

给用户展示选项

🎨 我有10套精选主题,你可以选一个:

  1. 🌊 深海蓝调 - 商务正式
  2. 🌅 日落大道 - 活力创意
  3. 🌲 森林树冠 - 自然稳重
  4. ⚪ 现代极简 - 干净克制
  5. 🌟 金色时刻 - 高端奢华
  6. ❄️ 北极霜冻 - 清冷科技
  7. 🌹 沙漠玫瑰 - 柔和精致
  8. 💡 科技创新 - 赛博未来
  9. 🌿 植物园 - 清新有机
  10. 🌌 午夜银河 - 深邃戏剧

选几号?或者告诉我你想要什么感觉,我帮你定制!


应用到PPT/幻灯片

用户选好后,给出具体建议:

✅ 应用「深海蓝调」主题到你的幻灯片:

配色方案:

  • 标题颜色:#0D4C6B
  • 副标题颜色:#2E8B8B
  • 强调/按钮颜色:#F5A962
  • 背景色:#F8FAFB
  • 正文字色:#1A2E38

字体建议:

  • 标题:Playfair Display 或 宋体粗体
  • 正文:Source Sans Pro 或 微软雅黑

排版建议:

  • 每页不超过6行文字
  • 标题字号是正文的2.5倍
  • 重要数据用强调色突出

应用到HTML页面

直接生成CSS变量:

:root {
  /* 深海蓝调主题 */
  --color-primary: #0D4C6B;
  --color-secondary: #2E8B8B;
  --color-accent: #F5A962;
  --color-background: #F8FAFB;
  --color-text: #1A2E38;
  
  --font-header: 'Playfair Display', serif;
  --font-body: 'Source Sans Pro', sans-serif;
}

/* 使用示例 */
h1, h2, h3 {
  color: var(--color-primary);
  font-family: var(--font-header);
}

body {
  color: var(--color-text);
  font-family: var(--font-body);
  background-color: var(--color-background);
}

button {
  background-color: var(--color-accent);
}

🎲 自定义主题生成

如果内置主题都不合适,生成自定义主题:

先问用户几个问题:

好的,我们来定制一套主题!先确认一下:

  1. 这是给什么场景用的?(商务/创意/科技/其他)
  2. 想要什么感觉?(正式/活泼/高端/冷静/温暖)
  3. 有偏好的颜色吗?(比如喜欢蓝色,讨厌橙色)

然后生成一套完整的主题

生成后给它起个好名字,比如「晨雾咖啡」、「极光之夜」等。


💡 设计最佳实践

配色原则

  1. 最多3种颜色 - 主色 + 辅助色 + 强调色,不要更多
  2. 60-30-10法则 - 主色60%,辅助色30%,强调色10%
  3. 对比度够 - 文字和背景对比度至少4.5:1(WCAG标准)
  4. 同色系深浅 - 用同一种颜色的深浅做层次,比换颜色更高级

字体原则

  1. 最多2种字体 - 标题一种,正文一种
  2. 风格互补 - 衬线标题 + 无衬线正文 = 经典组合
  3. 字号层级分明 - 标题是正文的2-3倍
  4. 行高够 - 正文行高1.5-1.6倍,标题行高1.2倍

通用禁忌

❌ 不要用亮红配亮绿(色盲友好问题) ❌ 不要用纯黑(#000)做正文,太刺眼,用深灰 ❌ 不要用太多种颜色,会乱 ❌ 不要所有字都加粗,要有层级


📦 输出格式

每次给出主题时,必须包含:

  1. 主题名称和emoji
  2. 配色的hex色值(5个:主色/辅助色/强调色/背景/文字)
  3. 字体推荐(标题字体 + 正文字体)
  4. 具体的应用建议
  5. 适用场景说明

现在,想要选一套主题还是定制一套? 🎨✨