OpenMontage 视觉风格体系实战HeyGen AI 视频平台青粉渐变设计语言解析与落地【免费下载链接】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 仓库中.agents/skills/visual-style/references/gallery/heygen-ai-video.visual-style.md这一视觉风格档案展开完整解析其以「青蓝→粉紫渐变 纯净白底 几何无衬线」为核心的 HeyGen AI 视频平台设计语言并展示它如何通过仓库内的 visual-style 技能体系驱动 HeyGen 视频生成、HTML 幻灯片、Figma 与 paper.design 等下游工具。读完本文你将掌握该风格的完整配置参数色板、字体、栅格、动效、情绪约束并能直接把它翻译成一条可交给 HeyGen Video Agent 的落地生成提示词。一、背景一份可被 AI 直接消费的视觉设计系统OpenMontage 的visual-style技能定义了一套便携式视觉设计系统格式一个visual-style.md文件用 Markdown YAML frontmatter 把颜色、字体、布局、动效、情绪全部封装进一个文件任何 AI 工具都能读取并消费。该技能的能力边界SKILL.md覆盖四种模式模式触发方式产出CreateCreate a visual-style.md for...通过引导式提问从零构建风格文件ExtractExtract a visual-style.md from [URL/image/video]从网站、视频、PDF 提取并生成风格文件ApplyApply this visual-style.md to [tool]借助 connector 把风格应用到具体工具GalleryShow me available visual styles浏览并使用预置风格库本篇文章的主角heygen-ai-video.visual-style.md正是 Gallery 中五个预置风格之一其余包括 Müller-Brockmann Swiss、Neville Brody Industrial、Saul Bass Cinematic、Game Boy Color均位于 references/gallery/。这份风格档案从 HeyGen 官网https://heygen.com提取而来日期标注为 2026-03-12代表「2020s AI/SaaS」时代的现代 AI 视频平台审美。值得注意的是该技能在仓库中同时存在于两个 Agent 配置目录.agents/skills/visual-style/ 与 .claude/skills/visual-style/二者保持同一套 gallery / connectors / extractors / templates 结构方便不同 AI 编码助手按各自约定加载同一份设计系统资产。二、风格档案的完整 YAML frontmatter以下是该风格文件的完整 frontmatterheygen-ai-video.visual-style.md 第 1–131 行它构成了整份设计系统的数据骨架--- name: HeyGen AI Video Platform version: 1.0 tags: - ai - video - tech - modern author: Extracted source_url: https://heygen.com created: 2026-03-12 style_prompt_short: Vibrant AI-forward design. Cyan-to-pink gradient energy on clean white. Approachable tech that feels premium without being cold. 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. colors: primary: - name: Pure White hex: #FFFFFF role: primary background, clean canvas - name: Carbon hex: #333333 role: primary text, headings accent: - name: Hey Blue hex: #00C3FF role: CTAs, links, primary brand accent - name: Prism Pink hex: #F3A6FF role: secondary accent, gradient endpoint, emphasis - name: Gen Green hex: #35C838 role: success states, positive feedback neutral: - name: Mist hex: #F2F2F2 role: section backgrounds, cards - name: Cloud hex: #D9D9D9 role: borders, dividers - name: Deep Teal hex: #033337 role: dark backgrounds, footer, contrast sections typography: display: family: ABC Solar, TT Norms Pro, system-ui weight: 700-800 style: large, confident, generous tracking body: family: TT Norms Pro, system-ui, sans-serif weight: 400-500 style: comfortable reading, 18px base caption: family: TT Norms Pro, system-ui, sans-serif weight: 500 style: 14-15px, medium weight for labels rules: - Size scale: 80px → 60px → 44px → 32px → 24px → 18px → 14px - Generous line heights for readability - Medium weight (500-600) for UI elements - Bold (700-800) for headlines only 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 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 mood: keywords: - innovative - approachable - premium - modern - creative - tech-forward era: 2020s AI/SaaS cultural_reference: Modern AI tools, creative tech platforms, Figma/Notion energy avoid: - harsh corporate blue - dark, heavy interfaces - overly complex 3D effects - stock photography feel - cluttered layouts - small, cramped typography assets: reference_images: [] gsep_elements: [] html_snippets: [] color_palette_image: url: x_heygen: brand_gradient: linear-gradient(328deg, #00c3ff, #95aafe 50%, #fea5fe) orientation: landscape ---2.1 元信息与字段定位name/version风格显示名与格式规范版本当前规范为1.0参见 references/spec.md 的 Versioning 约定新增可选字段不改版本号只有破坏性改动才升到 2.0。tagsai/video/tech/modern用于分类检索。source_url/created记录提取来源与日期保证可追溯。x_heygen扩展命名空间字段。x_*前缀机制允许不同工具挂载自己的专属配置而不污染核心 schema——本档案用x_heygen.brand_gradient固化品牌渐变linear-gradient(328deg, #00c3ff, #95aafe 50%, #fea5fe)用x_heygen.orientation声明横屏landscape取向这些正是 HeyGen connector 会读取的字段。2.2style_prompt_full是灵魂技能规范反复强调一条铁律style_prompt_full是最重要的字段见 SKILL.md 与 spec.md 的 Design Decisions 章节。原因是很多 AI 工具只接受纯文本提示词只要这个字段完整、自洽、可独立成段任何不解析结构化字段的工具也能直接使用。设计决策中还解释了另外几个关键约定为什么禁止内嵌二进制URL 让文件保持轻量、可版本化、可移植为什么用x_*命名空间工具差异配置不污染核心 schema为什么要有mood.avoid负面约束和正面约束同等重要明确告诉 AI「不要做什么」往往比「要做什么」更有效。三、色板逐项拆解青粉渐变与三档色系该风格用一套「主色 强调色 中性色」三层结构构成干净且充满科技感的 AI 平台观感层级色名HEX职责primaryPure White#FFFFFF主背景、干净画布primaryCarbon#333333主文本、标题accentHey Blue#00C3FFCTA、链接、核心品牌强调accentPrism Pink#F3A6FF次级强调、渐变端点、暖意点缀accentGen Green#35C838成功状态、正向反馈neutralMist#F2F2F2分区背景、卡片neutralCloud#D9D9D9边框、分隔线neutralDeep Teal#033337深色背景、页脚、对比区块使用要点来自style_prompt_full与 Extraction Notes招牌渐变路径为#00C3FF → #95AAFE → #FEA5FE作为 hero 视觉元素「少而大胆地使用」主强调色 Hey Blue 用于 CTA 与交互元素Prism Pink 承担温度与次级强调避免刻板的企业蓝、未要求时避免深色模式、避免过度复杂的渐变与 3D 效果。四、字体、栅格与动效可执行的排版规范4.1 TypographyDisplay标题ABC Solar, TT Norms Pro, system-ui字重 700–800风格「大、自信、宽松字距」Body正文TT Norms Pro, system-ui, sans-serif字重 400–500基准字号 18pxCaption标注字重 50014–15px字阶规则80px → 60px → 44px → 32px → 24px → 18px → 14px标题才用 Bold(700–800)UI 元素用 Medium(500–600)并保持宽松行高。4.2 Layout12 列栅格、最大宽度 1200px、flex 布局区块居中、内容左对齐视频内容默认 16:9功能模块比例可变4px 基准间距单位8/16/24/32/40/60/80px 阶梯大圆角卡片 12px、按钮 20px、hero 元素 48px内边距 16–24px区块间距 60–120px卡片用细边框 最小阴影。4.3 Motion 与音频内容浮现fadeInUp300ms下拉slideDown250ms悬停过渡 150–200ms动画基调「顺滑现代、优雅渐入悬停微缩放不弹跳不俏皮」节奏「快速、响应式、现代」音频线索electronic ambient电子氛围、modern corporate现代商务、upbeat but professional明快而专业。五、情绪板与提取笔记Markdown 正文部分补充了结构化数据之外的「软信息」Design PrinciplesAI 应当让人感到可亲近而非畏惧留白传达高端质感青粉渐变是主角要「少而大胆」地使用每个交互都应顺滑响应。Extraction Notes记录该档案于 2026-03-12 从 HeyGen 官网提取主色采样自 CSS 变量与品牌指南字体经 computed styles 识别为 ABC Solar 与 TT Norms Pro渐变提取自 hero 区块间距系统遵循 4px 基准单位。六、Connectors把风格翻译成下游工具指令规范要求每个风格档案提供## Connectors段落说明如何应用到具体工具spec.md 的 Connectors 章节。本档案针对四个目标给出了落地指引目标工具落地方式HeyGen Video Agent签名渐变作为背景或叠加元素Hey Blue 用于文本强调与 CTA纯白背景现代自信的节奏HTML Slides白底 渐变强调条或 hero 元素卡片大圆角Hey Blue 用于交互元素、Prism Pink 用于高亮paper.design干净布局 大胆的渐变强调清晰层级的大字号圆角卡片用细边框替代重阴影Figma颜色样式brand/hey-blue、brand/prism-pink、brand/gradient文本样式遵循 80–60–44–32–24–18–14px 字阶组件变体使用 12–48px 大圆角6.1 深度落地HeyGen Video Agent 字段映射与提示词模板connector 参考文件 heygen-video-agent.md 给出了 visual-style 字段到 HeyGen 提示词的精确映射visual-style.md 字段HeyGen 用法style_prompt_full逐字附加到生成提示词motion.transitions场景转场指令motion.animation_style动画行为motion.pacing节奏指引typography.caption字幕样式若启用字幕layout.aspect_ratio方向设置16:9 横屏 / 9:16 竖屏mood.avoid负向提示 / 排除指令assets.gsep_elements叠加资产若支持x_heygen.orientation显式方向覆盖x_heygen.video_id已有 HeyGen 视频的引用对应的提示词组装模板Create a video about [TOPIC]. Script: [USERS SCRIPT] Visual style: [PASTE style_prompt_full HERE] Additional constraints: - [ITEMS FROM mood.avoid] Motion: - Transitions: [motion.transitions] - Pacing: [motion.pacing] - Animation: [motion.animation_style] Format: [layout.aspect_ratio OR x_heygen.orientation]以「无 Avatar 的纯动态图形」场景为例该 connector 文档提供的完整示例Create a video about our Q4 results. Script: Revenue grew 40% year over year. We shipped 12 new features. Customer satisfaction hit an all-time high of 94%. 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. ... Additional constraints: - No avatar - No b-roll footage - No stock photography - Pure motion graphics only Motion: - Transitions: fadeInUp (300ms), smooth hover transitions - Pacing: Quick, responsive, modern feel - Animation: Elements fade and slide in gracefully Format: landscape (16:9)connector 文档还给出四条实战建议明确说出你不想要的东西HeyGen 对负向约束响应良好动态图形模式用 No avatar. No b-roll. Pure motion graphics.数据密集型内容要显式提到animated charts, counters, data viz转场必须显式指定否则默认转场可能与风格不匹配。七、仓库级佐证HeyGen 视频能力在 OpenMontage 中的实现风格档案不是孤立的文档OpenMontage 仓库提供了对应的真实视频生成能力作为落地载体工具入口tools/video/heygen_video.py 中的HeyGenVideo工具类第 24 行封装了 HeyGen 视频生成其状态检查逻辑第 95–96 行表明需要设置HEYGEN_API_KEY环境变量才会处于可用状态AVAILABLE否则返回 UNAVAILABLE文档字符串中也给出了set HEYGEN_API_KEYyour_key_here的指引。模型路由tools/video/_shared.py 第 15–33 行的HEYGEN_PROVIDERS字典定义了可通过provider_variant参数选择的模型变体例如veo_3_1Google VEO 3.1质量最高/速度慢、veo_3_1_fast、veo3、kling_pro、sora_v2、sora_v2_pro、runway_gen4、seedance_lite/seedance_proSeedance 1.x、ltx_distilled质量低/速度最快等并附带质量与速度分级元数据供成本估算estimate_cost与耗时预估estimate_runtime使用底层调用函数为同文件第 595 行的generate_heygen_video。应用链路从代码结构看visual-style技能产出的style_prompt_full可以经由这类文本驱动的视频工具直接注入生成流程把「设计系统 → 生成提示词 → 视频产出」串成一条可执行链路。仓库的avatar-spokesperson等管线技能skills/pipelines/avatar-spokesperson/与视频生成提示词技能skills/creative/video-gen-prompting.md也涉及 HeyGen 相关流程可作为把该风格接入具体生产管线的进一步参考。八、如何复用与扩展该风格创建自己的风格按 references/templates/minimal.visual-style.md最低要求name、version、style_prompt_short、style_prompt_full、colors.primary至少两个含 name/hex/role 的颜色对象或 references/templates/full.visual-style.md完整模板含 typography/layout/motion/mood/assets/x_* 扩展开始。校验spec.md 的 Validation 章节给出合法性检查清单frontmatter 必须在---分隔符内且 YAML 合法、必填字段齐全、colors.primary≥ 2 个颜色对象、每个颜色对象含 name/hex/role、version为1.0。扩展约定核心 schema 固定工具专属配置一律放进x_*命名空间如x_heygen、x_figma资产一律用 URL 引用不内嵌二进制。搭配其他风格Gallery 中其余四个风格Swiss 栅格、Brody 工业、Saul Bass 电影、Game Boy 像素在 HeyGen connector 中同样被标记为「特别适配 HeyGen Video Agent」的风格可按内容气质交叉选用。结语heygen-ai-video.visual-style.md是一个可执行、可移植、可验证的 AI 时代设计系统范本结构化的 YAML 保证机器可解析style_prompt_full保证纯文本工具也能消费x_heygen扩展与 connector 字段映射则把设计语言无损翻译成 HeyGen 视频生成的提示词。配合 OpenMontage 仓库中真实的HeyGenVideo工具与模型路由表它已经是一份「读得懂、跑得起来、改得动」的完整设计资产值得在 AI 视频与品牌视觉一致性的实践中直接借鉴。【免费下载链接】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），仅供参考