尧图网站建设 
OpenMontage 的 visual-style 便携式视觉设计系统创建、提取与应用实战指南【免费下载链接】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/OpenMontageOpenMontage 将visual-style作为其 AI 视频技能体系中的关键一环通过一个visual-style.md文件即可完整定义一套视觉设计系统——颜色、排版、布局、动效与情绪基调并让任何 AI 工具直接消费。本篇指南围绕仓库中的 visual-style 技能定义 及其规范、模板、连接器与提取器文件展开带你掌握从零创建视觉风格、从网站/视频/PDF 品牌手册反向提取风格、以及将风格应用到 HeyGen 视频、HTML 幻灯片、paper.design 与 Figma 的完整方法论。visual-style.md一份文件承载一套视觉设计系统visual-style.md是一个带有 YAML frontmatter 的 Markdown 文档用于定义完整的视觉设计系统。它的设计目标有三条缺一不可人类可读Human-readable任何文本编辑器都能直接打开理解AI 可消费AI-consumable每一个字段都能被 AI 模型直接使用无需二次解释可移植Portable同一份文件可以在任何支持该格式的工具之间流转。在 OpenMontage 中该技能属于三层知识架构中的Layer 3 技能通用 API/技术知识层。根据 skills/INDEX.md 的能力索引visual-style被归入 AI Video (HeyGen) 类别随.agents/skills/中的技能集安装来源为heygen-com/skills并通过符号链接暴露在.claude/skills/下供 Claude Code 直接调用。四种工作模式Create / Extract / Apply / Gallery技能入口文件 SKILL.md 定义了四种触发模式覆盖视觉风格从无到有再到用起来的完整生命周期模式触发指令功能Create创建Create a visual-style.md for...通过引导式提问从零构建一套风格Extract提取Extract a visual-style.md from [URL/image/video]分析来源并生成风格文件Apply应用Apply this visual-style.md to [tool]借助具体连接器将风格用于目标工具Gallery画廊Show me available visual styles浏览并使用预置风格技能元信息frontmatter中的description还明确了六类触发场景从零创建设计系统、从 URL/视频/PDF 品牌手册提取风格、将风格应用到 HeyGen 视频/HTML 幻灯片/Figma/paper.design、浏览预置风格画廊Swiss、Saul Bass、Game Boy 等、用户提到 visual style、design system、brand style 或 style guide以及为 HeyGen 视频统一设计语言。Create从感觉到结构化定义创建模式的默认工作流是引导式的七步流程收集感觉Gather vibe——询问情绪关键词、时代、参考与灵感来源定义颜色Define colors——主色至少 2 个、强调色、中性色附带十六进制值与角色说明设定排版Set typography——展示体、正文、说明文字的字族及字重/样式规则布局与动效Layout motion——网格系统、转场、节奏生成Generate——基于 minimal 模板 或 full 模板 输出完整的visual-style.md预览Preview——展示小型 HTML 色板或描述视觉结果可选应用Optionally apply——询问用户是否要接入某个连接器。过程中建议一次性批量提问四类问题避免来回打断用户整体氛围是什么情绪关键词、时代、参考有指定的颜色吗或从氛围中推导排版偏好干净、编辑感、技术感、俏皮这套风格将用于哪个工具HeyGen、幻灯片、paper.design、FigmaExtract从现有素材反推设计系统提取模式接收 URL、图片、视频或 PDF 作为输入遵循加载提取器 → 分析 → 生成 → 校验的流程最终输出带有source_url的完整风格文件。仓库在references/extractors/下提供了三类提取器详见后文。Apply把风格翻译成目标工具的格式应用模式的核心是映射Transform读取visual-style.md→ 确认连接器或从上下文推断→ 加载对应连接器参考文件 → 将风格字段映射为工具特有的格式 → 生成可直接使用的指令或代码。仓库在references/connectors/下提供了四个连接器。Gallery开箱即用的风格库画廊模式直接浏览references/gallery/下预置的五个风格文件每个都是一份完整、可直接应用的visual-style.md。格式规范详解从必需字段到扩展机制格式的权威定义位于 references/spec.mdSpec 版本 1.0Draft 状态。文件结构为标准的---分隔 YAML frontmatter 加 Markdown 正文。必需字段Required Fields字段类型说明namestring风格显示名称versionstring规范版本当前为1.0style_prompt_shortstring1~2 句的电梯陈述elevator pitchstyle_prompt_fullstring完整的自然语言生成提示词——最重要的字段colors.primaryarray至少 2 个颜色对象每个含name、hex、rolestyle_prompt_full是核心中的核心。如果某个工具只能读取一个字段它读的就是这个字段。其余结构化字段是给需要精细控制的工具使用的。技能文件与规范文件都反复强调这一原则甚至直接用了 style_prompt_fullis king 的表述。可选字段Optional Fields元数据Metadata字段类型说明tagsarray分类标签如 iconic design、retro techauthorstring风格创建者署名source_urlstring该风格提取自的 URLcreatedstringISO 日期YYYY-MM-DD颜色Colors——除必填的colors.primary外还有colors.accent与colors.neutral。颜色对象的标准 schema 为- name: Descriptive Name hex: #RRGGBB role: how this color is used in the systemrole字段描述该颜色在系统中的作用如dominant ground, text, structural elements这是其他工具映射颜色用途的关键信息。排版Typography字段类型说明typography.displayobject展示/标题排版typography.bodyobject正文排版typography.captionobject说明文字/标签排版typography.rulesarray排版规则与约束排版对象的 schema 为display: family: Font Family Name weight: bold style: uppercase, tight tracking布局Layout字段类型说明layout.gridstring网格系统描述layout.alignmentstring对齐方式layout.aspect_ratiostring默认宽高比如 16:9layout.notesarray附加布局指南动效Motion字段类型说明motion.transitionsarray使用的转场类型motion.animation_stylestring整体动画手法motion.pacingstring时序/节奏描述motion.audio_cuesarray声音设计备注情绪Mood字段类型说明mood.keywordsarray情绪/感受关键词mood.erastring时代参考mood.cultural_referencestring文化/历史背景mood.avoidarray反模式——需要明确避免的东西mood.avoid是极具设计巧思的字段负面约束与正面约束同等重要告诉 AI 不要做什么往往比要做什么更有效规范文件中的设计决策部分对此有专门论述。资产Assets字段类型说明assets.reference_imagesarray参考图片 URLassets.gsep_elementsarray叠加/图形元素 URLassets.html_snippetsarrayHTML 组件示例 URLassets.color_palette_imageobject色板可视化 URL重要原则资产永远是 URL绝不内嵌二进制数据。这一约束让文件保持轻量、可版本化、可移植详见规范的设计决策部分。扩展Extensions——x_*前缀字段用于承载工具特有配置不污染核心 schemax_heygen: video_id: abc123 orientation: landscape x_figma: library_id: xyz789Markdown 正文部分YAML frontmatter 之后可以追加三个可选 Markdown 小节## Connectors各工具的应用翻译笔记。例如给 HeyGen 的视频风格块、给 HTML Slides 的 CSS 变量映射、给 paper.design 的文档设置说明## Design Principles自由形式的哲学陈述如 Typography drives hierarchy. Color is used sparingly and intentionally.## Extraction Notes提取来源的记录如 Extracted from https://example.com on 2026-03-12. Primary colors sampled from hero section.。验证规则Validation一个合法的visual-style.md必须满足在---定界符之间有合法的 YAML frontmatter所有必需字段齐备colors.primary至少包含 2 个颜色对象每个颜色对象都含name、hex、roleversion为1.0。版本控制语义version字段指向的是规范版本而非风格版本。当规范演进时次要变更新增可选字段版本保持1.0破坏性变更必需字段变化版本升至2.0。从模板出发最小集与完整集仓库提供了两套可直接套用的模板。最小模板minimal.visual-style.md只含必需字段适合快速起步--- name: Style Name version: 1.0 style_prompt_short: One to two sentences capturing the visual essence. style_prompt_full: Detailed generation prompt. Include specific hex colors, font names, layout structure, motion patterns, and overall mood. This is the most important field — any AI tool should be able to read this and generate consistent visuals. colors: primary: - name: Primary Color Name hex: #000000 role: how this color is used - name: Secondary Color Name hex: #FFFFFF role: how this color is used ---完整模板full.visual-style.md则覆盖全部可选字段tags/author/source_url/created元数据、accent/neutral颜色层级、typography三档字族与rules、layout的网格/对齐/宽高比/备注、motion的转场/动画/节奏/音效、mood的关键词/时代/文化参考/avoid 列表、assets的四类资产以及x_heygen/x_figma扩展字段。模板还预留了## Design Principles、## Connectors四个工具各一小节与## Extraction Notes三个正文段落。模板中特别提示style_prompt_full内联十六进制色值如#FF5500方便工具直接提取。完整示例Josef Müller-Brockmann 瑞士国际主义风格spec.md 给出了一个完整的端到端示例以下为浓缩但保留全部关键字段的版本可作为编写风格文件时的参照样板--- name: Josef Müller-Brockmann Swiss International Style version: 1.0 tags: - iconic design - sleek minimal author: Bin source_url: created: 2026-03-12 style_prompt_short: Grid-locked Swiss precision. Black and white base with electric blue accent. Helvetica only. Data visualizations as hero elements. 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. colors: primary: - name: Pure Black hex: #000000 role: dominant ground, text, structural elements - name: Pure White hex: #FFFFFF role: background fields, negative space accent: - name: Electric Blue hex: #0066FF role: the ONE accent — data highlights, key emphasis neutral: - name: Grid Gray hex: #CCCCCC role: grid lines, secondary structure 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 layout: grid: Strict modular grid — 12 columns alignment: Flush left, grid-snapped aspect_ratio: 16:9 notes: - Every element locked to the grid - Data visualizations are the hero elements 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. Nothing bounces. pacing: Measured, confident, unhurried mood: keywords: - precise - systematic - authoritative - geometric era: 1950s–1970s (timeless) cultural_reference: Müller-Brockmann, Grid Systems in Graphic Design avoid: - organic or curved shapes - gradients - stock photography - centered text - decorative elements assets: reference_images: [] gsep_elements: [] html_snippets: [] color_palette_image: url: --- ## Design Principles Typography and the grid are the only design elements needed. Mathematical relationships create visual harmony. Restraint is the ultimate sophistication. ## Connectors ### HeyGen Video Agent Use style_prompt_full verbatim. No avatar, no b-roll — pure motion graphics. Hard cuts between scenes. ### HTML Slides Map to CSS: --color-bg: #000, --color-text: #FFF, --color-accent: #0066FF. Use Helvetica via system fonts or Google Fonts equivalent.这个示例展示了规范的全部要点单一强调色、明确的反模式列表、字族唯一性约束、以及面向具体工具的 Connectors 笔记。提取器Extract 模式的三种来源从网站提取from-websitefrom-website.md 的工作流为接收 URL → 抓取页面 HTML/CSS → 尽可能截图 → 分析颜色/排版/布局/动效/情绪 → 生成完整风格文件 → 校验必需字段。提取提示词要求输出时做到三点具体化使用 CSS 中的精确十六进制值而非近似值描述性地命名每个颜色不叫 Blue 1而叫 Ocean Blue描述每个颜色在系统中的角色。附带的分析检查清单覆盖五个维度颜色背景色、文本色标题 vs 正文、强调/CTA 按钮色、链接色默认/悬停/已访问、边框/分割线色、渐变使用情况排版标题字族、正文字族、用到的字重、标题字号阶梯、行高、字距模式、文本变换大写等布局最大内容宽度、网格列数、间距节奏、对齐模式、卡片/组件模式、负空间使用动效页面转场、悬停效果、滚动动画、加载态、微交互情绪整体感受、设计时代、品牌个性、明确规避的东西。文件中还给出了一个基于 stripe.com 的完整提取示例含#635BFF品牌紫、#0A2540石板深色文本、#F6F9FC浅灰卡片背景等并给出实操建议用浏览器开发者工具dev tools获取精确十六进制值与字体栈许多站点在:root定义 CSS 变量优先检查style_prompt_full应唤起与来源相同的感受。从视频提取from-videofrom-video.md 的采样策略非常明确在以下时间点各取一帧共 4~6 帧——开场/标题帧0:00–0:02、早期内容帧0:05–0:10、中间内容帧0:15–0:20、结尾帧临近结束、以及可能的转场中间帧。核心方法论是寻找跨帧的一致性——风格就是保持不变的东西。对视频而言动效维度是重中之重元素是吸附snap还是缓动ease转场是硬切还是淡入淡出物体是弹跳、滑动还是突然出现节奏是快而活力还是慢而沉稳检查清单中 Motion 部分覆盖场景转场cut/wipe/dissolve/morph、元素入场fade/slide/pop/scale、元素退场、缓动风格linear/ease-out/bounce/snap、时序节奏、循环模式。示例输出是一个Pac-Man 街机风格的完整风格文件纯黑背景 霓虹像素、#FFFF00英雄黄、四个幽灵的经典配色Blinky 红#FF0000、Pinky 粉#FFB8FF、Inky 青#00FFFF、Clyde 橙#FFB852、Press Start 2P/VT323像素字体、12fps 上限的离散像素移动、硬切转场与 wakka-wakka 音效提示——并列出 6 项 avoid平滑渐变、抗锯齿边缘、写实元素、现代 UI 模式、缓慢平滑动画、灰暗低饱和颜色。从 PDF/品牌手册提取from-pdffrom-pdf.md 面向品牌手册类 PDF核心是章节映射品牌概览/使命 →style_prompt_short与mood.keywords色板章节 →colors.*主色 →colors.primary次要/强调色 →colors.accent排版章节 →typography.*网格系统 →layout.grid间距 →layout.notesDos and Donts →typography.rules与mood.avoid声音与语调 →mood.keywords与style_prompt_full。品牌手册常以多种格式标注颜色文件给出了转换参考格式示例转换方式Hex#FF5500直接使用RGB255, 85, 0→ #FF5500CMYK0, 67, 100, 0近似转换为 hexPantonePMS 021 C查询对应 hexHSL20°, 100%, 50%转换为 hexPantone 色可采用官方映射表或将 Pantone 编号记入role字段。提取提示词强调优先保留精确值品牌手册是精确的不要捏造不发明PDF 中没有的章节就留空style_prompt_full应读起来像写给设计师的简报mood.avoid往往在品牌手册中已有明确陈述在 Extraction Notes 中记录页码或章节名作为来源。连接器Apply 模式的四种目标HeyGen 视频智能体heygen-video-agent.md 将style_prompt_full原样追加到生成提示词中字段映射如下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 视频的引用 ID提示词模板结构为主题 → 脚本 → 视觉风格粘贴style_prompt_full→ 附加约束来自mood.avoid→ 动效转场/节奏/动画→ 格式。文件给出了无头像动效图形的完整示例将瑞士国际主义风格的style_prompt_full原样粘贴附加 No avatar. No b-roll. Pure motion graphics. 约束并显式指定转场为 horizontal grid wipes 与 hard cuts。三个关键技巧对不要的东西要明确HeyGen 对负向约束响应良好动效图形模式——抽象风格加 No avatar. No b-roll. Pure motion graphics.转场很重要——显式指定转场风格因为默认值可能不匹配你的风格。HTML 幻灯片HTML Slideshtml-slides.md 将风格字段映射为 CSS 变量与样式规则visual-style.md 字段CSS 输出colors.primary[0].hex--color-bgcolors.primary[1].hex--color-textcolors.accent[0].hex--color-accentcolors.neutral[0].hex--color-mutedtypography.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设计约束检查清单CSS 变量模板骨架:root { --color-bg: [colors.primary[0].hex]; --color-text: [colors.primary[1].hex]; --color-accent: [colors.accent[0].hex]; --color-muted: [colors.neutral[0].hex]; --font-display: [typography.display.family], system-ui, sans-serif; --font-body: [typography.body.family], system-ui, sans-serif; --space-sm: clamp(0.5rem, 1vw, 1rem); --space-md: clamp(1rem, 2vw, 2rem); --space-lg: clamp(2rem, 4vw, 4rem); }生成幻灯片时须遵守五条硬约束单 HTML 文件零依赖内联 CSS/JS视口单位所有尺寸用clamp()绝不用固定 px/rem禁止滚动每页height: 100vh; overflow: hidden;内容溢出就拆页Google Fonts 通过link在head中加载。文件还给出了瑞士风格幻灯片的完整 HTML 示例包括用repeating-linear-gradient实现的 12 列网格叠加层opacity: 0.1不遮挡内容。paper.designpaper-design.md 面向 UI 设计工具 paper.design映射关系包括colors.primary/accent/neutral→ 文档色板、typography.*.family→ 默认字体、style_prompt_full→ AI 布局建议提示词、mood.keywords→ 设计方向关键词、mood.avoid→ 设计约束清单、layout.grid→ 画板网格系统。应用流程为读取风格 → 按layout.aspect_ratio创建画板 → 用colors.primary[0].hex设置背景 → 按layout.grid搭建网格 → 加载typography.*字体 → 依mood.keywords构建内容 → 按mood.avoid复核。文件还提供了一份可复用的Design Brief 格式Markdown 模板汇总风格名称、色板、排版、布局、情绪与规避项以及瑞士风格的映射实例背景#000000、文本#FFFFFF、强调#0066FF、网格线#CCCCCCHelvetica 三档字重12 列模块化网格全部元素贴网格无居中文本。Figmafigma.md 将风格映射为 Figma 的样式系统颜色样式、文本样式、效果样式与布局网格。颜色样式按文件夹组织brand/primary 两档、accent/primary/secondary、neutral/light/dark并建议用role字段作为样式描述。文本样式分为heading/display48px 或从风格推导、body/default16px、label/default12px三档。布局网格按layout.grid描述生成预设12 columns → 12 列、Stretch 类型、Margin 64px、Gutter 24px8-point grid → 行高 8pxStrict modular grid → 同时启用行列。文件还提供了一个风格指南框架Style Guide Frame的可视化示意用 ASCII 呈现标题区、色板区、排版区、规则与规避清单区并给出了供 Figma 插件读取该格式的 TypeScript 类型定义VisualStyle、Color、TypographyStyle接口。技巧方面强调检查字体在 Figma 中是否可用Google Fonts 或本机安装、用文件夹按用途分组颜色样式、用typography.rules与mood.avoid生成设计评审检查清单。画廊五个开箱即用的预置风格references/gallery/下的五个风格文件覆盖从 1950 年代到 2020 年代的不同设计纪元风格时代文件Müller-Brockmann 瑞士国际主义1950s–70smueller-brockmann-swiss.visual-style.mdNeville Brody 工业风1980s–90s 晚期neville-brody-industrial.visual-style.mdSaul Bass 电影感1950s–60ssaul-bass-cinematic.visual-style.mdGame Boy Color1998–2003game-boy-color.visual-style.mdHeyGen AI Video2020sheygen-ai-video.visual-style.md以 game-boy-color.visual-style.md 为例可以窥见画廊风格的完整程度style_prompt_full包含 GBC 标志性的青绿渐变#0F380F至#9BBC0F、紫壳#663399、莓粉#CC3366、青色#339999、原子紫#6B3FA0排版规则要求全部像素完美、字符逐字显现布局采用 8px 基础网格、原生 160x144 分辨率整数倍放大动效限定 10–15fps 精灵动画、无平滑转场情绪关键词为 nostalgic/portable/colorful/charming/playful/adventureavoid 清单包含平滑渐变、高分辨率图形、写实元素、现代 UI 模式、总计超过 56 色、平滑动画与抗锯齿。文件末尾还为 HeyGen强调 chunky pixels、低帧率、chip tune 音效、HTML SlidesPress Start 2P/VT323 像素字体、整数倍缩放、paper.design低分辨率设计后放大、8px 网格与 Figmagbc/dark-green等颜色样式命名、8x8 像素网格、导出无抗锯齿各写了一节应用笔记——这正是 spec 中 Markdown 正文部分 Connectors 段落的实际落地范例。最佳实践与设计决策技能文件总结的五条最佳实践style_prompt_full是核心——它必须始终能作为独立生成提示词使用一风格一文件——不做多风格捆绑资产用 URL——绝不内嵌二进制数据展示而非描述Show, dont tell——创建风格时生成预览有主见的默认值 灵活扩展——核心 schema 固定x_*承载工具特有配置。规范文件 spec.md 的设计决策章节则解释了四个底层取舍为什么style_prompt_full必填很多 AI 工具只接受文本提示词强制要求完整的自然语言风格描述能确保每个visual-style.md即使在不解析结构化字段的工具中也能立即使用为什么不内嵌二进制URL 让文件保持轻量、可版本化、可移植二进制资产应托管在外部并通过 URL 引用为什么用x_*命名空间不同工具能力各异x_前缀让工具特定配置不污染核心 schema如x_heygen、x_figma、x_paper为什么设置mood.avoid负面约束与正面约束同样重要告诉 AI 不要做什么往往更有效。在 OpenMontage 中的定位与使用前提从 skills/INDEX.md 可以确认该技能在 OpenMontage 三层知识架构中的位置工具注册层Layer 1声明工具能力项目惯例层Layer 2即skills/目录而visual-style属于 Layer 3.agents/skills/通过.claude/skills/符号链接暴露提供与具体项目无关的通用技能知识按需加载。实际使用时需注意以下前提visual-style技能的安装与更新依赖npx skills add机制技能由外部heygen-com/skills提供OpenMontage 仓库通过符号链接接入HeyGen 连接器的实际出片依赖 HeyGen Video Agent 的 API 或 MCP 工具调用对应仓库中的heygen_video工具与 heygen 技能若需在 OpenMontage 内将视觉风格落到可渲染的视频成品上可进一步与 Remotion 合成器、HyperFrames 技能 或 AnimeScene/文本卡片等组件 结合把风格字段翻译为实际的 HTML/CSS 与动效代码。总而言之visual-style提供了一条一次定义、处处消费的视觉风格生产线用 minimal/full 模板 从零创建用三类提取器 从任何现有素材反推用四个连接器 落到具体工具再用画廊 中的大师风格快速起步——而这一切都建立在一个可读、可移植、可校验的单文件格式之上。【免费下载链接】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 便携式视觉设计系统：创建、提取与应用实战指南
OpenMontage 的 visual-style 便携式视觉设计系统创建、提取与应用实战指南【免费下载链接】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/OpenMontageOpenMontage 将visual-style作为其 AI 视频技能体系中的关键一环通过一个visual-style.md文件即可完整定义一套视觉设计系统——颜色、排版、布局、动效与情绪基调并让任何 AI 工具直接消费。本篇指南围绕仓库中的 visual-style 技能定义 及其规范、模板、连接器与提取器文件展开带你掌握从零创建视觉风格、从网站/视频/PDF 品牌手册反向提取风格、以及将风格应用到 HeyGen 视频、HTML 幻灯片、paper.design 与 Figma 的完整方法论。visual-style.md一份文件承载一套视觉设计系统visual-style.md是一个带有 YAML frontmatter 的 Markdown 文档用于定义完整的视觉设计系统。它的设计目标有三条缺一不可人类可读Human-readable任何文本编辑器都能直接打开理解AI 可消费AI-consumable每一个字段都能被 AI 模型直接使用无需二次解释可移植Portable同一份文件可以在任何支持该格式的工具之间流转。在 OpenMontage 中该技能属于三层知识架构中的Layer 3 技能通用 API/技术知识层。根据 skills/INDEX.md 的能力索引visual-style被归入 AI Video (HeyGen) 类别随.agents/skills/中的技能集安装来源为heygen-com/skills并通过符号链接暴露在.claude/skills/下供 Claude Code 直接调用。四种工作模式Create / Extract / Apply / Gallery技能入口文件 SKILL.md 定义了四种触发模式覆盖视觉风格从无到有再到用起来的完整生命周期模式触发指令功能Create创建Create a visual-style.md for...通过引导式提问从零构建一套风格Extract提取Extract a visual-style.md from [URL/image/video]分析来源并生成风格文件Apply应用Apply this visual-style.md to [tool]借助具体连接器将风格用于目标工具Gallery画廊Show me available visual styles浏览并使用预置风格技能元信息frontmatter中的description还明确了六类触发场景从零创建设计系统、从 URL/视频/PDF 品牌手册提取风格、将风格应用到 HeyGen 视频/HTML 幻灯片/Figma/paper.design、浏览预置风格画廊Swiss、Saul Bass、Game Boy 等、用户提到 visual style、design system、brand style 或 style guide以及为 HeyGen 视频统一设计语言。Create从感觉到结构化定义创建模式的默认工作流是引导式的七步流程收集感觉Gather vibe——询问情绪关键词、时代、参考与灵感来源定义颜色Define colors——主色至少 2 个、强调色、中性色附带十六进制值与角色说明设定排版Set typography——展示体、正文、说明文字的字族及字重/样式规则布局与动效Layout motion——网格系统、转场、节奏生成Generate——基于 minimal 模板 或 full 模板 输出完整的visual-style.md预览Preview——展示小型 HTML 色板或描述视觉结果可选应用Optionally apply——询问用户是否要接入某个连接器。过程中建议一次性批量提问四类问题避免来回打断用户整体氛围是什么情绪关键词、时代、参考有指定的颜色吗或从氛围中推导排版偏好干净、编辑感、技术感、俏皮这套风格将用于哪个工具HeyGen、幻灯片、paper.design、FigmaExtract从现有素材反推设计系统提取模式接收 URL、图片、视频或 PDF 作为输入遵循加载提取器 → 分析 → 生成 → 校验的流程最终输出带有source_url的完整风格文件。仓库在references/extractors/下提供了三类提取器详见后文。Apply把风格翻译成目标工具的格式应用模式的核心是映射Transform读取visual-style.md→ 确认连接器或从上下文推断→ 加载对应连接器参考文件 → 将风格字段映射为工具特有的格式 → 生成可直接使用的指令或代码。仓库在references/connectors/下提供了四个连接器。Gallery开箱即用的风格库画廊模式直接浏览references/gallery/下预置的五个风格文件每个都是一份完整、可直接应用的visual-style.md。格式规范详解从必需字段到扩展机制格式的权威定义位于 references/spec.mdSpec 版本 1.0Draft 状态。文件结构为标准的---分隔 YAML frontmatter 加 Markdown 正文。必需字段Required Fields字段类型说明namestring风格显示名称versionstring规范版本当前为1.0style_prompt_shortstring1~2 句的电梯陈述elevator pitchstyle_prompt_fullstring完整的自然语言生成提示词——最重要的字段colors.primaryarray至少 2 个颜色对象每个含name、hex、rolestyle_prompt_full是核心中的核心。如果某个工具只能读取一个字段它读的就是这个字段。其余结构化字段是给需要精细控制的工具使用的。技能文件与规范文件都反复强调这一原则甚至直接用了 style_prompt_fullis king 的表述。可选字段Optional Fields元数据Metadata字段类型说明tagsarray分类标签如 iconic design、retro techauthorstring风格创建者署名source_urlstring该风格提取自的 URLcreatedstringISO 日期YYYY-MM-DD颜色Colors——除必填的colors.primary外还有colors.accent与colors.neutral。颜色对象的标准 schema 为- name: Descriptive Name hex: #RRGGBB role: how this color is used in the systemrole字段描述该颜色在系统中的作用如dominant ground, text, structural elements这是其他工具映射颜色用途的关键信息。排版Typography字段类型说明typography.displayobject展示/标题排版typography.bodyobject正文排版typography.captionobject说明文字/标签排版typography.rulesarray排版规则与约束排版对象的 schema 为display: family: Font Family Name weight: bold style: uppercase, tight tracking布局Layout字段类型说明layout.gridstring网格系统描述layout.alignmentstring对齐方式layout.aspect_ratiostring默认宽高比如 16:9layout.notesarray附加布局指南动效Motion字段类型说明motion.transitionsarray使用的转场类型motion.animation_stylestring整体动画手法motion.pacingstring时序/节奏描述motion.audio_cuesarray声音设计备注情绪Mood字段类型说明mood.keywordsarray情绪/感受关键词mood.erastring时代参考mood.cultural_referencestring文化/历史背景mood.avoidarray反模式——需要明确避免的东西mood.avoid是极具设计巧思的字段负面约束与正面约束同等重要告诉 AI 不要做什么往往比要做什么更有效规范文件中的设计决策部分对此有专门论述。资产Assets字段类型说明assets.reference_imagesarray参考图片 URLassets.gsep_elementsarray叠加/图形元素 URLassets.html_snippetsarrayHTML 组件示例 URLassets.color_palette_imageobject色板可视化 URL重要原则资产永远是 URL绝不内嵌二进制数据。这一约束让文件保持轻量、可版本化、可移植详见规范的设计决策部分。扩展Extensions——x_*前缀字段用于承载工具特有配置不污染核心 schemax_heygen: video_id: abc123 orientation: landscape x_figma: library_id: xyz789Markdown 正文部分YAML frontmatter 之后可以追加三个可选 Markdown 小节## Connectors各工具的应用翻译笔记。例如给 HeyGen 的视频风格块、给 HTML Slides 的 CSS 变量映射、给 paper.design 的文档设置说明## Design Principles自由形式的哲学陈述如 Typography drives hierarchy. Color is used sparingly and intentionally.## Extraction Notes提取来源的记录如 Extracted from https://example.com on 2026-03-12. Primary colors sampled from hero section.。验证规则Validation一个合法的visual-style.md必须满足在---定界符之间有合法的 YAML frontmatter所有必需字段齐备colors.primary至少包含 2 个颜色对象每个颜色对象都含name、hex、roleversion为1.0。版本控制语义version字段指向的是规范版本而非风格版本。当规范演进时次要变更新增可选字段版本保持1.0破坏性变更必需字段变化版本升至2.0。从模板出发最小集与完整集仓库提供了两套可直接套用的模板。最小模板minimal.visual-style.md只含必需字段适合快速起步--- name: Style Name version: 1.0 style_prompt_short: One to two sentences capturing the visual essence. style_prompt_full: Detailed generation prompt. Include specific hex colors, font names, layout structure, motion patterns, and overall mood. This is the most important field — any AI tool should be able to read this and generate consistent visuals. colors: primary: - name: Primary Color Name hex: #000000 role: how this color is used - name: Secondary Color Name hex: #FFFFFF role: how this color is used ---完整模板full.visual-style.md则覆盖全部可选字段tags/author/source_url/created元数据、accent/neutral颜色层级、typography三档字族与rules、layout的网格/对齐/宽高比/备注、motion的转场/动画/节奏/音效、mood的关键词/时代/文化参考/avoid 列表、assets的四类资产以及x_heygen/x_figma扩展字段。模板还预留了## Design Principles、## Connectors四个工具各一小节与## Extraction Notes三个正文段落。模板中特别提示style_prompt_full内联十六进制色值如#FF5500方便工具直接提取。完整示例Josef Müller-Brockmann 瑞士国际主义风格spec.md 给出了一个完整的端到端示例以下为浓缩但保留全部关键字段的版本可作为编写风格文件时的参照样板--- name: Josef Müller-Brockmann Swiss International Style version: 1.0 tags: - iconic design - sleek minimal author: Bin source_url: created: 2026-03-12 style_prompt_short: Grid-locked Swiss precision. Black and white base with electric blue accent. Helvetica only. Data visualizations as hero elements. 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. colors: primary: - name: Pure Black hex: #000000 role: dominant ground, text, structural elements - name: Pure White hex: #FFFFFF role: background fields, negative space accent: - name: Electric Blue hex: #0066FF role: the ONE accent — data highlights, key emphasis neutral: - name: Grid Gray hex: #CCCCCC role: grid lines, secondary structure 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 layout: grid: Strict modular grid — 12 columns alignment: Flush left, grid-snapped aspect_ratio: 16:9 notes: - Every element locked to the grid - Data visualizations are the hero elements 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. Nothing bounces. pacing: Measured, confident, unhurried mood: keywords: - precise - systematic - authoritative - geometric era: 1950s–1970s (timeless) cultural_reference: Müller-Brockmann, Grid Systems in Graphic Design avoid: - organic or curved shapes - gradients - stock photography - centered text - decorative elements assets: reference_images: [] gsep_elements: [] html_snippets: [] color_palette_image: url: --- ## Design Principles Typography and the grid are the only design elements needed. Mathematical relationships create visual harmony. Restraint is the ultimate sophistication. ## Connectors ### HeyGen Video Agent Use style_prompt_full verbatim. No avatar, no b-roll — pure motion graphics. Hard cuts between scenes. ### HTML Slides Map to CSS: --color-bg: #000, --color-text: #FFF, --color-accent: #0066FF. Use Helvetica via system fonts or Google Fonts equivalent.这个示例展示了规范的全部要点单一强调色、明确的反模式列表、字族唯一性约束、以及面向具体工具的 Connectors 笔记。提取器Extract 模式的三种来源从网站提取from-websitefrom-website.md 的工作流为接收 URL → 抓取页面 HTML/CSS → 尽可能截图 → 分析颜色/排版/布局/动效/情绪 → 生成完整风格文件 → 校验必需字段。提取提示词要求输出时做到三点具体化使用 CSS 中的精确十六进制值而非近似值描述性地命名每个颜色不叫 Blue 1而叫 Ocean Blue描述每个颜色在系统中的角色。附带的分析检查清单覆盖五个维度颜色背景色、文本色标题 vs 正文、强调/CTA 按钮色、链接色默认/悬停/已访问、边框/分割线色、渐变使用情况排版标题字族、正文字族、用到的字重、标题字号阶梯、行高、字距模式、文本变换大写等布局最大内容宽度、网格列数、间距节奏、对齐模式、卡片/组件模式、负空间使用动效页面转场、悬停效果、滚动动画、加载态、微交互情绪整体感受、设计时代、品牌个性、明确规避的东西。文件中还给出了一个基于 stripe.com 的完整提取示例含#635BFF品牌紫、#0A2540石板深色文本、#F6F9FC浅灰卡片背景等并给出实操建议用浏览器开发者工具dev tools获取精确十六进制值与字体栈许多站点在:root定义 CSS 变量优先检查style_prompt_full应唤起与来源相同的感受。从视频提取from-videofrom-video.md 的采样策略非常明确在以下时间点各取一帧共 4~6 帧——开场/标题帧0:00–0:02、早期内容帧0:05–0:10、中间内容帧0:15–0:20、结尾帧临近结束、以及可能的转场中间帧。核心方法论是寻找跨帧的一致性——风格就是保持不变的东西。对视频而言动效维度是重中之重元素是吸附snap还是缓动ease转场是硬切还是淡入淡出物体是弹跳、滑动还是突然出现节奏是快而活力还是慢而沉稳检查清单中 Motion 部分覆盖场景转场cut/wipe/dissolve/morph、元素入场fade/slide/pop/scale、元素退场、缓动风格linear/ease-out/bounce/snap、时序节奏、循环模式。示例输出是一个Pac-Man 街机风格的完整风格文件纯黑背景 霓虹像素、#FFFF00英雄黄、四个幽灵的经典配色Blinky 红#FF0000、Pinky 粉#FFB8FF、Inky 青#00FFFF、Clyde 橙#FFB852、Press Start 2P/VT323像素字体、12fps 上限的离散像素移动、硬切转场与 wakka-wakka 音效提示——并列出 6 项 avoid平滑渐变、抗锯齿边缘、写实元素、现代 UI 模式、缓慢平滑动画、灰暗低饱和颜色。从 PDF/品牌手册提取from-pdffrom-pdf.md 面向品牌手册类 PDF核心是章节映射品牌概览/使命 →style_prompt_short与mood.keywords色板章节 →colors.*主色 →colors.primary次要/强调色 →colors.accent排版章节 →typography.*网格系统 →layout.grid间距 →layout.notesDos and Donts →typography.rules与mood.avoid声音与语调 →mood.keywords与style_prompt_full。品牌手册常以多种格式标注颜色文件给出了转换参考格式示例转换方式Hex#FF5500直接使用RGB255, 85, 0→ #FF5500CMYK0, 67, 100, 0近似转换为 hexPantonePMS 021 C查询对应 hexHSL20°, 100%, 50%转换为 hexPantone 色可采用官方映射表或将 Pantone 编号记入role字段。提取提示词强调优先保留精确值品牌手册是精确的不要捏造不发明PDF 中没有的章节就留空style_prompt_full应读起来像写给设计师的简报mood.avoid往往在品牌手册中已有明确陈述在 Extraction Notes 中记录页码或章节名作为来源。连接器Apply 模式的四种目标HeyGen 视频智能体heygen-video-agent.md 将style_prompt_full原样追加到生成提示词中字段映射如下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 视频的引用 ID提示词模板结构为主题 → 脚本 → 视觉风格粘贴style_prompt_full→ 附加约束来自mood.avoid→ 动效转场/节奏/动画→ 格式。文件给出了无头像动效图形的完整示例将瑞士国际主义风格的style_prompt_full原样粘贴附加 No avatar. No b-roll. Pure motion graphics. 约束并显式指定转场为 horizontal grid wipes 与 hard cuts。三个关键技巧对不要的东西要明确HeyGen 对负向约束响应良好动效图形模式——抽象风格加 No avatar. No b-roll. Pure motion graphics.转场很重要——显式指定转场风格因为默认值可能不匹配你的风格。HTML 幻灯片HTML Slideshtml-slides.md 将风格字段映射为 CSS 变量与样式规则visual-style.md 字段CSS 输出colors.primary[0].hex--color-bgcolors.primary[1].hex--color-textcolors.accent[0].hex--color-accentcolors.neutral[0].hex--color-mutedtypography.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设计约束检查清单CSS 变量模板骨架:root { --color-bg: [colors.primary[0].hex]; --color-text: [colors.primary[1].hex]; --color-accent: [colors.accent[0].hex]; --color-muted: [colors.neutral[0].hex]; --font-display: [typography.display.family], system-ui, sans-serif; --font-body: [typography.body.family], system-ui, sans-serif; --space-sm: clamp(0.5rem, 1vw, 1rem); --space-md: clamp(1rem, 2vw, 2rem); --space-lg: clamp(2rem, 4vw, 4rem); }生成幻灯片时须遵守五条硬约束单 HTML 文件零依赖内联 CSS/JS视口单位所有尺寸用clamp()绝不用固定 px/rem禁止滚动每页height: 100vh; overflow: hidden;内容溢出就拆页Google Fonts 通过link在head中加载。文件还给出了瑞士风格幻灯片的完整 HTML 示例包括用repeating-linear-gradient实现的 12 列网格叠加层opacity: 0.1不遮挡内容。paper.designpaper-design.md 面向 UI 设计工具 paper.design映射关系包括colors.primary/accent/neutral→ 文档色板、typography.*.family→ 默认字体、style_prompt_full→ AI 布局建议提示词、mood.keywords→ 设计方向关键词、mood.avoid→ 设计约束清单、layout.grid→ 画板网格系统。应用流程为读取风格 → 按layout.aspect_ratio创建画板 → 用colors.primary[0].hex设置背景 → 按layout.grid搭建网格 → 加载typography.*字体 → 依mood.keywords构建内容 → 按mood.avoid复核。文件还提供了一份可复用的Design Brief 格式Markdown 模板汇总风格名称、色板、排版、布局、情绪与规避项以及瑞士风格的映射实例背景#000000、文本#FFFFFF、强调#0066FF、网格线#CCCCCCHelvetica 三档字重12 列模块化网格全部元素贴网格无居中文本。Figmafigma.md 将风格映射为 Figma 的样式系统颜色样式、文本样式、效果样式与布局网格。颜色样式按文件夹组织brand/primary 两档、accent/primary/secondary、neutral/light/dark并建议用role字段作为样式描述。文本样式分为heading/display48px 或从风格推导、body/default16px、label/default12px三档。布局网格按layout.grid描述生成预设12 columns → 12 列、Stretch 类型、Margin 64px、Gutter 24px8-point grid → 行高 8pxStrict modular grid → 同时启用行列。文件还提供了一个风格指南框架Style Guide Frame的可视化示意用 ASCII 呈现标题区、色板区、排版区、规则与规避清单区并给出了供 Figma 插件读取该格式的 TypeScript 类型定义VisualStyle、Color、TypographyStyle接口。技巧方面强调检查字体在 Figma 中是否可用Google Fonts 或本机安装、用文件夹按用途分组颜色样式、用typography.rules与mood.avoid生成设计评审检查清单。画廊五个开箱即用的预置风格references/gallery/下的五个风格文件覆盖从 1950 年代到 2020 年代的不同设计纪元风格时代文件Müller-Brockmann 瑞士国际主义1950s–70smueller-brockmann-swiss.visual-style.mdNeville Brody 工业风1980s–90s 晚期neville-brody-industrial.visual-style.mdSaul Bass 电影感1950s–60ssaul-bass-cinematic.visual-style.mdGame Boy Color1998–2003game-boy-color.visual-style.mdHeyGen AI Video2020sheygen-ai-video.visual-style.md以 game-boy-color.visual-style.md 为例可以窥见画廊风格的完整程度style_prompt_full包含 GBC 标志性的青绿渐变#0F380F至#9BBC0F、紫壳#663399、莓粉#CC3366、青色#339999、原子紫#6B3FA0排版规则要求全部像素完美、字符逐字显现布局采用 8px 基础网格、原生 160x144 分辨率整数倍放大动效限定 10–15fps 精灵动画、无平滑转场情绪关键词为 nostalgic/portable/colorful/charming/playful/adventureavoid 清单包含平滑渐变、高分辨率图形、写实元素、现代 UI 模式、总计超过 56 色、平滑动画与抗锯齿。文件末尾还为 HeyGen强调 chunky pixels、低帧率、chip tune 音效、HTML SlidesPress Start 2P/VT323 像素字体、整数倍缩放、paper.design低分辨率设计后放大、8px 网格与 Figmagbc/dark-green等颜色样式命名、8x8 像素网格、导出无抗锯齿各写了一节应用笔记——这正是 spec 中 Markdown 正文部分 Connectors 段落的实际落地范例。最佳实践与设计决策技能文件总结的五条最佳实践style_prompt_full是核心——它必须始终能作为独立生成提示词使用一风格一文件——不做多风格捆绑资产用 URL——绝不内嵌二进制数据展示而非描述Show, dont tell——创建风格时生成预览有主见的默认值 灵活扩展——核心 schema 固定x_*承载工具特有配置。规范文件 spec.md 的设计决策章节则解释了四个底层取舍为什么style_prompt_full必填很多 AI 工具只接受文本提示词强制要求完整的自然语言风格描述能确保每个visual-style.md即使在不解析结构化字段的工具中也能立即使用为什么不内嵌二进制URL 让文件保持轻量、可版本化、可移植二进制资产应托管在外部并通过 URL 引用为什么用x_*命名空间不同工具能力各异x_前缀让工具特定配置不污染核心 schema如x_heygen、x_figma、x_paper为什么设置mood.avoid负面约束与正面约束同样重要告诉 AI 不要做什么往往更有效。在 OpenMontage 中的定位与使用前提从 skills/INDEX.md 可以确认该技能在 OpenMontage 三层知识架构中的位置工具注册层Layer 1声明工具能力项目惯例层Layer 2即skills/目录而visual-style属于 Layer 3.agents/skills/通过.claude/skills/符号链接暴露提供与具体项目无关的通用技能知识按需加载。实际使用时需注意以下前提visual-style技能的安装与更新依赖npx skills add机制技能由外部heygen-com/skills提供OpenMontage 仓库通过符号链接接入HeyGen 连接器的实际出片依赖 HeyGen Video Agent 的 API 或 MCP 工具调用对应仓库中的heygen_video工具与 heygen 技能若需在 OpenMontage 内将视觉风格落到可渲染的视频成品上可进一步与 Remotion 合成器、HyperFrames 技能 或 AnimeScene/文本卡片等组件 结合把风格字段翻译为实际的 HTML/CSS 与动效代码。总而言之visual-style提供了一条一次定义、处处消费的视觉风格生产线用 minimal/full 模板 从零创建用三类提取器 从任何现有素材反推用四个连接器 落到具体工具再用画廊 中的大师风格快速起步——而这一切都建立在一个可读、可移植、可校验的单文件格式之上。【免费下载链接】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），仅供参考