skills.rest
hanzoai
hanzoaiOFFICIAL
Explore all skills by this author →
Website𝕏@hanzoaiGitHub

visual-style

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

Updated Aug 23, 2026
Search Tags:#figma#design-system#web-design#visual-style#heygen#html-slides#brand-guides
One-click install
npx skills add https://github.com/hanzoai/video --skill visual-style-hanzoai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/hanzoai/video/tree/main/.agents/skills/visual-style
Command: npx skills add https://github.com/hanzoai/video --skill visual-style-hanzoai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts scattered brand visuals into portable visual-style.md definitions so AI tools can consistently consume design specs.

Core Features & Use Cases

  • Create a visual-style.md from scratch to codify a brand's design system.
  • Extract a visual style from a URL, image, video, or PDF brand guide.
  • Apply a visual-style.md to tools like HeyGen, HTML slides, Figma, or paper.design.
  • Browse the gallery of pre-built visual styles such as Swiss, Saul Bass, Game Boy, and more.
  • Support prompts and mentions of terms like "visual style", "design system", "brand style", or "style guide" to unify styling.

Quick Start

Provide a starting visual-style.md by naming your style and running a prompt that outputs a complete frontmatter and the full visual-style content.

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 brand design system from a PDF or website?▼

To extract a brand design system from a PDF or website, the tool analyzes source visuals and generates a portable visual-style.md file containing YAML frontmatter with colors and full style prompts.

Can I apply a visual style to HeyGen or HTML slides?▼

Yes, you can apply a visual style to HeyGen or HTML slides. The tool consumes your visual-style.md definitions to consistently format outputs across these platforms.

What is a visual-style.md file and how does it work?▼

A visual-style.md file is a portable design specification using YAML frontmatter for name, version, colors, and style prompts, allowing AI tools to consistently consume and apply brand visuals.

How do I create a design system from scratch using Figma?▼

You can create a design system from scratch by providing a starting style name and prompt. The tool outputs a complete visual-style.md definition applicable to Figma or other platforms.

Are there pre-built visual styles available for web design?▼

Yes, there is a gallery of pre-built visual styles available such as Swiss, Saul Bass, and Game Boy. You can browse these styles and apply their definitions directly to web design projects.

Does this work for extracting styles from videos?▼

Yes, this tool supports extracting visual styles from videos. It processes video visuals to codify design elements into a unified visual-style.md file for consistent application.

Related Skills

Explore More Design & Creative Skills→
calesthiocalesthio
46.2k

visual-style

Create and validate portable visual-style.md design systems for AI tools.

Community
Advanced
het8802het8802
3

visual-style

Create and apply visual design systems from YAML and Markdown specifications.

Community
Advanced
shige1014-devshige1014-dev

visual-style

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

Community
Advanced
gyalamanch001agyalamanch001a

visual-style

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

Community
Advanced