SuperAPI AI 工具集

brand-icons

设计与创作

查看项目

更新于 10-27 00:51

技能介绍

品牌图标(brand-icons)来自 framesmith,基于 thesvg.org 的真实品牌标识库,收录 7,400 多个品牌与 Logo 的 SVG 图标,例如 Claude、OpenAI、Cursor、GitHub Copilot、Stripe、Vercel、AWS 等。它的核心定位是“正确获取真实品牌标识”:为图标所在背景选择合适变体,使用真正的 SVG 渲染器,并把许可证记录在文件旁边。工具明确要求不得生成、描摹或近似任何公司的 Logo。

主要能力

提供五个命令行子命令:

  • search:搜索图标,结果按 slug、标题、许可证、变体排序。示例:python3 scripts/icons.py search copilot
  • info:查看某个图标的完整注册表条目及通俗用法说明。示例:python3 scripts/icons.py info github-copilot
  • fetch:批量下载图标。示例:python3 scripts/icons.py fetch claude openai cursor --out assets/icons --theme light
  • sheet:生成预览图做视觉检查。示例:python3 scripts/icons.py sheet claude openai cursor --out preview.png --bg "#EEF1EC"
  • credits:生成署名表格,用于 README 或视频描述。示例:python3 scripts/icons.py credits assets/icons --md

fetch 会写入 <slug>.svg 和一个透明的 512 像素 <slug>.png(可用 --png N 指定其他尺寸),并生成 icons.json,记录标题、变体、来源 URL、许可证和品牌 URL。--theme light|dark 用于指定图标所在背景:若 thesvg 有对应明/暗变体则选用,否则回退到 default,再回退到 mono。sheet 用于快速视觉检查,建议在设计中使用图标前先查看;在所选背景上会消失的单色标识会被染成墨色或纸色,但 ND(禁止衍生)标识除外。

使用流程

先用 search 确认 slug。同一品牌常有多个条目(如 claude、claude-ai、claude-code;aws 与 aws-amazon-q),应选择与文案含义一致的条目,例如文案是“works with Claude Code”就应使用 claude-code。

使用前检查许可证列:CC0、MIT、Apache-2.0、ISC、BSD 可放心使用;CC-BY-* 需要署名,其中 ND 类不得改色、裁剪或修改标识;brand-use 或 Trademark 需遵循品牌指南,仅用于指代该产品(如“works with”“integrates with”);Unknown 默认跳过,只有在用户获得品牌方许可时才可用 --allow-unknown。

将图标下载到项目资源目录后,用 sheet 在真实背景色上复核,再用 credits --md 的输出在 README、视频描述或幻灯片页脚等需要署名的地方添加归属信息。

文件使用方式

在 framesmith 模板中,framesmith.media.icon(svg_path, size, tint=None) 会加载缓存 PNG,并做裁剪和方形化;is_light_mark(im) 可判断白色标识是否需要染色。narrated-collage-explainer 的 icons beat 直接使用这些能力。其他场景中,Web 与矢量工作使用 SVG,栅格流程使用 PNG。

使用规则

只使用真实标识,不得重绘、“风格化”或用 AI 生成品牌 Logo,也不得把品牌标识组合成新 Logo。保持比例,不添加效果。图标应放在纯色底上,不要放进胶囊或徽章内。一个品牌只用一个标识,不要在同一行混用公司图标和文字标识。

环境要求

需要 Python 3.9+、Pillow、numpy。渲染推荐使用无头 Chromium 或 Chrome,可处理渐变、裁剪路径和紧凑路径语法;没有时依次回退到 cairosvg(若已安装)和 ImageMagick,后者对部分图标会失败。Snap 版 Chromium 无法访问 /tmp 或隐藏目录,因此渲染会自动在 ~/framesmith-svg-stage 下暂存。