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 17 问澄清清单第 6 问想要哪套主题色早于模板拷贝与内容填充选定后在 deck 项目记录里备注主题名后续迭代才不会跑偏。5 套色板全景速览5 套色板结构完全一致一组墨色ink 一组纸色paper 两个派生色tint。先给全貌主题调性适合场景墨水经典Monocle 默认纯墨黑 暖米白杂志感最强通用分享、商业发布、科技产品、拿不准时的默认靛蓝瓷Indigo Porcelain深靛蓝 瓷白冷静理性科技/研究/数据分享、工程师文化、技术发布会森林墨Forest Ink深森林绿 象牙沉稳有呼吸感自然/可持续/文化/非虚构、户外品牌、环保主题牛皮纸Kraft Paper深棕 暖米温暖有年代感怀旧/人文/阅读/历史/文学、独立杂志、手作品牌沙丘Dune炭灰 沙色克制高级中性艺术/设计/创意/时尚、画廊手册、审美优先的私享会只改一处、处处生效的机制原理机制不复杂种子模板顶部只有一个: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 个主题色变量的职责变量职责在模板中的落点--ink墨色文字/深底主色.slide.dark背景、.slide.light文字--ink-rgb墨色 RGB 三元组rgba(var(--ink-rgb),.78)深色页遮罩hero 页.12--paper纸色浅底主色.slide.light背景、.slide.dark文字--paper-rgb纸色 RGB 三元组rgba(var(--paper-rgb),.78)浅色页遮罩hero 页.16--paper-tint纸色派生色备用派生色整体替换时保留--ink-tint墨色派生色备用派生色整体替换时保留关键在两组-rgb三元组模板里所有半透明色块都写成rgba(var(--ink-rgb), 透明度)的形式颜色跟主题走、透明度复用。普通页遮罩是rgba(var(--paper-rgb),.78)hero 页降到.16让 WebGL 背景透出。两个 tint 变量目前未被模板其他 CSS 引用是预留的派生色——替换时 6 行整体保留是为了块完整性。所以换主题 整体替换这 6 行:root里其下的字体变量标着跨主题固定不属于替换范围。完成一次主题色替换的 7 步操作选一套问用户用 5 套中的哪一套或基于内容推荐对照下文对号表没敲定之前不动手。拷贝模板按 SKILL.md Step 2 执行cp assets/template.html 项目/XXX/ppt/index.html同级建好images/目录。打开样式块在被拷贝的index.html里定位文件顶部的style。定位 :root第一个块就是:root种子模板中第 16–21 行是 6 个主题色变量带主题色注释标记。替换六行到 references/themes.md 找到对应主题的:root块把--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint六行整体换掉。grep 校验确认:root里 6 个变量已替换且文件其他位置的颜色值一处未动——散落的 rgba 都走var()引用自动跟随。语义呼应可选把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 的官方推荐表不用二次判断如果是…就选…第一次用 / 不知道选啥墨水经典AI / 技术 / 产品发布靛蓝瓷内容 / 行业观察 / 文化森林墨书评 / 生活方式 / 人文牛皮纸设计 / 艺术 / 品牌沙丘不用动的东西兼容性与边界换主题时有三样东西被验证过会自动跟随不需要手动调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 的视觉身份混用会破坏杂志的整体感。三个记忆点选一套5 套预设色板需求澄清阶段就定下来并写进项目记录。整体替换六行只动:root的主题色块其余var()引用自动跟随。其余一律不动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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
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 17 问澄清清单第 6 问想要哪套主题色早于模板拷贝与内容填充选定后在 deck 项目记录里备注主题名后续迭代才不会跑偏。5 套色板全景速览5 套色板结构完全一致一组墨色ink 一组纸色paper 两个派生色tint。先给全貌主题调性适合场景墨水经典Monocle 默认纯墨黑 暖米白杂志感最强通用分享、商业发布、科技产品、拿不准时的默认靛蓝瓷Indigo Porcelain深靛蓝 瓷白冷静理性科技/研究/数据分享、工程师文化、技术发布会森林墨Forest Ink深森林绿 象牙沉稳有呼吸感自然/可持续/文化/非虚构、户外品牌、环保主题牛皮纸Kraft Paper深棕 暖米温暖有年代感怀旧/人文/阅读/历史/文学、独立杂志、手作品牌沙丘Dune炭灰 沙色克制高级中性艺术/设计/创意/时尚、画廊手册、审美优先的私享会只改一处、处处生效的机制原理机制不复杂种子模板顶部只有一个: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 个主题色变量的职责变量职责在模板中的落点--ink墨色文字/深底主色.slide.dark背景、.slide.light文字--ink-rgb墨色 RGB 三元组rgba(var(--ink-rgb),.78)深色页遮罩hero 页.12--paper纸色浅底主色.slide.light背景、.slide.dark文字--paper-rgb纸色 RGB 三元组rgba(var(--paper-rgb),.78)浅色页遮罩hero 页.16--paper-tint纸色派生色备用派生色整体替换时保留--ink-tint墨色派生色备用派生色整体替换时保留关键在两组-rgb三元组模板里所有半透明色块都写成rgba(var(--ink-rgb), 透明度)的形式颜色跟主题走、透明度复用。普通页遮罩是rgba(var(--paper-rgb),.78)hero 页降到.16让 WebGL 背景透出。两个 tint 变量目前未被模板其他 CSS 引用是预留的派生色——替换时 6 行整体保留是为了块完整性。所以换主题 整体替换这 6 行:root里其下的字体变量标着跨主题固定不属于替换范围。完成一次主题色替换的 7 步操作选一套问用户用 5 套中的哪一套或基于内容推荐对照下文对号表没敲定之前不动手。拷贝模板按 SKILL.md Step 2 执行cp assets/template.html 项目/XXX/ppt/index.html同级建好images/目录。打开样式块在被拷贝的index.html里定位文件顶部的style。定位 :root第一个块就是:root种子模板中第 16–21 行是 6 个主题色变量带主题色注释标记。替换六行到 references/themes.md 找到对应主题的:root块把--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint六行整体换掉。grep 校验确认:root里 6 个变量已替换且文件其他位置的颜色值一处未动——散落的 rgba 都走var()引用自动跟随。语义呼应可选把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 的官方推荐表不用二次判断如果是…就选…第一次用 / 不知道选啥墨水经典AI / 技术 / 产品发布靛蓝瓷内容 / 行业观察 / 文化森林墨书评 / 生活方式 / 人文牛皮纸设计 / 艺术 / 品牌沙丘不用动的东西兼容性与边界换主题时有三样东西被验证过会自动跟随不需要手动调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 的视觉身份混用会破坏杂志的整体感。三个记忆点选一套5 套预设色板需求澄清阶段就定下来并写进项目记录。整体替换六行只动:root的主题色块其余var()引用自动跟随。其余一律不动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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
