企业官网建设流程全解析

OpenMontage 视觉风格系统实战：完整解析 Neville Brody Industrial 工业字体视觉风格库

【免费下载链接】OpenMontageWorld's 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

Neville Brody Industrial Type 是 OpenMontage 的visual-style技能仓库中内置的五套预置视觉风格（Gallery）之一，以工业排版、压缩字体、断裂网格与广播级硬切动效为特征。本文以该风格文件为骨架，完整拆解其颜色、字体、版式、动效与情绪定义，并结合visual-style.md格式规范与 HeyGen、HTML Slides、paper.design、Figma 四大连接器，给出可直接落地的提示词模板与 CSS 实现方案，读完即可将这套风格复用到 AI 视频生成、网页演示与设计工具中。

风格档案：一份 visual-style.md 到底封装了什么

OpenMontage 将视觉风格抽象为一种名为visual-style.md的便携式设计系统文件：一个文件同时承载颜色、字体、版式、动效与情绪，任何 AI 工具都可以直接消费。本风格文件位于 .claude/skills/visual-style/references/gallery/neville-brody-industrial.visual-style.md（.agents/skills/visual-style/references/gallery/下存在完全相同的副本，供不同 Agent 框架读取）。

该文件头部（frontmatter）先给出风格元信息：

name: "Neville Brody Industrial Type" version: "1.0" tags: - iconic design - sleek minimal author: "Teo @ HeyGen" created: "2026-03-12"

按照格式规范 references/spec.md，name与version是必填字段，其中version指的是格式规范版本（当前为1.0）而非风格版本；tags、author、created属于可选元数据。文件主体分为两大部分：YAML frontmatter 中的结构化字段，以及正文中的## Design Principles与## Connectors自由文本区。规范要求一个合法的visual-style.md必须满足：YAML frontmatter 合法、必填字段齐全、colors.primary至少包含 2 个颜色对象且每个对象都含name/hex/role。

风格灵魂：style_prompt_short 与 style_prompt_full

visual-style技能（见 SKILL.md）有一条核心铁律：style_prompt_full是王。如果某个工具只能读取一个字段，就读它——它是一段完整、独立的自然语言生成提示词，不依赖任何结构化解析。规范文档在"Design Decisions"中解释了这一设计动机：许多 AI 工具只接受纯文本提示词，因此要求每个风格文件都携带一段自洽的全文描述，确保任何工具都能直接使用。

本风格的两段提示词如下：

style_prompt_short: > Dark industrial typography. Compressed and distorted letterforms slamming into fractured grids with controlled aggression. Brody's late-80s broadcast harshness meets editorial tension. style_prompt_full: > A dark, experimental graphic system inspired by Neville Brody's late-80s and 90s typographic experimentation: industrial texture, compressed and expanded letterforms, media harshness, fractured alignment, and controlled aggression. Use charcoal black, steel gray, dirty white, signal red, and muted electric blue. Typography should feel engineered, distorted, and culturally loaded. Type should compress, stretch, split, and slam into grids with sharp industrial force. Visuals and text should collide rather than blend politely. Cropped image fragments, static textures, and dense labels should reassemble the frame through harsh typographic cuts and broadcast-like ruptures. Motion should feel media-heavy, tense, and contemporary.

从结构看，style_prompt_full依次锁定了四件事：参考语境（Neville Brody 80 年代末至 90 年代的字体实验）、精确色值（charcoal black、steel gray、dirty white、signal red、muted electric blue）、排版行为（压缩/拉伸/分裂/砸向网格）、动效基调（媒体感重、紧张、当代）。这也是撰写任何新风格文件时的模板：给出具体色名与十六进制色值、字体行为、版面结构、动效模式与整体情绪，并且同时写清楚"要做什么"与"不要做什么"。

色彩系统：深色工业底噪与两枚信号色

风格文件用colors字段定义了三级调色板，每个颜色都带name、hex、role三个属性，role说明该颜色在系统中的用途，这也是后续生成 Figma 样式描述的依据。

这套配色的用法有明确分工：Charcoal Black 大面积铺底制造"工业暗房"氛围，Dirty White 承担正文阅读，Signal Red 用于制造视觉冲击与刻意断裂，Muted Electric Blue 作为克制的数据/标签点缀，Steel Gray 负责网格线与次级信息。规范强调颜色对象必须给出hex且格式为#RRGGBB，并建议把色值内联写入style_prompt_full，方便无法解析 YAML 的工具直接抽取。

字体系统：Type IS the visual

本风格最核心的主张是"字体即视觉本身"。文件用typography字段把字体拆成三个层级并给出硬性规则：

typography: display: family: "Condensed industrial sans-serif" weight: "ultra bold / black" style: "uppercase, extreme compression" body: family: "Neutral sans-serif (Univers, Akzidenz-Grotesk)" weight: "regular to medium" caption: family: "Monospace or condensed sans" style: "small, dense, all caps" rules: - "Type IS the visual — collides with content, not placed on it" - "Fractured alignment is intentional" - "Mix extreme weights" - "Never center — always flush left or fractured" - "Type can bleed off-frame"

五条规则逐条可执行：标题字不是"放在内容之上"，而是与内容对撞；断裂对齐是刻意设计而非失误；极端字重混排制造张力；永不居中，只允许左对齐或断裂对齐；文字允许冲出画框边界。配套的mood.avoid又从反面封死了出路：禁用圆角字体与手写体、禁用柔和圆润的字形——这与 display 层"极端压缩的全大写"形成互斥闭环。

版式与网格：刻意打破的激进非对称

layout: grid: "Aggressive asymmetric grid, deliberately broken" alignment: "Flush left, fractured off-axis" aspect_ratio: "16:9" notes: - "Dense — minimal whitespace" - "Cropped image fragments as texture" - "Labels feel like broadcast control room overlays"

网格是"刻意被打破的激进非对称网格"，对齐方式是"左对齐 + 轴外断裂"，默认画幅16:9。三条布局备注共同构成画面配方：极密、几乎不留白；用裁切后的图片碎片当纹理，而不是整幅照片；标签要像广播控制室的覆盖层。这一节可以直接指导生成器产出高信息密度、碎片化、控制台感的画面构成。

动效与节奏：没有缓动，只有对撞

motion: transitions: - "Harsh typographic cuts" - "Broadcast-like static bursts" - "Vertical/horizontal panel swaps" animation_style: "Type slams into grid. No gentle easing. Elements collide." pacing: "Tense, rhythmic, controlled"

过渡只允许三种：生硬的字体切、广播式静电爆裂、垂直/水平面板切换。动画风格一句话定性："文字砸进网格，没有柔和缓动，元素互相撞击。"节奏是"紧张、有韵律、受控"。这与mood.avoid中的"平滑缓动（smooth easing）"形成正反约束，是接入 HeyGen 等生成工具时"过渡方式"与"动画行为"两个字段的直接来源。

情绪基调与禁区清单

mood: keywords: - "industrial" - "aggressive" - "editorial" - "broadcast" - "tense" era: "late 1980s–1990s" cultural_reference: "Neville Brody, The Face magazine, Arena, Fuse" avoid: - "soft gradients or pastels" - "centered layouts" - "friendly tone" - "rounded type or handwriting" - "decorative illustration" - "smooth easing"

情绪锚点为"工业、激进、编辑感、广播、紧张"，时代坐标锁定 1980 年代末到 1990 年代，文化参照是 Neville Brody 及其参与的《The Face》《Arena》《Fuse》等刊物。avoid清单是规范特意设计的"负向约束"机制——spec.md 明确指出："告诉 AI 不要做什么，往往比告诉它做什么更有效。"这条清单（禁用柔和渐变/粉彩色、居中布局、友好语气、圆角与手写字体、装饰性插画、平滑缓动）应作为生成提示词中的负向约束原样附带。

风格文件还预留了工具专属扩展位x_heygen，记录video_id与orientation: "landscape"——这正是 spec 中x_*命名空间设计的实际应用：工具特定配置不污染核心 schema。

设计原则：四句箴言

文件正文第一节用四句话总结了整套风格的哲学：

• Typography is not decoration — it is the architecture.（字体不是装饰，而是建筑。）
• Tension creates attention.（张力创造注意力。）
• Break the grid with intention.（有意图地打破网格。）
• Every collision is choreographed.（每一次对撞都是编排过的。）

这四句既是对生成器的行为指引，也是人工审稿（review）时的验收标准：检查画面里是否有刻意断裂、是否有编排感而非随机感。

落地：四个 Connector 的映射与实现

visual-style.md的价值在于"一次定义，处处可用"。风格文件的正文 Connectors 节给出了四个方向的概要指引，而技能仓库中每个连接器还有一份独立参考文件，给出字段级映射。

1. HeyGen Video Agent：原样投喂 style_prompt_full

连接器 references/connectors/heygen-video-agent.md 规定：style_prompt_full逐字追加到生成提示词，motion.transitions作为转场指令，mood.avoid转成负向约束，layout.aspect_ratio或x_heygen.orientation决定横竖屏。结合本风格文件，一个完整的视频生成提示词模板为：

Create a video about [TOPIC]. Script: [USER'S SCRIPT] Visual style: A dark, experimental graphic system inspired by Neville Brody's late-80s and 90s typographic experimentation: industrial texture, compressed and expanded letterforms, media harshness, fractured alignment, and controlled aggression. Use charcoal black, steel gray, dirty white, signal red, and muted electric blue. ... Additional constraints: - No soft gradients or pastels - No centered layouts - No friendly tone - No rounded type or handwriting - No decorative illustration - No smooth easing Motion: - Transitions: harsh typographic cuts, broadcast-like static bursts, vertical/horizontal panel swaps - Pacing: Tense, rhythmic, controlled - Animation: Type slams into grid. No gentle easing. Elements collide. Format: landscape (16:9)

连接器还特别提示：对纯动效视频要显式追加 "No avatar. No b-roll. Pure motion graphics."（无头像、无素材镜头、纯动态图形），且转场必须显式指定——生成器默认转场通常与本风格不匹配。

2. HTML Slides：映射为 CSS 变量

连接器 references/connectors/html-slides.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；字体家族映射到--font-display与--font-body。将本风格套入后得到：

:root { /* Colors */ --color-bg: #1A1A1A; /* Charcoal Black — dominant background */ --color-text: #E0E0E0; /* Dirty White — primary text */ --color-accent: #CC3333; /* Signal Red — emphasis, disruption */ --color-muted: #666666; /* Steel Gray — grid lines, supporting text */ /* Typography */ --font-display: "Archivo Narrow", "Oswald", system-ui, sans-serif; --font-body: "Univers", "Akzidenz-Grotesk", system-ui, sans-serif; --font-caption: "IBM Plex Mono", ui-monospace, monospace; } h1, h2, h3 { font-family: var(--font-display); font-weight: 900; /* ultra bold / black */ text-transform: uppercase; /* extreme compression */ letter-spacing: -0.03em; /* tighten tracking */ text-align: left; /* never center */ } .accent { color: var(--color-accent); } .muted { color: var(--color-muted); }

同时要遵循连接器的通用约束：单文件零依赖、尺寸全部用clamp()与视口单位、每页height: 100vh; overflow: hidden;禁止滚动、内容放不下就拆页、字体经<link>引入并保留 fallback 栈。落到本风格，正文里还应体现"断裂对齐、文字允许冲出画框、标签使用等宽字体全大写密集排列"这三条专属规则。

3. paper.design：画板级应用

连接器 references/connectors/paper-design.md 把颜色映射到文档调色板（背景取colors.primary[0].hex、文本取colors.primary[1].hex、强调取accent[0].hex、次级元素取neutral[0].hex），字体映射为显示/正文/标签三层默认值，layout.grid决定画板网格（本风格为"激进非对称、刻意打破"的网格，应关闭对齐吸附或有意错位），mood.avoid生成设计约束清单。调用其 AI 功能时同样把style_prompt_full拼进提示词。

4. Figma：生成样式与审稿清单

连接器 references/connectors/figma.md 给出命名规范：颜色样式建brand/charcoal、brand/dirty-white、accent/signal-red、accent/electric-blue等文件夹分组，role字段直接作为样式描述；文本样式建heading/display（Condensed Black 全大写）、body/default、label/default（等宽或压缩体小号全大写）；layout.grid转为网格预设；最后用typography.rules与mood.avoid拼出一份设计审稿 checklist。风格文件正文的 Connectors 节也明确要求："允许字体延伸出画框边界"——这是本风格在 Figma 里区别于其他风格的关键落点。

在 OpenMontage 中消费这套风格：Gallery 工作流

visual-style技能定义了四种模式（见 SKILL.md）：Create（从零引导创建）、Extract（从 URL/视频/PDF 提取）、Apply（配合连接器应用到目标工具）、Gallery（浏览预置风格）。本风格属于 Gallery 资产，与 Müller-Brockmann Swiss、Saul Bass Cinematic、Game Boy Color、HeyGen AI Video 并列存放于 references/gallery/，每个风格一个文件，遵循"一风格一文件、绝不混装"的最佳实践。

典型使用路径是：Gallery 模式列出并预览风格 → 读取完整visual-style.md→ Apply 模式加载对应连接器（HeyGen 生成视频、HTML Slides 生成演示、paper.design 出设计稿、Figma 建样式库）。由于style_prompt_full自带完整色值与行为描述，即使目标工具完全不解析结构化字段，也能退化为纯提示词消费。

扩展与定制：创建你自己的工业风风格

若需在 OpenMontage 中沉淀新的视觉风格，可直接套用模板 references/templates/full.visual-style.md，按本风格文件的骨架逐字段填充：先在style_prompt_full中写清风格本质（参考语境 + 具体色值 + 字体行为 + 版式 + 动效 + 情绪），再拆出colors/typography/layout/motion/mood结构化字段，最后在正文补充## Design Principles与## Connectors。关键约束是：version恒为1.0（除非规范出现破坏性变更才升到2.0），资产一律用 URL 而非内嵌二进制，工具专属配置放入x_*命名空间，且务必维护一份像本文列举的mood.avoid那样的负向清单——它是决定生成结果是否"跑偏"的保险丝。

【免费下载链接】OpenMontageWorld's 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