Brand Visual Generator
Define or audit visual identity—colors, type, spacing tokens, and frontend aesthetics—so landing pages, apps, and decks look like one brand.
Overview
Brand Visual Generator is an agent skill most often used in Validate (also Build frontend, Launch distribution) that defines and applies visual identity via typography, colors, spacing, and design tokens.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill brand-visual-generatorWhat is this skill?
- Design tokens: typography, color palette, spacing, and CSS-variable style outputs
- Initial assessment reads .claude or .cursor project-context Section 12 when present
- Covers frontend aesthetics, accessibility, motion, and distinctive UI direction
- Slide and deck use: PowerPoint themes, Google Slides brand, slide master colors
- Pairs with branding skill for story and voice while this skill owns visual execution
- Skill metadata version 1.4.0
- Cites 23-33% revenue lift range for consistent branding (skill context)
- 94% of consumers cite consistency influencing buying (skill context)
Adoption & trust: 966 installs on skills.sh; 587 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your product and marketing look inconsistent because you lack shared colors, fonts, spacing rules, and tokenized styles across app and decks.
Who is it for?
Founders polishing a landing page, SaaS UI, or branded slide deck who want tokens and guidelines agents can reuse.
Skip if: Pure copy positioning or brand voice without visual system needs—use the branding skill instead.
When should I use this skill?
User wants visual identity, design system, typography, color palette, design tokens, frontend aesthetics, or slide/PowerPoint brand theming—or mentions brand style guide, brand colors, or distinctive design.
What do I get? / Deliverables
You leave with documented visual identity and design-token guidance your agent can apply to UI, slides, and brand-aligned frontend work—then deepen story with the branding skill if needed.
- Color palette and typography recommendations
- Spacing and design-token specification
- Brand visual guideline summary for UI and decks
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Validate is the canonical shelf because consistent visual identity usually locks before high-fidelity build and launch assets. Landing and early marketing surfaces are where typography, palette, and tokens first must align with positioning.
Where it fits
Lock hero typography and primary palette before shipping a waitlist page.
Export CSS variables and spacing scale for your React component library.
Align Google Slides or pitch deck masters with the same brand colors as the site.
Keep blog and social templates visually consistent with documented tokens.
How it compares
Complements narrative branding skills by owning measurable visual tokens and CSS-level aesthetics, not mission statements alone.
Common Questions / FAQ
Who is brand-visual-generator for?
Solo builders and marketers who need consistent typography, color, spacing, and design tokens across web, product UI, and presentations.
When should I use brand-visual-generator?
In Validate when tightening a landing or prototype look; in Build when implementing frontend aesthetics; at Launch when aligning ads, SEO pages, or slide decks to the same palette and type scale.
Is brand-visual-generator safe to install?
It is editorial and design guidance without shell requirements; review the Security Audits panel on this page like any third-party skill.
SKILL.md
READMESKILL.md - Brand Visual Generator
# 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. Line length max 120 chars; generous line-height. ### Color Palette - **Structure**: Primary, secondary, CTA, background, text. Use flexible systems (core hero color + complementary shades), not single rigid colors. - **Industry mapping**: Finance → blue, gray, navy (stability); Luxury → rose gold, burgundy, black (exclusivity); Tech → teal, neon accents, charcoal (innovation); Wellness → lavender, peach, mint (calm); Sustainability → sage green, earthy tones. - **Reproduction**: HEX, RGB, CMYK for print and digital. For **programmatic slides** (e.g. python-pptx), map brand HEX to RGB tuples `(R, G, B)` for fills and text; keep a single source of truth table (HEX + RGB) in the deliverable. - **Accessibility**: Contrast >=4.5:1 for normal text, >=3:1 for large text (18px+ or 14px+ bold). Don't rely on color alone for information. ### Spacing - **Margins**: Horizontal (e.g. 120px), vertical section padding - **Grid**: Consistent spacing scale (8px base common) - **Logo clear space**: Minimum space around logo; document in brand guide ### Logo Usage - **Variants**: Primary, secondary, monogram; light/dark backgrounds - **Minimum size**: Prevent illegibility - **Don't**: Stretch, recolor, add effects without approval ### Anti-Patterns (Avoid)