跳到主要内容
AI教程

用 Claude Code 打造有章法的品牌识别系统

了解如何安装和使用 brand-identity Claude Code 技能，生成多个协调统一的品牌识别方向，根据无障碍和技术要求进行审核，选择或组合最具优势的元素，并导出完整的品牌指南套件。

AI我搜编辑部阅读约 8 分钟
用 Claude Code 打造有章法的品牌识别系统

品牌识别的作用

brand-identity 是一项 Claude Code 技能，用于将品牌识别设计为一个相互连接的系统。它不会独立选择标志、字体和配色，而是让每个方向都围绕一个统一的理念或机制构建，并贯穿这三者。

该技能会生成三套，有时是四套品牌识别方案。它会将方案并排展示为识别卡片，测量重要的技术属性，然后暂停以便你选择方向。选择一套方案，或组合多套方案中的元素后，它会创建品牌指南套件。

由该技能制作的24个不同品牌标志

主要功能

  • 协调一致的识别方案：每套方案都通过一个核心机制，将标志、字体和配色连接起来。
  • 以测量为依据的决策：该技能会检查 WCAG 2 和 APCA 对比度、色盲模拟、字形覆盖范围、字体许可证、表格数字，以及标志在 16 和 32 像素下的渲染效果。
  • 质量门槛：测量未通过时，方案会暂停，直到问题得到修复。启发式结果会标记为警告，主观选择则会标明需要判断。
  • 品牌指南套件：标准套件包括一份八页 PDF、标志文件、CSS、SCSS、Tailwind 和 DTCG JSON 格式的设计令牌，以及带嵌入代码的字体表。--full 选项会额外加入网格、深色模式、无障碍、图标和图像章节，共 13 页。
  • 网站重新设计：提供一个 URL，即可在现有页面上预览每个方向。你可以保留部分元素并更新其他元素。
  • 聚焦工作：只请求标志、字体系统、配色，或对现有品牌识别进行评审。

安装技能

推荐方式：将其安装为 Claude Code 插件

在 Claude Code 中添加市场并安装插件：

/plugin marketplace add fatihaydost/brand-identity-skill
/plugin install brand-identity@brand-identity-skill

将其安装为普通技能

从最新版本下载 brand-identity.zip，将其解压到 ~/.claude/skills/，然后让 Claude Code 从该目录加载技能。

由该技能制作的24个不同品牌标志

你也可以克隆代码库并创建符号链接：

git clone https://github.com/fatihaydost/brand-identity
mkdir -p ~/.claude/skills
ln -s "$PWD/brand-identity-skill/skills/brand-identity" ~/.claude/skills/brand-identity

检查要求

该项目需要 Python 3.10 或更高版本，以及基于 Chromium 的浏览器，例如 Chrome、Chromium、Edge 或 Brave。推荐使用 uv，因为脚本会在首次使用时利用它将 Python 软件包安装到缓存环境中。

运行内置检查，以识别缺失的依赖项：

python3 skills/brand-identity/scripts/brand.py check

使用 uv 时，通常无需手动安装 fonttools、uharfbuzz 或 skia-pathops。推荐将 Claude Code 作为运行环境。在 claude.ai 聊天中，沙盒默认不允许使用 Google Fonts，因此字体测量和渲染可能会失败。

运行你的第一个品牌识别项目

1. 从自然语言简报开始

向 Claude Code 说明你需要的成果。例如：

为里斯本的一家精品咖啡烘焙商设计标志、字体和配色。

Tessellate的三个方向及比较表

你也可以聚焦请求：

为 https://example.com 设计新的字体和配色，保留标志。
只为我的新闻通讯设计字体系统。
评审我们的品牌识别。

2. 回答问题

该技能会进行一轮提问，了解要创建的内容、要生成的方案数量、品牌所使用的语言，以及相关竞争对手。请尽可能具体地提供受众、语气、市场、应用场景和限制条件等信息。

3. 查看品牌识别板

该技能会构建提议的方向，并在比较板上展示。每个方向都包含一个机制、标志、字体选择、配色和测量结果。根据对六份简报的测量结果，一次完整运行到生成比较板大约需要 40 次代理操作，并使用约 0.9 百万计费输入等效令牌。

该技能不会替你选择方向。请比较各个概念、它们对简报的回应程度，以及测量结果是否通过规定的质量门槛。

4. 选择或组合元素

查看比较板后，选择一套方案，或请求组合，例如使用 A 方案的标志和 B 方案的配色。然后，该技能会构建选定的套件。

标志在四种背景上的效果、对比度比例及六种错误用法

Tessellate的三个方向及比较表

了解生成的交付成果

选定的品牌识别会生成一份八页的品牌指南 PDF，涵盖封面、理念、标志、变体、标志在颜色背景上的使用、针对该标志的错误用法示例、颜色、字体和应用场景。如果还需要网格、深色模式、无障碍、图标和图像指南，请使用 --full。

该套件还包含 SVG 和 PNG 格式的标志导出文件，包括全彩、单色、反白、应用图标和网站图标版本。设计令牌提供 CSS、SCSS、Tailwind 和 DTCG JSON 格式。字体表记录了选定的字体，并提供嵌入代码。

网站页眉、名片、头像和应用图标

工作流程如何运作

该流程将创意方向与技术验证分开：

  1. 问题收集：Claude Code 收集项目简介、语言要求、竞争对手背景以及所需方案数量。
  2. 生成方案：创建包含机制、标志、字体选择和配色种子值的 sets.json。
  3. 标志审查：将标志以 16 和 32 像素渲染到联系表中，并通过多轮处理修正缺陷。
  4. 构建与审计：脚本生成配色角色、品牌识别卡、审计结果和对比板。
  5. 处理关卡：对比度、字体授权、字形覆盖范围、文件有效性和渲染失败等问题会将方案退回修改。
  6. 选择并创建套件：完成选择后，该技能会导出 PDF、标志文件、令牌和字体表。

提升效果的进阶技巧

明确提出语言要求

告诉 Claude Code 品牌必须支持的每种语言。该技能会根据品牌使用的语言检查字形覆盖范围，因此这些信息会影响字体选择和验证。

将无障碍设计作为设计约束

不要把对比度当作最后的视觉检查。项目使用 WCAG 2 和 APCA 测量、色盲模拟以及标志尺寸检查作为关卡。在项目简介中加入目标背景和使用场景，以便在实际环境中评估生成的配色。

网站页眉、名片、头像和应用图标

要求提供网站预览

提供网站 URL 后，该技能会读取当前的标志、字体和颜色，然后在你的页面上预览每个品牌识别方向。对应该保留的元素使用 keep，对应该演进的部分使用 refresh。

挑战常见的 AI 默认选择

Brand-identity 的设计旨在避免自动趋向于奶油色、赤陶色、金色、Fraunces、Inter，或将字母隐藏在圆形中的组合。当某个方向采用常见模式时，该技能会要求给出与项目简介相关的理由，并确保每次运行至少有一个方案不使用这些默认选择。

四种背景上的标志及对比度比例和六种误用示例

审查许可证和网络访问

该技能会从 Google Fonts 和 google/fonts 仓库下载字体和元数据。uv 会联系 PyPI 获取 Python 软件包；只有在你提供 URL 时，浏览器才会打开你的网站或指定的竞争对手网站。

不会收集遥测数据，也不会上传任何内容。字体不会被子集化或再分发；套件只提供字体链接和嵌入代码。字体许可证会按字体系列进行检查，默认使用 OFL，并针对 Fontshare 或商业字体提供额外说明。

本地开发与测试

如果你想参与贡献或验证仓库，请安装开发依赖并运行测试命令：

pip install -r requirements-dev.txt
python3 -m unittest discover -s tests
python3 tools/smoke_test.py
python3 tools/package_skill.py

仓库在 skills/brand-identity/ 中包含该技能，在 tools/ 中包含开发工具，在 tests/ 中包含单元测试，在 evals/ 中包含评估固件，并在 docs/ 中包含架构和测试文档。

结论

brand-identity 将自然语言项目简介转化为多个相互关联的品牌识别方向，再将创意探索与可衡量的技术检查结合起来。将其安装到 Claude Code 中，描述品牌及其约束条件，比较生成的方案，并选择或组合最符合项目简介的元素。最终得到的是一套实用的品牌规范套件，而不是孤立的标志概念。

该项目以 MIT 许可证发布。有关实现细节，请参阅仓库的 GitHub 项目。

用 Claude Code 打造有章法的品牌识别系统