guizang-ppt-skill 如何锁死瑞士风validate-swiss-deck.mjs 版式校验系统深度拆解【免费下载链接】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-skillguizang-ppt-skill 是一个生成单文件 HTML 网页 PPT 的 AI Agent 技能内置「电子杂志风」与「瑞士国际主义风」两套视觉系统。其中瑞士风的版式最讲究也最容易在 AI 生成时走样。为此项目内置了版式校验脚本 validate-swiss-deck.mjs通过静态结构检查 真实渲染测量两条腿把瑞士风 PPT 的每一页锁回 22 个登记版式。本文深度拆解这套版式校验系统的三层设计、测量指标与使用方法帮你理解 AI 生成的瑞士风网页 PPT 为什么能稳定好看。初印象guizang-ppt-skill 生成的网页 PPT 长什么样这个技能的核心能力是让 AI Agent 一次产出单文件 HTML 的横向翻页 PPTCSS、WebGL 背景、翻页逻辑、演讲者模式全部内置浏览器直接打开就能演示不需要服务器也不需要构建工具。两套风格分工明确风格视觉特征适合场景风格 A · 电子杂志 × 电子墨水衬线大标题 WebGL 流体背景 暖色人文分享、行业观察风格 B · 瑞士国际主义全程无衬线、12 列网格、直角纯色、1px 发丝线、极致字号对比科技产品、数据汇报、方法论风格 B 只允许从 4 套高饱和锚点色中四选一克莱因蓝 IKB、柠檬黄、柠檬绿、安全橙。仓库里自带的assets/screenshot-backgrounds/style-b/目录中就有对应主题的背景资产可以直观感受瑞士风的网格与点阵语言为什么要锁死瑞士风三类版式走样坑瑞士国际主义的美是结构化的美左对齐、吸附网格、单一锚点色。AI 生成时很容易出现看起来像瑞士风其实已经偏离原始模板的情况典型症状有三类发明未登记版式模板只登记了 S01–S22 共 22 个正文版式详见 references/swiss-layout-lock.md但 AI 可能顺手写出P23、Swiss Image Split这类自创页面破坏还原度。排版习惯入侵中文 PPT 常见的大标题居中、SVG 里写text标签都是瑞士风的禁忌——正文标题必须左对齐、SVG 只允许画几何线条。图片脱离槽位21:9 的主图被塞进固定高度的短槽、object-position: top center把人脸裁掉、同组图片比例混用……图文页是最容易崩的地方。光靠文档约束生成前硬规则还不够——AI 会遗忘。所以项目把规则做成了可执行的校验器交付前跑一遍脚本不合规的页面直接报错。validate-swiss-deck.mjs 版式校验系统三层防线校验脚本位于 scripts/validate-swiss-deck.mjs整体分成三层静态结构检查 → Playwright 真实渲染测量 → 量化修正阶梯。第一层静态结构校验——22 个登记版式白名单脚本先读取 HTML 文件、剥掉注释再用正则提取所有section classslide页面逐页执行以下检查违规记为 error拿不准的记为 warning检查项规则级别版式登记每页必须有data-layoutSxx且只能是 S01–S22 或封面/尾页专用版式SWISS-COVER-ASCII/SWISS-CLOSING-ASCIIerror实验结构拦截出现P23/P24、Swiss Image Split、Evidence Grid等未登记结构直接报错加--allow-experimental可放行error标题左对齐顶部标题区域出现text-align:center或align-self:center报错statement 类版式S03/S09/S10、封面/尾页豁免errorSVG 禁文字SVG 中出现可见text报错标签必须用 HTML 网格/卡片承载error图片槽位绑定每张images/本地图片必须写data-image-slot如s22-hero-21x9errorS15/S16 图片格重生成图片必须用.frame-img.r-21x9铺满槽位禁止fit-contain和固定vh高度errorS22 主图必须使用s22-hero-21x9槽位禁止object-position: top center会裁脸推荐center 35%error可以看到校验器的规则与 references/swiss-layout-lock.md 中的「禁止清单」一一对应——文档里的每条硬规则脚本里都有对应的正则。黄金基准则是仓库内的 assets/template-swiss.htmlS01–S22 即从作者原始参考 PPT 快照的版式登记。第二层Playwright 真实渲染测量——M1 溢出与 M2 标题间距静态检查只能证明结构合规证明不了渲染出来不溢出。当环境中能解析到 Playwright 时脚本会额外启动 Chromium1600×900 视口软件渲染无需 GPU等待字体加载完成后对每一页做一次可见元素级的量化测量M1 DOM/visual overflow同时量scrollHeight溢出和最低可见元素越界量并附带问题元素的类名与文案标签如.kpi-hero 18%一眼定位是谁撑破了页面。M1 bottom whitespace底部空白超过 170px 且内容高度占比不足 74% 时警告——专治为了修溢出删掉一大块内容修出巨空的过修。M1 nav-safe内容最低点进入 93% 高的分页安全线时警告防止 caption、脚注碰到底部翻页组件。M2 title gap量出标题与下一块内容之间的实际距离大标题小于 32px、局部标题小于 14px 即警告防止标题和正文贴脸。测量前有一步很讲究的降噪装饰层ASCII 画布、颗粒层、点阵矩阵、fixed 定位元素、占页面 82% 以上的绝对定位背景都会被排除只统计真正承载信息的文字、图片、线条和色块——所以测出来的是视觉溢出不是 box model 的假阳性。若 Playwright 不可用脚本会跳过这一层并给出 warning静态检查照常执行属于优雅降级。第三层Overflow 修正阶梯——先量后改、不过修报错信息不只是超了还会按超出的像素数给出分档处理建议这是 references/checklist.md 中后验测量方法论的直接落地超出量脚本给出的修正档位1–40px只微调上移内容或收紧一处 gap/padding不要删内容40–90px局部压缩间距或降低一个模块高度仍优先保留内容90–160px轻微压标题或压缩一段正文必要时拆页160px 以上才考虑换更高容量版式、合并或删内容修完再跑一次脚本如果M1 bottom whitespace变大说明修过头了——恢复部分间距即可。这个测量 → 单档修正 → 复测的循环把版式调整从凭感觉改 margin变成了可收敛的工程过程。如何运行瑞士风 PPT 版式校验一条命令在 skill 根目录下执行将index.html换成你的 deck 文件node scripts/validate-swiss-deck.mjs path/to/index.html✅ 全部通过输出Swiss deck validation passed: 8 slide(s).❌ 存在 error逐条列出Slide 3 (S22): ...格式的问题并退出码 1可直接接进 CI 或 Agent 的交付前自检 实验版式追加--allow-experimental参数放行 P23/P24 结构正式演讲 deck 建议再配合另一条校验线node scripts/validate-presenter-mode.mjs path/to/index.htmlscripts/validate-presenter-mode.mjs 负责页面 ID 唯一性、演讲备注错位、时长预算等检查两者一个管版式、一个管演讲运行共同构成交付前质检。相关文件清单读懂整个校验体系文件作用scripts/validate-swiss-deck.mjs本文主角静态检查 Playwright 渲染测量references/swiss-layout-lock.md版式锁文档22 个登记版式、图片槽位规则、禁止清单assets/template-swiss.html瑞士风黄金模板golden sourcereferences/layouts-swiss.md22 个版式的骨架说明与类名速查references/themes-swiss.md4 套锚点色预设只能选不能自定义references/checklist.mdP0–P3 质量清单含 M1/M2 后验测量方法论scripts/validate-presenter-mode.mjs演讲者模式校验页面 ID、备注、时长SKILL.mdSkill 主文件完整工作流与瑞士风硬规则小结白名单锁版式S01–S22 登记制 data-layout强制声明从源头杜绝自创页面。渲染级量化M1 溢出/空白/安全线、M2 标题间距用真实浏览器测量代替肉眼猜。分档修正1–40 / 40–90 / 90–160 / 160 四档修正阶梯先量后改、不过修。这套文档规则 → 脚本校验 → 测量修复的闭环正是 guizang-ppt-skill 的瑞士风 PPT 能稳定还原设计感的关键把审美约束变成了可执行、可复测的工程约束。【免费下载链接】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 如何锁死瑞士风？validate-swiss-deck.mjs 版式校验系统深度拆解
guizang-ppt-skill 如何锁死瑞士风validate-swiss-deck.mjs 版式校验系统深度拆解【免费下载链接】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-skillguizang-ppt-skill 是一个生成单文件 HTML 网页 PPT 的 AI Agent 技能内置「电子杂志风」与「瑞士国际主义风」两套视觉系统。其中瑞士风的版式最讲究也最容易在 AI 生成时走样。为此项目内置了版式校验脚本 validate-swiss-deck.mjs通过静态结构检查 真实渲染测量两条腿把瑞士风 PPT 的每一页锁回 22 个登记版式。本文深度拆解这套版式校验系统的三层设计、测量指标与使用方法帮你理解 AI 生成的瑞士风网页 PPT 为什么能稳定好看。初印象guizang-ppt-skill 生成的网页 PPT 长什么样这个技能的核心能力是让 AI Agent 一次产出单文件 HTML 的横向翻页 PPTCSS、WebGL 背景、翻页逻辑、演讲者模式全部内置浏览器直接打开就能演示不需要服务器也不需要构建工具。两套风格分工明确风格视觉特征适合场景风格 A · 电子杂志 × 电子墨水衬线大标题 WebGL 流体背景 暖色人文分享、行业观察风格 B · 瑞士国际主义全程无衬线、12 列网格、直角纯色、1px 发丝线、极致字号对比科技产品、数据汇报、方法论风格 B 只允许从 4 套高饱和锚点色中四选一克莱因蓝 IKB、柠檬黄、柠檬绿、安全橙。仓库里自带的assets/screenshot-backgrounds/style-b/目录中就有对应主题的背景资产可以直观感受瑞士风的网格与点阵语言为什么要锁死瑞士风三类版式走样坑瑞士国际主义的美是结构化的美左对齐、吸附网格、单一锚点色。AI 生成时很容易出现看起来像瑞士风其实已经偏离原始模板的情况典型症状有三类发明未登记版式模板只登记了 S01–S22 共 22 个正文版式详见 references/swiss-layout-lock.md但 AI 可能顺手写出P23、Swiss Image Split这类自创页面破坏还原度。排版习惯入侵中文 PPT 常见的大标题居中、SVG 里写text标签都是瑞士风的禁忌——正文标题必须左对齐、SVG 只允许画几何线条。图片脱离槽位21:9 的主图被塞进固定高度的短槽、object-position: top center把人脸裁掉、同组图片比例混用……图文页是最容易崩的地方。光靠文档约束生成前硬规则还不够——AI 会遗忘。所以项目把规则做成了可执行的校验器交付前跑一遍脚本不合规的页面直接报错。validate-swiss-deck.mjs 版式校验系统三层防线校验脚本位于 scripts/validate-swiss-deck.mjs整体分成三层静态结构检查 → Playwright 真实渲染测量 → 量化修正阶梯。第一层静态结构校验——22 个登记版式白名单脚本先读取 HTML 文件、剥掉注释再用正则提取所有section classslide页面逐页执行以下检查违规记为 error拿不准的记为 warning检查项规则级别版式登记每页必须有data-layoutSxx且只能是 S01–S22 或封面/尾页专用版式SWISS-COVER-ASCII/SWISS-CLOSING-ASCIIerror实验结构拦截出现P23/P24、Swiss Image Split、Evidence Grid等未登记结构直接报错加--allow-experimental可放行error标题左对齐顶部标题区域出现text-align:center或align-self:center报错statement 类版式S03/S09/S10、封面/尾页豁免errorSVG 禁文字SVG 中出现可见text报错标签必须用 HTML 网格/卡片承载error图片槽位绑定每张images/本地图片必须写data-image-slot如s22-hero-21x9errorS15/S16 图片格重生成图片必须用.frame-img.r-21x9铺满槽位禁止fit-contain和固定vh高度errorS22 主图必须使用s22-hero-21x9槽位禁止object-position: top center会裁脸推荐center 35%error可以看到校验器的规则与 references/swiss-layout-lock.md 中的「禁止清单」一一对应——文档里的每条硬规则脚本里都有对应的正则。黄金基准则是仓库内的 assets/template-swiss.htmlS01–S22 即从作者原始参考 PPT 快照的版式登记。第二层Playwright 真实渲染测量——M1 溢出与 M2 标题间距静态检查只能证明结构合规证明不了渲染出来不溢出。当环境中能解析到 Playwright 时脚本会额外启动 Chromium1600×900 视口软件渲染无需 GPU等待字体加载完成后对每一页做一次可见元素级的量化测量M1 DOM/visual overflow同时量scrollHeight溢出和最低可见元素越界量并附带问题元素的类名与文案标签如.kpi-hero 18%一眼定位是谁撑破了页面。M1 bottom whitespace底部空白超过 170px 且内容高度占比不足 74% 时警告——专治为了修溢出删掉一大块内容修出巨空的过修。M1 nav-safe内容最低点进入 93% 高的分页安全线时警告防止 caption、脚注碰到底部翻页组件。M2 title gap量出标题与下一块内容之间的实际距离大标题小于 32px、局部标题小于 14px 即警告防止标题和正文贴脸。测量前有一步很讲究的降噪装饰层ASCII 画布、颗粒层、点阵矩阵、fixed 定位元素、占页面 82% 以上的绝对定位背景都会被排除只统计真正承载信息的文字、图片、线条和色块——所以测出来的是视觉溢出不是 box model 的假阳性。若 Playwright 不可用脚本会跳过这一层并给出 warning静态检查照常执行属于优雅降级。第三层Overflow 修正阶梯——先量后改、不过修报错信息不只是超了还会按超出的像素数给出分档处理建议这是 references/checklist.md 中后验测量方法论的直接落地超出量脚本给出的修正档位1–40px只微调上移内容或收紧一处 gap/padding不要删内容40–90px局部压缩间距或降低一个模块高度仍优先保留内容90–160px轻微压标题或压缩一段正文必要时拆页160px 以上才考虑换更高容量版式、合并或删内容修完再跑一次脚本如果M1 bottom whitespace变大说明修过头了——恢复部分间距即可。这个测量 → 单档修正 → 复测的循环把版式调整从凭感觉改 margin变成了可收敛的工程过程。如何运行瑞士风 PPT 版式校验一条命令在 skill 根目录下执行将index.html换成你的 deck 文件node scripts/validate-swiss-deck.mjs path/to/index.html✅ 全部通过输出Swiss deck validation passed: 8 slide(s).❌ 存在 error逐条列出Slide 3 (S22): ...格式的问题并退出码 1可直接接进 CI 或 Agent 的交付前自检 实验版式追加--allow-experimental参数放行 P23/P24 结构正式演讲 deck 建议再配合另一条校验线node scripts/validate-presenter-mode.mjs path/to/index.htmlscripts/validate-presenter-mode.mjs 负责页面 ID 唯一性、演讲备注错位、时长预算等检查两者一个管版式、一个管演讲运行共同构成交付前质检。相关文件清单读懂整个校验体系文件作用scripts/validate-swiss-deck.mjs本文主角静态检查 Playwright 渲染测量references/swiss-layout-lock.md版式锁文档22 个登记版式、图片槽位规则、禁止清单assets/template-swiss.html瑞士风黄金模板golden sourcereferences/layouts-swiss.md22 个版式的骨架说明与类名速查references/themes-swiss.md4 套锚点色预设只能选不能自定义references/checklist.mdP0–P3 质量清单含 M1/M2 后验测量方法论scripts/validate-presenter-mode.mjs演讲者模式校验页面 ID、备注、时长SKILL.mdSkill 主文件完整工作流与瑞士风硬规则小结白名单锁版式S01–S22 登记制 data-layout强制声明从源头杜绝自创页面。渲染级量化M1 溢出/空白/安全线、M2 标题间距用真实浏览器测量代替肉眼猜。分档修正1–40 / 40–90 / 90–160 / 160 四档修正阶梯先量后改、不过修。这套文档规则 → 脚本校验 → 测量修复的闭环正是 guizang-ppt-skill 的瑞士风 PPT 能稳定还原设计感的关键把审美约束变成了可执行、可复测的工程约束。【免费下载链接】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），仅供参考
