HeyGen AI Video 视觉风格深度解析：OpenMontage 中 visual-style.md 设计系统的定义、提取与跨工具应用

HeyGen AI Video 视觉风格深度解析：OpenMontage 中 visual-style.md 设计系统的定义、提取与跨工具应用

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

在 OpenMontage（开源 agentic 视频制作系统）中，视觉风格的工程化是通过visual-style.md文件实现的——一个用 Markdown + YAML frontmatter 定义的、任何 AI 工具都能消费的便携式设计系统。本文以仓库中的 HeyGen AI Video 风格文件 为剖析对象，完整拆解其配色、字体、布局、动效、氛围的规格定义方式，讲解该风格如何通过 Connectors 落地到 HeyGen Video Agent、HTML Slides、paper.design 与 Figma 四种工具，并结合仓库中真实的 HeyGen 视频生成工具源码，给出从"风格文件"到"AI 视频提示词"的完整实战链路。读完本文，你将掌握 visual-style.md 格式的字段规范、HeyGen 现代 AI/SaaS 风格的具体设计参数，以及如何用一套风格文件驱动多种下游工具的生成。

一、背景：visual-style.md 是什么

在深入具体风格之前，先明确其承载格式。OpenMontage 的 visual-style 技能 定义了一种可移植的视觉设计系统文件格式：一个visual-style.md文件，用一段 YAML frontmatter 定义色彩（colors）、字体（typography）、布局（layout）、动效（motion）与氛围（mood），任何一个 AI 工具都能读取并消费它。该技能提供四种工作模式：

Gallery 目录（references/gallery/）目前收录了五种预制风格：Müller-Brockmann Swiss（1950s–70s）、Neville Brody Industrial（1980s–90s）、Saul Bass Cinematic（1950s–60s）、Game Boy Color（1998–2003）以及本文主角 HeyGen AI Video（2020s）。

根据 格式规范 spec.md，visual-style.md的核心设计理念有三条：人类可读（任何文本编辑器都能读懂）、AI 可消费（每个字段都能直接被 AI 模型使用）、可移植（适用于任何读取该格式的工具）。其中必填字段只有五个：name、version、style_prompt_short、style_prompt_full，以及至少包含两个颜色对象的colors.primary。style_prompt_full是"国王字段"——如果工具只能读一个字段，就读它；其余字段是给需要更细粒度控制的工具用的结构化数据。

二、风格总览：style_prompt 双字段

HeyGen AI Video 风格文件以style_prompt_short和style_prompt_full两个字段定义整体气质。前者是 1-2 句的"电梯演讲"，后者是可直接独立使用的完整生成提示词。

style_prompt_short（摘要）：

Vibrant AI-forward design. Cyan-to-pink gradient energy on clean white. Approachable tech that feels premium without being cold. （充满活力的 AI 前沿设计。纯净白底上青到粉的渐变能量。亲切的技术感，高级但不冰冷。）

style_prompt_full（完整提示词）：

Modern AI video platform aesthetic inspired by HeyGen. Clean white backgrounds with generous whitespace. Signature cyan-pink gradient (#00C3FF to #95AAFE to #FEA5FE) as the hero visual element. Primary accent is Hey Blue (#00C3FF) for CTAs and interactive elements. Prism Pink (#F3A6FF) as secondary accent for emphasis and warmth. Typography uses geometric sans-serifs (ABC Solar, TT Norms Pro, or similar) with clear hierarchy. Large rounded corners (12-48px) on cards and buttons. Smooth fade-in animations and subtle hover transitions. Tech-forward but approachable — innovation meets accessibility. Avoid harsh corporate blue, avoid dark mode unless specifically requested, avoid overly complex gradients or 3D effects. （受 HeyGen 启发的现代 AI 视频平台美学。干净白色背景配充裕留白。标志性的青粉渐变（#00C3FF → #95AAFE → #FEA5FE）作为主角视觉元素。主强调色为 Hey Blue（#00C3FF），用于 CTA 与交互元素。Prism Pink（#F3A6FF）作为次级强调色，用于强调与温暖感。字体采用几何无衬线体（ABC Solar、TT Norms Pro 或同类），层级清晰。卡片与按钮使用大圆角（12-48px）。流畅的淡入动画与微妙的悬停过渡。技术前沿但平易近人——创新与可及性并存。避免生硬的商务蓝，除非明确要求否则避免暗色模式，避免过于复杂的渐变或 3D 效果。）

注意style_prompt_full的写作技巧：既明确要做什么（clean white、cyan-pink gradient、geometric sans-serifs），也明确不要做什么（avoid harsh corporate blue、avoid dark mode、avoid complex 3D effects）。这与 spec.md 中"负面约束与正面约束同等重要"的设计决策一致——告诉 AI"不要做什么"往往比"要做什么"更有效。

三、色彩系统：从纯白画布到青粉渐变

HeyGen AI Video 风格定义了 8 个颜色对象，分为 primary（主色）、accent（强调色）、neutral（中性色）三层。每个颜色对象都遵循统一的 schema：name（描述性名称）、hex（十六进制色值）、role（在系统中的作用）。

Primary（主色）

Accent（强调色）

Neutral（中性色）

这套色彩体系的设计逻辑清晰可循：白色承担 90% 的画布职责，Carbon 承担可读性，Hey Blue 与 Prism Pink 构成标志性的青粉渐变（#00C3FF → #95AAFE → #FEA5FE）作为主角视觉元素，Gen Green 只服务于成功反馈。色彩被有节制地使用——渐变是"hero"，要大胆地用但要克制地量（use it sparingly but boldly）。

在文件的扩展命名空间x_heygen中，还保存了可直接复制的渐变定义：

x_heygen: brand_gradient: "linear-gradient(328deg, #00c3ff, #95aafe 50%, #fea5fe)" orientation: "landscape"

x_*前缀是格式规范中的扩展机制：允许不同工具保存自己的专属配置而不污染核心 schema（例如x_heygen、x_figma、x_paper）。这里的brand_gradient是 328° 方向的线性渐变，orientation: landscape则锁定了横屏取向。

四、字体系统：几何无衬线的清晰层级

typography 字段定义了 display（展示）、body（正文）、caption（说明）三层字体，以及四条约束规则。

规则（rules）：

• 字号阶梯：80px → 60px → 44px → 32px → 24px → 18px → 14px
• 充足的行高以保可读性
• UI 元素用中等字重（500-600）
• 粗体（700-800）仅用于标题

这套字号阶梯与 Connectors 中的 Figma 映射（Text styles following the 80-60-44-32-24-18-14px scale）完全对应，说明字体系统的定义目标是"一份定义、多端一致"——无论落到视频标题还是设计稿，层级关系保持不变。

五、布局与动效：4px 基础网格与从容的动效

布局系统

layout: grid: "12 columns, max-width 1200px, flex-based" alignment: "Center-aligned sections, left-aligned content" aspect_ratio: "16:9 for video content, varied for features" notes: - "4px base spacing unit (8, 16, 24, 32, 40, 60, 80px scale)" - "Large rounded corners: 12px cards, 20px buttons, 48px hero elements" - "Generous padding: 16-24px internal, 60-120px section gaps" - "Cards with subtle borders, minimal shadows"

布局要点可以概括为三个数字语言：12 列网格 + 1200px 最大宽度 + 4px 基准间距。间距全部落在 4px 的整数倍上（8/16/24/32/40/60/80），圆角按组件规模分层（12px 卡片、20px 按钮、48px hero 元素），内边距 16-24px、区块间隔 60-120px。值得注意的是"subtle borders, minimal shadows"——用细边框替代重阴影，这与 paper.design Connector 中"避免重阴影，改用微细边框"的指引互相印证。

动效系统

motion: transitions: - "fadeInUp (300ms) for content reveals" - "slideDown (250ms) for dropdowns" - "smooth hover transitions (150-200ms)" animation_style: > Smooth and modern. Elements fade and slide in gracefully. Subtle scale effects on hover. Nothing bouncy or playful — confident and professional with a touch of polish. pacing: "Quick, responsive, modern feel" audio_cues: - "electronic ambient" - "modern corporate" - "upbeat but professional"

动效定义了精确的时间参数：内容揭示用 fadeInUp 300ms、下拉用 slideDown 250ms、悬停过渡 150-200ms。animation_style明确排除了"bouncy or playful"（弹跳或俏皮），追求"自信专业 + 一点精致"（confident and professional with a touch of polish）。音频线索也一并定义：电子环境音、现代商务、轻快但专业。

六、氛围基调与设计原则

mood 字段用关键词锁定风格气质，并给出明确的反模式清单：

文件正文的Design Principles（设计原则）部分给出了四条风格哲学：

1. AI should feel accessible, not intimidating.（AI 应当亲切可及，而非令人生畏。）
2. White space communicates premium quality.（留白传达高级质感。）
3. The cyan-pink gradient is the hero — use it sparingly but boldly.（青粉渐变是主角——用得克制但大胆。）
4. Every interaction should feel smooth and responsive.（每个交互都应当顺滑且响应及时。）

mood.avoid 的价值在 spec.md 中被单独解释：负面约束（negative constraints）与正面约束同样重要，告诉 AI 不该做什么，往往比告诉它该做什么更有效。

七、来源与提取记录

文件正文的Extraction Notes记录了该风格的来源与提取方式：

Extracted from https://heygen.com on 2026-03-12. Primary colors sampled from CSS variables and brand guidelines. Typography identified via computed styles (ABC Solar, TT Norms Pro). Gradient extracted from hero sections and brand elements. Spacing system follows 4px base unit pattern.

这说明该风格并非凭空虚构，而是从 HeyGen 官网提取的真实品牌风格：主色来自 CSS 变量与品牌规范采样、字体通过计算样式识别、渐变取自 hero 区块、间距遵循 4px 基准单位。提取流程与 visual-style 技能 中定义的 Extract 模式完全对应——接收 URL/图片/视频/PDF 来源，通过 extractors/from-website.md、from-video.md、from-pdf.md 三类提取器分析色彩、字体、布局、动效、氛围，最后输出带source_url的完整visual-style.md。

八、Connectors：一份风格、四种工具落地

风格文件的正文最后一部分是Connectors，定义了如何将该风格翻译到不同下游工具。

HeyGen Video Agent（AI 视频生成）

Use the signature gradient as background or overlay element. Hey Blue for text emphasis and CTAs. Clean white backgrounds. Modern, confident pacing. Approachable AI energy. （将标志性渐变用作背景或叠加元素。Hey Blue 用于文字强调与 CTA。干净白色背景。现代、自信的节奏。亲切的 AI 能量。）

落地方式：将style_prompt_full原样作为视觉风格块拼接进生成提示词。

HTML Slides（网页演示文稿）

White backgrounds with gradient accent strips or hero elements. Large rounded corners on cards. Generous whitespace. Hey Blue for interactive elements, Prism Pink for highlights. （白色背景配渐变强调条或 hero 元素。卡片大圆角。充裕留白。Hey Blue 用于交互元素，Prism Pink 用于高亮。）

paper.design（设计文档）

Clean layouts with the gradient as a bold accent element. Large typography with clear hierarchy. Rounded card patterns. Avoid heavy shadows — use subtle borders instead. （干净布局，渐变作为大胆强调元素。大字号清晰层级。圆角卡片模式。避免重阴影——改用微细边框。）

Figma（设计工具）

Color styles:brand/hey-blue,brand/prism-pink,brand/gradient. Text styles following the 80-60-44-32-24-18-14px scale. Component variants with large border-radius (12-48px). （颜色样式：brand/hey-blue、brand/prism-pink、brand/gradient。文本样式遵循 80-60-44-32-24-18-14px 字号阶梯。组件变体使用 12-48px 大圆角。）

可以看到 Connectors 部分输出的不是泛泛而谈，而是每个工具各自的语言：给 HeyGen 的是生成提示词要点，给 HTML Slides 的是 CSS 映射逻辑，给 Figma 的是具体的 style token 命名（brand/hey-blue）与字号阶梯。

九、实战：构造一份 HeyGen 视频生成提示词

HeyGen Video Agent Connector 提供了字段到工具的精确映射表：

基于标准提示词模板，将本风格完整嵌入后，一份可直接投入使用的提示词如下：

Create a video about [TOPIC]. Script: [USER'S SCRIPT] Visual style: Modern AI video platform aesthetic inspired by HeyGen. Clean white backgrounds with generous whitespace. Signature cyan-pink gradient (#00C3FF to #95AAFE to #FEA5FE) as the hero visual element. Primary accent is Hey Blue (#00C3FF) for CTAs and interactive elements. Prism Pink (#F3A6FF) as secondary accent for emphasis and warmth. Typography uses geometric sans-serifs (ABC Solar, TT Norms Pro, or similar) with clear hierarchy. Large rounded corners (12-48px) on cards and buttons. Smooth fade-in animations and subtle hover transitions. Tech-forward but approachable — innovation meets accessibility. Avoid harsh corporate blue, avoid dark mode unless specifically requested, avoid overly complex gradients or 3D effects. Additional constraints: - No avatar - No b-roll footage - Pure motion graphics only Motion: - Transitions: fadeInUp (300ms) for content reveals - Pacing: Quick, responsive, modern feel - Animation: Smooth and modern, elements fade and slide in gracefully Format: landscape (16:9)

Connector 文档中的 Tips 还提供了三条提升效果的经验：明确说出不想要什么（HeyGen 对负面约束响应良好）；运动图形模式下追加 "No avatar. No b-roll. Pure motion graphics."；数据密集型内容中主动提及 "animated charts, counters, data viz"。

十、仓库中的 HeyGen 工具支撑：从风格到成片的 API 层

visual-style 文件定义了"视觉语言"，而 OpenMontage 仓库中的 heygen_video.py 则提供了将这种语言落到实际视频生成调用的工具层。从源码可以看到：

• HeyGenVideo工具类（name = "heygen_video"，版本 0.1.0）属于 GENERATE 层级的 API 运行时工具，能力标记为text_to_video、image_to_video、provider_selection，支持参考图输入（reference_image: True）；
• 工具通过HEYGEN_API_KEY环境变量激活（未设置时get_status()返回 UNAVAILABLE，并提示去 HeyGen 后台获取密钥）；
• 输入参数与视觉风格的衔接点清晰可见：aspect_ratio枚举["16:9", "9:16", "1:1"]（默认 16:9），正好对应layout.aspect_ratio/x_heygen.orientation字段；provider_variant可切换底层视频生成服务商；
• 工具声明了降级链fallback = "wan_video"，备用工具包含wan_video、hunyuan_video、ltx_video_local、cogvideo_video、ltx_video_modal、image_selector——即 HeyGen 不可用时自动切到本地或云端替代方案。

底层的 _shared.py 中可以看到完整的调用链实现：generate_heygen_video()负责组装请求（必要时先经upload_image_heygen()上传参考图），提交到 HeyGen 工作流执行接口后，由poll_heygen(execution_id, api_key, timeout=600)以 600 秒超时轮询执行结果，最终下载视频到output_path。

这构成了完整的三层链路：visual-style.md 定义风格 → Connector 翻译为提示词 → heygen_video 工具执行生成。风格文件在前端约束"长什么样"，工具层在后端负责"怎么生成"，二者通过aspect_ratio、orientation等字段精确对齐。

十一、最佳实践小结

综合 SKILL.md、spec.md 与本文风格文件本身，使用 visual-style.md 有六条最佳实践：

1. style_prompt_full是国王——它必须始终能作为独立生成提示词使用，即使不解析结构化字段的工具也能直接消费；
2. 一风格一文件——不搞多风格混装；
3. 资源一律用 URL——绝不内嵌二进制数据，保持文件小巧、可版本化、可移植；
4. 展示而非描述——创建风格时生成 HTML 色板预览或可视化结果；
5. 有主见的默认值 + 灵活的扩展——核心 schema 固定，x_*命名空间承载工具专属配置；
6. 负面约束同样重要——mood.avoid与正面描述一起写入提示词，往往效果更好。

对于 HeyGen AI Video 这一风格，还有一条特有的使用提醒：渐变是主角，但要用得克制而大胆（use it sparingly but boldly）——这正是整个设计系统的气质内核。

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