给旧幻灯片做微创手术Frontend Slides增强模式的防溢出修改规则与技巧【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slidesFrontend Slides 是一款面向编码代理coding agent的开源前端技能能把内容或 PowerPoint 文件变成零依赖、单文件的 HTML 幻灯片。它最贴心的设计之一是内置了增强模式Mode C——专门用来安全地修改旧幻灯片核心就是一套防溢出修改规则不重排、不缩放、不破坏 16:9 画布改动之后依然整整齐齐。如果你用 AI 生成过幻灯片多半遇到过这样的翻车现场往一页里多加两段话文字直接溢出卡片补一张图整页挤成豆腐脑。本文就带你读懂 Frontend Slides 增强模式的 5 条修改规则和防溢出技巧让旧幻灯片动刀不动形。✂️一、为什么旧幻灯片需要微创手术Frontend Slides 生成的幻灯片遵循一条铁律固定 16:9 舞台。每一页都写死在 1920×1080 的画布上整个舞台作为整体等比缩放来适配浏览器窗口而不是让内容随屏幕重新排版。这条规则写在核心文件 viewport-base.css 中第 27-36 行的.deck-stage就是那个 1920×1080 的舞台完整规则可参考 SKILL.md。这意味着两件事页面没有滚动条、不会自动换行救场内容一旦超量直接溢出边界修改旧页时你不是在追加内容而是在一块空间固定的画布上做预算分配。所以 Frontend Slides 把修改旧演示文稿单独定义为 Phase 0 的 Mode C增强模式——先读、先理解、再动手并且必须遵守专门的修改规则。二、先搞懂舞台机制防溢出就成功了一半动手之前花两分钟理解这三个角色来源viewport-base.css角色类名作用视口.deck-viewport占满浏览器窗口锁死溢出舞台.deck-stage固定 1920×1080 的设计画布整体缩放单页.slide绝对定位铺满舞台一页一块16:9 画板舞台的缩放逻辑很简单就是取窗口宽高的较小比例做一次scale()代码见 html-template.md。还有一个容易踩的坑翻页不能用display: none / display: block切换因为后面的布局类比如.slide-content { display: flex; }可能把它覆盖掉导致所有页面同时可见。正确做法是用.active/.visible配合visibility、opacity、pointer-events来控制这套基类已在 viewport-base.css 中写死。三、增强模式的 5 条防溢出修改规则SKILL.md 中明确写道增强现有演示文稿时固定舞台的适配是最大的风险。 为此给出 5 条规则规则 1加内容前先数一数已有元素在往任何一页塞新东西之前先盘点这一页已经有什么对照密度上限核对空间。这一步能帮你提前发现这页已经满了而不是改完才发现溢出。规则 2加图片先确认画布装得下图片必须完整落在 1920×1080 画布内。如果这一页已经接近内容上限拆成两页而不是把图硬挤进来。原文的要求很直接Never add images without checking if existing content already fills the 1920×1080 slide stage不要在不确认现有内容是否已填满舞台的情况下添加图片。规则 3加文字每页最多 4-6 条要点超过上限就拆成续页continuation slide。宁可多一页不可挤一页——这是整个防溢出体系里成本最低、收益最高的策略。规则 4任何修改后必须做双重验证改完之后逐项检查舞台是否仍保持 16:9文字是否溢出所在卡片面板之间是否互相重叠在1280×720 桌面视口 一个手机视口下截图肉眼确认效果正确。规则 5主动重组别等用户开口如果预判修改会导致溢出就主动把内容拆分到新页并告知用户而不是等渲染翻车后再补救。这一条体现的是微创的核心思想先规划切口再下刀。四、防溢出技巧密度模式决定能塞多少Frontend Slides 在设计阶段就会询问你选哪种密度模式SKILL.md 第 54-63 行修改旧页时同样适用密度模式适用场景每页容量低密度 / 演讲型现场演讲、发布会每页 1 个核心观点最多 1-3 条要点大字留白高密度 / 阅读型报告、内部文档、异步传阅结构化网格/表格每页 4-6 条要点或 4-6 张卡片两条底线无论哪种模式都成立不滚动、不溢出、不重叠、文字不缩到难以阅读。如果内容超量正确动作是拆页而不是把字号越缩越小。一个实用判断口诀先减内容再拆页面最后才谈缩字号。缩字号应该是救火不是方案。五、验证时别只信 scrollHeightFrontend Slides 在 SKILL.md 中特别提醒了一个隐蔽陷阱只检查scrollHeight是不够的——网格面板可能在数值上没溢出却在视觉上互相盖住grid panels can visually cover each other。所以官方要求的验证手段是在真实浏览器里截图检查桌面和手机各看一遍。改完想留一份术后病历可以用仓库自带的导出脚本把每页按 1920×1080 截图合成 PDF逐页核对scripts/export-pdf.sh。六、两个进阶小坑负号不能直接加在 CSS 函数前-clamp(28px, 3.5vw, 44px)会被浏览器静默忽略没有任何报错必须写成calc(-1 * clamp(28px, 3.5vw, 44px))。这个隐形炸弹的详细说明在 STYLE_PRESETS.md。保留无障碍与动效开关prefers-reduced-motion支持已包含在 viewport-base.css 中修改样式时别顺手删掉它。七、相关资源速查文件用途SKILL.md核心工作流与 Mode C 修改规则viewport-base.css必须完整包含的固定舞台基类 CSShtml-template.mdHTML 结构与舞台缩放 JS 实现STYLE_PRESETS.md12 套视觉预设与常见 CSS 陷阱animation-patterns.md动画片段与效果-情绪对照表scripts/export-pdf.sh逐页导出 PDF用于修改后核对写在最后给旧幻灯片做微创手术的关键不是手快而是先看懂三样东西1920×1080 的固定舞台、密度上限、双重视口验证。把 Frontend Slides 增强模式的 5 条规则当成术前检查单你的每一次改动都会像专业医生一样——切口小、出血少、恢复快。✅【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考