Agent skill · design visual · kostja94
brand-visual-generator
When the user wants to define, audit, or apply visual identity (typography, colors, spacing, design tokens, frontend aesthetics). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," "AI brand aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," "frontend aesthetics," "PowerPoint theme," "Google Slides brand," or "slide master colors." For brand story, positioning, and voice, use branding.
Why this skill is useful
Provides detailed guidelines for typography, color palettes, and design tokens that enhance brand visual identity, which the AI may not generate accurately on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-06-09. 860 stars on the source repository.
What this skill does
Components: Brand Visual Identity Guides visual identity for consistent brand presentation. Companies with consistent branding see up to 23-33% revenue lift; 94% of consumers say consistency influences buying decisions. Keywords: visual identity, design tokens, color palette, typography, CSS variables, slide deck, brand guidelines, frontend aesthetics, accessibility When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output. Initial Assessment Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read Section 12 (Visual Identity) for colors, typography, spacing. See branding for brand strategy and visual identity strategy layer. Identify: 1. Scope: New brand, audit, or component design 2. Touchpoints: Web, print, social, product UI, slides (PowerPoint, Google Slides, Keynote), documents (Word, Google Docs, PDF reports) 3. Existing assets: Logo, style guide, design files Best Practices Typography Two-font system: One display font for headlines, one body font for text. Contrast + harmony: different enough for distinct roles, similar enough to feel cohesive. Body font: Prioritize legibility—large x-height, open counters. For neutral/safe: Source Sans 3, Lora, IBM Plex Sans. For distinctiveness: avoid overused AI fonts (Inter, Roboto, Arial, system fonts); prefer characterful choices that elevate the brand. See Frontend Aesthetics. Headline font: Communicates brand voice; must be readable in under one second. Carries personality while body handles infrastructure. Type scale: Use ratios 1.25–1.5 (Major Third or Perfect Fifth) for hierarchy. Limit to 3–4 styles per block. Pairing rule: Decorative fonts only with neutral typefaces. Assign distinct roles; avoid mixing more than two families. Sizes: Hero, section, subheading, body, caption; responsive scaling. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills kostja94/brand-visual