Unified brand identity pipeline — brand voice, visual identity, messaging frameworks, asset management, brand consistency, plus full brand kit generator (strategy → color palette → typography → CSS tokens → guidelines). Pipeline: creative vision → brand strategy → full kit.
Unified brand identity pipeline — brand voice, visual identity, messaging frameworks, asset management, brand consistency, plus full brand kit generator (strategy → color palette → typography → CSS tokens → guidelines). Pipeline: creative vision → brand strategy → full kit.
brandbrandkit-genckm:brandBrand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
Brand identity, voice, messaging, asset management, and consistency frameworks.
Inject brand context into prompts:
node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json
Validate an asset:
node scripts/validate-asset.cjs <asset-path>
Extract/compare colors:
node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>
# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20
Files synced:
docs/brand-guidelines.md → Source of truthassets/design-tokens.json → Token definitionsassets/design-tokens.css → CSS variables| Subcommand | Description | Reference |
|---|---|---|
update | Update brand identity and sync to all design systems | references/update.md |
| Topic | File |
|---|---|
| Voice Framework | references/voice-framework.md |
| Visual Identity | references/visual-identity.md |
| Messaging | references/messaging-framework.md |
| Consistency | references/consistency-checklist.md |
| Guidelines Template | references/brand-guideline-template.md |
| Asset Organization | references/asset-organization.md |
| Color Management | references/color-palette-management.md |
| Typography | references/typography-specifications.md |
| Logo Usage | references/logo-usage-rules.md |
| Approval Checklist | references/approval-checklist.md |
| Script | Purpose |
|---|---|
scripts/inject-brand-context.cjs | Extract brand context for prompt injection |
scripts/sync-brand-to-tokens.cjs | Sync brand-guidelines.md → design-tokens.json/css |
scripts/validate-asset.cjs | Validate asset naming, size, format |
scripts/extract-colors.cjs | Extract and compare colors against palette |
| Template | Purpose |
|---|---|
templates/brand-guidelines-starter.md | Complete starter template for new brands |
$ARGUMENTS (first word)references/{subcommand}.mdbrandkit-genFull brand kit generator. From a single prompt, produces: brand strategy + voice, color palette, typography system, logo SVG, CSS design tokens, component preview, social banners, OG image, and a brand guidelines doc. Chains brand → design-system → impeccable-frontend-design → banner-design.
One prompt → complete brand system. Strategy, tokens, logo, components, banners, guidelines.
| Deliverable | Description |
|---|---|
brandkit/guidelines/brand-guidelines.md | Full brand doc: voice, personality, usage rules |
brandkit/tokens/design-tokens.css | CSS variables (primitive → semantic → component) |
brandkit/tokens/design-tokens.json | Token source of truth for design tools |
brandkit/logo/logo-primary.svg | Primary logo (wordmark + mark) |
brandkit/logo/logo-mark.svg | Icon/mark only |
brandkit/logo/logo-dark.svg | Dark background variant |
brandkit/logo/favicon.svg | 32×32 favicon |
brandkit/components/preview.html | Button, card, badge, input, navbar showcase |
brandkit/banners/og-image.html | 1200×630 Open Graph / social share image |
brandkit/banners/twitter-header.html | 1500×500 Twitter/X header |
brandkit/banners/linkedin-cover.html | 1584×396 LinkedIn cover |
Collect brand context. If $ARGUMENTS is short/absent, ask:
Brand name:
Industry / product type:
Target audience:
3 personality adjectives: (e.g. "bold, minimal, human")
Competitors to NOT look like:
Reference brands you admire: (optional)
Primary use: web app / marketing site / mobile app / SaaS / consumer
Color preferences or restrictions: (optional)
Light / dark / both themes:
If $ARGUMENTS contains enough context, skip straight to Phase 1. Parse:
brandName — the nameindustry — what it doesaudience — who foradjectives — personality words (default: "modern, professional, trustworthy")antiReferences — brands to avoid resemblingcolorHints — any color directionbrand — Generate brand personality, archetype, tone of voice, and messaging framework based on parsed context.design-system — Generate color palette, typography selection, and spacing/shape tokens grounded in brand personality.impeccable-frontend-design — Apply visual design standards to ensure the palette, type scale, and radii meet production quality.Generate a cohesive palette derived from brand personality:
Primary: #______ (main brand color — buttons, links, accents)
Secondary: #______ (supporting — hover states, tags, subtle backgrounds)
Accent: #______ (highlight, CTA emphasis, special moments)
Neutral-50: #______
Neutral-100:#______
Neutral-200:#______
Neutral-700:#______
Neutral-900:#______
Success: #______
Warning: #______
Error: #______
Rules:
Select 2 typefaces (all from Google Fonts, no licensing risk):
Display / Heading: ________ — [rationale tied to personality]
Body / UI: ________ — [rationale tied to personality]
Mono (optional): ________ — only if product is dev/technical
Scale (rem, 1.25× modular):