# Visual Style

> Crea, extrae y aplica sistemas de diseño visual portables mediante archivos visual-style.md, con conectores para vídeos de HeyGen, diapositivas HTML, Figma y paper.design, y una galería de estilos.

Fuente: https://skillsagentes.com/skills/calesthio/openmontage/visual-style
Markdown: https://skillsagentes.com/skills/calesthio/openmontage/visual-style.md

Repositorio: https://github.com/calesthio/OpenMontage
Autor: calesthio
Licencia: AGPL-3.0
Actualizado: hace 4 meses
Coste de contexto: 137 tok instalada, 1.6k tok al activarse, 20.7k tok con todos los archivos del bundle
Bundle: 16 archivos, 81 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add calesthio/OpenMontage --skill visual-style --agent claude-code
# Cursor
npx -y skills add calesthio/OpenMontage --skill visual-style --agent cursor
# Codex
npx -y skills add calesthio/OpenMontage --skill visual-style --agent codex
# Gemini CLI
npx -y skills add calesthio/OpenMontage --skill visual-style --agent gemini
# Windsurf
npx -y skills add calesthio/OpenMontage --skill visual-style --agent windsurf
# Cline
npx -y skills add calesthio/OpenMontage --skill visual-style --agent cline
```

## Qué hace

- Crea sistemas de diseño visual portables en archivos `visual-style.md` que definen color, tipografía, layout, movimiento y ambiente
- Extrae un estilo a partir de una URL, un vídeo, una imagen o una guía de marca en PDF
- Aplica un estilo a vídeos de HeyGen, diapositivas HTML, Figma o paper.design mediante conectores
- Trae una galería de estilos ya hechos, como Swiss, Saul Bass o Game Boy

## Cuándo usarla

- Crear un `visual-style.md` desde cero o extraerlo de una fuente
- Aplicar un estilo visual a una herramienta concreta
- Explorar la galería de estilos disponibles
- El usuario menciona "estilo visual", "sistema de diseño", "estilo de marca" o "guía de estilo"

## Qué la activa

- "Extrae un visual-style.md de esta web"
- "Créame un sistema de diseño visual desde cero"
- "Aplica este estilo a mi vídeo de HeyGen"
- "Enséñame los estilos visuales disponibles"

## Antes de instalar

- Un `visual-style.md` es un único archivo pensado para que cualquier herramienta de IA lo consuma.

## Archivos

- SKILL.md — 6 KB
- references/connectors/figma.md — 6 KB
- references/connectors/heygen-video-agent.md — 4 KB
- references/connectors/html-slides.md — 5 KB
- references/connectors/paper-design.md — 4 KB
- references/extractors/from-pdf.md — 8 KB
- references/extractors/from-video.md — 7 KB
- references/extractors/from-website.md — 7 KB
- references/gallery/game-boy-color.visual-style.md — 5 KB
- references/gallery/heygen-ai-video.visual-style.md — 5 KB
- references/gallery/mueller-brockmann-swiss.visual-style.md — 4 KB
- references/gallery/neville-brody-industrial.visual-style.md — 4 KB
- references/gallery/saul-bass-cinematic.visual-style.md — 4 KB
- references/spec.md — 9 KB
- references/templates/full.visual-style.md — 3 KB
- references/templates/minimal.visual-style.md — 584 B

## SKILL.md

Reproducido tal cual desde calesthio/OpenMontage bajo AGPL-3.0. Esta sección es el documento original y está en inglés.

# 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
5. **Generate** — Output complete `visual-style.md` using [references/templates/minimal.visual-style.md](references/templates/minimal.visual-style.md) or [references/templates/full.visual-style.md](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/](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

```yaml
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](references/spec.md)

## Reference Files

### Connectors (Apply mode)

| Connector | Use case | File |
|-----------|----------|------|
| HeyGen Video Agent | AI video generation | [references/connectors/heygen-video-agent.md](references/connectors/heygen-video-agent.md) |
| HTML Slides | Web presentations | [references/connectors/html-slides.md](references/connectors/html-slides.md) |
| paper.design | Design documents | [references/connectors/paper-design.md](references/connectors/paper-design.md) |
| Figma | Design tool styles | [references/connectors/figma.md](references/connectors/figma.md) |

### Extractors (Extract mode)

| Source | File |
|--------|------|
| Website URL | [references/extractors/from-website.md](references/extractors/from-website.md) |
| Video keyframes | [references/extractors/from-video.md](references/extractors/from-video.md) |
| PDF / Brand guide | [references/extractors/from-pdf.md](references/extractors/from-pdf.md) |

### Gallery (pre-built styles)

| Style | Era | File |
|-------|-----|------|
| Müller-Brockmann Swiss | 1950s–70s | [references/gallery/mueller-brockmann-swiss.visual-style.md](references/gallery/mueller-brockmann-swiss.visual-style.md) |
| Neville Brody Industrial | Late 1980s–90s | [references/gallery/neville-brody-industrial.visual-style.md](references/gallery/neville-brody-industrial.visual-style.md) |
| Saul Bass Cinematic | 1950s–60s | [references/gallery/saul-bass-cinematic.visual-style.md](references/gallery/saul-bass-cinematic.visual-style.md) |
| Game Boy Color | 1998–2003 | [references/gallery/game-boy-color.visual-style.md](references/gallery/game-boy-color.visual-style.md) |
| HeyGen AI Video | 2020s | [references/gallery/heygen-ai-video.visual-style.md](references/gallery/heygen-ai-video.visual-style.md) |

### Templates & Spec

- [references/templates/minimal.visual-style.md](references/templates/minimal.visual-style.md) — Bare minimum template
- [references/templates/full.visual-style.md](references/templates/full.visual-style.md) — Complete template with all fields
- [references/spec.md](references/spec.md) — Full format specification

## 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

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz.
- [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad.
- [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id.
- [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma.
- [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)