brand-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Brand.dev Skill

Brand.dev 技能

Fetch brand data from the brand.dev API and save logos locally for serving.

从brand.dev API获取品牌数据并将Logo保存至本地以供使用。

Step 1: Get the Domain

步骤1：获取域名

Extract the target domain from the user's input. Strip protocol and trailing slashes (e.g., "https://example.com/" -> "example.com").

从用户输入中提取目标域名，去除协议和末尾斜杠（例如："https://example.com/" -> "example.com"）。

Step 2: Fetch Brand Info

步骤2：获取品牌信息

bash

BRANDDEV_API_KEY=$(grep BRANDDEV_API_KEY environment variables | cut -d= -f2)
curl -s "https://api.brand.dev/v1/brand/retrieve?domain=${DOMAIN}" \
  -H "Authorization: Bearer ${BRANDDEV_API_KEY}" \
  -H "Content-Type: application/json"

Extract from the response:

Brand name (
```
.brand.title
```
or
```
.brand.name
```
)
Description (
```
.brand.description
```
)
Logo URLs (from
```
.brand.logos[]
```
) — prefer icon/square logos for card layouts, full logos for headers
Industry/category if available

bash

BRANDDEV_API_KEY=$(grep BRANDDEV_API_KEY environment variables | cut -d= -f2)
curl -s "https://api.brand.dev/v1/brand/retrieve?domain=${DOMAIN}" \
  -H "Authorization: Bearer ${BRANDDEV_API_KEY}" \
  -H "Content-Type: application/json"

从响应结果中提取：

品牌名称（
```
.brand.title
```
或
```
.brand.name
```
）
描述（
```
.brand.description
```
）
Logo链接（来自
```
.brand.logos[]
```
）——卡片布局优先使用图标/方形Logo，头部区域优先使用完整Logo
所属行业/类别（如有提供）

Step 3: Download Logos Locally

步骤3：本地下载Logo

ALWAYS download logos locally for serving. Never reference external

media.brand.dev

URLs in production code — they can change or go down.

务必将Logo下载至本地以供使用。生产代码中绝不要直接引用外部

media.brand.dev

链接——这些链接可能会变更或失效。

Where to save

保存位置

The save location depends on the project. Look for existing patterns:

Next.js / static sites:

public/logos/<context>/

(served as

/logos/<context>/

)

Other web projects: check for existing
```
static/
```
,
```
assets/
```
,
```
images/
```
, or
```
public/
```
directories
If no convention exists: create a
```
logos/
```
directory under the project's static asset root

保存位置取决于项目类型，请遵循现有项目规范：

Next.js / 静态网站：
```
public/logos/<context>/
```
（访问路径为
```
/logos/<context>/
```
）
其他Web项目：检查是否存在
```
static/
```
、
```
assets/
```
、
```
images/
```
或
```
public/
```
目录
无现有规范时：在项目静态资源根目录下创建
```
logos/
```
目录

Naming Convention

命名规范

```
<brand-slug>.<ext>
```
where:
- ```
<brand-slug>
```
  is the lowercase brand name, spaces replaced by hyphens (e.g.,
```
miss-a
```
  not
```
miss_a
```
  )
- ```
<ext>
```
  matches the original file extension (png, webp, jpg, svg)
Optionally group by context subdirectory (e.g.,
```
partners/
```
,
```
customers/
```
) if the project has multiple logo collections

```
<brand-slug>.<ext>
```
，其中：
- ```
<brand-slug>
```
  为品牌名称的小写形式，空格替换为连字符（例如：
```
miss-a
```
  而非
```
miss_a
```
  ）
- ```
<ext>
```
  与原文件扩展名一致（png、webp、jpg、svg）
如果项目包含多个Logo集合，可选择性地按上下文子目录分组（例如：
```
partners/
```
、
```
customers/
```
）

Download Command

下载命令

bash

mkdir -p <logo-dir>
curl -sL "<logo-url>" -o "<logo-dir>/<brand-slug>.<ext>"

bash

mkdir -p <logo-dir>
curl -sL "<logo-url>" -o "<logo-dir>/<brand-slug>.<ext>"

Verify Download

验证下载结果

bash

ls -la <logo-dir>/<brand-slug>.<ext>

bash

ls -la <logo-dir>/<brand-slug>.<ext>

Step 4: Return Results

步骤4：返回结果

Provide the user with:

Brand name
Description
Industry
Local logo path — the path to use in code (relative to the project's static root)
Original source URL (for reference only)

向用户提供以下信息：

品牌名称
描述
所属行业
本地Logo路径——代码中使用的路径（相对于项目静态资源根目录）
原始来源链接（仅作参考）

Important Rules

重要规则

Always save images locally — never use
```
media.brand.dev
```
URLs directly in production code.
Use local paths in code — reference relative to the project's static asset serving root.
Prefer square/icon logos for card layouts (they fit better in grid cards).
Prefer full/horizontal logos for headers and hero sections.
If the brand has no logos in the API response, note this and suggest using a fallback icon.

务必将图片保存至本地——生产代码中绝不要直接使用
```
media.brand.dev
```
链接。
代码中使用本地路径——引用路径相对于项目静态资源服务根目录。
卡片布局优先使用方形/图标Logo（更适合网格卡片布局）。
头部和Hero区域优先使用完整/横向Logo。
如果API响应中未包含品牌Logo，需告知用户并建议使用备用图标。