What is a visual-style.md file?

It is a standardized Markdown file that defines design tokens like colors, typography, layout, and motion in a format optimized for AI consumption and cross-tool portability.

Can I use this skill to extract styles from my company website?

Yes, by providing a URL, the skill uses an extractor to analyze the site and generate a complete visual-style.md file based on its current design.

How does this integrate with HeyGen?

The skill includes a HeyGen connector that transforms your visual-style.md specifications into instructions the HeyGen Video Agent uses to style avatar videos.

What is the most important field in a visual style file?

The 'style_prompt_full' is the most critical field, as it contains the detailed instructions that guide AI tools in generating consistent visual results.

Does it support design tools like Figma?

Yes, it features a Figma connector designed to help map your structured design system fields to Figma-specific formats and styles.

Visual Style Manager

Name: Visual Style Manager
Author: heygen-com

byheygen-com

•

106

•

디자인 도구

Creates, extracts, and applies portable visual design systems across video, web, and design platforms using the visual-style.md format.

The Visual Style skill empowers Claude to manage comprehensive visual identities by creating and implementing portable design systems via the visual-style.md format. This skill allows users to extract design tokens from websites and media, build brand guides from scratch, and apply these styles directly to tools like HeyGen, Figma, and paper.design. By standardizing colors, typography, and motion into a machine-readable format, it ensures visual consistency across AI-generated content, presentations, and UI mockups while providing access to a curated gallery of iconic design styles.

주요 기능

01Generate portable visual-style.md files that define colors, typography, and motion.

02Produce detailed, AI-optimized style prompts for consistent cross-platform generation.

03Access a curated gallery of pre-built styles including Swiss, Cinematic, and Retro themes.

04Apply design systems to third-party tools like HeyGen, Figma, and HTML slides.

05Extract brand styles automatically from website URLs, videos, or PDF guides.

06106 GitHub stars

사용 사례

01Maintaining strict brand consistency across AI-generated HeyGen avatar videos.

02Converting an existing website's aesthetic into a reusable design system for new projects.

03Rapidly skinning presentations and UI prototypes using the built-in visual style gallery.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add heygen-com/skills visual-style

For use in Claude.ai and ChatGPT