skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

visual-style

Create, extract, and apply portable visual design systems via visual-style.md files.

Updated Sep 1, 2026
Search Tags:#design system#figma#video generation#visual style#brand guide#style extraction#heygen
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill visual-style-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-style
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/visual-style
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill visual-style-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design teams and creators struggle to keep visual identity consistent across AI video generators, slide decks, and design tools, since each platform expects style guidance in a different format. This Skill defines a single portable visual-style.md format that captures colors, typography, layout, motion, and mood once, then translates it to any supported tool. ## Core Features & Use Cases - Create styles from scratch: Guided prompts gather mood, colors, typography, and layout preferences, then generate a complete visual-style.md from minimal or full templates. - Extract styles from sources: Analyze a website URL, video keyframes, or PDF brand guide to reverse-engineer a structured design system with exact hex values and font names. - Apply styles to tools: Connectors map style fields to HeyGen Video Agent prompts, HTML slide CSS variables, paper.design documents, and Figma color/text styles. - Browse a pre-built gallery: Five ready-made styles including Swiss International, Saul Bass Cinematic, Neville Brody Industrial, Game Boy Color, and HeyGen AI Video. - Use Case: Extract the visual style from your company website, then apply it to a HeyGen-generated product video and a matching HTML slide deck so both share identical colors, fonts, and motion language. ## Quick Start Ask the AI to extract a visual-style.md from your brand's website URL and then apply it to a HeyGen video about your product launch.

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 style guide for AI video generation?▼

Define a visual-style.md file with YAML frontmatter containing colors, typography, layout, motion, and mood fields. The style_prompt_full field acts as a complete natural-language prompt you can paste directly into HeyGen Video Agent or similar tools.

How to extract a design system from a website URL?▼

Provide the URL and use the website extractor workflow, which fetches the page, inspects CSS for exact hex values and font stacks, and maps findings to visual-style.md fields. The output includes colors, typography rules, layout patterns, and a mood.avoid list.

What is a visual-style.md file format?▼

It is a Markdown file with YAML frontmatter defining a complete design system: name, version, style prompts, color palettes with hex codes, typography specs, layout grids, motion patterns, and mood keywords. Optional Markdown body sections document design principles and connector notes.

Can I apply the same visual style to Figma and HTML slides?▼

Yes, connectors map the same visual-style.md fields to each target. The Figma connector generates color styles, text styles, and layout grids, while the HTML slides connector produces CSS variables and typography rules for single-file presentations.

What are the limitations of extracting styles from video?▼

Video extraction relies on sampled keyframes, so it captures only visually consistent patterns across frames rather than exact specifications. Motion analysis depends on observable transitions and pacing, and precise font identification may require manual confirmation.

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
heygen-comheygen-com
386

heygen-video

Generate presenter videos with HeyGen API using avatars and scripts.

Official
Advanced
Growth4U-systemsGrowth4U-systems

visual-identity

Generate logos and style guides from brand traits, colors, typography, and imagery style.

Official
Advanced
bacchus-labsbacchus-labs
4

design-system-governance

Detect design token drift between Figma and code implementations.

Official
Advanced