30 秒完成换肤guizang-ppt-skill 五套预设主题色怎么选、怎么换【免费下载链接】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 生成杂志风 HTML 幻灯片之后如果想给整份 deck 换个颜色气质很容易冒出几个念头直接改一个 hex 值行不行能不能从 A 主题借个深色、从 B 主题借个浅色这篇文章把 guizang-ppt-skill 的 5 套预设主题色和换肤机制一次讲清项目只允许从 5 套校色过的色板里挑不接受自定义 hex 值看懂全模板只动一处的变量机制后换一次皮肤只需要 30 秒。改主题色最容易翻车的 3 种做法先不谈怎么操作看看换颜色时最常见的三种翻车姿势拆开一套色板混着穿。--ink取墨水经典的--paper却取沙丘的——每套色板里墨色和纸色的色温、对比度是成对校过的交叉取用就像给靛蓝衬衫配沙色长裤一眼就知道不对。来者不拒地接用户配色。帮我改成品牌色 #336699一旦照做纸与墨之间精心调好的对比关系就被打破了页面质感直接垮掉。拿着搜索框满 CSS 追杀颜色值。模板里的 rgba 散落几十处改一处漏一处就算全都改对也把一处换肤的结构彻底拆散了。这三件事本质都是对同一条设计约束的误读——而这条约束恰恰是 guizang-ppt-skill 风格 A 能长期稳定出片的原因。为什么 guizang-ppt-skill 不允许自定义颜色风格 A杂志风的观感建立在墨色 × 纸色这对关系上对比度差一点、温度差偏一点页面从有质感跌到像随便套的模板成本极低。项目对这个风险的应对非常干脆把配色这道自由度直接收掉。references/themes.md 开头就写明不允许用户自定义颜色只从预设里挑选SKILL.md 里的措辞更直白——只允许从 5 套精心调配的预设里选一套不接受自定义 hex 值因为保护美学比给自由更重要。换句话说配色从一道创作题变成了一道选择题审美风险被整体外包给了上游5 套色板在合入仓库前就做过人工校色生成端不需要再赌运气。换肤机制是怎么工作的全模板只有 6 个变量在动色打开 assets/template.html风格 A 的种子模板的style块最开头就是:root{}其中前 6 个变量是整份 deck 的色温总闸--ink:#0a0a0b; /* 墨色文字与深色页的主色 */ --ink-rgb:10,10,11; /* 墨色 RGB 三元组供 rgba() 做半透明遮罩 */ --paper:#f1efea; /* 纸色浅色页的主色 */ --paper-rgb:241,239,234; --paper-tint:#e8e5de; /* 纸色浅派生次级底色区块 */ --ink-tint:#18181a; /* 墨色深派生次级深色区块 */重点不在变量本身而在引用方式模板里所有散落的颜色都写成var(--...)或rgba(var(--ink-rgb), .78)没有一个写死的 hex。普通页遮罩.slide.light::before/.slide.dark::before用.78的透明度hero 页为了透出 WebGL 背景把遮罩降到.16/.12高亮标记.hi::after的亮暗底取值、导航点、分隔线……全部走这 6 个变量。所以结论很直接换主题 整体替换这 6 行其余 CSS 一行都不用碰。如何选对主题色5 套预设色板选择卡下面 5 组取值可直接整体复制进:root来源是 references/themes.md。 墨水经典Monocle 默认何时选它通用分享、商业发布、科技产品拿不准、第一次用时它就是兜底答案。调性墨黑压暖米白是 5 套里杂志教科书感最重的一组Monocle、A Book Apart 那路视觉语法。变量取值--ink#0a0a0b--ink-rgb10,10,11--paper#f1efea--paper-rgb241,239,234--paper-tint#e8e5de--ink-tint#18181a 靛蓝瓷Indigo Porcelain何时选它AI / 技术 / 产品发布研究与数据分享工程师文化、偏深度的内容。调性深靛蓝压在瓷白之上整体安静、理性适合需要显得严谨的场合。变量取值--ink#0a1f3d--ink-rgb10,31,61--paper#f1f3f5--paper-rgb241,243,245--paper-tint#e4e8ec--ink-tint#152a4a 森林墨Forest Ink何时选它内容行业观察、文化与非虚构选题自然 / 可持续 / 环保主题户外品牌。调性深绿配象牙稳但不压人页面像留了一点呼吸空间。变量取值--ink#1a2e1f--ink-rgb26,46,31--paper#f5f1e8--paper-rgb245,241,232--paper-tint#ece7da--ink-tint#253d2c 牛皮纸Kraft Paper何时选它书评、人文、阅读、历史与文学分享生活方式内容独立杂志与手作品牌。调性深棕 暖米天生带着时间感是纸制品自己的颜色。变量取值--ink#2a1e13--ink-rgb42,30,19--paper#eedfc7--paper-rgb238,223,199--paper-tint#e0d0b6--ink-tint#3a2a1d 沙丘Dune何时选它设计、艺术、品牌、时尚分享画廊手册审美优先的私享会。调性炭灰与沙色都是低饱和对比收得很紧属于不喊声色的安静高级。变量取值--ink#1f1a14--ink-rgb31,26,20--paper#f0e6d2--paper-rgb240,230,210--paper-tint#e3d7bf--ink-tint#2d2620如何替换主题色变量换肤的正确 4 步先定主题。SKILL.md 的需求澄清清单里第 6 问就是想要哪套主题色所以主题应在填充内容之前就敲定而不是做到一半再想。打开模板。assets/template.html的style块。定位:root{并整体替换。从 themes.md 复制对应主题的 6 个变量把主题色注释下的那 6 行一次换掉一行不多、一行不少。其余一律不碰。所有var()引用会自动跟着新值走无需逐处核对 rgba。收尾时还有两条约定值得记住一份 deck 只认一套主题。主题是整套 deck 的视觉身份中途换色会把杂志的整体感撕开。选定后留个备注。在 deck 的项目记录里写下主题名后续迭代才不会跑偏。可选加分项是语义强化让title和页面 chrome 文案呼应主题气质比如牛皮纸主题配 Vol.03 · 秋。颜色只是皮肤文案才是让它活起来的那层。换完主题色背景和图标需要跟着调吗不需要有两层机制已经兜住了双 WebGL 背景经过全主题验证。模板内置两套 shader可在WebGL 双背景注释段看到深色页跑 Holographic Dispersion钛金暗流彩虹微扰 鼠标径向涟漪浅色页跑 Spiral Vortex银色珍珠domain-warp 流动、无中心。两版主色与 5 套色板都测过对比关系可接受换主题不用动 shader。currentColor自动跟色。边框和图标都不写死颜色——.tag的border:1px solid currentColor、Lucide 图标的stroke:currentColor会跟随所在 section 的文字色由.light/.dark决定主题一换它们自己就换好了。主题色防翻车清单3 条红线❌不混搭变量。6 个变量是一个校色整体任何只取其中两三个的操作都会让色温失衡。❌不接受任意 hex 值。用户坚持要给品牌色时委婉拒绝把 5 套预设摊出来让对方做选择题。❌不改:root以外的颜色。散落各处的 rgba 全部走变量引用逐处硬改只会漏改、并毁掉一处换肤的结构。FAQ风格 B 边界与常见追问瑞士国际主义风风格 B和这套系统是什么关系另一套独立体系模板是 assets/template-swiss.html色板记录在 references/themes-swiss.md走高级灰白底 单一高饱和高亮色的路子IKB 克莱因蓝 / 柠檬黄 / 柠檬绿 / 安全橙四选一变量是--accent/--accent-rgb/--grey-1/2/3这一系。两套的类名与 CSS 变量互不通用一份 deck 只能选一套风格、一套主题系统风格 A 的墨纸变量搬不进瑞士风模板反过来也不行。只想微调一个变量行不行比如纸色再浅一点。不建议。6 个变量的对比与色温是成组校过的动其中一个就打破了整组平衡。当下这套不合意时正确动作是换整套而不是修一个数。写在最后整套流程其实只有三个动作选一套、换六行、停手。5 套色板把配色的功课提前做完了你要做的只是挑出和你的内容最合身的那件——选完这份 deck 的视觉身份也就立住了。【免费下载链接】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），仅供参考