OpenMontage 视觉风格实战Josef Müller-Brockmann 瑞士国际主义风格的 visual-style.md 设计系统详解【免费下载链接】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 仓库中预置的瑞士国际主义Swiss International Style视觉风格文档.claude/skills/visual-style/references/gallery/mueller-brockmann-swiss.visual-style.md展开完整拆解其 YAML 设计令牌结构、四段式生成提示词、网格/排版/动效规范以及 HeyGen、HTML Slides、paper.design、Figma 四类 Connector 的落地映射。读完本文你将掌握如何在 OpenMontage 的 visual-style 技能体系中解读、复用并跨工具应用一份黑 白 电光蓝的极简数据驱动视觉风格。一、背景visual-style 技能与风格画廊GalleryOpenMontage 以.claude/skills/visual-style/SKILL.md定义了创建、提取、应用可移植视觉设计系统的技能一份visual-style.md文件用 YAML frontmatter Markdown 正文把颜色、排版、布局、动效、情绪全部封装为任何 AI 工具都能消费的单一文件。技能提供四种工作模式——Create从零构建、Extract从 URL/视频/PDF 提取、Apply映射到具体工具、Gallery浏览预置风格。本篇文章的主角mueller-brockmann-swiss.visual-style.md正是 Gallery 中的五份预置风格之一。根据 SKILL.md 中的画廊索引表Gallery 目前收录了风格时代文件Müller-Brockmann Swiss1950s–70sreferences/gallery/mueller-brockmann-swiss.visual-style.mdNeville Brody Industrial1980s–90sreferences/gallery/neville-brody-industrial.visual-style.mdSaul Bass Cinematic1950s–60sreferences/gallery/saul-bass-cinematic.visual-style.mdGame Boy Color1998–2003references/gallery/game-boy-color.visual-style.mdHeyGen AI Video2020sreferences/gallery/heygen-ai-video.visual-style.md瑞士风格文件的头部元数据tags: iconic design / sleek minimal、author: Bin、created: 2026-03-12表明它是按 spec.md 规范手工构建的预置风格而非从外部素材提取source_url为空。它最适合数据驱动、网格锁定的内容场景在 HeyGen Connector 中被明确列为特别适合 HeyGen 视频生成的候选风格。二、文件结构与 frontmatter 骨架与 spec.md 定义的通用结构一致该文件由---包裹的 YAML frontmatter 可选的 Markdown 正文小节组成--- [YAML frontmatter] --- [Markdown body sections]spec 规定了一套必填字段name、version当前为1.0、style_prompt_short1–2 句电梯陈述、style_prompt_full完整自然语言生成提示最重要字段、colors.primary至少 2 个颜色对象各含name/hex/role。其余如colors.accent、colors.neutral、typography.*、layout.*、motion.*、mood.*、assets.*与x_*扩展均为可选。瑞士风格文件的 frontmatter 头如下--- name: Josef Müller-Brockmann Swiss International Style version: 1.0 tags: - iconic design - sleek minimal author: Bin source_url: created: 2026-03-12 ---其中version字段按 spec 的版本化约定指的是规范版本当前为1.0而非风格版本可选字段的增减保持1.0不变仅当必填字段发生变化时才升级到2.0。三、生成提示词style_prompt_short 与 style_prompt_full这份风格文件提供两档提示词它们是后续所有 Connector 生成内容的核心输入。style_prompt_short短版电梯陈述Grid-locked Swiss precision. Black and white base with electric blue accent. Helvetica only. Data visualizations as hero elements. Every frame snaps to a mathematical grid. Geometric, systematic, exact.style_prompt_full完整版风格精髓Josef Müller-Brockmann Swiss International Style. Grid-locked layouts with mathematical precision. Black and white base with ONE accent color (electric blue #0066FF). Strong diagonal compositions. Helvetica typography only. Data visualizations are the hero — animated charts, counters, grids. Every frame snaps to a grid. Transitions are horizontal grid wipes. No organic shapes. No gradients. No stock photography. Everything is geometric, systematic, precise.为什么style_prompt_full被反复强调为Kingspec.md 的 Design Decisions 部分解释了设计动机许多 AI 工具只接受纯文本提示将完整风格以自然语言描述固化下来就能保证任何工具——哪怕是完全不解析结构化字段的工具——拿到这一个字段也能生成一致的视觉。这也是完整模板 full.visual-style.md 要求包含内联 hex 色值如 #FF5500供工具提取的原因。本风格在完整提示中直接内嵌了#0066FF与#000000正是这一规范的实际贯彻。四、色彩系统黑白基底 唯一强调色瑞士风格将色彩压到极简两种原色撑起画面一个强调色做点睛两个中性色处理结构与辅助信息。分类名称Hex角色roleprimaryPure Black#000000主导底色、文字、结构元素primaryPure White#FFFFFF背景块、负空间accentElectric Blue#0066FF唯一强调色——数据高亮、关键强调neutralGrid Gray#CCCCCC网格线、次级结构neutralDark Gray#333333辅助文字、次级标签这套色板在四个 Connector 中会原样映射。以 HTML Slides Connector 的字段映射表为准colors.primary[0].hex → --color-bg、colors.primary[1].hex → --color-text、colors.accent[0].hex → --color-accent、colors.neutral[0].hex → --color-muted。落到本风格即:root { --color-bg: #000000; /* Pure Black */ --color-text: #FFFFFF; /* Pure White */ --color-accent: #0066FF; /* Electric Blue */ --color-muted: #CCCCCC; /* Grid Gray */ }在 paper.design Connector 的瑞士风格应用示例中同样的映射表现为背景#000000、文字#FFFFFF、强调#0066FF、网格线#CCCCCC。而 Figma Connector 则要求按文件夹组织命名风格brand/black、brand/white、accent/electric-blue、neutral/grid-gray本文件 Connectors 一节给出的正是这套命名。一个强调色是不可逾越的纪律——mood.avoid中明确禁止超过一种强调色。五、排版系统只有 Helvetica排版是瑞士风格的另一半灵魂本文件用typography对象定义了三个层级与四条铁律typography: display: family: Helvetica weight: bold style: uppercase or sentence case, tight tracking body: family: Helvetica weight: regular style: flush left, ragged right, generous leading caption: family: Helvetica weight: light style: small, uppercase, wide tracking rules: - Helvetica ONLY — no other typeface - Type sizes follow a mathematical scale - Always flush left — never centered - Weight contrast does the hierarchy四条rules构成了排版层面的可执行约束字族唯一、字号遵循数学比例、永居左对齐、层级靠字重对比而非颜色或装饰实现。spec 中的通用排版 schema 要求每个对象含family/weight/style本文件全部满足并在 style 字段中给出了诸如 tight tracking紧凑字距、wide tracking宽字距、generous leading宽松行距这类可直接被 AI 执行的具体描述。映射到 HTML 实现时HTML Slides Connector 的瑞士示例给出了可直接参考的 CSS--font-display: Helvetica Neue, Helvetica, Arial, sans-serif标题font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; text-align: left——注意text-align: left正是永居左对齐的落地。connector 还要求字体栈始终包含 fallback系统无衬线字体以兼容无 Helvetica 的环境。六、布局12 列严格模块化网格layout: grid: Strict modular grid — 12 columns alignment: Flush left, grid-snapped aspect_ratio: 16:9 notes: - Every element locked to the grid - Strong diagonal compositions within orthogonal grid - Data visualizations are the hero elements三条 layout notes 点明布局哲学每个元素锁定网格在正交网格内部允许强烈对角构图数据可视化是主角元素。aspect_ratio: 16:9直接对应 HeyGen Connector 映射表中的layout.aspect_ratio → Orientation setting16:9 即横屏 landscape本文件末尾的x_heygen.orientation: landscape扩展字段与之一致。关于12 列网格如何转译为设计工具参数Figma Connector 给出了预设转化规则12 columns → Columns: 12 Type: Stretch Margin: 64px Gutter: 24px Strict modular grid → Both columns AND rows enabled而 HTML Slides Connector 的示例用一段伪网格叠加.slide::beforerepeating-linear-gradient按100% / 12等分、透明度 0.1 的--color-muted网格线把网格锁定直观呈现在浏览器里——这是把网格从抽象纪律变成可见辅助线的最小实现。七、动效与节奏机械般精准的几何运动motion: transitions: - horizontal grid wipes - elements snapping to grid positions - clean hard cuts animation_style: Geometric precision. Elements snap to grid positions. Charts animate systematically. Counters tick mechanically. Nothing bounces. pacing: Measured, confident, unhurriedmotion对象定义了三类转场水平网格擦除、元素吸附到网格位置、干净硬切与整体动画气质。animation_style中值得注意的细节是 Counters tick mechanically. Nothing bounces.——数字计数器以机械方式跳动而非弹性动画任何回弹、缓动过度的运动都被排除在外这与pacing的 Measured, confident, unhurried从容、自信、不紧不慢互为表里。在 HeyGen 场景中HeyGen Connector 把这些字段分别映射为motion.transitions → Scene transition instructions、motion.animation_style → Animation behavior、motion.pacing → Timing guidance并强调转场必须显式指定默认转场可能不匹配你的风格。其内置的无头像动态图形示例 Prompt 即原样引用了本风格的完整提示词并追加 Transitions: horizontal grid wipes, clean hard cuts / Pacing: Measured, confident, unhurried / Animation: Elements snap to grid positions, charts animate systematically。八、情绪基调与禁忌清单moodmood: keywords: - precise - systematic - authoritative - geometric era: 1950s–1970s (timeless) cultural_reference: Müller-Brockmann, Grid Systems in Graphic Design, Zurich School avoid: - organic or curved shapes - gradients - stock photography - more than one accent color - centered text - decorative elements - handwritten or serif typefaces - drop shadows or glows - rounded cornersmood.avoid是这份风格文件最有实践价值的部分。spec 的 Design Decisions 明确解释了为什么引入负面约束告诉 AI 不要做什么往往比告诉它要做什么更有效负面约束与正面约束同等重要。本文件的九条 avoid 覆盖了形状有机曲线、圆角、特效渐变、投影/辉光、内容来源图库摄影、色彩超一强调色、排版居中文本、手写/衬线字体、装饰装饰元素六个维度——它们是 HeyGen 负向提示、HTML 设计检查清单、Figma 设计评审清单由typography.rules与mood.avoid共同生成的直接素材。cultural_reference将风格锚定在 1950s–1970s 的苏黎世学派与 Müller-Brockmann 的代表作《Grid Systems in Graphic Design》上era标注 timeless永恒表明这不是过时的复古而是常青的经典。九、Connectors四个工具的落地映射文件正文的 Connectors 小节针对四类目标工具给出逐条操作指引这也是Apply应用模式的实操入口工作流见 SKILL.md读取风格 → 询问/探测连接器 → 加载连接器参考 → 字段转换 → 产出工具就绪的指令或代码。HeyGen Video AgentUsestyle_prompt_fullverbatim. Specify: No avatar, no b-roll — pure motion graphics. Hard cuts between scenes. Data visualizations should animate systematically.将style_prompt_full逐字嵌入生成提示明确无头像、无 B-roll、纯动态图形场景间硬切数据可视化系统性动画。结合 HeyGen Connector 的提示模板一份完整的瑞士风格视频 Prompt 结构如下Create a video about [TOPIC]. Script: [USERS SCRIPT] Visual style: [PASTE style_prompt_full HERE] Additional constraints: - No avatar - No b-roll footage - No stock photography - Pure motion graphics only Motion: - Transitions: horizontal grid wipes, clean hard cuts - Pacing: Measured, confident, unhurried - Animation: Elements snap to grid positions, charts animate systematically Format: landscape (16:9)对于数字密集型内容connector 还建议在提示中显式提及 animated charts, counters, data viz与本风格数据可视化即主角的定位高度契合。HTML SlidesCSS variables:--color-bg: #000,--color-text: #FFF,--color-accent: #0066FF. All text flush left. 12-column grid. Helvetica or system sans-serif fallback.映射为 CSS 变量后还须遵守 frontend-slides 类框架的约束见 HTML Slides Connector单 HTML 文件零依赖、尺寸一律clamp()响应式、每页height: 100vh; overflow: hidden禁止滚动、内容溢出拆分为多页。正文第五节展示的瑞士风格标题页黑底、h1大字号 uppercase 电光蓝强调词 网格叠加层是这套约束与风格字段融合的完整可运行示例。paper.designSet up 12-column grid. Background black, text white. Single accent color. Every element should snap to grid intersections.paper.design Connector 给出四步落地按色板建色背景#000000/ 文字#FFFFFF/ 强调#0066FF/ 网格线#CCCCCC配置 Helvetica 三档字重Bold 标题大写、Regular 正文左对齐、Light 小字标签大写按layout.grid建 12 列网格并启用吸附将style_prompt_full粘贴进 AI 布局建议 Prompt并把mood.avoid作为约束清单。connector 还提供了一份设计简报模板把name、色板、字体、布局、mood 关键词与 avoid 清单聚合为一段可直接投递给 AI 的 Markdown 简报。FigmaColor styles:brand/black,brand/white,accent/electric-blue,neutral/grid-gray. Text styles:heading/display(Helvetica Bold),body/default(Helvetica Regular). Layout grid: 12 columns, strict alignment.对应 Figma Connector 的转化规则色板生成brand/、accent/、neutral/三个文件夹下的 Color Styles用role字段作为风格描述排版生成heading/display48px 显示标题、body/default16px 正文、label/default12px 标签三类 Text Styles12 列网格转为 Stretch 型布局网格预设最终可构建一个风格指南 Frame把色板、字体与typography.rules/mood.avoid检查清单可视化沉淀。十、设计原则克制即高级文件正文的第一小节 Design Principles 用四句话概括了风格哲学Typography and the grid are the only design elements needed. Mathematical relationships create visual harmony. Restraint is the ultimate sophistication. The grid is not a limitation — it is liberation through structure.排版与网格是仅需的设计元素数学关系创造视觉和谐克制是终极的优雅网格不是限制而是通过结构获得自由。这四条原则与mood.avoid的九条禁令互为印证既然排版与网格是唯一所需那么渐变、投影、装饰、图库照片自然全部出局既然数学关系创造和谐那么 12 列网格、数学比例字号、机械计数动画便是一以贯之的执行。spec 中关于负面约束的设计决策负面约束与正面约束同等重要在此得到了完整示范。十一、在同系列风格中定位将本风格与画廊邻居对照可更清晰地理解它的适用边界。同为画廊成员的 neville-brody-industrial.visual-style.md 走的是另一条路线炭黑/脏白/信号红配色压缩与拉伸的变形字形、破碎对齐、媒体式撕裂——视觉与文本猛烈碰撞而非礼貌融合。对比之下瑞士风格强调的是秩序、精确、单一强调色而工业风格强调的是张力、变形、碰撞。因此在实际选型时面向财报解读、数据指标、产品数据大盘等数字即主角的内容瑞士风格是自然之选HeyGen Connector 亦将本风格标注为 Data-driven, grid-locked而品牌冲击力优先的创意短片则更适合工业风格。选型后Gallery 工作流列出风格 → 描述视觉特征 → 读取完整 visual-style.md → 通过 Connector 应用即可完成从选型到产出的闭环。结语一份可移植的瑞士设计系统mueller-brockmann-swiss.visual-style.md是 visual-style 格式单文件承载完整设计系统理念的典型样本以style_prompt_full兜底任意纯文本工具以结构化字段服务需要精细控制的工具以mood.avoid提供负面约束以x_heygen等扩展字段预留工具专属配置。掌握这份文件意味着你可以在 OpenMontage 的 Agent 工作流中让 HeyGen 视频、HTML 演示稿、paper.design 文档与 Figma 设计稿共享同一套 1950s–70s 苏黎世学派的视觉基因——黑、白、电光蓝、12 列网格与永不居中的 Helvetica。如需从零构建自己的风格可参考 templates/full.visual-style.md 完整模板与 spec.md 字段规范如需深挖技能的四种工作模式请回到 SKILL.md。【免费下载链接】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），仅供参考