visual-style
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseVisual Style
视觉风格
Create, extract, and apply portable visual design systems. A file defines colors, typography, layout, motion, and mood in one file that any AI tool can consume.
visual-style.md创建、提取并应用可移植的视觉设计系统。文件将颜色、排版、布局、动效和氛围定义在单个文件中，可供任何AI工具调用。
visual-style.mdQuick Reference
快速参考
| Mode | Trigger | What it does |
|---|---|---|
| Create | "Create a visual-style.md for..." | Build a style from scratch via guided prompts |
| Extract | "Extract a visual-style.md from [URL/image/video]" | Analyze a source and generate a style file |
| Apply | "Apply this visual-style.md to [tool]" | Use a style with a specific connector |
| Gallery | "Show me available visual styles" | Browse and use example styles |
| 模式 | 触发指令 | 功能说明 |
|---|---|---|
| 创建 | "为……创建visual-style.md" | 通过引导式提示从零构建风格 |
| 提取 | "从[URL/图片/视频]中提取visual-style.md" | 分析来源并生成风格文件 |
| 应用 | "将此visual-style.md应用于[工具]" | 将风格与特定连接器配合使用 |
| 图库 | "展示可用的视觉风格" | 浏览并使用示例风格 |
Default Workflow
默认工作流
Create
创建
- Gather vibe — Ask about mood, era, references, inspiration
- Define colors — Primary (2+), accent, neutrals with hex values and roles
- Set typography — Display, body, caption families + weight/style rules
- Layout & motion — Grid system, transitions, pacing
- Generate — Output complete using references/templates/minimal.visual-style.md or references/templates/full.visual-style.md
visual-style.md - Preview — Show a small HTML swatch or describe the visual result
- Optionally apply — Ask if user wants to use it with a connector
Questions to batch:
- What's the vibe? (mood keywords, era, references)
- Any specific colors? (or derive from the vibe?)
- Typography preference? (clean, editorial, technical, playful?)
- What tool will you use this with? (HeyGen, slides, paper.design, Figma?)
- 收集风格基调 — 询问氛围、时代、参考案例、灵感来源
- 定义颜色 — 主色（2种及以上）、强调色、中性色，包含十六进制值及用途
- 设置排版 — 标题、正文、说明文字的字体族 + 字重/样式规则
- 布局与动效 — 网格系统、过渡效果、节奏
- 生成文件 — 使用references/templates/minimal.visual-style.md或references/templates/full.visual-style.md输出完整的
visual-style.md - 预览 — 生成小型HTML样例或描述视觉效果
- 可选应用 — 询问用户是否要配合连接器使用该风格
批量询问的问题：
- 风格基调是什么？（氛围关键词、时代、参考案例）
- 有没有特定的颜色？（或者根据基调推导？）
- 排版偏好？（简洁风、编辑风、技术风、趣味风？）
- 你将用什么工具来使用这个风格？（HeyGen、幻灯片、paper.design、Figma？）
Extract
提取
- Receive source — URL, image, video, or PDF
- Load extractor — Read the appropriate extractor reference file
- Analyze — Identify colors, typography, layout, motion, mood
- Generate — Output complete with
visual-style.mdsetsource_url - Validate — Ensure all required fields are present
- 接收来源 — URL、图片、视频或PDF
- 加载提取器 — 读取对应的提取器参考文件
- 分析内容 — 识别颜色、排版、布局、动效、氛围
- 生成文件 — 输出完整的并设置
visual-style.md字段source_url - 验证 — 确保所有必填字段都已填写
Apply
应用
- Read the style — Load the file
visual-style.md - Ask which connector — Or detect from context
- Load connector — Read the appropriate connector reference file
- Transform — Map style fields to tool-specific format
- Generate output — Produce tool-ready instructions or code
- 读取风格文件 — 加载文件
visual-style.md - 询问连接器类型 — 或从上下文自动检测
- 加载连接器 — 读取对应的连接器参考文件
- 格式转换 — 将风格字段映射为工具特定格式
- 生成输出结果 — 生成工具可直接使用的指令或代码
Gallery
图库
- List styles — Show available styles from references/gallery/
- Preview — Describe the selected style's visual character
- Load — Read the full
visual-style.md - Apply — Use with a connector
- 列出风格 — 展示references/gallery/中的可用风格
- 预览风格 — 描述所选风格的视觉特征
- 加载文件 — 读取完整的
visual-style.md - 应用风格 — 配合连接器使用
Format Quick Reference
格式快速参考
Required fields
必填字段
yaml
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_fullFull spec: references/spec.md
yaml
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
Reference Files
参考文件
Connectors (Apply mode)
连接器（应用模式）
| Connector | Use case | File |
|---|---|---|
| HeyGen Video Agent | AI video generation | references/connectors/heygen-video-agent.md |
| HTML Slides | Web presentations | references/connectors/html-slides.md |
| paper.design | Design documents | references/connectors/paper-design.md |
| Figma | Design tool styles | references/connectors/figma.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 |
Extractors (Extract mode)
提取器（提取模式）
| Source | File |
|---|---|
| Website URL | references/extractors/from-website.md |
| Video keyframes | references/extractors/from-video.md |
| PDF / Brand guide | references/extractors/from-pdf.md |
| 来源 | 文件 |
|---|---|
| 网站URL | references/extractors/from-website.md |
| 视频关键帧 | references/extractors/from-video.md |
| PDF / 品牌指南 | references/extractors/from-pdf.md |
Gallery (pre-built styles)
图库（预构建风格）
| Style | Era | File |
|---|---|---|
| Müller-Brockmann Swiss | 1950s–70s | references/gallery/mueller-brockmann-swiss.visual-style.md |
| Neville Brody Industrial | Late 1980s–90s | references/gallery/neville-brody-industrial.visual-style.md |
| Saul Bass Cinematic | 1950s–60s | references/gallery/saul-bass-cinematic.visual-style.md |
| Game Boy Color | 1998–2003 | references/gallery/game-boy-color.visual-style.md |
| HeyGen AI Video | 2020s | references/gallery/heygen-ai-video.visual-style.md |
| 风格 | 时代 | 文件 |
|---|---|---|
| Müller-Brockmann Swiss | 1950s–70s | references/gallery/mueller-brockmann-swiss.visual-style.md |
| Neville Brody Industrial | Late 1980s–90s | references/gallery/neville-brody-industrial.visual-style.md |
| Saul Bass Cinematic | 1950s–60s | references/gallery/saul-bass-cinematic.visual-style.md |
| Game Boy Color | 1998–2003 | references/gallery/game-boy-color.visual-style.md |
| HeyGen AI Video | 2020s | references/gallery/heygen-ai-video.visual-style.md |
Templates & Spec
模板与规范
- references/templates/minimal.visual-style.md — Bare minimum template
- references/templates/full.visual-style.md — Complete template with all fields
- references/spec.md — Full format specification
- references/templates/minimal.visual-style.md — 最简模板
- references/templates/full.visual-style.md — 包含所有字段的完整模板
- references/spec.md — 完整格式规范
Best Practices
最佳实践
- is king — Always usable as a standalone generation prompt
style_prompt_full - One style, one file — No multi-style bundling
- Assets are URLs — Never embed binary data
- Show, don't tell — Generate previews when creating styles
- Opinionated defaults, flexible extensions — Core schema is fixed; for tool-specific config
x_*
- 是核心 — 始终可作为独立的生成提示词使用
style_prompt_full - 一种风格对应一个文件 — 不要将多种风格打包在一个文件中
- 资源使用URL — 绝不嵌入二进制数据
- 可视化展示，而非文字描述 — 创建风格时生成预览效果
- 默认设置有主见，扩展方式灵活 — 核心 schema 固定；使用前缀定义工具特定配置
x_*