brand-pipeline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/brand-pipeline

Full brand system setup in one command.

一条命令完成完整品牌系统搭建。

What This Does

功能说明

Orchestrates the complete brand-as-code pipeline:

Create
```
brand.yaml
```
(if missing)
Compile to CSS/Tailwind/TypeScript tokens
Generate visual assets (OG cards, social images)

编排完整的品牌代码化流水线：

若不存在则创建
```
brand.yaml
```
文件
编译为CSS/Tailwind/TypeScript令牌
生成视觉资产（OG卡片、社交平台图片）

Process

执行流程

Step 1: Brand Identity

步骤1：品牌标识

Check for existing brand files:

```
brand.yaml
```
exists → skip to Step 2
```
brand-profile.yaml
```
exists → offer migration via
```
brand-kit migrate
```
Neither exists → run
```
/brand-init
```
interactively

检查现有品牌文件：

若
```
brand.yaml
```
已存在 → 跳至步骤2
若
```
brand-profile.yaml
```
已存在 → 提供
```
brand-kit migrate
```
迁移选项
两者都不存在 → 交互式运行
```
/brand-init
```

Step 2: Compile Tokens

步骤2：编译令牌

bash

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

Verify output:

```
tokens.css
```
— CSS custom properties
```
theme.css
```
— Tailwind 4 @theme
```
tokens.ts
```
— TypeScript export

bash

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

验证输出文件：

```
tokens.css
```
— CSS自定义属性
```
theme.css
```
— Tailwind 4 @theme样式
```
tokens.ts
```
— TypeScript导出文件

Step 3: Integrate

步骤3：集成配置

Check project setup and wire tokens:

If Tailwind project: verify
```
@import "./theme.css"
```
in CSS entry
If TypeScript: verify tokens.ts is importable
Run typecheck:
```
pnpm typecheck
```
or
```
npx tsc --noEmit
```

检查项目配置并关联令牌：

若是Tailwind项目：验证CSS入口文件中是否已
```
@import "./theme.css"
```
若是TypeScript项目：验证是否可导入tokens.ts
运行类型检查：
```
pnpm typecheck
```
或
```
npx tsc --noEmit
```

Step 4: Generate Assets

步骤4：生成资产

Determine needed assets from project context:

Always:
```
og-default
```
If blog exists:
```
og-blog
```
+
```
blog-header
```
If launching:
```
launch-hero
```
+
```
social-announce
```
If changelog:
```
og-changelog
```

bash

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

根据项目上下文确定所需资产：

必选：
```
og-default
```
若存在博客：
```
og-blog
```
+
```
blog-header
```
若为启动项目：
```
launch-hero
```
+
```
social-announce
```
若存在更新日志：
```
og-changelog
```

bash

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

Step 5: Summary

步骤5：执行总结

Report what was created:

brand.yaml location
Token output files
Generated assets
Integration status

报告已创建的内容：

brand.yaml文件位置
令牌输出文件
生成的资产
集成状态

Flags

可用参数

```
--skip-init
```
— Skip brand-init, require existing brand.yaml
```
--skip-assets
```
— Only compile tokens, skip asset generation
```
--out <dir>
```
— Override token output directory

```
--skip-init
```
— 跳过brand-init步骤，要求已存在brand.yaml
```
--skip-assets
```
— 仅编译令牌，跳过资产生成
```
--out <dir>
```
— 覆盖令牌输出目录

brand-pipeline

Original

Translation

/brand-pipeline

/brand-pipeline

What This Does

功能说明

Process

执行流程

Step 1: Brand Identity

步骤1：品牌标识

Step 2: Compile Tokens

步骤2：编译令牌

Step 3: Integrate

步骤3：集成配置

Step 4: Generate Assets

步骤4：生成资产

Step 5: Summary

步骤5：执行总结

Flags

可用参数

Related Skills

相关技能