skills.rest
het8802
het8802COMMUNITY
Explore all skills by this author →
GitHub

visual-style

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
One-click install
npx skills add https://github.com/het8802/OpenNolan --skill visual-style-het8802
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
gyalamanch001agyalamanch001a

visual-style

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

Community
Advanced
cpalumbocpalumbo

brand-guidelines

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

Community
Basic
valtterimelkkovaltterimelkko
1

web-create-assets

Extract design system attributes from UI screenshots to generate web assets.

Community
Advanced
royvillasanaroyvillasana
34

ai-prototype-prompter

Convert Figma design data into structured prompts for AI UI prototyping tools.

Community
Intermediate