用途
visual-style 用于创建、提取和应用可移植的视觉设计系统。其载体是 visual-style.md 文件,在一个文件中定义颜色、字体、布局、动效与情绪氛围,任何 AI 工具都可以消费该文件。适用于以下场景:从零创建 visual-style.md 设计系统;从网址、图片、视频或 PDF 中提取风格并生成风格文件;将某个 visual-style.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”,浏览并使用示例风格。
使用方式
创建
默认工作流为:1)收集氛围——询问情绪、年代、参考与灵感;2)定义颜色——主色(2 种以上)、强调色、中性色,含十六进制值与角色;3)设定字体——标题、正文、说明文字的字族及字重/样式规则;4)布局与动效——网格系统、过渡、节奏;5)生成——使用 references/templates/minimal.visual-style.md 或 references/templates/full.visual-style.md 输出完整的 visual-style.md;6)预览——展示小型 HTML 色板或描述视觉效果;7)可选应用——询问用户是否希望配合连接器使用。可批量询问的问题包括:氛围是什么(情绪关键词、年代、参考);是否有特定颜色(或从氛围中推导);字体偏好(简洁、编辑感、技术感、活泼);将与哪个工具配合使用(HeyGen、slides、paper.design、Figma 等)。
提取
流程为:1)接收来源——URL、图片、视频或 PDF;2)加载提取器——读取相应的提取器参考文件;3)分析——识别颜色、字体、布局、动效、情绪;4)生成——输出完整的 visual-style.md,并设置 source_url;5)校验——确保所有必填字段齐全。
应用
流程为:1)读取风格——加载 visual-style.md 文件;2)询问连接器——或从上下文推断;3)加载连接器——读取相应的连接器参考文件;4)转换——将风格字段映射为工具特定格式;5)生成输出——产出可直接用于工具的指令或代码。
画廊
流程为:1)列出风格——展示 references/gallery/ 中的可用风格;2)预览——描述所选风格的视觉特征;3)加载——读取完整的 visual-style.md;4)应用——配合连接器使用。
格式速览
必填字段包括:name(风格名称)、version(版本)、style_prompt_short(一两句电梯陈述)、style_prompt_full(详细的生成提示,是最重要的字段)、colors.primary(名称、十六进制值、角色)。style_prompt_full 是核心,若工具只能读取一个字段,就读这个字段,其余都是为需要更精细控制的工具准备的结构化数据。完整规范见 references/spec.md。
参考文件
连接器(用于应用模式):HeyGen Video Agent(AI 视频生成)、HTML Slides(网页演示文稿)、paper.design(设计文档)、Figma(设计工具样式),对应文件位于 references/connectors/ 下。
提取器(用于提取模式):网站 URL、视频关键帧、PDF/品牌指南,对应文件位于 references/extractors/ 下。
画廊(预置风格):Müller-Brockmann 瑞士风格(1950s–70s)、Neville Brody 工业风格(1980s 末期–90s)、Saul Bass 电影感(1950s–60s)、Game Boy Color(1998–2003)、HeyGen AI Video(2020s),对应文件位于 references/gallery/ 下。
模板与规范:references/templates/minimal.visual-style.md(最简模板)、references/templates/full.visual-style.md(含全部字段的完整模板)、references/spec.md(完整格式规范)。
最佳实践
style_prompt_full 是核心——始终可作为独立的生成提示使用;一种风格对应一个文件,不打包多风格;资产以 URL 形式提供,不嵌入二进制数据;展示而非讲述——创建风格时生成预览;核心模式固定,扩展灵活,工具特定配置使用 x_* 前缀。