Skip to main content
affpapa.org
RU EN
skill CX Codex

visual-style — Claude Code skill: what it does, how to install

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add calesthio/OpenMontage --skill visual-style -a claude-code
Open on GitHub

What visual-style 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.

What it helps with

  • 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 for the agent

  • 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

How to install visual-style

1Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill visual-style -a claude-code

2Manually: put the files in place

~/.claude/skills/visual-style/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/visual-style/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about visual-style

How do I install visual-style in Claude Code?

Run npx skills add calesthio/OpenMontage --skill visual-style -a claude-code in your terminal.

What is the purpose of visual-style?

It provides a unified visual-style.md blueprint for design variables. Other AI agents read this file to ensure visual consistency across presentation decks, Figma mockups, or HeyGen videos.

Which pre-made designs are included in the gallery?

The collection includes Müller-Brockmann Swiss, Neville Brody Industrial, Saul Bass Cinematic, Game Boy Color, and HeyGen AI Video templates.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set32

ai-video-gen This skill turns a text prompt into a video through several provider gateways. Useful when you need a clip without juggling a handful of vendor sites. CX Codex +1 1,200installs lottie-bodymovin Applies Disney's 12 animation principles to Lottie vector animations. Bridges After Effects setup with runtime JavaScript controls. CX Codex +1 1,100installs create-video This skill turns a description into a finished video: write what you want to see, and HeyGen generates the script, picks an avatar, adds voiceover and editing. Good for quick demos, explainers and promos without tweaking every detail. CX Codex +1 1,100installs video-toolkit Automates video creation: generates voiceovers, background music, animates talking heads, and composes scenes with Remotion. Requires Node.js, Python3, ffmpeg, and cloud GPU access (Modal or RunPod). CX Codex +1 1,100installs text-to-speech Generates speech audio with HeyGen Starfish and lets you choose a voice, speed, and pitch. Useful for voiceovers, narration, and podcasts. CX Codex +1 1,200installs bfl-api This skill helps connect BFL FLUX API for image generation and editing. It covers async requests, polling, rate limits, and webhooks. CX Codex +1 1,000installs threejs-textures Skill for working with Three.js textures: image loading, UV coordinates, cubemaps, HDR environments and optimization. Use when building 3D scenes with materials, skyboxes and reflection maps. CX Codex +1 1,000installs threejs-interaction Ready-made patterns for Three.js user input, raycasting, and camera controls. Helps add object picking and touch detection to 3D scenes. CX Codex +1 1,000installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor