Brand Visual Generator
- 1k installs
- 787 repo stars
- Updated June 9, 2026
- kostja94/marketing-skills
brand-visual-generator is a design-system skill that generates, audits, and applies consistent visual identity assets—color palettes, typography scales, spacing systems, design tokens, and frontend aesthetics—for develop
About
brand-visual-generator is a marketing-skills entry for producing and auditing cohesive visual identity systems during product builds. The skill generates color palettes, typography scales, spacing systems, design tokens, and frontend aesthetic guidelines, then helps apply those rules across interfaces. Developers reach for brand-visual-generator when a landing page, dashboard, or web app needs a unified look instead of one-off color and font choices. Catalog metadata describes generation and audit workflows for brand consistency; verify the installed skill file matches brand-visual-generator because repository readmes may bundle unrelated SEO skills in the same collection.
- Reads existing project-context.md Section 12 for visual identity continuity
- Generates complete brand visual systems (colors, typography, spacing, motion, tokens)
- Creates CSS variables, design tokens, and slide-deck themes
- Enforces accessibility and frontend aesthetic consistency
- Supports both initial brand definition and ongoing audits
Brand Visual Generator by the numbers
- 1,004 all-time installs (skills.sh)
- +7 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #391 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/kostja94/marketing-skills --skill brand-visual-generatorAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1k |
|---|---|
| repo stars | ★ 787 |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 9, 2026 |
| Repository | kostja94/marketing-skills ↗ |
How do you generate consistent brand design tokens?
Generate, audit, and apply consistent visual identity assets including color palettes, typography scales, spacing systems, design tokens, and frontend aesthetics.
Who is it for?
Developers and designers defining or auditing a visual identity system before implementing branded landing pages, dashboards, or component libraries.
Skip if: Teams that already have a locked Figma design system and only need pixel-perfect implementation without new token generation or brand audits.
When should I use this skill?
The user asks to generate, audit, or apply brand colors, typography, spacing tokens, or consistent frontend visual identity across a product.
What you get
Color palettes, typography scales, spacing systems, design tokens, and audited frontend aesthetic guidelines.
- color palette spec
- typography scale
- design token set
Files
SEO: Local
Guides local SEO: Google Business Profile, NAP consistency, and citation building. Businesses with accurate NAP across 40+ authoritative sites see ~19% higher visibility in Google Maps. Use this skill when optimizing for local search, setting up GBP, or auditing citations.
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 Sections 4 (Audience), 5 (Website).
Identify: 1. Business type: Storefront vs service-area 2. Location: Single or multiple 3. Current listings: Existing GBP, directories
NAP Consistency
NAP = Name, Address, Phone. Critical for local rankings.
| Rule | Guideline |
|---|---|
| Exact match | "Street" vs "St." or "LLC" inconsistency = Google may treat as different entities |
| Fix first | Audit and fix inconsistencies before adding new citations |
| Tools | BrightLocal, Whitespark, Moz Local for audit |
Google Business Profile
| Element | Guideline |
|---|---|
| Address | Physical address; no P.O. boxes |
| Description | 750 chars; primary keywords in first 100 |
| Hours | Accurate; seasonal availability |
| Category | Primary category matches business type |
| Service-area | Hide address if no storefront; define service areas |
Citation Building
Targeted precision over submitting to every directory.
Priority order: 1. Google Business Profile 2. Apple Maps 3. Yelp, Bing Places, Facebook 4. Better Business Bureau, Foursquare, Nextdoor 5. Niche directories (Healthgrades, Angi, etc.)
Citation Audit
- Incorrect or outdated data
- Duplicate entries
- Missing listings on key directories
Fix before adding; compounding errors harm rankings.
Output Format
- NAP (exact format for consistency)
- GBP optimization checklist
- Citation priority list
- Audit findings (if applicable)
Related Skills
- geo: GEO for AI search; local + AI overlap
- localization-strategy: Multilingual; local + i18n
- directory-submission: Directory listings; different from local citations
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What assets does brand-visual-generator produce?
brand-visual-generator produces color palettes, typography scales, spacing systems, design tokens, and frontend aesthetic guidelines. Developers use these outputs to keep landing pages, dashboards, and web apps visually consistent.
Does brand-visual-generator only generate or also audit brands?
brand-visual-generator both generates new visual identity assets and audits existing interfaces for consistency. The audit step flags drift in colors, type, spacing, and token usage across frontend surfaces.
Is Brand Visual Generator safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.