SKILL.md

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