visual-style

视觉风格

创建、提取和应用可移植的视觉设计系统。visual-style.md 文件通过一个文件定义任何 AI 工具都能读取的颜色、字体、布局、动效和氛围。

快速参考

模式	触发语	功能
创建	“为……创建一个 visual-style.md”	通过引导式提示从零开始构建风格
提取	“从 [URL/图片/视频] 提取 visual-style.md”	分析来源并生成风格文件
应用	“将此 visual-style.md 应用于 [工具]”	通过特定连接器使用风格
图库	“向我展示可用的视觉风格”	浏览并使用示例风格

默认工作流

创建

1. 收集氛围 — 询问情绪、时代、参考对象和灵感来源
2. 定义颜色 — 主色（至少 2 种）、强调色和中性色，并提供十六进制值和用途
3. 设置字体 — 标题、正文、说明文字的字体系列，以及字重和样式规则
4. 布局与动效 — 网格系统、过渡效果、节奏
5. 生成 — 使用 references/templates/minimal.visual-style.md 或 references/templates/full.visual-style.md 输出完整的 visual-style.md
6. 预览 — 展示一个小型 HTML 色板，或描述视觉效果
7. 可选应用 — 询问用户是否想通过连接器使用该风格

可批量提问：

1. 氛围是什么？（情绪关键词、时代、参考对象）
2. 有没有指定的颜色？（或者根据氛围推导？）
3. 字体偏好是什么？（简洁、编辑风、技术感、活泼？）
4. 你会将它用于什么工具？（HeyGen、幻灯片、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: "Style Name"
version: "1.0"
style_prompt_short: "1-2 sentence elevator pitch"
style_prompt_full: "Detailed generation prompt — THE most important field"
colors:
  primary:
    - name: "Color Name"
      hex: "#000000"
      role: "how this color is used"

style_prompt_full 是核心。 如果工具只能读取一个字段，它读取的就是这个字段。其他内容都是结构化数据，供需要精细控制的工具使用。

完整规范：references/spec.md

参考文件

连接器（应用模式）

连接器	用途	文件
HeyGen Video Agent	AI 视频生成	references/connectors/heygen-video-agent.md
HTML Slides	网页演示文稿	references/connectors/html-slides.md
paper.design	设计文档	references/connectors/paper-design.md
Figma	设计工具风格	references/connectors/figma.md

提取器（提取模式）

来源	文件
网站 URL	references/extractors/from-website.md
视频关键帧	references/extractors/from-video.md
PDF / 品牌指南	references/extractors/from-pdf.md

示例库（预构建样式）

样式	年代	文件
Müller-Brockmann 瑞士风格	1950 年代至 70 年代	references/gallery/mueller-brockmann-swiss.visual-style.md
Neville Brody 工业风格	20 世纪 80 年代末至 90 年代	references/gallery/neville-brody-industrial.visual-style.md
Saul Bass 电影风格	1950 年代至 60 年代	references/gallery/saul-bass-cinematic.visual-style.md
Game Boy Color	1998–2003 年	references/gallery/game-boy-color.visual-style.md
HeyGen AI Video	2020 年代	references/gallery/heygen-ai-video.visual-style.md

模板与规范

• references/templates/minimal.visual-style.md — 最简模板
• references/templates/full.visual-style.md — 包含所有字段的完整模板
• references/spec.md — 完整格式规范

最佳实践

1. style_prompt_full 至关重要 — 始终可作为独立的生成提示词使用
2. 一种样式，一个文件 — 不要将多种样式打包在一起
3. 资源使用 URL — 切勿嵌入二进制数据
4. 以示例代替说明 — 创建样式时生成预览
5. 默认设置有明确倾向，扩展灵活 — 核心架构固定；使用 x_* 配置特定工具