Back to Details

brand-init

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/brand-init

/brand-init

Create 
brand.yaml
from scratch through interactive discovery.
通过交互式发现流程从头创建
brand.yaml
文件。

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.
通过引导式流程生成完整的
brand.yaml
文件——它是品牌标识、视觉标记、品牌调性和内容策略的唯一可信来源。替代了分别运行
/brand-builder
和
/design-tokens
的操作。

Process

流程

Phase 1: Discovery (Interactive)

阶段1：发现（交互式）

Gather context automatically, then ask focused questions.
Auto-gather:
bash
undefined
自动收集背景信息，然后提出针对性问题。
自动收集：
bash
undefined

Tech stack, features, README

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

**通过AskUserQuestion提问：**

1. **品牌标识**：产品名称、域名、标语、品类
2. **目标受众**：核心用户、用户细分、痛点
3. **品牌调性**：语气（随意/专业/技术向/活泼）、性格特质、需规避的内容
4. **内容策略**：主题、内容比例（产品相关 vs 价值型内容）、发布频率

Phase 2: Visual Direction (Interactive)

阶段2：视觉方向（交互式）

  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)
  2. Typography: Display + sans + mono font stacks
    • Modern: Inter/Geist
    • Classical: Playfair Display + serif
    • Technical: JetBrains Mono focused
    • Custom
  3. Color overrides: Accept specific hex colors if the brand already has them. Convert to OKLCH using 
    hexToOklch()
    from brand-kit.
  1. 品牌主色调：根据品类提供4种色调选项：
    • SaaS/科技 → 蓝色(250)、紫色(280)
    • 健康/健身 → 绿色(140)、蓝绿色(170)
    • 金融 → 藏青色(220)、翠绿色(160)
    • 创意类 → 橙色(30)、品红色(330)
    • 自定义色调(0-360)
  2. 字体系统：展示衬线、无衬线等字体组合
    • 现代风：Inter/Geist
    • 经典风：Playfair Display + 衬线字体
    • 技术风：主打JetBrains Mono
    • 自定义
  3. 颜色覆盖：如果品牌已有特定的十六进制颜色，可直接导入。通过brand-kit中的
    hexToOklch()
    转换为OKLCH格式。

Phase 3: Generation

阶段3：生成

Build the 
brand.yaml
structure:
bash
undefined
构建
brand.yaml
结构：
bash
undefined

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

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

对于新品牌，通过编程方式构建包含所有模块的YAML文件：
- `version: "1"`
- 阶段1收集的`identity`（品牌标识）
- 阶段1收集的`audience`（目标受众）
- 阶段1收集的`voice`（品牌调性）
- `palette`（调色板）包含品牌主色调、主色/辅助色/强调色（OKLCH + 十六进制）、亮色/暗色背景
- 阶段2确定的`typography`（字体系统）
- `spacing`（间距）、`radii`（圆角）、`elevation`（层级）、`motion`（动效）的合理默认值
- 阶段1收集的`content`（内容策略）
- 阶段1收集的`inspirations`（灵感来源）
- 包含生成时间戳的`meta`（元数据）

Phase 4: Validate + Compile

阶段4：验证与编译

bash
node ~/Development/brand-kit/dist/src/cli.js validate brand.yaml
node ~/Development/brand-kit/dist/src/cli.js compile --out ./src/styles
bash
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

阶段5：预览

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.png
Show the preview to the user for approval.
生成示例OG卡片以可视化展示品牌：
bash
node ~/Development/brand-kit/dist/src/cli.js render og-default \
  --title "[Product Name]" \
  --subtitle "[Tagline]" \
  --out ./brand-preview.png
向用户展示预览图以获取确认。

Re-running

重新运行

If 
brand.yaml
exists:
  1. Load existing brand
  2. Ask which sections to update
  3. Preserve unchanged sections
  4. Recompile tokens
如果已存在
brand.yaml
文件：
  1. 加载现有品牌信息
  2. 询问需要更新的模块
  3. 保留未修改的模块
  4. 重新编译标记

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
对于已存在
brand-profile.yaml
的项目：
  • 自动检测并提供迁移选项
  • 保留所有品牌调性/内容数据
  • 添加视觉标记（调色板、字体系统、间距）
  • 旧文件将作为备份保留

Output

输出

  • brand.yaml
    in project root
  • Compiled tokens in 
    ./src/styles/
    (or specified directory)
  • Preview image 
    ./brand-preview.png
  • 项目根目录下的
    brand.yaml
    文件
  • ./src/styles/
    （或指定目录）中的编译后标记
  • ./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
  • /brand-compile
    — 编辑brand.yaml后重新编译标记
  • /brand-assets
    — 生成OG卡片和社交图片
  • /brand-builder
    — 旧版品牌发现工具（已被替代）
  • /design-tokens
    — 设计标记参考模板