OpenMontage 视觉风格提取指南从任意网站 URL 生成可移植的 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 中visual-style技能的核心提取器Extractor之一——从网站 URL 反向生成一套完整、结构化、可被任何 AI 工具直接消费的视觉设计系统文件visual-style.md。这套方法适用于品牌网页改版、竞品风格还原、为 AI 视频与 HTML 演示设定统一视觉基调等场景。读完本文你将掌握从拿到一个网址到产出一份含精确色值、字体栈、栅格、动效与情绪语境的风格文件的完整六步流程并理解其底层字段规范与校验规则可直接在 OpenMontage 的 Agent 工作流中复现。一、先理解产出物什么是 visual-style.md在进入从网站提取之前需要先明确提取的产物形态。OpenMontage 的visual-style技能见 .agents/skills/visual-style/SKILL.md将视觉设计系统定义为一个 Markdown 文件文件头部是 YAML frontmatter统一承载colors颜色、typography字体、layout布局、motion动效、mood情绪五个维度文件正文则用## Design Principles、## Connectors、## Extraction Notes等 Markdown 小节记录设计哲学与使用说明。该格式的完整规格见 .agents/skills/visual-style/references/spec.md其设计目标有三条人类可读任何文本编辑器都能直接查看和理解AI 可消费每一个字段都能被 AI 模型直接读取使用可移植同一份文件可跨 HeyGen、HTML Slides、Figma、paper.design 等多种下游工具复用。技能整体提供 Create / Extract / Apply / Gallery 四种模式本文聚焦其中的Extract 模式网站来源对应的提取器参考文档即 .agents/skills/visual-style/references/extractors/from-website.md与之并列的还有 视频关键帧提取器 与 PDF 品牌手册提取器。二、核心工作流从 URL 到 visual-style.md 的六步提取器文档给出的标准工作流如下接收 URL—— 用户提供一个网站地址抓取页面—— 使用 Web Fetch 获取 HTML/CSS截取截图—— 尽可能对页面进行可视化截屏分析—— 识别颜色、字体、布局、动效与情绪生成—— 输出完整的visual-style.md校验—— 确保所有必填字段均已就位。这六步与SKILL.md中 Extract 模式的通用流程保持一致接收源 → 加载对应提取器参考文件 → 分析 → 生成并写入source_url→ 校验必填字段。关键区别在于网站这一来源要求分析者同时处理两类信息抓取到的结构化源码HTML/CSS与截图呈现的视觉直觉。前者提供精确证据十六进制色值、字体栈、栅格参数后者提供氛围判断留白、节奏、情绪。文档中反复强调色值必须来自 CSS 的真实值不能靠肉眼近似。三、提取提示词模板可直接复用的完整原文from-website.md提供了一段可直接交给大模型使用的提示词模板。进行网站分析时可将 URL 填入方括号占位处其余内容原样下发Analyze this website and extract a visual-style.md following the spec. URL: [URL] Identify and output these fields: REQUIRED: - name: A descriptive name for this style (e.g., [Brand] Web Style) - version: 1.0 - style_prompt_short: 1-2 sentence hook capturing the visual essence - style_prompt_full: Detailed generation prompt with specific: - Hex color codes (use exact values, dont guess) - Font family names (check the CSS) - Layout structure (grid system, spacing patterns) - Motion patterns (animations, transitions) - Overall mood and feel - colors.primary: At least 2 colors with name, hex, role RECOMMENDED: - colors.accent: Accent colors with name, hex, role - colors.neutral: Neutral/gray colors with name, hex, role - typography.display: Heading font family, weight, style - typography.body: Body font family, weight, style - typography.caption: Caption/label font family, weight, style - typography.rules: Typography constraints and patterns - layout.grid: Grid system description - layout.alignment: Alignment patterns - layout.notes: Additional layout observations - motion.transitions: Transition types used - motion.animation_style: Overall animation approach - mood.keywords: 4-6 mood/feeling words - mood.era: Design era reference - mood.avoid: Anti-patterns to avoid Be specific: - Use exact hex values from the CSS, not approximations - Name every color descriptively (not Blue 1, but Ocean Blue) - Describe the role of each color in the system - Note any custom fonts and their fallbacks Output format: Complete YAML frontmatter between --- delimiters Plus Markdown body sections (## Design Principles, ## Extraction Notes)模板本身已经点明了四条具体性纪律色值取 CSS 精确值而非近似值每个颜色必须用描述性命名Ocean Blue 而非 Blue 1说明每个颜色在系统中的作用记录自定义字体及其回退栈。这与 完整模板 中在提示词里内联 hex 代码以便工具提取的建议一脉相承。四、五维分析清单提取时逐项核对什么模板之外提取器文档给出了一份可勾选的核对清单将分析网站拆解为五个维度。这五维同时也是visual-style.md的五大字段族分析质量直接决定产出文件的可用性。4.1 颜色Colors背景色主要表面文字色标题 vs 正文强调色 / CTA 按钮颜色链接颜色默认、悬停、访问后边框 / 分隔线颜色渐变使用情况如有实操要点优先检查 CSS 中的:root变量定义——大量网站将整套色板集中在 CSS 自定义属性中一次Inspect Element即可拿到全部精确色值CTA 按钮是采强调色的最佳采样点下文 Stripe 示例正是从 CTA 按钮采样紫色。4.2 字体Typography标题字体族正文字体族使用的字重light、regular、bold 等字号标题层级行高字距模式文本变换大写 / 小写实操要点字体栈必须从浏览器开发者工具中读取font-family声明注意区分自定义字体与系统回退字体两者都要写进typography.*.family如 Söhne, Inter, system-ui。4.3 布局Layout内容最大宽度栅格列数如可见间距节奏一致的间隔对齐模式左对齐、居中、混合卡片 / 组件模式负空间的使用实操要点栅格信息既要看布局工具类12 列栅格等也要看视觉上的一致间隔8px 基数等layout.notes适合记录节与节之间垂直间距宽裕卡片带轻微阴影与圆角这类从截图中观察到的模式。4.4 动效Motion页面过渡悬停效果滚动动画加载状态微交互实操要点网站是仅次于视频的动效富矿务必记录过渡时长如 0.2s 悬停过渡、缓动风格subtle/smooth/bouncy与滚动行为视差、渐显这些字段将直接映射到motion.transitions与motion.animation_style。4.5 情绪Mood整体感受专业、俏皮、极简、大胆设计年代现代、复古、经典品牌个性严肃、友好、技术感他们明确回避什么实操要点mood.avoid反模式清单是情绪维度的关键产出——这家品牌明确不做什么往往比做什么更能约束下游生成的一致性。五、完整示例从 stripe.com 提取一份风格文件文档给出了一个可直接对照学习的完整示例输出。假设 URL 为https://stripe.com最终生成的visual-style.md如下YAML frontmatter 与 Markdown 正文均在---分隔符之间--- name: Stripe Web Style version: 1.0 tags: - fintech - sleek minimal author: Extracted source_url: https://stripe.com created: 2026-03-12 style_prompt_short: Clean fintech minimalism with deep purple accents on white. Generous whitespace, clear typography, subtle gradients. style_prompt_full: Modern fintech design inspired by Stripe. Clean white backgrounds with generous whitespace. Deep purple (#635BFF) as the primary accent color. Typography uses a custom geometric sans-serif (similar to Inter or Söhne) with clear hierarchy. Subtle mesh gradients in backgrounds. Rounded corners on cards and buttons. Smooth, subtle animations on scroll. Professional, trustworthy, approachable. No harsh colors, no busy patterns, no stock photos. colors: primary: - name: Pure White hex: #FFFFFF role: primary background, negative space - name: Slate Dark hex: #0A2540 role: primary text, headings accent: - name: Stripe Purple hex: #635BFF role: CTAs, links, brand accent - name: Cyan Accent hex: #00D4FF role: secondary accent, gradients neutral: - name: Slate Gray hex: #425466 role: body text, secondary content - name: Light Gray hex: #F6F9FC role: section backgrounds, cards typography: display: family: Söhne, Inter, system-ui weight: 600 style: sentence case, tight tracking body: family: Söhne, Inter, system-ui weight: 400 style: generous line height, comfortable reading caption: family: Söhne Mono, monospace weight: 400 style: code blocks, technical details rules: - Clear size hierarchy: 64px → 48px → 32px → 24px → 16px - Generous line heights for readability - Monospace for code and technical content layout: grid: 12 columns, max-width 1200px alignment: Center-aligned sections, left-aligned text aspect_ratio: 16:9 for hero, varied for content notes: - Generous vertical spacing between sections - Cards with subtle shadows and rounded corners - Alternating section backgrounds motion: transitions: - subtle fade-in on scroll - smooth hover state transitions (0.2s) - parallax on hero backgrounds animation_style: Subtle, smooth, professional. Nothing bouncy or playful. pacing: Measured, confident transitions mood: keywords: - professional - trustworthy - clean - modern - approachable era: 2020s fintech cultural_reference: Modern SaaS, developer-focused design avoid: - harsh or neon colors - busy patterns or textures - stock photography - overly playful animations - dark mode (unless requested) assets: reference_images: [] color_palette_image: url: --- ## Design Principles Trust through clarity. Every element earns its place. Typography and whitespace do the heavy lifting. Color is used sparingly and intentionally. ## Extraction Notes Extracted from https://stripe.com on 2026-03-12. Primary purple sampled from CTA buttons. Typography stack identified via browser dev tools. Mesh gradient patterns noted in hero sections.该示例展示了几个值得学习的写法描述性命名Pure White / Slate Dark / Stripe Purple / Cyan Accent每个名字都承载角色语义精确色值#635BFF、#0A2540等均来自真实品牌色注释明确标注Primary purple sampled from CTA buttons角色说明每个颜色都写了role背景、正文、CTA、次级强调……这正是下游工具做语义映射的输入双 prompt 结构style_prompt_short是电梯演讲style_prompt_full是可独立生成视觉的自然语言完整描述Extraction Notes 溯源记录来源 URL、提取日期、采样方法CTA 按钮取紫、开发者工具识别字体栈、Hero 区观察到网格渐变。六、字段规范与校验规则确保产物合法提取完成后必须执行校验。依据 spec.md一份合法的visual-style.md必须满足YAML frontmatter 位于---分隔符之间且合法所有必填字段齐全colors.primary至少包含 2 个颜色对象每个颜色对象包含name、hex、roleversion为1.0。其中必填字段只有五个name、version、style_prompt_short、style_prompt_full、colors.primary≥2 个带 name/hex/role 的颜色对象。其余如colors.accent、colors.neutral、typography.*、layout.*、motion.*、mood.*、assets.*均为可选但建议尽量采集——它们让工具能做更精细的控制。两个需要特别强调的设计决策style_prompt_full是王者字段SKILL.md 明确指出如果工具只能读一个字段就读这个。因为许多 AI 工具只接受文本提示词style_prompt_full保证了任何visual-style.md文件即使不被结构化解析也能被直接当作生成提示词使用。提取时必须让它读起来像一份给设计师的简报。资源一律使用 URL禁止内嵌二进制assets.reference_images、assets.color_palette_image.url等只接受 URL保证文件小巧、可版本化、可移植见 完整模板 中的assets段。此外规格支持x_*命名空间扩展如x_heygen、x_figma用于承载工具专属配置而不污染核心 schemaversion字段语义为规格版本而非风格版本新增可选字段不升版本破坏性变更必填字段变化才升到 2.0。七、提取后的一步如何把风格应用到下游工具提取只是 Extract 模式的一半另一半是 Apply。visual-style.md的可移植性体现在各连接器Connector对字段的标准化映射上。以 HTML Slides 连接器 为例其字段映射规则为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设计约束检查清单例如上文 Stripe 风格应用于 HTML 幻灯片时:root变量将生成--color-bg: #FFFFFF; --color-text: #0A2540; --color-accent: #635BFF; --color-muted: #425466; --font-display: Söhne, Inter, system-ui; --font-body: ...。连接器的使用约束还包括单 HTML 文件零依赖、所有尺寸用clamp()响应式、每页height: 100vh; overflow: hidden、字体经link引入并保留回退栈等。类似的映射思路也存在于 HeyGen Video Agent 连接器将style_prompt_full作为视觉风格块喂给 AI 视频生成与 Figma / paper.design 连接器 中从网站提取出的风格文件也因此可以直接进入 OpenMontage 的 AI 视频与演示生产链路。此外风格画廊 中预置的 Müller-Brockmann Swiss、Saul Bass Cinematic、Game Boy Color 等成品风格文件可作为检查自身提取质量的对照样本。八、实战 Tips 汇总提取器文档在末尾总结了五条实战建议结合本文前述内容可归纳为善用开发者工具Dev Tools—— 检查元素以获取精确的十六进制色值与完整字体栈这是精确而非猜测的唯一可靠手段优先检查 CSS 变量—— 许多网站将色板定义在:root中一处即可取全记录响应式模式—— 观察设计如何随断点适配桌面 / 平板 / 移动端这些属于layout.notes的重要素材捕捉感觉——style_prompt_full应当唤起与原网站相同的感受而非只罗列参数把avoid写得具体—— 明确记录这家品牌绝不做什么不用霓虹色、不用密集纹理、不用素材图……负面约束往往比正面描述更有效地约束 AI 输出。与此并行的是 PDF 品牌手册提取器 中品牌手册节 → 字段的映射表与色值转换参考RGB/CMYK/Pantone/HSL → Hex当从网站抓取不到某些规范如 Pantone 专色时可交叉参考其处理策略。结语从网站 URL 提取visual-style.md的核心方法论可以浓缩为一句话用开发者工具取证精确色值与字体栈用截图感知氛围栅格、节奏、情绪再用统一的 YAML 字段结构把它沉淀为可移植的设计系统文件。这一流程的价值在于它把复刻一个网站的风格从一次性的人工观察转变为可复用、可校验、可跨工具分发的结构化资产——这正是 OpenMontage 中visual-style技能将设计知识工程化的方式。按 SKILL.md 的定位你可以在任何需要让 AI 工具遵循统一视觉语言的环节调用它创建新风格、从网站/视频/PDF 提取既有风格、将风格应用到 HeyGen 与 HTML 幻灯片或直接浏览画廊中的预置风格作为起点。【免费下载链接】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 视觉风格提取指南从任意网站 URL 生成可移植的 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 中visual-style技能的核心提取器Extractor之一——从网站 URL 反向生成一套完整、结构化、可被任何 AI 工具直接消费的视觉设计系统文件visual-style.md。这套方法适用于品牌网页改版、竞品风格还原、为 AI 视频与 HTML 演示设定统一视觉基调等场景。读完本文你将掌握从拿到一个网址到产出一份含精确色值、字体栈、栅格、动效与情绪语境的风格文件的完整六步流程并理解其底层字段规范与校验规则可直接在 OpenMontage 的 Agent 工作流中复现。一、先理解产出物什么是 visual-style.md在进入从网站提取之前需要先明确提取的产物形态。OpenMontage 的visual-style技能见 .agents/skills/visual-style/SKILL.md将视觉设计系统定义为一个 Markdown 文件文件头部是 YAML frontmatter统一承载colors颜色、typography字体、layout布局、motion动效、mood情绪五个维度文件正文则用## Design Principles、## Connectors、## Extraction Notes等 Markdown 小节记录设计哲学与使用说明。该格式的完整规格见 .agents/skills/visual-style/references/spec.md其设计目标有三条人类可读任何文本编辑器都能直接查看和理解AI 可消费每一个字段都能被 AI 模型直接读取使用可移植同一份文件可跨 HeyGen、HTML Slides、Figma、paper.design 等多种下游工具复用。技能整体提供 Create / Extract / Apply / Gallery 四种模式本文聚焦其中的Extract 模式网站来源对应的提取器参考文档即 .agents/skills/visual-style/references/extractors/from-website.md与之并列的还有 视频关键帧提取器 与 PDF 品牌手册提取器。二、核心工作流从 URL 到 visual-style.md 的六步提取器文档给出的标准工作流如下接收 URL—— 用户提供一个网站地址抓取页面—— 使用 Web Fetch 获取 HTML/CSS截取截图—— 尽可能对页面进行可视化截屏分析—— 识别颜色、字体、布局、动效与情绪生成—— 输出完整的visual-style.md校验—— 确保所有必填字段均已就位。这六步与SKILL.md中 Extract 模式的通用流程保持一致接收源 → 加载对应提取器参考文件 → 分析 → 生成并写入source_url→ 校验必填字段。关键区别在于网站这一来源要求分析者同时处理两类信息抓取到的结构化源码HTML/CSS与截图呈现的视觉直觉。前者提供精确证据十六进制色值、字体栈、栅格参数后者提供氛围判断留白、节奏、情绪。文档中反复强调色值必须来自 CSS 的真实值不能靠肉眼近似。三、提取提示词模板可直接复用的完整原文from-website.md提供了一段可直接交给大模型使用的提示词模板。进行网站分析时可将 URL 填入方括号占位处其余内容原样下发Analyze this website and extract a visual-style.md following the spec. URL: [URL] Identify and output these fields: REQUIRED: - name: A descriptive name for this style (e.g., [Brand] Web Style) - version: 1.0 - style_prompt_short: 1-2 sentence hook capturing the visual essence - style_prompt_full: Detailed generation prompt with specific: - Hex color codes (use exact values, dont guess) - Font family names (check the CSS) - Layout structure (grid system, spacing patterns) - Motion patterns (animations, transitions) - Overall mood and feel - colors.primary: At least 2 colors with name, hex, role RECOMMENDED: - colors.accent: Accent colors with name, hex, role - colors.neutral: Neutral/gray colors with name, hex, role - typography.display: Heading font family, weight, style - typography.body: Body font family, weight, style - typography.caption: Caption/label font family, weight, style - typography.rules: Typography constraints and patterns - layout.grid: Grid system description - layout.alignment: Alignment patterns - layout.notes: Additional layout observations - motion.transitions: Transition types used - motion.animation_style: Overall animation approach - mood.keywords: 4-6 mood/feeling words - mood.era: Design era reference - mood.avoid: Anti-patterns to avoid Be specific: - Use exact hex values from the CSS, not approximations - Name every color descriptively (not Blue 1, but Ocean Blue) - Describe the role of each color in the system - Note any custom fonts and their fallbacks Output format: Complete YAML frontmatter between --- delimiters Plus Markdown body sections (## Design Principles, ## Extraction Notes)模板本身已经点明了四条具体性纪律色值取 CSS 精确值而非近似值每个颜色必须用描述性命名Ocean Blue 而非 Blue 1说明每个颜色在系统中的作用记录自定义字体及其回退栈。这与 完整模板 中在提示词里内联 hex 代码以便工具提取的建议一脉相承。四、五维分析清单提取时逐项核对什么模板之外提取器文档给出了一份可勾选的核对清单将分析网站拆解为五个维度。这五维同时也是visual-style.md的五大字段族分析质量直接决定产出文件的可用性。4.1 颜色Colors背景色主要表面文字色标题 vs 正文强调色 / CTA 按钮颜色链接颜色默认、悬停、访问后边框 / 分隔线颜色渐变使用情况如有实操要点优先检查 CSS 中的:root变量定义——大量网站将整套色板集中在 CSS 自定义属性中一次Inspect Element即可拿到全部精确色值CTA 按钮是采强调色的最佳采样点下文 Stripe 示例正是从 CTA 按钮采样紫色。4.2 字体Typography标题字体族正文字体族使用的字重light、regular、bold 等字号标题层级行高字距模式文本变换大写 / 小写实操要点字体栈必须从浏览器开发者工具中读取font-family声明注意区分自定义字体与系统回退字体两者都要写进typography.*.family如 Söhne, Inter, system-ui。4.3 布局Layout内容最大宽度栅格列数如可见间距节奏一致的间隔对齐模式左对齐、居中、混合卡片 / 组件模式负空间的使用实操要点栅格信息既要看布局工具类12 列栅格等也要看视觉上的一致间隔8px 基数等layout.notes适合记录节与节之间垂直间距宽裕卡片带轻微阴影与圆角这类从截图中观察到的模式。4.4 动效Motion页面过渡悬停效果滚动动画加载状态微交互实操要点网站是仅次于视频的动效富矿务必记录过渡时长如 0.2s 悬停过渡、缓动风格subtle/smooth/bouncy与滚动行为视差、渐显这些字段将直接映射到motion.transitions与motion.animation_style。4.5 情绪Mood整体感受专业、俏皮、极简、大胆设计年代现代、复古、经典品牌个性严肃、友好、技术感他们明确回避什么实操要点mood.avoid反模式清单是情绪维度的关键产出——这家品牌明确不做什么往往比做什么更能约束下游生成的一致性。五、完整示例从 stripe.com 提取一份风格文件文档给出了一个可直接对照学习的完整示例输出。假设 URL 为https://stripe.com最终生成的visual-style.md如下YAML frontmatter 与 Markdown 正文均在---分隔符之间--- name: Stripe Web Style version: 1.0 tags: - fintech - sleek minimal author: Extracted source_url: https://stripe.com created: 2026-03-12 style_prompt_short: Clean fintech minimalism with deep purple accents on white. Generous whitespace, clear typography, subtle gradients. style_prompt_full: Modern fintech design inspired by Stripe. Clean white backgrounds with generous whitespace. Deep purple (#635BFF) as the primary accent color. Typography uses a custom geometric sans-serif (similar to Inter or Söhne) with clear hierarchy. Subtle mesh gradients in backgrounds. Rounded corners on cards and buttons. Smooth, subtle animations on scroll. Professional, trustworthy, approachable. No harsh colors, no busy patterns, no stock photos. colors: primary: - name: Pure White hex: #FFFFFF role: primary background, negative space - name: Slate Dark hex: #0A2540 role: primary text, headings accent: - name: Stripe Purple hex: #635BFF role: CTAs, links, brand accent - name: Cyan Accent hex: #00D4FF role: secondary accent, gradients neutral: - name: Slate Gray hex: #425466 role: body text, secondary content - name: Light Gray hex: #F6F9FC role: section backgrounds, cards typography: display: family: Söhne, Inter, system-ui weight: 600 style: sentence case, tight tracking body: family: Söhne, Inter, system-ui weight: 400 style: generous line height, comfortable reading caption: family: Söhne Mono, monospace weight: 400 style: code blocks, technical details rules: - Clear size hierarchy: 64px → 48px → 32px → 24px → 16px - Generous line heights for readability - Monospace for code and technical content layout: grid: 12 columns, max-width 1200px alignment: Center-aligned sections, left-aligned text aspect_ratio: 16:9 for hero, varied for content notes: - Generous vertical spacing between sections - Cards with subtle shadows and rounded corners - Alternating section backgrounds motion: transitions: - subtle fade-in on scroll - smooth hover state transitions (0.2s) - parallax on hero backgrounds animation_style: Subtle, smooth, professional. Nothing bouncy or playful. pacing: Measured, confident transitions mood: keywords: - professional - trustworthy - clean - modern - approachable era: 2020s fintech cultural_reference: Modern SaaS, developer-focused design avoid: - harsh or neon colors - busy patterns or textures - stock photography - overly playful animations - dark mode (unless requested) assets: reference_images: [] color_palette_image: url: --- ## Design Principles Trust through clarity. Every element earns its place. Typography and whitespace do the heavy lifting. Color is used sparingly and intentionally. ## Extraction Notes Extracted from https://stripe.com on 2026-03-12. Primary purple sampled from CTA buttons. Typography stack identified via browser dev tools. Mesh gradient patterns noted in hero sections.该示例展示了几个值得学习的写法描述性命名Pure White / Slate Dark / Stripe Purple / Cyan Accent每个名字都承载角色语义精确色值#635BFF、#0A2540等均来自真实品牌色注释明确标注Primary purple sampled from CTA buttons角色说明每个颜色都写了role背景、正文、CTA、次级强调……这正是下游工具做语义映射的输入双 prompt 结构style_prompt_short是电梯演讲style_prompt_full是可独立生成视觉的自然语言完整描述Extraction Notes 溯源记录来源 URL、提取日期、采样方法CTA 按钮取紫、开发者工具识别字体栈、Hero 区观察到网格渐变。六、字段规范与校验规则确保产物合法提取完成后必须执行校验。依据 spec.md一份合法的visual-style.md必须满足YAML frontmatter 位于---分隔符之间且合法所有必填字段齐全colors.primary至少包含 2 个颜色对象每个颜色对象包含name、hex、roleversion为1.0。其中必填字段只有五个name、version、style_prompt_short、style_prompt_full、colors.primary≥2 个带 name/hex/role 的颜色对象。其余如colors.accent、colors.neutral、typography.*、layout.*、motion.*、mood.*、assets.*均为可选但建议尽量采集——它们让工具能做更精细的控制。两个需要特别强调的设计决策style_prompt_full是王者字段SKILL.md 明确指出如果工具只能读一个字段就读这个。因为许多 AI 工具只接受文本提示词style_prompt_full保证了任何visual-style.md文件即使不被结构化解析也能被直接当作生成提示词使用。提取时必须让它读起来像一份给设计师的简报。资源一律使用 URL禁止内嵌二进制assets.reference_images、assets.color_palette_image.url等只接受 URL保证文件小巧、可版本化、可移植见 完整模板 中的assets段。此外规格支持x_*命名空间扩展如x_heygen、x_figma用于承载工具专属配置而不污染核心 schemaversion字段语义为规格版本而非风格版本新增可选字段不升版本破坏性变更必填字段变化才升到 2.0。七、提取后的一步如何把风格应用到下游工具提取只是 Extract 模式的一半另一半是 Apply。visual-style.md的可移植性体现在各连接器Connector对字段的标准化映射上。以 HTML Slides 连接器 为例其字段映射规则为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设计约束检查清单例如上文 Stripe 风格应用于 HTML 幻灯片时:root变量将生成--color-bg: #FFFFFF; --color-text: #0A2540; --color-accent: #635BFF; --color-muted: #425466; --font-display: Söhne, Inter, system-ui; --font-body: ...。连接器的使用约束还包括单 HTML 文件零依赖、所有尺寸用clamp()响应式、每页height: 100vh; overflow: hidden、字体经link引入并保留回退栈等。类似的映射思路也存在于 HeyGen Video Agent 连接器将style_prompt_full作为视觉风格块喂给 AI 视频生成与 Figma / paper.design 连接器 中从网站提取出的风格文件也因此可以直接进入 OpenMontage 的 AI 视频与演示生产链路。此外风格画廊 中预置的 Müller-Brockmann Swiss、Saul Bass Cinematic、Game Boy Color 等成品风格文件可作为检查自身提取质量的对照样本。八、实战 Tips 汇总提取器文档在末尾总结了五条实战建议结合本文前述内容可归纳为善用开发者工具Dev Tools—— 检查元素以获取精确的十六进制色值与完整字体栈这是精确而非猜测的唯一可靠手段优先检查 CSS 变量—— 许多网站将色板定义在:root中一处即可取全记录响应式模式—— 观察设计如何随断点适配桌面 / 平板 / 移动端这些属于layout.notes的重要素材捕捉感觉——style_prompt_full应当唤起与原网站相同的感受而非只罗列参数把avoid写得具体—— 明确记录这家品牌绝不做什么不用霓虹色、不用密集纹理、不用素材图……负面约束往往比正面描述更有效地约束 AI 输出。与此并行的是 PDF 品牌手册提取器 中品牌手册节 → 字段的映射表与色值转换参考RGB/CMYK/Pantone/HSL → Hex当从网站抓取不到某些规范如 Pantone 专色时可交叉参考其处理策略。结语从网站 URL 提取visual-style.md的核心方法论可以浓缩为一句话用开发者工具取证精确色值与字体栈用截图感知氛围栅格、节奏、情绪再用统一的 YAML 字段结构把它沉淀为可移植的设计系统文件。这一流程的价值在于它把复刻一个网站的风格从一次性的人工观察转变为可复用、可校验、可跨工具分发的结构化资产——这正是 OpenMontage 中visual-style技能将设计知识工程化的方式。按 SKILL.md 的定位你可以在任何需要让 AI 工具遵循统一视觉语言的环节调用它创建新风格、从网站/视频/PDF 提取既有风格、将风格应用到 HeyGen 与 HTML 幻灯片或直接浏览画廊中的预置风格作为起点。【免费下载链接】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），仅供参考
