AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载导读本篇技术指南以 bold-template-pack 中 Editorial Forest 模板的预览卡为核心完整拆解这套文学季刊 / 艺术书专著气质的衬线编辑风演示系统从选择元数据、预览配料、预览规则到其完整设计文档design.md、固定 1920×1080 舞台渲染机制deck-stage.js与强制基础样式viewport-base.css。读完你将掌握Editorial Forest 模板在 frontend-slides 渐进式风格发现流程中的定位与用法、其三色纸感配色的全部设计令牌、Source Serif 4 JetBrains Mono 的双字体角色分工以及如何在固定舞台模型下生成真实、可导出、支持中文内容的幻灯片。一、Editorial Forest 是什么一张面向风格发现的轻量预览卡Editorial Forest 是 bold-template-pack收录 34 个美丽 HTML 模板设计系统中的一员位于 bold-template-pack/templates/editorial-forest/preview.md。这个文件在项目中的定位非常明确——它不是完整的布局规范而是一张preview card预览卡仅用于生成候选模板的标题页预览。该设计在整个 skill 中遵循渐进式披露原则见 SKILL.md Core Principles 第 4 条与 bold-template-pack/README.md 的 What To Read 流程先生成预览时不读全部design.md只读候选模板的preview.md通过 selection-index.json 中的preview_md字段指向用户选定该模板后才读取其完整design.md按设计配方生成全套幻灯片。因此 preview.md 的开头便明确了它的边界Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.本小文件仅供标题页预览使用最终 deck 生成请阅读下文列出的完整设计文档。从代码结构看selection-index.json将 Editorial Forest 的preview_md与design_md明确分离selection-index.json正是对这种先预览、后细读工作流的落地。二、选择元数据何时该选、何时该避开预览卡的 Selection Metadata 段落提供了一组机器可读的选择信号与selection-index.json中该模板的条目一致selection-index.json。这些元数据是 Agent 在 Phase 2 风格发现阶段做初筛的依据。元数据取值含义Slugeditorial-forest模板的唯一标识也是目录名TaglineForest green, dusty pink, and warm cream meet Source Serif 4 in a quiet, intentional quarterly-review deck.一句话定位深林绿、灰粉、暖奶油色 × Source Serif 4安静克制的季度复盘型 deckMoodeditorial, quiet, considered, warm, intentional编辑风、安静、深思、温暖、刻意Toneliterary, thoughtful, warm, low-pressure文学、深思、温暖、低压Formalitymedium中等正式度Densitymedium中等密度Schememixed混合明暗方案绿面/奶面交替Best for季度复盘、内部汇报、工作室更新、创意代理演示以及一切希望温暖而不匆忙而非企业化的场合——研究总结、书籍或项目公告、团队回顾适合需要深思熟虑的编辑感的内容Avoid for需要紧迫、冲击力或销售驱动的场合——它的色板与节奏刻意保持安静不适合快节奏推销型场景这些字段的用法在 bold-template-pack/README.md 中有明确约定初筛只使用元数据mood、tone、best_for、avoid_for、formality、density、scheme做候选排序best_for应视为软性信号而非严格行业过滤器见 SKILL.md Bold template selection rules。三、视觉快照系统的设计内核预览卡的 Visual Snapshot 段落给出了系统的核心设计语言可概括为三点单一自信的衬线声音显示排版全部使用Source Serif 4字重 500并启用光学尺寸轴optical-size axis封面与统计数字时刻字号可达220px。字重 500 是该系统最具辨识度的选择——比常规的 400 更显被书写过的分量又比 700 更轻盈、保持页面安静。等宽字体作为编辑式铬件JetBrains Mono 承担标签、题注、坐标轴刻度、页脚行的全部chrome角色永远以大写 宽字距0.14em–0.18em出现。严格的三色纸感板式深林绿#2e4a2a 灰玫瑰粉#e89cb1 燕麦奶油纸底#efe7d4。美学参照系是 Penguin 经典封面、Apartamento 杂志版面或安静的年度报告——更像印刷品而非科技主题演讲。设计文档 design.md 的 Overview 进一步解释整套系统永不混入第三种字体衬线与等宽的职责反转常规是无衬线做 chrome、衬线做正文这里是等宽做 chrome、衬线做正文与显示。四、预览配料可直接复用的设计令牌Preview Ingredients 段落是生成标题页预览时唯一需要的配方摘要它给出完整色板8 色令牌色值角色green#2E4A2A深林主绿系统最醒目的表面green-deep#243A21深绿用于粉面上的文字对比green-lite#3A5A36浅绿作为第二种绿色填充pink#E89CB1灰玫瑰粉主强调色pink-deep#D27E96深玫瑰粉面同色边框用cream#EFE7D4燕麦纸底默认非封面背景cream-2#E6DCC4略深的奶油奶油面上的瓦片填充ink#1A1A17暖近黑正文色排版预览阶段明确标注 JetBrains Monochrome 角色衬线侧由 Source Serif 4 承担。五条 Signature moves签名动作生成预览时不可省略三色编辑色板深林绿 灰玫瑰粉 燕麦奶油纸。每页两种表面色为常态三种即算喧闹所有标题、正文、显示时刻均为 Source Serif 4 字重 500启用光学尺寸轴获得随字号变化的字形所有标签、题注、坐标刻度、页脚行均为 JetBrains Mono 字重 500 大写 0.14em–0.18em 宽字距显示字号阶梯封面与统计数字 220px、主标题 96px、卡片标题 56–84px2px 细线分隔堆叠区块——绝不更粗颜色不超出所在区域的强调色。五、中文 / CJK 内容预览注意事项由于 preview.md 明确说明选定后再阅读完整 design.md 的 CJK 章节预览阶段只保留三条通用规则中文等 CJK 文本字距保持 0放宽行高不要对 CJK 文本做 uppercase 变换精确的中文字体配对与脚本级调整使用 design.md 的完整 CJK 章节。完整 CJK 策略在正式生成阶段生效会在后文用户选定后的纵深展开一节详解。六、预览规则从风格卡到真实标题页的工作约束Preview Rules 是 preview.md 中约束 Agent 行为的关键段落属于不可协商的硬规则其内容与 SKILL.md 的 Preview authenticity rules 相互印证。核心约束如下只构建一张 1920×1080 标题页位于固定舞台模型内保留色板、类型角色、表面节奏与装饰词汇使用用户真实的标题/副标题/上下文禁止复制演示内容渲染结果必须看起来像真实的第一页幻灯片而非模板选择卡严禁在幻灯片上放置内部流程文本preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、源文档标签一律禁止严禁在幻灯片上出现模板名或 slug模板名只能出现在与用户的对话消息中严禁放置用户需求备注如想要的气质、受众、内部用途标签除非用户明确要求这些词出现在 deck 中可见 chrome 只能使用真实 deck 内容deck 标题、真实章节标题、日期、作者、公司、页码或用户材料中的真实内容短语不得读取template.html生成预览不得读取其他模板的design.md用户选定该模板后、生成正式幻灯片之前必须先读完整设计文档。这些规则的目的是防止模板选择卡泄漏进成品幻灯片保证三个候选预览1 个安全预设 至少 1 个 bold 模板 1 个 wildcard见 SKILL.md Phase 2 的 Preview mix rules在视觉上都像用户 deck 的真实首页。七、渲染环境固定 1920×1080 舞台与 deck-stage.jspreview.md 要求预览位于固定舞台模型内fixed-stage model这正是 frontend-slides 的第五大不可协商原则SKILL.md每个 deck 都使用 1920×1080 的幻灯片画布整体缩放适配视口包括手机在内所有屏幕保持 16:9。7.1 舞台缩放原理deck-stage.js 是实现这一策略的运行时依赖。其核心逻辑设计画布默认 1920×1080DESIGN_W_DEFAULT 1920; DESIGN_H_DEFAULT 1080缩放计算在_fit()中完成scale Math.min(vw / designWidth, vh / designHeight)然后对画布执行transform: scale(s)deck-stage.js设置noscale属性则按 1:1 渲染供 PPTX 导出器做 DOM 捕获幻灯片保持visibility: hiddenopacity: 0而非卸载导航时通过data-deck-active切换保留视频、iframe、表单等状态deck-stage.js。7.2 打印与导出media print规则把每张幻灯片按设计尺寸平铺为一页page size: 1920px 1080px; margin: 0使浏览器打印 → 存为 PDF无需额外设置即可得到一页一屏的干净 PDFdeck-stage.js 与 #L389-L405。这也解释了 design.md 中系统按 16:9 比例干净导出 PDF的结论。7.3 强制基础样式最终输出必须是单一自包含 HTML 文件并完整包含 viewport-base.css 的内容。该文件锁定了浏览器视口、定义了.deck-viewport与 1920×1080 的.deck-stage、用.slide.active/.visible控制切换禁用display:none并同样内置了media print与prefers-reduced-motion支持。八、用户选定后的纵深展开完整设计文档要点当用户选定 Editorial Forest 后正式生成依据的是完整设计文档 design.md。以下是对 preview.md 各预览配料的完整展开生成阶段必读。8.1 色彩默认值与纪律默认背景内容密集页用 cream#efe7d4封面、陈述数据、总结页用 green#2e4a2a奶面上的标题用 green、正文用 ink绿面上的主标题用 cream、hero 级标题用 pink、正文用 cream粉面上的标题与正文用 green-deep默认规则色随区域强调色走奶面绿线、绿面粉线、粉面深绿线瓦片填充默认在四种之间轮转solid green配粉字、solid pink配深绿字、green-lite配粉字、cream-2 2px 绿边框配绿字。禁止引入第四色系黄、蓝、额外玫瑰对比工作交给填充 vs 描边完成。8.2 排版阶梯Typography Scale完整设计文档用一张令牌表定义了全系统的字号阶梯生成时必须从阶梯取值、禁止自造字号令牌字号字重用途display-hero220px500封面/结尾级大标题display140px500大引语/核心观点陈述headline-xl96px500奶面主章节标题headline84px500绿面主章节标题headline-sm80px500统计行导语标题title-card-lg / title-card / title-card-sm84 / 68 / 56px500主题瓦片/步骤瓦片标题stat-figure / stat-figure-unit220 / 110px500KPI 数字与单位body-lg / body / body-card32 / 30 / 26px400正文正文必须 400500 会显重label / label-tight / caption-mono26 / 26 / 24px5000.14–0.18em 大写顶栏标签、脚注、瓦片序号axis-mono26px5000.08em图表轴刻度签名处理非可选所有 mono 元素必须大写且字距 ≥0.08em所有衬线显示元素必须负字距-0.01em 至 -0.03em显示标题行高 0.92–1.02正文用字重 400每页必须有顶栏topbar区块分隔细线永远是 2px solid——不用 1px像网页应用、不用 3px像海报。系统不出现斜体与下划线强调靠字号与颜色对比完成。8.3 布局、间距与组件画布固定 1920×1080幻灯片为精确尺寸的section页边距阶梯default 96×120px、narrow 100×120px、wide 100×140px、statement 130×160px每页至少一个topbar左侧 mono label右侧 monogram-circle 或 mono 计数器/定位串内容密集页还带绝对定位的footline底部 60–80px 处的 mono 题注行圆角体系2px图例色块、3px 3px 0 0条形图顶部、6pxtopic tile、8pxstep tile、50%monogram circle唯一全圆形状主要组件130px 描边粉线的 monogram-circle身份印章、topic tile、step tile、KPI 块24px mono 标签 220px 衬线数字 30px 描述、56px 宽条形图、三分栏 meta-dl 定义列表、图例行。8.4 深度与纸感系统完全没有阴影——无 box-shadow、无发光、无渐变、无叠加层。层级完全靠色块对比、2px 细线与填充 vs 描边表达。设计文档明确写道加上box-shadow: 0 4px 12px rgba(0,0,0,0.1)就会粉碎编辑感表面色必须是实色禁止 rgba 透明度。8.5 Dos and Donts 摘要Do显示标题一律衬线 500 负字距 紧凑行高所有 chrome 一律等宽大写加宽字距每页放 topbar每页只选一个主导表面色两种为上限瓦片网格轮转填充用 2px 细线分隔堆叠区块内容允许时大胆放大显示字号140–220px页边距保持 96–160pxmonogram-circle 只用于封面与总结页。Dont不加阴影不引入第三种字体不用斜体/下划线等宽不许小写或无字距不引入第四色系不用 4px 重边框或 1px 细线一页不堆两个竞争内容块不用 rgba 表面色正文不跑 500 字重不省略 topbar。8.6 响应式与 CJK响应式这是一个固定像素系统无 media query、无断点、无流式尺寸。缩放完全交给deck-stage.js导航亦由其包装层提供组件内部无内联键盘处理器。1920px 下的 2px 边框在 960px 视口会呈现为 1px——在系统容差内可接受。中文配对显示标题用霞鹜文楷 LXGW WenKaiNoto Serif SC 回退正文用思源宋体 Noto Serif SC统计数字用 Noto Serif SC 700mono chrome 用 Noto Sans Mono CJK SC。采用Strategy C保留 Source Serif 4 处理拉丁字符CJK 逐字形回退到中文字体font-family 栈为font-family: Source Serif 4, Source Serif Pro, LXGW WenKai TC, Noto Serif SC, Georgia, serif;通用 CJK 调整行高放宽 0.05–0.08显示 1.0–1.1、正文 1.5–1.6CJK 标题字距归 0必要时 0.02emCJK 禁用 uppercase中文句内用全角标点CJK 标题结尾不加句号CJK 与拉丁交界处应用盘古之白Pangu spacing同一句子内不混用两种中文字体。已知缝合点96px 霞鹜文楷标题与 30px 思源宋体正文之间存在笔画对比差异属系统最大 CJK 接缝封面上值得人工检查。8.7 迭代指南与已知缺口design.md 的 Iteration Guide 提供了十条迭代规则新标题走显示阶梯、新 chrome 走等宽阶梯、每页加 topbar、新卡片只允许 6px/8px 圆角、分隔线恒为 2px、新填充必须来自现有色板、正文恒为 400、KPI 恒为 220px、图表用粉/奶油/绿条形 mono 轴、拿不准时更少元素更大字号。**已知缺口Known Gaps**同样值得在集成时注意画布缩放与导航依赖deck-stage.js该脚本不在 design.md 内描述属于运行时依赖Source Serif 4 与 JetBrains Mono 经 Google Fontslink加载离线渲染会回退到 Georgia/Menlo丢失光学尺寸轴与等宽身份离线/打印场景建议自托管字体条形图使用手工设置的百分比高度相对 520px 绘图区无数据绑定扩展图表需手工计算高度monogram-circle、脚注字符串与瓦片计数为硬编码文本每个 deck 需按实际身份替换无media print与响应式断点固定 1920×1080green-on-pink 与 pink-on-green 的对比度在 84px 显示字号下足够但在正文字号下不满足 WCAG AA——26px 小字不要放在粉绿互搭上应保持 cream-on-green 或 ink-on-cream。九、端到端使用流程速览把上述内容串起来Editorial Forest 在 frontend-slides 中的完整调用链是风格发现阶段读取 selection-index.json按元数据初筛出 Editorial Forest 作为 bold 候选混合方案1 安全预设 1 bold 模板 1 wildcard预览阶段只读取本预览卡 preview.md按预览配料 预览规则生成一张 1920×1080 的真实标题页保存到.frontend-slides/slide-previews/并自动打开给用户用户选定后读取 design.md 作为设计配方输出单一自包含 HTML 文件完整内联 viewport-base.css按完整设计文档实现色板、排版、组件、CJK 策略并依赖 deck-stage.js 完成缩放与导航验证与交付核对文本溢出与面板重叠scrollHeight检查不足网格面板可能互相遮盖用浏览器打开交付并可通过 export-pdf.sh 或 PPTX 转换脚本extract-pptx.py完成导出。这套轻量预览卡 → 完整设计文档 → 固定舞台渲染的三段式结构保证了用户在看到真实风格之前不会被迫做抽象选择也保证了最终 deck 始终落在 frontend-slides 的 1920×1080 固定舞台上——正是 Editorial Forest 这套安静、深思、有印刷质感的编辑风系统能够稳定复现的原因。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐OfficeCLI morph-ppt 风格实战Pink Editorial — Gradient Stats 数据编辑风渐变统计演示文稿设计指南OfficeCLI morph ppt 风格实战Pink Editorial — Gradient Stats 数据编辑风渐变统计演示文稿设计指南 本文是 i人工智能AI 应用AI 技能CLIMCP 服务Klavis Google Slides MCP Server 实战指南基于 MCP 协议创建、编辑与管理演示文稿Klavis Google Slides MCP Server 实战指南基于 MCP 协议创建、编辑与管理演示文稿 本篇技术指南聚焦于 Klavis 仓库中开AI 应用LLM 网关MCP 服务工具调用Shoelace代码示例实时编辑与预览系统完整指南Shoelace代码示例实时编辑与预览系统完整指南 Shoelace组件库提供了强大的实时编辑与预览系统让开发者能够直观地体验和学习Web ComponenUI组件前端上一篇如何轻松解锁加密音乐文件Unlock Music Electron终极指南下一篇终极音乐解锁指南3分钟掌握Unlock Music Electron免费工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Editorial Forest 模板指南：基于 frontend-slides 固定舞台的衬线编辑风演示系统与预览卡实现
AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载导读本篇技术指南以 bold-template-pack 中 Editorial Forest 模板的预览卡为核心完整拆解这套文学季刊 / 艺术书专著气质的衬线编辑风演示系统从选择元数据、预览配料、预览规则到其完整设计文档design.md、固定 1920×1080 舞台渲染机制deck-stage.js与强制基础样式viewport-base.css。读完你将掌握Editorial Forest 模板在 frontend-slides 渐进式风格发现流程中的定位与用法、其三色纸感配色的全部设计令牌、Source Serif 4 JetBrains Mono 的双字体角色分工以及如何在固定舞台模型下生成真实、可导出、支持中文内容的幻灯片。一、Editorial Forest 是什么一张面向风格发现的轻量预览卡Editorial Forest 是 bold-template-pack收录 34 个美丽 HTML 模板设计系统中的一员位于 bold-template-pack/templates/editorial-forest/preview.md。这个文件在项目中的定位非常明确——它不是完整的布局规范而是一张preview card预览卡仅用于生成候选模板的标题页预览。该设计在整个 skill 中遵循渐进式披露原则见 SKILL.md Core Principles 第 4 条与 bold-template-pack/README.md 的 What To Read 流程先生成预览时不读全部design.md只读候选模板的preview.md通过 selection-index.json 中的preview_md字段指向用户选定该模板后才读取其完整design.md按设计配方生成全套幻灯片。因此 preview.md 的开头便明确了它的边界Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.本小文件仅供标题页预览使用最终 deck 生成请阅读下文列出的完整设计文档。从代码结构看selection-index.json将 Editorial Forest 的preview_md与design_md明确分离selection-index.json正是对这种先预览、后细读工作流的落地。二、选择元数据何时该选、何时该避开预览卡的 Selection Metadata 段落提供了一组机器可读的选择信号与selection-index.json中该模板的条目一致selection-index.json。这些元数据是 Agent 在 Phase 2 风格发现阶段做初筛的依据。元数据取值含义Slugeditorial-forest模板的唯一标识也是目录名TaglineForest green, dusty pink, and warm cream meet Source Serif 4 in a quiet, intentional quarterly-review deck.一句话定位深林绿、灰粉、暖奶油色 × Source Serif 4安静克制的季度复盘型 deckMoodeditorial, quiet, considered, warm, intentional编辑风、安静、深思、温暖、刻意Toneliterary, thoughtful, warm, low-pressure文学、深思、温暖、低压Formalitymedium中等正式度Densitymedium中等密度Schememixed混合明暗方案绿面/奶面交替Best for季度复盘、内部汇报、工作室更新、创意代理演示以及一切希望温暖而不匆忙而非企业化的场合——研究总结、书籍或项目公告、团队回顾适合需要深思熟虑的编辑感的内容Avoid for需要紧迫、冲击力或销售驱动的场合——它的色板与节奏刻意保持安静不适合快节奏推销型场景这些字段的用法在 bold-template-pack/README.md 中有明确约定初筛只使用元数据mood、tone、best_for、avoid_for、formality、density、scheme做候选排序best_for应视为软性信号而非严格行业过滤器见 SKILL.md Bold template selection rules。三、视觉快照系统的设计内核预览卡的 Visual Snapshot 段落给出了系统的核心设计语言可概括为三点单一自信的衬线声音显示排版全部使用Source Serif 4字重 500并启用光学尺寸轴optical-size axis封面与统计数字时刻字号可达220px。字重 500 是该系统最具辨识度的选择——比常规的 400 更显被书写过的分量又比 700 更轻盈、保持页面安静。等宽字体作为编辑式铬件JetBrains Mono 承担标签、题注、坐标轴刻度、页脚行的全部chrome角色永远以大写 宽字距0.14em–0.18em出现。严格的三色纸感板式深林绿#2e4a2a 灰玫瑰粉#e89cb1 燕麦奶油纸底#efe7d4。美学参照系是 Penguin 经典封面、Apartamento 杂志版面或安静的年度报告——更像印刷品而非科技主题演讲。设计文档 design.md 的 Overview 进一步解释整套系统永不混入第三种字体衬线与等宽的职责反转常规是无衬线做 chrome、衬线做正文这里是等宽做 chrome、衬线做正文与显示。四、预览配料可直接复用的设计令牌Preview Ingredients 段落是生成标题页预览时唯一需要的配方摘要它给出完整色板8 色令牌色值角色green#2E4A2A深林主绿系统最醒目的表面green-deep#243A21深绿用于粉面上的文字对比green-lite#3A5A36浅绿作为第二种绿色填充pink#E89CB1灰玫瑰粉主强调色pink-deep#D27E96深玫瑰粉面同色边框用cream#EFE7D4燕麦纸底默认非封面背景cream-2#E6DCC4略深的奶油奶油面上的瓦片填充ink#1A1A17暖近黑正文色排版预览阶段明确标注 JetBrains Monochrome 角色衬线侧由 Source Serif 4 承担。五条 Signature moves签名动作生成预览时不可省略三色编辑色板深林绿 灰玫瑰粉 燕麦奶油纸。每页两种表面色为常态三种即算喧闹所有标题、正文、显示时刻均为 Source Serif 4 字重 500启用光学尺寸轴获得随字号变化的字形所有标签、题注、坐标刻度、页脚行均为 JetBrains Mono 字重 500 大写 0.14em–0.18em 宽字距显示字号阶梯封面与统计数字 220px、主标题 96px、卡片标题 56–84px2px 细线分隔堆叠区块——绝不更粗颜色不超出所在区域的强调色。五、中文 / CJK 内容预览注意事项由于 preview.md 明确说明选定后再阅读完整 design.md 的 CJK 章节预览阶段只保留三条通用规则中文等 CJK 文本字距保持 0放宽行高不要对 CJK 文本做 uppercase 变换精确的中文字体配对与脚本级调整使用 design.md 的完整 CJK 章节。完整 CJK 策略在正式生成阶段生效会在后文用户选定后的纵深展开一节详解。六、预览规则从风格卡到真实标题页的工作约束Preview Rules 是 preview.md 中约束 Agent 行为的关键段落属于不可协商的硬规则其内容与 SKILL.md 的 Preview authenticity rules 相互印证。核心约束如下只构建一张 1920×1080 标题页位于固定舞台模型内保留色板、类型角色、表面节奏与装饰词汇使用用户真实的标题/副标题/上下文禁止复制演示内容渲染结果必须看起来像真实的第一页幻灯片而非模板选择卡严禁在幻灯片上放置内部流程文本preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、源文档标签一律禁止严禁在幻灯片上出现模板名或 slug模板名只能出现在与用户的对话消息中严禁放置用户需求备注如想要的气质、受众、内部用途标签除非用户明确要求这些词出现在 deck 中可见 chrome 只能使用真实 deck 内容deck 标题、真实章节标题、日期、作者、公司、页码或用户材料中的真实内容短语不得读取template.html生成预览不得读取其他模板的design.md用户选定该模板后、生成正式幻灯片之前必须先读完整设计文档。这些规则的目的是防止模板选择卡泄漏进成品幻灯片保证三个候选预览1 个安全预设 至少 1 个 bold 模板 1 个 wildcard见 SKILL.md Phase 2 的 Preview mix rules在视觉上都像用户 deck 的真实首页。七、渲染环境固定 1920×1080 舞台与 deck-stage.jspreview.md 要求预览位于固定舞台模型内fixed-stage model这正是 frontend-slides 的第五大不可协商原则SKILL.md每个 deck 都使用 1920×1080 的幻灯片画布整体缩放适配视口包括手机在内所有屏幕保持 16:9。7.1 舞台缩放原理deck-stage.js 是实现这一策略的运行时依赖。其核心逻辑设计画布默认 1920×1080DESIGN_W_DEFAULT 1920; DESIGN_H_DEFAULT 1080缩放计算在_fit()中完成scale Math.min(vw / designWidth, vh / designHeight)然后对画布执行transform: scale(s)deck-stage.js设置noscale属性则按 1:1 渲染供 PPTX 导出器做 DOM 捕获幻灯片保持visibility: hiddenopacity: 0而非卸载导航时通过data-deck-active切换保留视频、iframe、表单等状态deck-stage.js。7.2 打印与导出media print规则把每张幻灯片按设计尺寸平铺为一页page size: 1920px 1080px; margin: 0使浏览器打印 → 存为 PDF无需额外设置即可得到一页一屏的干净 PDFdeck-stage.js 与 #L389-L405。这也解释了 design.md 中系统按 16:9 比例干净导出 PDF的结论。7.3 强制基础样式最终输出必须是单一自包含 HTML 文件并完整包含 viewport-base.css 的内容。该文件锁定了浏览器视口、定义了.deck-viewport与 1920×1080 的.deck-stage、用.slide.active/.visible控制切换禁用display:none并同样内置了media print与prefers-reduced-motion支持。八、用户选定后的纵深展开完整设计文档要点当用户选定 Editorial Forest 后正式生成依据的是完整设计文档 design.md。以下是对 preview.md 各预览配料的完整展开生成阶段必读。8.1 色彩默认值与纪律默认背景内容密集页用 cream#efe7d4封面、陈述数据、总结页用 green#2e4a2a奶面上的标题用 green、正文用 ink绿面上的主标题用 cream、hero 级标题用 pink、正文用 cream粉面上的标题与正文用 green-deep默认规则色随区域强调色走奶面绿线、绿面粉线、粉面深绿线瓦片填充默认在四种之间轮转solid green配粉字、solid pink配深绿字、green-lite配粉字、cream-2 2px 绿边框配绿字。禁止引入第四色系黄、蓝、额外玫瑰对比工作交给填充 vs 描边完成。8.2 排版阶梯Typography Scale完整设计文档用一张令牌表定义了全系统的字号阶梯生成时必须从阶梯取值、禁止自造字号令牌字号字重用途display-hero220px500封面/结尾级大标题display140px500大引语/核心观点陈述headline-xl96px500奶面主章节标题headline84px500绿面主章节标题headline-sm80px500统计行导语标题title-card-lg / title-card / title-card-sm84 / 68 / 56px500主题瓦片/步骤瓦片标题stat-figure / stat-figure-unit220 / 110px500KPI 数字与单位body-lg / body / body-card32 / 30 / 26px400正文正文必须 400500 会显重label / label-tight / caption-mono26 / 26 / 24px5000.14–0.18em 大写顶栏标签、脚注、瓦片序号axis-mono26px5000.08em图表轴刻度签名处理非可选所有 mono 元素必须大写且字距 ≥0.08em所有衬线显示元素必须负字距-0.01em 至 -0.03em显示标题行高 0.92–1.02正文用字重 400每页必须有顶栏topbar区块分隔细线永远是 2px solid——不用 1px像网页应用、不用 3px像海报。系统不出现斜体与下划线强调靠字号与颜色对比完成。8.3 布局、间距与组件画布固定 1920×1080幻灯片为精确尺寸的section页边距阶梯default 96×120px、narrow 100×120px、wide 100×140px、statement 130×160px每页至少一个topbar左侧 mono label右侧 monogram-circle 或 mono 计数器/定位串内容密集页还带绝对定位的footline底部 60–80px 处的 mono 题注行圆角体系2px图例色块、3px 3px 0 0条形图顶部、6pxtopic tile、8pxstep tile、50%monogram circle唯一全圆形状主要组件130px 描边粉线的 monogram-circle身份印章、topic tile、step tile、KPI 块24px mono 标签 220px 衬线数字 30px 描述、56px 宽条形图、三分栏 meta-dl 定义列表、图例行。8.4 深度与纸感系统完全没有阴影——无 box-shadow、无发光、无渐变、无叠加层。层级完全靠色块对比、2px 细线与填充 vs 描边表达。设计文档明确写道加上box-shadow: 0 4px 12px rgba(0,0,0,0.1)就会粉碎编辑感表面色必须是实色禁止 rgba 透明度。8.5 Dos and Donts 摘要Do显示标题一律衬线 500 负字距 紧凑行高所有 chrome 一律等宽大写加宽字距每页放 topbar每页只选一个主导表面色两种为上限瓦片网格轮转填充用 2px 细线分隔堆叠区块内容允许时大胆放大显示字号140–220px页边距保持 96–160pxmonogram-circle 只用于封面与总结页。Dont不加阴影不引入第三种字体不用斜体/下划线等宽不许小写或无字距不引入第四色系不用 4px 重边框或 1px 细线一页不堆两个竞争内容块不用 rgba 表面色正文不跑 500 字重不省略 topbar。8.6 响应式与 CJK响应式这是一个固定像素系统无 media query、无断点、无流式尺寸。缩放完全交给deck-stage.js导航亦由其包装层提供组件内部无内联键盘处理器。1920px 下的 2px 边框在 960px 视口会呈现为 1px——在系统容差内可接受。中文配对显示标题用霞鹜文楷 LXGW WenKaiNoto Serif SC 回退正文用思源宋体 Noto Serif SC统计数字用 Noto Serif SC 700mono chrome 用 Noto Sans Mono CJK SC。采用Strategy C保留 Source Serif 4 处理拉丁字符CJK 逐字形回退到中文字体font-family 栈为font-family: Source Serif 4, Source Serif Pro, LXGW WenKai TC, Noto Serif SC, Georgia, serif;通用 CJK 调整行高放宽 0.05–0.08显示 1.0–1.1、正文 1.5–1.6CJK 标题字距归 0必要时 0.02emCJK 禁用 uppercase中文句内用全角标点CJK 标题结尾不加句号CJK 与拉丁交界处应用盘古之白Pangu spacing同一句子内不混用两种中文字体。已知缝合点96px 霞鹜文楷标题与 30px 思源宋体正文之间存在笔画对比差异属系统最大 CJK 接缝封面上值得人工检查。8.7 迭代指南与已知缺口design.md 的 Iteration Guide 提供了十条迭代规则新标题走显示阶梯、新 chrome 走等宽阶梯、每页加 topbar、新卡片只允许 6px/8px 圆角、分隔线恒为 2px、新填充必须来自现有色板、正文恒为 400、KPI 恒为 220px、图表用粉/奶油/绿条形 mono 轴、拿不准时更少元素更大字号。**已知缺口Known Gaps**同样值得在集成时注意画布缩放与导航依赖deck-stage.js该脚本不在 design.md 内描述属于运行时依赖Source Serif 4 与 JetBrains Mono 经 Google Fontslink加载离线渲染会回退到 Georgia/Menlo丢失光学尺寸轴与等宽身份离线/打印场景建议自托管字体条形图使用手工设置的百分比高度相对 520px 绘图区无数据绑定扩展图表需手工计算高度monogram-circle、脚注字符串与瓦片计数为硬编码文本每个 deck 需按实际身份替换无media print与响应式断点固定 1920×1080green-on-pink 与 pink-on-green 的对比度在 84px 显示字号下足够但在正文字号下不满足 WCAG AA——26px 小字不要放在粉绿互搭上应保持 cream-on-green 或 ink-on-cream。九、端到端使用流程速览把上述内容串起来Editorial Forest 在 frontend-slides 中的完整调用链是风格发现阶段读取 selection-index.json按元数据初筛出 Editorial Forest 作为 bold 候选混合方案1 安全预设 1 bold 模板 1 wildcard预览阶段只读取本预览卡 preview.md按预览配料 预览规则生成一张 1920×1080 的真实标题页保存到.frontend-slides/slide-previews/并自动打开给用户用户选定后读取 design.md 作为设计配方输出单一自包含 HTML 文件完整内联 viewport-base.css按完整设计文档实现色板、排版、组件、CJK 策略并依赖 deck-stage.js 完成缩放与导航验证与交付核对文本溢出与面板重叠scrollHeight检查不足网格面板可能互相遮盖用浏览器打开交付并可通过 export-pdf.sh 或 PPTX 转换脚本extract-pptx.py完成导出。这套轻量预览卡 → 完整设计文档 → 固定舞台渲染的三段式结构保证了用户在看到真实风格之前不会被迫做抽象选择也保证了最终 deck 始终落在 frontend-slides 的 1920×1080 固定舞台上——正是 Editorial Forest 这套安静、深思、有印刷质感的编辑风系统能够稳定复现的原因。赞分享AI 技能AI 插件前端【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址https://gitcode.com/gh_mirrors/fr/frontend-slides点击查看免费下载相关推荐OfficeCLI morph-ppt 风格实战Pink Editorial — Gradient Stats 数据编辑风渐变统计演示文稿设计指南OfficeCLI morph ppt 风格实战Pink Editorial — Gradient Stats 数据编辑风渐变统计演示文稿设计指南 本文是 i人工智能AI 应用AI 技能CLIMCP 服务Klavis Google Slides MCP Server 实战指南基于 MCP 协议创建、编辑与管理演示文稿Klavis Google Slides MCP Server 实战指南基于 MCP 协议创建、编辑与管理演示文稿 本篇技术指南聚焦于 Klavis 仓库中开AI 应用LLM 网关MCP 服务工具调用Shoelace代码示例实时编辑与预览系统完整指南Shoelace代码示例实时编辑与预览系统完整指南 Shoelace组件库提供了强大的实时编辑与预览系统让开发者能够直观地体验和学习Web ComponenUI组件前端上一篇如何轻松解锁加密音乐文件Unlock Music Electron终极指南下一篇终极音乐解锁指南3分钟掌握Unlock Music Electron免费工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考