New to Claude Skills? Learn how to install them →

Get Claude Skills
calesthio on GitHub

Visual Style

Free

Create and apply portable visual design systems effortlessly.

by calesthio46.8k stars on calesthio/openmontage
4 views
Updated Aug 3, 2026
Get this skill

Free · Opens the source repo

What Visual Style does

Visual Style is a skill designed for developers and designers who need to create, extract, and apply visual design systems in a structured manner. By utilizing visual-style.md files, this skill allows users to define essential design elements such as colors, typography, layout, motion, and mood in a single, portable format that can be consumed by various AI tools. This capability is particularly beneficial for maintaining consistency across different platforms and projects.

The skill operates in three main modes: Create, Extract, and Apply. In Create mode, users can build a visual style from scratch by answering guided prompts about mood, color preferences, typography, and layout. This interactive process ensures that the generated style aligns with the user's vision. In Extract mode, users can analyze an existing source—be it a website, video, or PDF—and automatically generate a corresponding visual-style.md file, streamlining the process of capturing design elements from established works.

In Apply mode, the skill facilitates the integration of the created or extracted visual styles into various tools such as HeyGen, HTML slides, Figma, or paper.design. This is accomplished through connectors that transform the style data into a format suitable for the selected platform. Additionally, users can browse a gallery of pre-built visual styles inspired by notable design movements, providing a quick reference and inspiration for their projects.

Overall, Visual Style is an essential tool for anyone involved in design who seeks to create cohesive and portable visual systems, making it easier to manage design consistency across multiple outputs and mediums.

When to use it

Use Visual Style when you need to establish a design system from scratch, extract styles from existing media, or apply styles to specific tools.

When not to use it

This skill may not be suitable for users seeking advanced customizations beyond the provided templates or those who require non-standard design elements.

What you can build with it

Creating a New Brand Style

When launching a new product, you can create a visual style from scratch that reflects your brand's identity by defining colors, typography, and layout.

Extracting Styles from Competitor Websites

You can analyze competitor websites to extract their visual styles, allowing you to understand industry trends and apply similar aesthetics to your designs.

Applying Styles to Presentation Slides

When preparing a presentation, you can apply a consistent visual style to your HTML slides, ensuring a professional and cohesive look throughout.

How to install Visual Style

View source

1. Install with the skills CLI

npx skills add calesthio/openmontage/visual-style --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by calesthio

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

ModeTriggerWhat 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
  5. Generate — Output complete visual-style.md using references/templates/minimal.visual-style.md or references/templates/full.visual-style.md
  6. Preview — Show a small HTML swatch or describe the visual result
  7. Optionally apply — Ask if user wants to use it with a connector

Questions to batch:

  1. What's the vibe? (mood keywords, era, references)
  2. Any specific colors? (or derive from the vibe?)
  3. Typography preference? (clean, editorial, technical, playful?)
  4. What tool will you use this with? (HeyGen, slides, paper.design, Figma?)

Extract

  1. Receive source — URL, image, video, or PDF
  2. Load extractor — Read the appropriate extractor reference file
  3. Analyze — Identify colors, typography, layout, motion, mood
  4. Generate — Output complete visual-style.md with source_url set
  5. Validate — Ensure all required fields are present

Apply

  1. Read the style — Load the visual-style.md file
  2. Ask which connector — Or detect from context
  3. Load connector — Read the appropriate connector reference file
  4. Transform — Map style fields to tool-specific format
  5. Generate output — Produce tool-ready instructions or code

Gallery

  1. List styles — Show available styles from references/gallery/
  2. Preview — Describe the selected style's visual character
  3. Load — Read the full visual-style.md
  4. 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)

ConnectorUse caseFile
HeyGen Video AgentAI video generationreferences/connectors/heygen-video-agent.md
HTML SlidesWeb presentationsreferences/connectors/html-slides.md
paper.designDesign documentsreferences/connectors/paper-design.md
FigmaDesign tool stylesreferences/connectors/figma.md

Extractors (Extract mode)

SourceFile
Website URLreferences/extractors/from-website.md
Video keyframesreferences/extractors/from-video.md
PDF / Brand guidereferences/extractors/from-pdf.md

Gallery (pre-built styles)

StyleEraFile
Müller-Brockmann Swiss1950s–70sreferences/gallery/mueller-brockmann-swiss.visual-style.md
Neville Brody IndustrialLate 1980s–90sreferences/gallery/neville-brody-industrial.visual-style.md
Saul Bass Cinematic1950s–60sreferences/gallery/saul-bass-cinematic.visual-style.md
Game Boy Color1998–2003references/gallery/game-boy-color.visual-style.md
HeyGen AI Video2020sreferences/gallery/heygen-ai-video.visual-style.md

Templates & Spec

Best Practices

  1. style_prompt_full is king — Always usable as a standalone generation prompt
  2. One style, one file — No multi-style bundling
  3. Assets are URLs — Never embed binary data
  4. Show, don't tell — Generate previews when creating styles
  5. Opinionated defaults, flexible extensions — Core schema is fixed; x_* for tool-specific config

Frequently asked questions about Visual Style

Similar skills

Design System

Streamline design token management and presentation generation.

Paperclip Design Guide

Build consistent, reusable UI components with ease.

Design Brief

Transform vague design requests into structured specs.

Token Map

Automate Figma and code token mapping to design systems.

Kami Landing

Create professional single-page documents effortlessly.

Design System Starter

Build scalable and accessible design systems efficiently.