Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
# 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 truth
assets/design-tokens.json → Token definitions
assets/design-tokens.css → CSS variables
Subcommands
Subcommand
Description
Reference
update
Update brand identity and sync to all design systems
references/update.md
References
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
Scripts
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
Templates
Template
Purpose
templates/brand-guidelines-starter.md
Complete starter template for new brands
Routing
Parse subcommand from $ARGUMENTS (first word)
Load corresponding references/{subcommand}.md
Execute with remaining arguments
From brandkit-gen
Full 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.
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 name
industry — what it does
audience — who for
adjectives — personality words (default: "modern, professional, trustworthy")
antiReferences — brands to avoid resembling
colorHints — any color direction
Phase 1 — Brand Strategy
Invoke brand — Generate brand personality, archetype, tone of voice, and messaging framework based on parsed context.
1.1 Brand Personality
3-word essence: distill adjectives into a precise brand character
Primary must pass WCAG AA against white (4.5:1) for text use
Accent should be optically distinct from Primary (>30° hue difference)
Derive palette from a single "seed" hue then build systematic scale
No more than 2 saturated hues in the base palette
2.2 Typography
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
Also generate brandkit/tokens/design-tokens.json in W3C Design Tokens format.
Phase 4 — Logo System
Invoke impeccable-frontend-design — Design and generate SVG logo files (primary, mark-only, dark variant, favicon) following logo mark design principles.
Generate SVG logos. Rules:
Logo mark should be abstract or letterform — NOT a generic clip-art icon
Must work at 16px (favicon) and 512px scale
No gradients in the mark (flat colors only, max 2 colors) — gradients can be in wordmark
Import ../tokens/design-tokens.css — no hardcoded colors
Include <link> for Google Fonts loaded in the HTML
Dark mode toggle button (adds data-theme="dark" to <html>)
Responsive, max-width 1200px container
Print-friendly (no dark backgrounds on print)
Phase 6 — Social Banners
Invoke banner-design — Generate the three social banner HTML files (OG image, Twitter/X header, LinkedIn cover) at exact pixel dimensions with inline CSS.
Generate 3 HTML banners (exact pixel dimensions, inline CSS):
OG Image — brandkit/banners/og-image.html
Size: 1200 × 630px
Content: Logo + tagline + subtle background pattern
