brand-assets

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/brand-assets

Generate branded visual assets from templates.

从模板生成品牌化视觉资产。

What This Does

功能说明

Renders 1200x630 PNG images using brand tokens from

brand.yaml

. Templates consume the brand palette, typography, and identity for consistent visuals.

使用

brand.yaml

中的品牌标识渲染1200x630尺寸的PNG图片。模板会调用品牌配色、排版和品牌标识，以确保视觉效果的一致性。

Available Templates

可用模板

Template	Use Case
`og-blog`	Blog post OG cards
`og-product`	Product announcement cards
`og-changelog`	Version release cards
`og-default`	Generic fallback OG card
`social-announce`	Social media announcements
`social-quote`	Quote cards for social
`blog-header`	Blog post hero images
`launch-hero`	Product launch hero images

模板	使用场景
`og-blog`	博客文章OG卡片
`og-product`	产品发布卡片
`og-changelog`	版本更新卡片
`og-default`	通用备用OG卡片
`social-announce`	社交媒体公告图片
`social-quote`	社交媒体引用卡片
`blog-header`	博客文章首图
`launch-hero`	产品发布首图

Process

操作流程

Ensure
```
brand.yaml
```
exists in project root (run
```
/brand-compile
```
first if needed)
Determine which assets are needed from context:
- Blog post →
```
og-blog
```
  +
```
blog-header
```
- Product launch →
```
launch-hero
```
  +
```
social-announce
```
  +
```
og-product
```
- Changelog →
```
og-changelog
```
- General →
```
og-default
```

Render each asset:

bash

node ~/Development/brand-kit/dist/src/cli.js render og-blog \
  --title "Post Title" \
  --author "Author Name" \
  --date "2026-02-12" \
  --out ./public/og-blog.png

For bulk generation:

bash

node ~/Development/brand-kit/dist/src/cli.js render-all --out ./public/brand-assets

确保项目根目录下存在
```
brand.yaml
```
（如有需要，先运行
```
/brand-compile
```
）
根据场景确定所需资产：
- 博客文章 →
```
og-blog
```
  +
```
blog-header
```
- 产品发布 →
```
launch-hero
```
  +
```
social-announce
```
  +
```
og-product
```
- 更新日志 →
```
og-changelog
```
- 通用场景 →
```
og-default
```

渲染单个资产：

bash

node ~/Development/brand-kit/dist/src/cli.js render og-blog \
  --title "Post Title" \
  --author "Author Name" \
  --date "2026-02-12" \
  --out ./public/og-blog.png

批量生成资产：

bash

node ~/Development/brand-kit/dist/src/cli.js render-all --out ./public/brand-assets

Template Options

模板参数

All templates accept:

```
--title "..."
```
(required)
```
--subtitle "..."
```
```
--author "..."
```
```
--date "..."
```
```
--version "..."
```
```
--out file.png
```
(required)

所有模板均支持以下参数：

```
--title "..."
```
（必填）
```
--subtitle "..."
```
```
--author "..."
```
```
--date "..."
```
```
--version "..."
```
```
--out file.png
```
（必填）

Context-Aware Generation

场景感知生成

When invoked without arguments, infer what's needed:

If recent
```
git log
```
shows a version tag → render
```
og-changelog
```
If a blog post draft exists → render
```
og-blog
```
+
```
blog-header
```

product-hunt-kit.md

exists → render

launch-hero

social-announce

Otherwise → render
```
og-default
```

当不带参数调用时，工具会自动推断所需资产：

如果最近的
```
git log
```
显示版本标签 → 渲染
```
og-changelog
```
如果存在博客文章草稿 → 渲染
```
og-blog
```
+
```
blog-header
```

如果存在

product-hunt-kit.md

→ 渲染

launch-hero

social-announce

其他情况 → 渲染
```
og-default
```

brand-assets

Original

Translation

/brand-assets

/brand-assets

What This Does

功能说明

Available Templates

可用模板

Process

操作流程

Template Options

模板参数

Context-Aware Generation

场景感知生成

Related Skills

相关技能