visual-style

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

1. Gather vibe — Ask about mood, era, references, inspiration
2. Define colors — Primary (2+), accent, neutrals with hex values and roles
3. Set typography — Display, body, caption families + weight/style rules
4. Layout & motion — Grid system, transitions, pacing