skills.rest
xingBaGan
xingBaGanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-style

Define visual design systems in YAML and apply styles across platforms.

Updated May 23, 2026
Search Tags:#branding#UI/UX#design system#style guide#visual design
One-click install
npx skills add https://github.com/xingBaGan/FANovelist --skill visual-style-xingbagan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/xingBaGan/FANovelist/tree/main/src/openharness/openmontage/.claude/skills/visual-style
Command: npx skills add https://github.com/xingBaGan/FANovelist --skill visual-style-xingbagan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the creation, extraction, and application of visual design systems, enabling users to maintain consistency across various platforms and tools.

Core Features & Use Cases

  • Create Visual Styles: Build custom design systems from scratch or extract styles from existing sources.
  • Apply Styles: Integrate styles into various tools like HeyGen videos, HTML slides, Figma, or paper.design.
  • Gallery: Access a collection of pre-built visual styles for quick use.
  • Use Case: Suppose you want to create a consistent brand style for your company's video content. Use this Skill to define your color palette, typography, and layout, then apply it to HeyGen videos.

Quick Start

Generate a visual-style.md for a new brand by providing the mood, color preferences, and typography choices.

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 design system for consistent branding across multiple platforms?▼

To create a visual design system for consistent branding, you use a structured YAML format to define color, typography, layout, motion, and mood. This enables style extraction and application across various platforms.

Can I apply a visual style system to Figma and HTML slides?▼

You can apply a defined visual style system to Figma, HTML slides, HeyGen videos, and paper.design. The system integrates styles into these tools via various connectors to maintain visual consistency.

What is the best way to extract styles from existing sources into a unified design system?▼

The best way to extract styles into a unified design system is by generating a visual-style.md file. This method captures your color palette, typography, and layout choices into a structured YAML format for application.

Do I need to manually define colors and typography when building a UI/UX style guide?▼

You do not need to manually define every element when building a UI/UX style guide. You can access a gallery of pre-built visual styles for quick use, or generate one by providing mood and color preferences.

How does a YAML-based design system handle layout and motion definitions?▼

A YAML-based design system handles layout and motion by structuring these parameters alongside color and typography. Parsing the YAML allows you to apply these comprehensive motion and layout definitions via connectors.

Related Skills

Explore More Design & Creative Skills→
alexsandrocruzalexsandrocruz

ui-ux-pro-max

Generate UI/UX design system recommendations via multi-domain BM25 searches.

Community
Advanced
het8802het8802
3

visual-style

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

Community
Advanced
cookeyholdercookeyholder

ui-ux-pro-max

Generate master and page-specific design systems for web and mobile projects.

Community
Advanced
CrazySwamiCrazySwami
5

brand-guide

Generate HTML or Markdown brand guides documenting colors, typography, and responsive specs.

Community
Intermediate