skills.rest
gyalamanch001a
gyalamanch001aCOMMUNITY
Explore all skills by this author →
GitHub

visual-style

Create portable visual-style.md design systems for cross-tool styling.

Updated Apr 2, 2026
Search Tags:#figma#design-system#style-guide#visual-style#heygen#html-slides#brand-extraction
One-click install
npx skills add https://github.com/gyalamanch001a/pur-new --skill visual-style-gyalamanch001a
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/visual-style
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill visual-style-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns visual references into a reusable design system so teams and AI tools can keep colors, typography, layout, motion, and mood consistent across projects.

Core Features & Use Cases

  • Create: Build a complete visual-style.md from scratch when you need a fresh, tool-ready design system.
  • Extract: Derive a style from a website, video, or PDF brand guide and capture the visual rules in one portable file.
  • Apply: Translate the style into outputs for HeyGen videos, HTML slides, Figma, or paper.design using connector-specific guidance.
  • Use Case: A marketing team can extract a brand style from a landing page and reuse it across slide decks, video content, and UI mockups without redesigning each asset from scratch.

Quick Start

Use the visual-style skill to extract a portable visual-style.md from the provided source and apply it consistently to the target tool.

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 style guide from a website and apply it to Figma?▼

You can extract a portable style guide from any website, video, or PDF to capture visual rules, then translate that metadata directly into Figma or other design tools for consistent cross-project styling.

What is a portable visual design system used for?▼

A portable visual design system captures colors, typography, layout, motion, and mood in a single file, allowing AI tools and teams to maintain consistent visual styling across multiple platforms like HeyGen and HTML slides.

Can I create a design system from scratch for HeyGen videos?▼

Yes, you can build a complete visual design system from scratch or extract one from a brand guide, applying the resulting style metadata consistently to HeyGen videos, HTML slides, or paper.design.

Does this visual style tool work with PDF brand guides?▼

Yes, it derives a design system from PDF brand guides by extracting structured color palettes, typography, layout, and mood into a portable file ready for cross-tool application.

What format does the extracted brand style use?▼

The extracted brand style uses a visual-style.md file with YAML frontmatter, containing structured metadata for style prompts, color palettes, typography, layout, motion, and connector-specific fields.

Do I need any specific dependencies to generate a style system?▼

No dependencies are required to generate the style system metadata, as the skill processes visual references independently and outputs a portable file for your chosen design platform.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

Generate brand identity kits with logos, color palettes, typography, and style guides.

Community
Advanced
shige1014-devshige1014-dev

visual-style

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

Community
Advanced
video-production-buddyvideo-production-buddy
602

visual-style

Extract visual design systems from websites, videos, or PDFs and apply them across creative tools.

Official
Intermediate
Forexgod21Forexgod21
6

complete-design-system-brand-guidelines

Generate brand guidelines with color palettes, typography, spacing, and tone of voice.

Community
Advanced