/brand-init

Create brand.yaml from scratch through interactive discovery.

What This Does

Guided process that produces a complete brand.yaml — the single source of truth for brand identity, visual tokens, voice, and content strategy. Replaces running /brand-builder

• /design-tokens separately.

Process

Phase 1: Discovery (Interactive)

Gather context automatically, then ask focused questions.

Auto-gather:

Tech stack, features, README

cat package.json 2>/dev/null | jq '{name, description, keywords}' cat README.md 2>/dev/null | head -100 git log --oneline -10

Ask via AskUserQuestion:

• Identity: Product name, domain, tagline, category

• Audience: Primary user, segments, pain points

• Voice: Tone (casual/professional/technical/playful), personality traits, things to avoid

• Content: Topics, mix (product vs valuable), posting frequency

Phase 2: Visual Direction (Interactive)

Brand hue: Present 4 hue options based on category:

• SaaS/tech → blue (250), purple (280)

• Health/fitness → green (140), teal (170)

• Finance → navy (220), emerald (160)

• Creative → orange (30), magenta (330)

• Custom hue (0-360)

Typography: Display + sans + mono font stacks

• Modern: Inter/Geist

• Classical: Playfair Display + serif

• Technical: JetBrains Mono focused

• Custom

Color overrides: Accept specific hex colors if the brand already has them. Convert to OKLCH using hexToOklch() from brand-kit.

Phase 3: Generation

Build the brand.yaml structure:

If brand-profile.yaml already exists, offer migration instead

if [ -f brand-profile.yaml ]; then node ~/Development/brand-kit/dist/src/cli.js migrate
--profile brand-profile.yaml
$([ -f design-tokens.json ] && echo "--tokens design-tokens.json")
--out brand.yaml fi

For new brands, construct the YAML programmatically with all sections:

• version: "1"

• identity from Phase 1

• audience from Phase 1

• voice from Phase 1

• palette with brand_hue, primary/secondary/accent (OKLCH + hex), light/dark backgrounds

• typography from Phase 2

• spacing , radii , elevation , motion with sensible defaults

• content from Phase 1

• inspirations from Phase 1

• meta with generation timestamp

Phase 4: Validate + Compile

node ~/Development/brand-kit/dist/src/cli.js validate brand.yaml node ~/Development/brand-kit/dist/src/cli.js compile --out ./src/styles

Phase 5: Preview

Generate a sample OG card to show the brand visually:

node ~/Development/brand-kit/dist/src/cli.js render og-default
--title "[Product Name]"
--subtitle "[Tagline]"
--out ./brand-preview.png

Show the preview to the user for approval.

Re-running

If brand.yaml exists:

• Load existing brand

• Ask which sections to update

• Preserve unchanged sections

• Recompile tokens

Migration Path

Existing projects with brand-profile.yaml :

• Auto-detect and offer migration

• Preserves all voice/content data

• Adds visual tokens (palette, typography, spacing)

• Old file kept as backup

Output

• brand.yaml in project root

• Compiled tokens in ./src/styles/ (or specified directory)

• Preview image ./brand-preview.png

Related Skills

• /brand-compile — Recompile tokens after editing brand.yaml

• /brand-assets — Generate OG cards and social images

• /brand-builder — Legacy brand discovery (superseded)

• /design-tokens — Design token patterns reference