OpenMontage visual-style 设计系统接入 HTML 幻灯片从字段映射到零依赖 CSS 落地的完整指南【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage导读本文基于 OpenMontage 仓库中 visual-style 技能 的 HTML Slides Connector 文档系统讲解如何将一份visual-style.md视觉设计系统颜色、字体、布局、动效、情绪约束映射为可直接运行的 HTML 幻灯片 CSS 变量与样式规则。你将掌握字段级映射表、CSS 变量模板、frontend-slides 风格的单文件约束、完整的瑞士国际主义风格实战示例以及把「设计系统文件」变成「无构建、零依赖、可放映的 HTML 幻灯片」的六步工作流。文章同时结合仓库中的视觉风格画廊与规范文档给出可复制、可验证的落地路径。一、背景什么是visual-style.md为什么需要 Connector在 visual-style 技能体系中一份visual-style.md是一个「可移植视觉设计系统」以 YAML frontmatter Markdown 正文定义颜色colors、字体typography、布局layout、动效motion与情绪mood任何能读取该格式的 AI 工具都可以消费它。其完整字段规范见 references/spec.md。但设计系统文件本身不是可运行产物——Connector 的作用就是把抽象字段翻译成目标工具的语言。HTML Slides Connector即本主题文档的目标是frontend-slides这类 HTML 幻灯片框架将visual-style.md的字段逐一映射为 CSS 变量、排版规则、网格系统与过渡动画最终生成单文件、零依赖、按视口缩放的演示文稿。该 Connector 属于技能「Apply应用」模式的一部分。在 SKILL.md 中Apply 模式的流程是读取visual-style.md→ 判断目标工具connector→ 按 connector 映射字段 → 输出工具就绪的代码。HTML Slides 是与 HeyGen Video Agent、paper.design、Figma 并列的四个官方 Connector 之一其余三个分别见 heygen-video-agent.md、paper-design.md、figma.md。二、字段映射表visual-style.md→ CSSHTML Slides Connector 的核心是一张确定性的映射表把设计系统每个字段落到具体的 CSS 输出上visual-style.md 字段CSS 输出colors.primary[0].hex--color-bg背景色colors.primary[1].hex--color-text正文/前景色colors.accent[0].hex--color-accent强调色colors.neutral[0].hex--color-muted弱化/次要色typography.display.family--font-displaytypography.body.family--font-bodytypography.displayh1, h2, h3样式typography.bodyp, li样式typography.caption.label, code, small样式typography.rules附加 CSS 规则layout.gridCSS grid/flexbox 网格系统layout.aspect_ratio幻灯片尺寸画幅motion.transitionsCSS 幻灯片过渡mood.avoid设计约束检查清单反模式清单这套映射的字段语义以 spec.md 为准colors.primary要求至少 2 个含name/hex/role的颜色对象colors.accent与colors.neutral为可选项typography.display/body/caption均为包含family、weight、style的对象layout.grid描述网格系统layout.aspect_ratio给出默认画幅如16:9mood.avoid是显式的反模式清单。可以看出Connector 把「第 0 个主色当背景、第 1 个主色当文字」作为确定性约定这正是它能在任意风格文件上无歧义工作的前提。三、CSS 变量模板把设计系统灌进:rootConnector 给出了一份可直接套用的 CSS 变量骨架。颜色与字体来自映射表间距则由设计系统推导并用clamp()做响应式缩放:root { /* Colors */ --color-bg: [colors.primary[0].hex]; --color-text: [colors.primary[1].hex]; --color-accent: [colors.accent[0].hex]; --color-muted: [colors.neutral[0].hex]; /* Typography */ --font-display: [typography.display.family], system-ui, sans-serif; --font-body: [typography.body.family], system-ui, sans-serif; /* Spacing (derive from style) */ --space-sm: clamp(0.5rem, 1vw, 1rem); --space-md: clamp(1rem, 2vw, 2rem); --space-lg: clamp(2rem, 4vw, 4rem); } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); } h1, h2, h3 { font-family: var(--font-display); font-weight: [typography.display.weight]; /* Apply typography.display.style rules */ } .accent { color: var(--color-accent); } .muted { color: var(--color-muted); }几个值得注意的设计决策变量命名即语义--color-bg、--color-text等变量名承载角色role这正是 spec.md 中颜色对象role字段在 CSS 层的落地——颜色不只是色值还被赋予了「背景/文字/强调/弱化」的职责。字体栈必须带 fallbacksystem-ui, sans-serif保证即使目标字体未加载幻灯片依然可读详见 Connector Tips 的「Font loading — Always include fallback fonts in the stack」。间距用视口相关clamp()clamp(0.5rem, 1vw, 1rem)让间距随视口连续变化与下方「frontend-slides 约束」中「所有尺寸使用clamp()、禁用固定 px/rem」的规则一脉相承。[typography.display.weight]直接透传标题字重取自设计系统的typography.display.weight如bold并把typography.display.style中的规则如uppercase, tight tracking作为注释提示等待二次落地。四、frontend-slides 约束单文件、无滚动、纯响应式Connector 明确了生成 HTML 幻灯片时必须遵守的五条硬约束Single HTML file—— 零依赖CSS/JS 全部内联不引入任何外部脚本库或构建步骤Viewport units—— 所有尺寸用clamp()绝不使用固定px/rem硬编码保证任意屏幕等比缩放No scrolling—— 每页幻灯片height: 100vh; overflow: hidden;一屏一页Content overflow—— 内容放不下就拆成多页幻灯片绝不滚动Google Fonts—— 字体在head内通过link标签加载。这套约束与视觉风格画廊、技能模板的设计哲学一致templates/full.visual-style.md 强调「Assets are URLs, never embedded binary data」把字体走link、资源走 URL、代码全部内联本质上都是为了让一个演示文件「开箱即放」。第 2、3 条共同保证了幻灯片在投影仪、笔记本、手机横屏下的稳定表现——容器永远是视口大小字号间距随视口等比伸缩。五、实战示例瑞士国际主义风格幻灯片文档用mueller-brockmann-swiss.visual-style.md演示完整落地。仓库画廊中的真实文件位于 references/gallery/mueller-brockmann-swiss.visual-style.md其核心字段为主色 Pure Black#000000背景与 Pure White#FFFFFF文字、强调色 Electric Blue#0066FF、中性色 Grid Gray#CCCCCC字体全部 Helveticamood.avoid明确禁止有机曲线、渐变、库存图片、超过一个强调色、居中文本与装饰元素。按照字段映射与变量模板生成的完整幻灯片如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePresentation/title link hrefhttps://fonts.googleapis.com/css2?familyHelveticaNeue:wght300;400;700displayswap relstylesheet style :root { --color-bg: #000000; --color-text: #FFFFFF; --color-accent: #0066FF; --color-muted: #CCCCCC; --font-display: Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: Helvetica Neue, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); } .slide { height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 6rem); } h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 8rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; text-align: left; } .accent { color: var(--color-accent); } /* Grid overlay for Swiss style */ .slide::before { content: ; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent, transparent calc(100% / 12 - 1px), var(--color-muted) calc(100% / 12 - 1px), var(--color-muted) calc(100% / 12) ); opacity: 0.1; pointer-events: none; } /style /head body section classslide h1Grid-lockedbrspan classaccentprecision/span/h1 /section /body /html逐段解读这份代码如何落实设计系统:root变量区严格对应映射表#000000→--color-bg、#FFFFFF→--color-text、#0066FF→--color-accent、#CCCCCC→--color-muted字体栈在 Helvetica 之后补齐了系统回退.slide布局落实「No scrolling」约束height: 100vhoverflow: hidden内容用 flex 垂直居中内边距clamp(2rem, 5vw, 6rem)随视口缩放h1落实typography.display字重 700对应 gallery 中的weight: bold、text-transform: uppercase与letter-spacing: -0.02em对应style: uppercase or sentence case, tight tracking、text-align: left对应mood.avoid中「never centered」的约束.slide::before网格叠加层落实layout.grid: Strict modular grid — 12 columns用repeating-linear-gradient生成 12 列网格线颜色取--color-muted且opacity: 0.1压低存在感pointer-events: none不影响交互span classaccent落实强调色唯一性原则整页只有一个#0066FF高亮点与mood.avoid中「more than one accent color」禁令一致。六、六步工作流从设计文件到可放映幻灯片Connector 定义了生成 HTML 幻灯片的完整工作流Load the style—— 读取visual-style.md文件Generate CSS variables—— 按映射表将颜色与字体转换为 CSS 变量Apply typography rules—— 遵循typography.rules中的排版约束Check constraints—— 对照mood.avoid清单核查设计约束Generate slides—— 每页幻灯片对应一个section classslideValidate—— 确保无滚动、所有尺寸响应式。前四步本质上是「把设计系统语义翻译成 CSS 语义 建立反模式检查清单」第五步把「一页一section」作为组织单元天然与「No scrolling」约束衔接第六步则是对前文五条 frontend-slides 约束的收尾校验。这套工作流与 SKILL.md 中 Apply 模式的通用流程读风格 → 选 connector → 字段转换 → 产出工具就绪代码完全对齐可视为该模式在「HTML 演示」这一目标工具上的具体化。七、Tips让生成的幻灯片真正「像那个风格」Connector 在末尾给出四条实用建议背后都有设计系统字段的直接支撑Typography drives hierarchy排版驱动层级用typography.display定义标题、typography.body定义正文——层级来自字族与字重差异而非颜色堆砌。这一点在 gallery 文件中体现为typography.rules里的「Weight contrast does the hierarchy」。Honor the avoid list尊重反模式清单添加任何装饰元素前先对照mood.avoid。如瑞士风格的mood.avoid禁止渐变、有机曲线、圆角那么网格叠加层的半透明灰色线而非花哨描边就是合规的实现。Transitions过渡把motion.transitions映射为页间 CSS 过渡。例如 gallery 中「horizontal grid wipes / clean hard cuts」可对应translateX平移或直接硬切。Font loading字体加载字体栈始终携带 fallback与本文第三节模板一致防止 Google Fonts 加载失败时版式崩塌。八、在 OpenMontage 中使用 HTML Slides Connector 的路径在 OpenMontage 仓库中这条 Connector 的完整使用链路已经齐备可按需取用技能入口visual-style/SKILL.md 定义了 Create / Extract / Apply / Gallery 四种模式并列出四个官方 Connector 的引用清单格式规范references/spec.md 规定必填字段name、version、style_prompt_short、style_prompt_full、colors.primary至少 2 色与全部可选字段是编写或校验风格文件的依据模板references/templates/full.visual-style.md全字段模板与 references/templates/minimal.visual-style.md极简模板风格画廊references/gallery/ 内置五种可直接套用的风格瑞士国际主义mueller-brockmann-swiss.visual-style.md、Neville Brody 工业风neville-brody-industrial.visual-style.md、Saul Bass 电影感saul-bass-cinematic.visual-style.md、Game Boy Color 像素风game-boy-color.visual-style.md、HeyGen AI 视频风heygen-ai-video.visual-style.md关联 Connectorfigma.mdFigma 设计稿、paper-design.md设计文档、heygen-video-agent.mdAI 视频。典型用法从画廊选一份风格文件或用 Extract 模式从网站/视频/PDF 提取按本主题文档的映射表生成 CSS 变量与样式规则再套用第五节的单文件骨架即可得到一份严格继承该设计语言、零依赖、可全屏放映的 HTML 幻灯片。整条链路无需任何构建工具从「设计系统文件」到「浏览器全屏演示」只差一次确定性映射。总结HTML Slides Connector 的价值在于用一张确定性的映射表把结构化的visual-style.md变成可运行的 CSS颜色与字体的变量化让设计系统可复用clamp()与100vh让幻灯片在任何屏幕上都不变形不滚动mood.avoid的检查清单让 AI 生成内容时「知道不该做什么」。结合 OpenMontage 仓库的规范文档与风格画廊任何 Agent 都能在几分钟内产出一套与既定视觉语言严格一致的 HTML 演示文稿。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenMontage visual-style 设计系统接入 HTML 幻灯片：从字段映射到零依赖 CSS 落地的完整指南
OpenMontage visual-style 设计系统接入 HTML 幻灯片从字段映射到零依赖 CSS 落地的完整指南【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage导读本文基于 OpenMontage 仓库中 visual-style 技能 的 HTML Slides Connector 文档系统讲解如何将一份visual-style.md视觉设计系统颜色、字体、布局、动效、情绪约束映射为可直接运行的 HTML 幻灯片 CSS 变量与样式规则。你将掌握字段级映射表、CSS 变量模板、frontend-slides 风格的单文件约束、完整的瑞士国际主义风格实战示例以及把「设计系统文件」变成「无构建、零依赖、可放映的 HTML 幻灯片」的六步工作流。文章同时结合仓库中的视觉风格画廊与规范文档给出可复制、可验证的落地路径。一、背景什么是visual-style.md为什么需要 Connector在 visual-style 技能体系中一份visual-style.md是一个「可移植视觉设计系统」以 YAML frontmatter Markdown 正文定义颜色colors、字体typography、布局layout、动效motion与情绪mood任何能读取该格式的 AI 工具都可以消费它。其完整字段规范见 references/spec.md。但设计系统文件本身不是可运行产物——Connector 的作用就是把抽象字段翻译成目标工具的语言。HTML Slides Connector即本主题文档的目标是frontend-slides这类 HTML 幻灯片框架将visual-style.md的字段逐一映射为 CSS 变量、排版规则、网格系统与过渡动画最终生成单文件、零依赖、按视口缩放的演示文稿。该 Connector 属于技能「Apply应用」模式的一部分。在 SKILL.md 中Apply 模式的流程是读取visual-style.md→ 判断目标工具connector→ 按 connector 映射字段 → 输出工具就绪的代码。HTML Slides 是与 HeyGen Video Agent、paper.design、Figma 并列的四个官方 Connector 之一其余三个分别见 heygen-video-agent.md、paper-design.md、figma.md。二、字段映射表visual-style.md→ CSSHTML Slides Connector 的核心是一张确定性的映射表把设计系统每个字段落到具体的 CSS 输出上visual-style.md 字段CSS 输出colors.primary[0].hex--color-bg背景色colors.primary[1].hex--color-text正文/前景色colors.accent[0].hex--color-accent强调色colors.neutral[0].hex--color-muted弱化/次要色typography.display.family--font-displaytypography.body.family--font-bodytypography.displayh1, h2, h3样式typography.bodyp, li样式typography.caption.label, code, small样式typography.rules附加 CSS 规则layout.gridCSS grid/flexbox 网格系统layout.aspect_ratio幻灯片尺寸画幅motion.transitionsCSS 幻灯片过渡mood.avoid设计约束检查清单反模式清单这套映射的字段语义以 spec.md 为准colors.primary要求至少 2 个含name/hex/role的颜色对象colors.accent与colors.neutral为可选项typography.display/body/caption均为包含family、weight、style的对象layout.grid描述网格系统layout.aspect_ratio给出默认画幅如16:9mood.avoid是显式的反模式清单。可以看出Connector 把「第 0 个主色当背景、第 1 个主色当文字」作为确定性约定这正是它能在任意风格文件上无歧义工作的前提。三、CSS 变量模板把设计系统灌进:rootConnector 给出了一份可直接套用的 CSS 变量骨架。颜色与字体来自映射表间距则由设计系统推导并用clamp()做响应式缩放:root { /* Colors */ --color-bg: [colors.primary[0].hex]; --color-text: [colors.primary[1].hex]; --color-accent: [colors.accent[0].hex]; --color-muted: [colors.neutral[0].hex]; /* Typography */ --font-display: [typography.display.family], system-ui, sans-serif; --font-body: [typography.body.family], system-ui, sans-serif; /* Spacing (derive from style) */ --space-sm: clamp(0.5rem, 1vw, 1rem); --space-md: clamp(1rem, 2vw, 2rem); --space-lg: clamp(2rem, 4vw, 4rem); } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); } h1, h2, h3 { font-family: var(--font-display); font-weight: [typography.display.weight]; /* Apply typography.display.style rules */ } .accent { color: var(--color-accent); } .muted { color: var(--color-muted); }几个值得注意的设计决策变量命名即语义--color-bg、--color-text等变量名承载角色role这正是 spec.md 中颜色对象role字段在 CSS 层的落地——颜色不只是色值还被赋予了「背景/文字/强调/弱化」的职责。字体栈必须带 fallbacksystem-ui, sans-serif保证即使目标字体未加载幻灯片依然可读详见 Connector Tips 的「Font loading — Always include fallback fonts in the stack」。间距用视口相关clamp()clamp(0.5rem, 1vw, 1rem)让间距随视口连续变化与下方「frontend-slides 约束」中「所有尺寸使用clamp()、禁用固定 px/rem」的规则一脉相承。[typography.display.weight]直接透传标题字重取自设计系统的typography.display.weight如bold并把typography.display.style中的规则如uppercase, tight tracking作为注释提示等待二次落地。四、frontend-slides 约束单文件、无滚动、纯响应式Connector 明确了生成 HTML 幻灯片时必须遵守的五条硬约束Single HTML file—— 零依赖CSS/JS 全部内联不引入任何外部脚本库或构建步骤Viewport units—— 所有尺寸用clamp()绝不使用固定px/rem硬编码保证任意屏幕等比缩放No scrolling—— 每页幻灯片height: 100vh; overflow: hidden;一屏一页Content overflow—— 内容放不下就拆成多页幻灯片绝不滚动Google Fonts—— 字体在head内通过link标签加载。这套约束与视觉风格画廊、技能模板的设计哲学一致templates/full.visual-style.md 强调「Assets are URLs, never embedded binary data」把字体走link、资源走 URL、代码全部内联本质上都是为了让一个演示文件「开箱即放」。第 2、3 条共同保证了幻灯片在投影仪、笔记本、手机横屏下的稳定表现——容器永远是视口大小字号间距随视口等比伸缩。五、实战示例瑞士国际主义风格幻灯片文档用mueller-brockmann-swiss.visual-style.md演示完整落地。仓库画廊中的真实文件位于 references/gallery/mueller-brockmann-swiss.visual-style.md其核心字段为主色 Pure Black#000000背景与 Pure White#FFFFFF文字、强调色 Electric Blue#0066FF、中性色 Grid Gray#CCCCCC字体全部 Helveticamood.avoid明确禁止有机曲线、渐变、库存图片、超过一个强调色、居中文本与装饰元素。按照字段映射与变量模板生成的完整幻灯片如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePresentation/title link hrefhttps://fonts.googleapis.com/css2?familyHelveticaNeue:wght300;400;700displayswap relstylesheet style :root { --color-bg: #000000; --color-text: #FFFFFF; --color-accent: #0066FF; --color-muted: #CCCCCC; --font-display: Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: Helvetica Neue, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); } .slide { height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 6rem); } h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 8rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; text-align: left; } .accent { color: var(--color-accent); } /* Grid overlay for Swiss style */ .slide::before { content: ; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent, transparent calc(100% / 12 - 1px), var(--color-muted) calc(100% / 12 - 1px), var(--color-muted) calc(100% / 12) ); opacity: 0.1; pointer-events: none; } /style /head body section classslide h1Grid-lockedbrspan classaccentprecision/span/h1 /section /body /html逐段解读这份代码如何落实设计系统:root变量区严格对应映射表#000000→--color-bg、#FFFFFF→--color-text、#0066FF→--color-accent、#CCCCCC→--color-muted字体栈在 Helvetica 之后补齐了系统回退.slide布局落实「No scrolling」约束height: 100vhoverflow: hidden内容用 flex 垂直居中内边距clamp(2rem, 5vw, 6rem)随视口缩放h1落实typography.display字重 700对应 gallery 中的weight: bold、text-transform: uppercase与letter-spacing: -0.02em对应style: uppercase or sentence case, tight tracking、text-align: left对应mood.avoid中「never centered」的约束.slide::before网格叠加层落实layout.grid: Strict modular grid — 12 columns用repeating-linear-gradient生成 12 列网格线颜色取--color-muted且opacity: 0.1压低存在感pointer-events: none不影响交互span classaccent落实强调色唯一性原则整页只有一个#0066FF高亮点与mood.avoid中「more than one accent color」禁令一致。六、六步工作流从设计文件到可放映幻灯片Connector 定义了生成 HTML 幻灯片的完整工作流Load the style—— 读取visual-style.md文件Generate CSS variables—— 按映射表将颜色与字体转换为 CSS 变量Apply typography rules—— 遵循typography.rules中的排版约束Check constraints—— 对照mood.avoid清单核查设计约束Generate slides—— 每页幻灯片对应一个section classslideValidate—— 确保无滚动、所有尺寸响应式。前四步本质上是「把设计系统语义翻译成 CSS 语义 建立反模式检查清单」第五步把「一页一section」作为组织单元天然与「No scrolling」约束衔接第六步则是对前文五条 frontend-slides 约束的收尾校验。这套工作流与 SKILL.md 中 Apply 模式的通用流程读风格 → 选 connector → 字段转换 → 产出工具就绪代码完全对齐可视为该模式在「HTML 演示」这一目标工具上的具体化。七、Tips让生成的幻灯片真正「像那个风格」Connector 在末尾给出四条实用建议背后都有设计系统字段的直接支撑Typography drives hierarchy排版驱动层级用typography.display定义标题、typography.body定义正文——层级来自字族与字重差异而非颜色堆砌。这一点在 gallery 文件中体现为typography.rules里的「Weight contrast does the hierarchy」。Honor the avoid list尊重反模式清单添加任何装饰元素前先对照mood.avoid。如瑞士风格的mood.avoid禁止渐变、有机曲线、圆角那么网格叠加层的半透明灰色线而非花哨描边就是合规的实现。Transitions过渡把motion.transitions映射为页间 CSS 过渡。例如 gallery 中「horizontal grid wipes / clean hard cuts」可对应translateX平移或直接硬切。Font loading字体加载字体栈始终携带 fallback与本文第三节模板一致防止 Google Fonts 加载失败时版式崩塌。八、在 OpenMontage 中使用 HTML Slides Connector 的路径在 OpenMontage 仓库中这条 Connector 的完整使用链路已经齐备可按需取用技能入口visual-style/SKILL.md 定义了 Create / Extract / Apply / Gallery 四种模式并列出四个官方 Connector 的引用清单格式规范references/spec.md 规定必填字段name、version、style_prompt_short、style_prompt_full、colors.primary至少 2 色与全部可选字段是编写或校验风格文件的依据模板references/templates/full.visual-style.md全字段模板与 references/templates/minimal.visual-style.md极简模板风格画廊references/gallery/ 内置五种可直接套用的风格瑞士国际主义mueller-brockmann-swiss.visual-style.md、Neville Brody 工业风neville-brody-industrial.visual-style.md、Saul Bass 电影感saul-bass-cinematic.visual-style.md、Game Boy Color 像素风game-boy-color.visual-style.md、HeyGen AI 视频风heygen-ai-video.visual-style.md关联 Connectorfigma.mdFigma 设计稿、paper-design.md设计文档、heygen-video-agent.mdAI 视频。典型用法从画廊选一份风格文件或用 Extract 模式从网站/视频/PDF 提取按本主题文档的映射表生成 CSS 变量与样式规则再套用第五节的单文件骨架即可得到一份严格继承该设计语言、零依赖、可全屏放映的 HTML 幻灯片。整条链路无需任何构建工具从「设计系统文件」到「浏览器全屏演示」只差一次确定性映射。总结HTML Slides Connector 的价值在于用一张确定性的映射表把结构化的visual-style.md变成可运行的 CSS颜色与字体的变量化让设计系统可复用clamp()与100vh让幻灯片在任何屏幕上都不变形不滚动mood.avoid的检查清单让 AI 生成内容时「知道不该做什么」。结合 OpenMontage 仓库的规范文档与风格画廊任何 Agent 都能在几分钟内产出一套与既定视觉语言严格一致的 HTML 演示文稿。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考