skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

visual-style

Create, extract, and apply portable visual design systems via visual-style.md files.

Updated Jul 16, 2026
Search Tags:#design system#figma#visual style#brand guide#style extraction#heygen#html slides
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill visual-style-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/visual-style
Command: npx skills add https://github.com/X-manist/Cohmira --skill visual-style-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design teams and content creators struggle to keep visual identity consistent across AI video generators, slide decks, and design tools, since each platform expects style guidance in a different format. This Skill defines a single portable visual-style.md format that captures colors, typography, layout, motion, and mood once and applies it anywhere. ## Core Features & Use Cases - Create styles from scratch: Guided prompts produce a complete visual-style.md with hex colors, font stacks, grid rules, and motion patterns. - Extract styles from sources: Analyze a website URL, video keyframes, or PDF brand guide to generate a structured style file with exact values. - Apply styles to tools: Built-in connectors map style fields to HeyGen Video Agent prompts, HTML slide CSS variables, paper.design documents, and Figma styles. - Browse a style gallery: Pre-built styles include Swiss International, Saul Bass Cinematic, Neville Brody Industrial, Game Boy Color, and HeyGen AI Video. - Use Case: Extract the visual identity from your company website, then apply the resulting style file to generate consistently branded HeyGen videos and HTML presentations. ## Quick Start Ask the AI to extract a visual style from your brand's website URL and apply it to a HeyGen video.

Frequently Asked Questions about visual-style

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a visual style guide for AI video generation?▼

Define a visual-style.md file with colors, typography, layout, motion, and mood fields, where style_prompt_full contains the complete natural-language generation prompt. The HeyGen connector then feeds this prompt directly into the video generation request.

How to extract a design system from a website URL?▼

Provide the URL and the extractor analyzes the page's CSS to identify exact hex colors, font families, grid structure, and animation patterns. It outputs a complete visual-style.md with the source_url recorded and all required fields populated.

What is a visual-style.md file format?▼

It is a Markdown file with YAML frontmatter defining a portable design system. Required fields are name, version, style_prompt_short, style_prompt_full, and at least two primary colors with name, hex, and role; optional sections cover typography, layout, motion, mood, and assets.

Can I apply one visual style to both Figma and HTML slides?▼

Yes, the same visual-style.md works across connectors. The Figma connector maps colors and typography to Figma color and text styles, while the HTML slides connector converts them into CSS variables and font stacks.

What are the limitations of extracting styles from video?▼

Video extraction relies on sampled keyframes, so it captures only visually consistent patterns across frames rather than exact specifications. Motion details like easing and pacing are inferred from observation and may need manual refinement.

Related Skills

Explore More Design & Creative Skills→
bencharoenwongbencharoenwong
3

parallax-white-label-onboard

Extract client branding visuals and voice from multiple sources into a unified profile.

Community
Advanced
hanzoaihanzoai

visual-style

Convert brand visuals into portable visual-style.md definitions with YAML frontmatter.

Official
Advanced
OneWave-AIOneWave-AI
245

brand-consistency-checker

Detect off-brand colors, fonts, and logos in documents and slides.

Official
Basic
PMDevSolutionsPMDevSolutions
7

design-token-lock

Extract design values from Figma files into a versioned lockfile.

Official
Advanced