guizang-ppt-skill 杂志风主题色预设指南：5 套色板的选择、:root 六行替换与防翻车规则

【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址: https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill

本文拆解 guizang-ppt-skill 风格 A（电子杂志 × 电子墨水）的主题色系统：5 套预设色板、6 个 CSS 变量、"只改一处"的替换机制与操作路径。读完后你可以 30 秒完成一份杂志风 deck 的主题色替换，并避开混搭、自定义 hex 等破坏杂志美学的常见错误。

为什么是选择题，而不是自由题

风格 A 之所以像Monocle，关键不在版式而在色温：墨色（ink）与纸色（paper）之间必须有一组校过色的对比度与温度差。SKILL.md 把这个风格的美学锚点定义为"像Monocle杂志贴上了代码"。

正因为"色彩搭配错了画面瞬间变丑"（references/themes.md 原话），项目定了一条硬约束：SKILL.md Step 2.2 声明"本 skill只允许从 5 套精心调配的预设里选一套，不接受用户自定义 hex 值——保护美学比给自由更重要"。

这套设计哲学把"配色审美"从生成过程里剥离出去：Agent 不创作颜色，只从人工校过的 5 套色板里挑；用户也只回答选择题。效果是把每套主题的色温、对比度、派生色锁定成一个整体，不允许自由组合。

主题选择发生在工作流的 Step 1（7 问澄清清单第 6 问"想要哪套主题色？"），早于模板拷贝与内容填充；选定后在 deck 项目记录里备注主题名，后续迭代才不会跑偏。

5 套色板全景速览

5 套色板结构完全一致：一组墨色（ink）+ 一组纸色（paper）+ 两个派生色（tint）。先给全貌：

"只改一处、处处生效"的机制原理

机制不复杂：种子模板顶部只有一个:root块，全文件所有颜色都引用它。assets/template.html 的<style>块开头，:root分成两组变量，前 6 行是主题色：

:root{ /* ============ 主题色(默认:🖋 墨水经典) ============ */ --ink:#0a0a0b; --ink-rgb:10,10,11; --paper:#f1efea; --paper-rgb:241,239,234; --paper-tint:#e8e5de; --ink-tint:#18181a; /* 其下为字体变量，跨主题固定，本文不展开 */ }

6 个主题色变量的职责：

关键在两组-rgb三元组：模板里所有半透明色块都写成rgba(var(--ink-rgb), 透明度)的形式，颜色跟主题走、透明度复用。普通页遮罩是rgba(var(--paper-rgb),.78)，hero 页降到.16让 WebGL 背景透出。两个 tint 变量目前未被模板其他 CSS 引用，是预留的派生色——替换时 6 行整体保留，是为了块完整性。

所以换主题 = 整体替换这 6 行；:root里其下的字体变量标着"跨主题固定"，不属于替换范围。

完成一次主题色替换的 7 步操作

1. 选一套：问用户用 5 套中的哪一套，或基于内容推荐（对照下文对号表）；没敲定之前不动手。
2. 拷贝模板：按 SKILL.md Step 2 执行cp assets/template.html 项目/XXX/ppt/index.html，同级建好images/目录。
3. 打开样式块：在被拷贝的index.html里定位文件顶部的<style>。
4. 定位 :root：第一个块就是:root，种子模板中第 16–21 行是 6 个主题色变量，带"主题色"注释标记。
5. 替换六行：到 references/themes.md 找到对应主题的:root块，把--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint六行整体换掉。
6. grep 校验：确认:root里 6 个变量已替换，且文件其他位置的颜色值一处未动——散落的 rgba 都走var()引用，自动跟随。
7. 语义呼应（可选）：把<title>与 chrome 文案改得呼应主题，例如牛皮纸配 "Vol.03 · 秋"——主题不只是颜色，也是叙事的一部分。

第 2 到第 6 步实际是一次文本替换，30 秒的操作量。

逐项展开：每套色板擅长什么

墨水经典：不出错的默认

适合通用分享、商业发布、科技产品，拿不准时的第一选择。调性是纯墨黑 + 暖米白，杂志感最强，Monocle / Apricot / A Book Apart 的视觉谱系。

--ink:#0a0a0b; --ink-rgb:10,10,11; --paper:#f1efea; --paper-rgb:241,239,234; --paper-tint:#e8e5de; --ink-tint:#18181a;

靛蓝瓷：技术内容的冷静理性

适合科技/研究/数据分享、工程师文化、深度内容、技术发布会。调性是深靛蓝 + 瓷白，像学术期刊或蓝印花瓷器。

--ink:#0a1f3d; --ink-rgb:10,31,61; --paper:#f1f3f5; --paper-rgb:241,243,245; --paper-tint:#e4e8ec; --ink-tint:#152a4a;

森林墨：自然与非虚构的呼吸感

适合自然/可持续/文化/非虚构内容、户外品牌、环保主题。调性是深森林绿 + 象牙，沉稳、有呼吸感，像旧版《国家地理》。

--ink:#1a2e1f; --ink-rgb:26,46,31; --paper:#f5f1e8; --paper-rgb:245,241,232; --paper-tint:#ece7da; --ink-tint:#253d2c;

牛皮纸：温暖与年代感

适合怀旧/人文/阅读/历史/文学分享、独立杂志、手作品牌。调性是深棕 + 暖米，像牛皮信封或老笔记本。

--ink:#2a1e13; --ink-rgb:42,30,19; --paper:#eedfc7; --paper-rgb:238,223,199; --paper-tint:#e0d0b6; --ink-tint:#3a2a1d;

沙丘：克制的高级中性

适合艺术/设计/创意/时尚分享、画廊手册、审美优先的私享会。调性是炭灰 + 沙色，像沙漠黄昏或建筑设计图册。

--ink:#1f1a14; --ink-rgb:31,26,20; --paper:#f0e6d2; --paper-rgb:240,230,210; --paper-tint:#e3d7bf; --ink-tint:#2d2620;

对号入座：如果是…

直接采用 references/themes.md 的官方推荐表，不用二次判断：

不用动的东西：兼容性与边界

换主题时有三样东西被验证过会自动跟随，不需要手动调：

WebGL 双背景。模板内置双 WebGL 背景：深色页用 Holographic Dispersion（全息色散 · 钛金暗流），浅色页用 Spiral Vortex（旋转涡流 · 银色珍珠）。两个 shader 的主色对 5 套 ink/paper 色板都"经测试可接受"（references/themes.md 切换原则原话）——任何主题下背景与文字都保持可读的对比关系，换肤不必动 shader。

currentColor 驱动的 border 与 icon。.tag边框、.callout左侧线、Lucide 图标的stroke全部写currentColor，跟随所在 section 的文字色（由.light/.dark决定）自动适配，换主题后零调整。

字体变量。:root里的 5 个字体变量标注"跨主题固定"，主题色替换不要越界到这一段。

与瑞士风（风格 B）的边界：另一个模板 assets/template-swiss.html 走的是 references/themes-swiss.md 的另一套体系——"高级灰白底 + 单一高饱和高亮色"，克莱因蓝 IKB / 柠檬黄 / 柠檬绿 / 安全橙 4 套，变量是--paper/--grey-1/2/3/--accent/--accent-on等，与风格 A 的"墨 × 纸"遮罩体系完全不同名不同责。SKILL.md 明确警告风格 A 和 B不能混用：类名与 CSS 变量互不通用，一份 deck 只能选一套风格系统。

防翻车清单：4 件不要做的事

• ❌混搭：例如 ink 取墨水经典的、paper 取沙丘的——两组变量之间的色温与对比度是配套校色的，交叉取用会彻底违和。
• ❌接受用户随便给一个 hex 值——直接导致配色崩塌；应委婉拒绝，并展示 5 套预设让用户选择。
• ❌直接修改 template.html 其他地方的颜色——散落的 rgba 都走var()引用，逐处硬改会破坏"换肤只改一处"的机制，且容易改漏。
• ❌一份 deck 混用两套主题或中途换色——主题是整套 deck 的视觉身份，混用会破坏杂志的整体感。

三个记忆点

1. 选一套：5 套预设色板，需求澄清阶段就定下来，并写进项目记录。
2. 整体替换六行：只动:root的主题色块，其余var()引用自动跟随。
3. 其余一律不动：WebGL shader、currentColor 边框与图标、字体变量全部自动适配，越界动手就是事故来源。

5 套校过色的预设 + 一个:root+ 一条"禁止自定义"的硬规则，共同保证任何一次生成都不会出现配色崩塌。

【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址: https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill