skills.rest
shige1014-dev
shige1014-devCOMMUNITY
Explore all skills by this author →
GitHub

visual-style

Create and extract portable visual design systems into visual-style.md files.

1|Updated Apr 11, 2026
Search Tags:#templates#figma#design-system#extract#apply#visual-style#heygen
One-click install
npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill visual-style-shige1014-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/visual-style
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill visual-style-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helping teams and creators define, extract, and apply portable visual design systems so visual language is consistent across videos, slides, design files, and publishing platforms. It reduces manual translation of brand rules and prevents inconsistent color, typography, layout, and motion usage when moving a style between tools.

Core Features & Use Cases

  • Create: Guided workflow to craft a complete visual-style.md including style_prompt_full, colors, typography, layout, motion, and mood.
  • Extract: Analyze websites, PDFs, or video keyframes to synthesize a reusable visual-style.md spec.
  • Apply: Map style fields to connectors (HeyGen, Figma, HTML slides, paper.design) and generate tool-ready instructions.
  • Gallery & Templates: Browse and reuse curated example styles (Swiss, Saul Bass, Game Boy Color, HeyGen) and start from minimal or full templates.
  • Validation: Ensures required fields like version and colors.primary are present and follows the spec for portability.

Quick Start

Create a visual-style.md for a warm, minimalist brand with two primary colors, a clean sans-serif heading, and gentle fade transitions for an explainer video.

Frequently Asked Questions about visual-style

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

FAQPage Schema
How do I extract a visual design system from a PDF or website into a reusable format?▼

To extract a visual design system from a PDF or website, this tool analyzes the source content and synthesizes a reusable visual-style.md file containing structured colors, typography, layout, and motion fields. This ensures your extracted brand rules remain portable across different platforms.

Can I apply a single visual design system to both Figma and HeyGen videos?▼

Yes, you can apply a single visual design system to both Figma and HeyGen videos. The skill maps your structured style fields to specific connectors, generating tool-ready instructions that ensure visual consistency across your design files and video outputs.

What is a portable visual-style.md file and when do I need one?▼

A portable visual-style.md file is a validated specification containing your brand's dominant style prompt, colors, typography, layout, and motion guidelines. You need one to prevent inconsistent visual language when moving a design style across different publishing platforms and tools.

How do I create a consistent visual style for HTML slides starting from scratch?▼

To create a consistent visual style for HTML slides from scratch, use the guided workflow to define your colors, typography, layout, and motion. The skill validates these required fields and maps them to the HTML slides connector for tool-ready output.

Does this visual style extraction tool support pre-defined templates like Swiss or Saul Bass?▼

Yes, the visual style extraction tool supports pre-defined templates. You can browse and reuse curated example styles such as Swiss, Saul Bass, Game Boy Color, and HeyGen, or start building your design system from minimal and full templates.

What are the limitations of applying a visual design system across multiple tools?▼

The main limitation of applying a visual design system across multiple tools is connector compatibility. While the skill generates tool-ready instructions for supported platforms like Figma and paper.design, you must ensure the target tool supports the mapped color, typography, layout, and motion fields.

Related Skills

Explore More Design & Creative Skills→
buda-aibuda-ai
25

keyframe-extractor

Detect scene changes and extract keyframes with metadata from video files.

Official
Intermediate
cpalumbocpalumbo

brand-guidelines

Apply Cinzia's brand colors and typography to documents and visuals.

Community
Basic
fantay0312fantay0312

design-md

Generate a DESIGN.md documenting design tokens and layout principles from Stitch project assets.

Community
Advanced
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate