mcpField
B
brand-dev

brand-dev

github.com/openclaudia设计与 UI722326 次安装1 周前更新
代码仓库

关于 brand-dev

brand-dev 是一项通过 brand.dev API 获取品牌信息和 Logo，并将图片保存到项目静态资源目录的技能，适合需要本地提供品牌素材的开发者。

主要功能

  1. 01按域名获取品牌信息
  2. 02读取 Logo 地址及品牌元数据
  3. 03将 Logo 下载到项目资源目录
  4. 04按布局选择 Logo 版本
  5. 05返回本地资源路径

适用场景

  1. 01为网站卡片添加品牌 Logo
  2. 02在页面页眉使用横版 Logo
  3. 03收集品牌名称和描述
  4. 04避免从外部 URL 提供 Logo

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/openclaudia/openclaudia-skills --skill brand-dev

安装后在 Claude Code 中输入/brand-dev确认已加载。

详细介绍

Brand.dev 技能

从 brand.dev API 获取品牌数据，并在本地保存徽标以供提供服务。

步骤 1：获取域名

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

步骤 2：获取品牌信息

# BRANDDEV_API_KEY must be set in your environment
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）
  • 徽标 URL（来自 .brand.logos[]）——卡片布局优先使用图标/方形徽标，页眉优先使用完整徽标
  • 行业/类别（如有）

步骤 3：在本地下载徽标

务必在本地下载徽标以供提供服务。生产代码中切勿引用外部 media.brand.dev URL——这些 URL 可能会变更或失效。

保存位置

保存位置取决于项目。查找现有模式：

  • Next.js / 静态网站：public/logos/<context>/（通过 /logos/<context>/ 提供服务）
  • 其他 Web 项目：检查是否已有 static/、assets/、images/ 或 public/ 目录
  • 如果没有现成约定：在项目的静态资源根目录下创建 logos/ 目录
命名约定
  • <brand-slug>.<ext>，其中：
    • <brand-slug> 是小写的品牌名称，空格替换为连字符（例如，使用 miss-a，而非 miss_a）
    • <ext> 与原始文件扩展名一致（png、webp、jpg、svg）
  • 如果项目有多个徽标集合，可按上下文放入子目录（例如，partners/、customers/）
下载命令
mkdir -p <logo-dir>
curl -sL "<logo-url>" -o "<logo-dir>/<brand-slug>.<ext>"
验证下载
ls -la <logo-dir>/<brand-slug>.<ext>

步骤 4：返回结果

向用户提供：

  • 品牌名称
  • 描述
  • 行业
  • 本地徽标路径——代码中使用的路径（相对于项目的静态资源根目录）
  • 原始来源 URL（仅供参考）

重要规则

  1. 始终在本地保存图片——生产代码中切勿直接使用 media.brand.dev URL。
  2. 在代码中使用本地路径——路径应相对于项目提供静态资源的根目录。
  3. 卡片布局优先使用方形/图标徽标（更适合网格卡片）。
  4. 页眉和主视觉区域优先使用完整/横向徽标。
  5. 如果 API 响应中没有该品牌的徽标，请说明这一点，并建议使用备用图标。

评论

支持 Markdown