brand-init
Original:🇺🇸 English
Translated
Unified brand discovery that outputs brand.yaml. Merges brand-builder (voice/audience) + design-exploration (visual direction) into one flow. Run once per project to establish brand identity.
3installs
Sourcephrazzld/claude-config
Added on
NPX Install
npx skill4agent add phrazzld/claude-config brand-initTags
Translated version includes tags in frontmatterSKILL.md Content
View Translation Comparison →/brand-init
Create from scratch through interactive discovery.
brand.yamlWhat This Does
Guided process that produces a complete — the single source of truth
for brand identity, visual tokens, voice, and content strategy. Replaces running
+ separately.
brand.yaml/brand-builder/design-tokensProcess
Phase 1: Discovery (Interactive)
Gather context automatically, then ask focused questions.
Auto-gather:
bash
# 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 -10Ask 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 usingfrom brand-kit.
hexToOklch()
Phase 3: Generation
Build the structure:
brand.yamlbash
# 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
fiFor new brands, construct the YAML programmatically with all sections:
version: "1"- from Phase 1
identity - from Phase 1
audience - from Phase 1
voice - with brand_hue, primary/secondary/accent (OKLCH + hex), light/dark backgrounds
palette - from Phase 2
typography - ,
spacing,radii,elevationwith sensible defaultsmotion - from Phase 1
content - from Phase 1
inspirations - with generation timestamp
meta
Phase 4: Validate + Compile
bash
node ~/Development/brand-kit/dist/src/cli.js validate brand.yaml
node ~/Development/brand-kit/dist/src/cli.js compile --out ./src/stylesPhase 5: Preview
Generate a sample OG card to show the brand visually:
bash
node ~/Development/brand-kit/dist/src/cli.js render og-default \
--title "[Product Name]" \
--subtitle "[Tagline]" \
--out ./brand-preview.pngShow the preview to the user for approval.
Re-running
If exists:
brand.yaml- 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
- in project root
brand.yaml - Compiled tokens in (or specified directory)
./src/styles/ - Preview image
./brand-preview.png
Related Skills
- — Recompile tokens after editing brand.yaml
/brand-compile - — Generate OG cards and social images
/brand-assets - — Legacy brand discovery (superseded)
/brand-builder - — Design token patterns reference
/design-tokens