brand-init（品牌初始化）

/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:

1. Identity: Product name, domain, tagline, category
2. Audience: Primary user, segments, pain points
3. Voice: Tone (casual/professional/technical/playful), personality traits, things to avoid
4. Content: Topics, mix (product vs valuable), posting frequency

Phase 2: Visual Direction (Interactive)

1. 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)

1. Typography: Display + sans + mono font stacks

- Modern: Inter/Geist - Classical: Playfair Display + serif - Technical: JetBrains Mono focused - Custom

1. 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:

1. Load existing brand
2. Ask which sections to update
3. Preserve unchanged sections
4. 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