| name | visual-style |
| description | Create, extract, and apply portable visual design systems via visual-style.md files. Use when: (1) Creating a visual-style.md design system from scratch, (2) Extracting a visual style from a website URL, video, or PDF brand guide, (3) Applying a visual style to HeyGen videos, HTML slides, Figma, or paper.design, (4) Browsing the gallery of pre-built visual styles (Swiss, Saul Bass, Game Boy, etc.), (5) User mentions "visual style", "design system", "brand style", or "style guide", (6) Styling a HeyGen video with a consistent design language.
|
Visual Style
Create, extract, and apply portable visual design systems. A visual-style.md file defines colors, typography, layout, motion, and mood in one file that any AI tool can consume.
Quick 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 |
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
visual-style.md using references/templates/minimal.visual-style.md or references/templates/full.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?)
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
visual-style.md with source_url set
- Validate — Ensure all required fields are present
Apply
- Read the style — Load the
visual-style.md file
- 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
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
Format Quick Reference
Required fields
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 is king. If a tool can only read one field, it reads this one. Everything else is structured data for tools that want finer control.
Full spec: references/spec.md
Reference Files
Connectors (Apply mode)
Extractors (Extract mode)
Gallery (pre-built styles)
Templates & Spec
Best Practices
style_prompt_full is king — Always usable as a standalone generation prompt- 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;
x_* for tool-specific config
