# visual-style

Creates, extracts, and ports portable design systems in visual-style.md files. It standardizes color roles, typefaces, and layout rules for videos, slides, or UI components.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 installs · ★ 71992
- Author: calesthio
- License: AGPL-3.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/calesthio/OpenMontage/tree/HEAD/.claude/skills/visual-style/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/visual-style

## What it does

This skill captures visual guidelines inside a structured `visual-style.md` document. The format defines palette assignments, font combinations, spacing grids, and movement pacing. It constructs fresh guidelines through guided prompts or pulls visual traits from video clips, web pages, and brand guidelines in PDF format.

Built-in connectors translate this markdown system for specialized software. Output targets include HeyGen video generation, browser slides, paper.design, and Figma styles. Users can also pull pre-made themes directly from the gallery, which contains aesthetics inspired by Saul Bass, Neville Brody, Müller-Brockmann, and Game Boy Color.

The `style_prompt_full` attribute functions as the primary prompt that downstream models parse directly. Storing raw binary assets inside the style file is prohibited, meaning images must reside on remote servers as public links.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add calesthio/OpenMontage --skill visual-style -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/visual-style/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/visual-style/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add calesthio/OpenMontage --skill visual-style -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/visual-style/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add calesthio/OpenMontage --skill visual-style -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/visual-style/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install calesthio/OpenMontage visual-style
```

2. **Manually: put the files in place**
- File: `.github/skills/visual-style/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add calesthio/OpenMontage --skill visual-style -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/calesthio/OpenMontage --path .claude/skills/visual-style
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/visual-style/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add calesthio/OpenMontage --skill visual-style -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/calesthio/OpenMontage/tree/HEAD/.claude/skills/visual-style/SKILL.md

## When to use it
- assemble a design system from scratch using guided questions
- extract color palettes and typography from a PDF brand guide
- feed visual brand rules directly to HeyGen video workflows
- style HTML presentations with retro or Swiss graphic presets

## Example prompts
- Create a visual-style.md file with a Game Boy Color theme for web slides
- Extract colors and typography from brand-guide.pdf into visual-style.md
- Apply the active visual-style.md file to HeyGen video generation

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [calesthio/openmontage](https://affpapa.org/en/nevibecode/by/calesthio/openmontage.md) — 32 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md