visual-style

Name: visual-style
Availability: InStock
Author: het8802

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

3|1|Updated May 29, 2026

Search Tags:#branding #UI/UX #design system #visual design #style application

Ready to run

npx skills add https://github.com/het8802/OpenNolan --skill visual-style-het8802

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/het8802/OpenNolan/tree/main/.agents/skills/visual-style
Command: npx skills add https://github.com/het8802/OpenNolan --skill visual-style-het8802

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires requests, BeautifulSoup, Pillow, Figma, paperdesign, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of creating, extracting, and applying visual design systems, enabling users to quickly implement consistent styles across various tools and media.

Core Features & Use Cases

Design System Creation: Build custom design systems with YAML frontmatter and Markdown specifications.
Style Extraction: Generate visual styles from websites, videos, PDFs, or other sources.
Style Application: Apply predefined styles to HeyGen videos, HTML slides, Figma, or paper.design documents.
Use Case: A designer wants to create a consistent visual style for a new project. They use this Skill to generate a style from a reference website and then apply it to a Figma design.

Quick Start

Apply the "Müller-Brockmann Swiss International Style" to the Figma design document "my_project".

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

To extract a visual design system from a website and apply it to Figma, this Skill uses connectors to analyze the reference source, generates a style specification in Markdown, and then applies the predefined styles directly to your Figma design document.

Can I use YAML to create a custom UI/UX design system?▼

Yes, you can create a custom UI/UX design system using YAML frontmatter combined with Markdown specifications to define your visual styles, which can then be seamlessly applied across various supported platforms and media formats.

What is the best way to apply a consistent visual style across HTML slides and HeyGen videos?▼

The best way to apply a consistent visual style across HTML slides and HeyGen videos is to generate a unified style specification file and use the provided platform connectors to apply those predefined visual attributes to each specific output format.

Does this visual style application tool support extracting design systems from PDFs and videos?▼

Yes, this visual style application tool supports extracting design systems directly from PDFs and videos, allowing you to capture visual attributes from existing media and convert them into reusable Markdown and YAML style specifications.

Do I need a visual-style.md file to apply styles to a paper.design document?▼

Yes, you need a visual-style.md file to serve as the style specification, along with the applicable connector, to successfully apply your extracted or custom defined visual styles to a paper.design document.

Why does my style application fail when extracting visual designs from external sources?▼

Style application may fail if the visual-style.md specification is missing or incomplete, or if the required platform-specific connector for tools like Figma, HeyGen, or HTML slides is not properly configured for the extraction process.