branding

品牌

为一个项目打造完整的品牌形象：标志图形、字标组合、配色方案、字体选择、可用于生产环境的素材包，以及品牌指南。

前置条件

开始前，请确认已安装以下工具：

which inkscape && which magick

• Inkscape — SVG 操作、文本转路径、PNG 导出
  • macOS：brew install --cask inkscape
• ImageMagick v7+ — 图像合成、调整大小、格式转换
  • macOS：brew install imagemagick

概览

工作流分为 7 个阶段。前 3 个阶段与用户协作完成；后 4 个阶段主要是自动化生产工作。

1. 探索 — 了解项目，以及 Logo 应传达的内容
2. Logo 生成 — 直接编写 SVG 概念稿，并与用户一起审阅
3. 字体与颜色选择 — 选择字标字体和品牌色
4. SVG 精修 — 使用 Inkscape 将文本转为路径、清理 viewBox、创建组合样式
5. 素材包制作 — 导出所有变体、尺寸和格式
6. 品牌指南 — 生成全面的 HTML 品牌参考页面
7. 项目接入 — 将素材放到所需位置（可选）

基于浏览器的预览

在协作阶段中，使用临时 HTML 页面向用户展示可选方案。这是此工作流中的核心技巧——绝不要让用户从文件夹中打开 SVG 文件，或靠猜测来判断效果。

操作方式：

1. 在项目的 tmp/ 目录中生成一个独立的 HTML 文件（例如 tmp/brand-fonts.html）
2. 在 Chrome 中打开：open -a "Google Chrome" /path/to/file.html
3. 用户审阅并提供反馈
4. 提交前清理 tmp/ 文件

预览页面的关键规则：

• 只使用纯 HTML 和 CSS，尽可能避免 JavaScript。如果需要 JS，请使用安全的 DOM 方法（textContent、createElement），不要使用 innerHTML，因为安全钩子可能会拦截它。
• 字体预览时，通过 <head> 中的 <link> 标签加载 Google Fonts，这样字体就能在浏览器中即时呈现。
• 在 HTML 中直接内嵌 SVG 标志图形，用于预览组合样式（不要引用外部文件）。
• 页面应保持独立，不依赖 Google Fonts CDN 之外的外部资源。

---

阶段 1：探索

询问用户：

1. 项目名称 — 字标中使用的准确大小写和拼写
2. 项目用途 — 用一句话说明，帮助你了解所属领域
3. Logo 风格 — 抽象几何图形？字母标？吉祥物？等距视角？极简风格？
4. 符号或隐喻 — 名称让人联想到的事物（例如，“Kiso”在日语中意为“基础”，因此采用了堆叠积木的设计）
5. 颜色偏好 — 暖色或冷色、现有颜色，或者“给我惊喜”

利用对话中已有的回答。探索环节应简短，然后开始创作概念稿。

阶段 2：Logo 生成

**加载 logo-design 技能并按照其规范设计图形标志：**包括其设计简报、在其参考库中进行品类调研、提出三个概念、执行其测试（16 px、单色、反白、与竞品并列的货架测试、svg_audit.py）以及概念检查点。到检查点为止，不要制作其品牌套件。用户选定方向后，选中的标志会回到此处，继续阶段 3 及后续工作。其参考库中的 Logo 均为商标，仅供研究。

如果未安装 logo-design，请按以下说明创作标志。

直接以可编辑的 SVG 格式创作 Logo。

当用户想要多个选项时，根据调研简报创作几个各不相同的概念；或者直接完善已选定的方向。编写真正的矢量几何图形（路径、形状、填充和描边），使用干净的 viewBox，不要嵌入光栅图像来代替 Logo。将图形标志与文字标志分开，文字标志将在阶段 3 使用合适的字体制作。

呈现前，渲染 SVG 并进行目视检查。在 HTML 预览页中并排展示各个概念，包括小尺寸图标和浅色／深色背景。检查轮廓、间距、描边一致性和可读性。根据用户反馈反复调整；保留已获批准的版本，同时探索其他方案，只有在用户选定替代方案后才替换。

当用户提出要求，或直接迭代 SVG 无法达到理想效果时，可将 quiver.ai 或 recraft.ai 等第三方 SVG 生成器作为备用方案。

选定标志后，在生成资源包之前检查其 SVG 结构（viewBox、尺寸、颜色以及任何嵌入的文本或字体）。在阶段 4 将所有剩余文本转换为路径。

阶段 3：字体和颜色选择

字体

推荐 4-6 款与标志风格相配的字体。制作一个单页 HTML 预览页，并排展示所有候选字体：

• 每款字体都以建议的品牌颜色，将项目名称以粗体（700/800）大尺寸呈现
• 第二行以常规字重（400）呈现，便于对比
• 正文示例（"The quick brown fox..."）
• 如果字体支持，展示字重示例（400、600、700、800）
• 简要说明字体的个性和适配度（例如："几何、现代——最接近当前文字标志的风格"）

通过 Google Fonts 的 <link> 标签加载字体。在 Chrome 中打开页面，供用户比较。

用户选定字体后：

1. 从 Google Fonts GitHub 仓库下载（最可靠的来源）：

   curl -L -o /tmp/FontName.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/fontname/FontName%5Bwght%5D.ttf"
   

   注意：大多数 Google Fonts 使用 ofl/ 路径。使用 file /tmp/FontName.ttf 验证下载文件——输出应为 "TrueType Font data"，而不是 "HTML" 或 "ASCII text"。
2. 在本地安装：cp /tmp/FontName.ttf ~/Library/Fonts/（macOS）
3. 保存到 brand/fonts/，以便打包资源

颜色

如果用户已有带颜色的 Logo，请先提取颜色。在预览 HTML 页面中，将 SVG 中找到的所有颜色显示为色块，并根据颜色用途命名（例如“船体海军蓝”“帆船红”）。

然后以大型、看起来可点击的卡片形式展示品牌颜色候选项，其中包含：

• 显示十六进制值的大色块
• 颜色名称及其个性描述
• 最佳候选项的推荐说明

添加一个建议的配色方案部分，说明各颜色的用途：

• 主色 — 按钮、链接、激活状态
• 深色／海军蓝 — 侧边栏、标题、深色表面
• 强调色 — 警报、危险操作、视觉亮点
• 高亮色 — 信息横幅、选中状态

**探索颜色变体：**如果用户想尝试不同色调或替换某种颜色（例如“这个红色太暗了”），请生成一个对比页面，展示 4-6 种变体，每种变体都将完整标志替换为相应颜色。使用 sed 替换 SVG 中的十六进制值，以便快速迭代 — 将每种变体的 SVG 直接内嵌到 HTML 中。

**Tailwind 色阶：**用户选定品牌颜色后，需要为 Tailwind 生成完整色阶。引导他们前往以下网站生成：

• uicolors.app — 基于 OKLCH 的色阶效果出色
• kigen.design/color — 另一款生成器

用户粘贴十六进制值后，会得到 OKLCH 格式的 50-950 色阶，并将其分享给你，以便接入项目。

记录颜色决策

记录资源包的最终颜色：

• 主色：主要品牌颜色及其 Tailwind 色阶名称
• 所有 Logo 颜色：十六进制值和用途（船体、帆、水面等）
• Tailwind 色阶：完整的 50-950 OKLCH 值

第 4 阶段：SVG 精修

此阶段会生成其他所有资源的基础主 SVG。你需要 9 个 SVG 文件：

变体	仅标志	横向组合标志	纵向组合标志
彩色	mark-color.svg	logo-horizontal-color.svg	logo-stacked-color.svg
黑色	mark-black.svg	logo-horizontal-black.svg	logo-stacked-black.svg
白色	mark-white.svg	logo-horizontal-white.svg	logo-stacked-white.svg

创建组合标志

组合标志由标志图形与字标文字组合而成。包含两种布局：

• 横向 — 标志在左，文字在右，垂直居中
• 纵向 — 标志在上，文字在下方居中

从彩色横向组合标志开始：

1. 打开标志 SVG，记下其尺寸
2. 创建一个新的 SVG，将标志与使用所选字体的 <text> 元素组合起来
3. 按比例调整文字大小 — 横向布局的文字大写字母高度应约为标志高度的 40-60%；纵向布局的文字宽度应与标志宽度大致相当
4. 设置 viewBox，使其紧贴内容，留白尽可能少

将文字转换为路径之前，先在 Chrome 中预览每个组合标志。直接打开 SVG — open -a "Google Chrome" file.svg。继续之前，应让用户确认比例、间距和整体观感。根据反馈调整文字的 x 位置、font-size 和 viewBox 宽度。

将文字转换为路径

Inkscape 不支持 Google Fonts 的 @import。必须先在本地安装字体（已在第 3 阶段完成）。然后将所有文字转换为路径，使 SVG 可独立使用：

inkscape input.svg --actions="select-all;object-to-path;export-filename:output.svg;export-do"

转换后，使用 grep -c '<text' output.svg 验证 — 返回值应为 0。

颜色变体

• 黑色：将所有填充颜色替换为 #18181b（zinc-900，而非纯黑色 — 这是提升可读性的常见设计做法）
• 白色：将所有填充颜色替换为 #ffffff
• 对于组合标志，彩色变体中的标志图形保留原色；文字为 #18181b。黑色／白色变体中的所有元素均为单色。

使用 sed 替换颜色 — 同时处理 fill="#hex" 属性和 style 属性中的 fill:#hex：

sed 's/fill="#[0-9A-Fa-f]\{6\}"/fill="#18181b"/g; s/fill:#[0-9a-fA-F]\{6\}/fill:#18181b/g' input.svg > output.svg

清理 ViewBox

合成完成后，裁剪 viewBox，使其紧贴内容：

inkscape file.svg --actions="select-all;fit-canvas-to-selection;export-filename:file.svg;export-do"

或者检查元素边界框后手动调整 viewBox：

inkscape file.svg --query-all

阶段 5：素材包制作

目录结构

brand/
├── svg/          9 master SVGs (from Phase 4)
├── png/          rasterized variants at standard sizes
├── favicon/      ico + png sizes + webmanifest
├── social/       platform-specific images
└── fonts/        font files + README

PNG 导出

使用 Inkscape 从主 SVG 导出（其 SVG 渲染效果优于 ImageMagick）：

标志 — 导出尺寸：64、128、256、512、1024px（正方形，宽度 = 高度）

inkscape mark-color.svg --export-type=png --export-filename=../png/mark-color-256.png --export-width=256

组合标志 — 根据纵横比选择合适的导出宽度：

• 横向：400、600、800px 宽
• 竖排：300、500px 宽

网站图标

如果有 /favicon 技能，请使用。否则，从标志手动生成：

# PNG sizes for favicons
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-16x16.png --export-width=16
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/favicon-32x32.png --export-width=32
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/apple-touch-icon.png --export-width=180
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-192x192.png --export-width=192
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/favicon/android-chrome-512x512.png --export-width=512

# ICO (multi-resolution)
magick brand/favicon/favicon-16x16.png brand/favicon/favicon-32x32.png brand/favicon/favicon.ico

创建 brand/favicon/site.webmanifest：

{
  "name": "PROJECT_NAME",
  "short_name": "PROJECT_NAME",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#HEX_OF_BRAND_COLOR",
  "background_color": "#ffffff",
  "display": "standalone"
}

社交图片

OG 图片（1280x640）—用于 GitHub 社交预览和 Open Graph 标签：

magick -size 1280x640 xc:white \
  \( brand/svg/logo-horizontal-color.svg -resize 1100x -trim +repage \) \
  -gravity center -composite \
  brand/social/og-image-1280x640.png

-trim +repage 必须放在 -gravity center 之前——它会去除 SVG 内部的空白，让 ImageMagick 居中的是实际视觉内容，而非 viewBox 边界框。否则，徽标会显示得偏离中心。

平台图标：

• Discord 服务图标：从标志生成，尺寸为 512x512
• GitHub 头像：从标志生成，尺寸为 500x500
• npm 图标：从标志生成，尺寸为 256x256

inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/discord-icon-512.png --export-width=512
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/github-avatar-500.png --export-width=500
inkscape brand/svg/mark-color.svg --export-type=png --export-filename=brand/social/npm-icon-256.png --export-width=256

字体 README

创建 brand/fonts/README.md，记录字体选择、许可证和来源：

# Brand Font

**[Font Name]** by [Foundry]

- Weight: 700 (Bold) for wordmark
- License: SIL Open Font License
- Source: [GitHub URL]

The full font family archive is included for reference.

阶段 6：品牌指南

在 brand/brand-guide.html 生成一份完整的 HTML 品牌指南页面。这相当于设计师交付的“品牌风格指南”或“品牌展示板”——一页式参考文档，团队中的任何人都可以打开，了解如何使用该品牌。

品牌指南应包含以下部分：

1. 页眉

顶部显示项目名称和标语／描述。

2. 徽标版本

以网格形式展示全部 9 种 SVG 变体：

• 彩色行：标志、横向组合标志、竖排组合标志（白色背景）
• 黑色行：同样的三种（白色背景）
• 白色行：同样的三种（深色背景，例如 #0f172a）

为每种标注文件名和推荐用途：

• 标志 — 网站图标、应用图标、社交头像、小空间
• 横向 — 页眉、README 徽章、电子邮件签名
• 竖排 — 启动画面、印刷品，以及有足够垂直空间的场景

注明最小尺寸：标志显示尺寸不得小于 32px，组合标志宽度不得小于 120px。

3. 调色板

将每种品牌颜色展示为大色块，并注明：

• 颜色名称和用途（例如，“主色——按钮、链接、焦点环”）
• Hex 值
• OKLCH 值（如有）
• Tailwind 类（例如，bg-primary-500）

如果已生成完整的 Tailwind 色阶，以带标签的色块横条展示完整的 50-950 色阶。

同时展示所有徽标专用颜色，例如船体、帆、水面等，并注明其 Hex 值。

4. 字体排版

• 字体名称、铸造厂、许可证
• 字标字重和字间距
• 以字标字重和常规字重预览字体
• 注明字体来源（Google Fonts、GitHub 仓库）以及文件在 brand/fonts/ 中的存放位置

5. 素材清单

用表格列出 brand/ 目录中的每个文件，并包含：

• 文件名
• 尺寸或用途
• 格式

按子目录整理（svg/、png/、favicon/、social/、fonts/）。

构建说明

• 独立 HTML — 直接内嵌所有 SVG，通过 Google Fonts <link> 加载品牌字体。不引用外部文件（无论从何处打开，指南都应正常显示）。
• 不使用 JavaScript — 仅使用纯 HTML 和 CSS。确保页面可在任何环境中正常使用，并避免安全钩子问题。
• 简洁专业的设计 — 使用品牌颜色为页面添加样式。白色背景，标题和点缀采用品牌色。
• 适合打印 — 在标准页面宽度下使用合理的布局。

生成后，在 Chrome 中打开供用户审核：open -a "Google Chrome" brand/brand-guide.html

阶段 7：项目接入（可选）

此阶段因项目而异。询问用户以下哪些项目适用：

README

<p align="center">
  <a href="PROJECT_URL">
    <img src="brand/svg/logo-horizontal-color.svg" width="280" alt="PROJECT_NAME">
  </a>
</p>

GitHub 会内联渲染仓库中的 SVG。width 属性可防止其扩展到全宽。用 <a> 包裹即可链接到项目网站。

文档站点 / Web 应用

• 将网站图标复制到静态资源目录
• 在 <head> 中添加 favicon <link> 标签
• 添加 <meta name="theme-color" content="#HEX">
• 在导航栏/页眉中添加标志

Tailwind 主题

如果用户有 Tailwind 色阶，将其接入 CSS：

@theme {
  --color-primary-50: oklch(...);
  --color-primary-100: oklch(...);
  /* ... */
  --color-primary-950: oklch(...);
}

GitHub

• 社交预览图：进入仓库 Settings → Social preview → 上传 OG 图片（手动操作）
• 头像：仅在使用 GitHub Organization 时适用（手动操作）

npm

• 在 package.json 中添加指向文档/网站的 "homepage"

其他平台

• Discord 服务图标（手动上传）
• 1Password：注明哪个账户拥有 Discord 服务

在末尾清楚列出手动操作步骤——不要尝试自动执行需要通过浏览器界面交互的操作。

检查清单

宣布完成前，请确认：

• 9 个主 SVG 文件中的文字均已转换为路径（不依赖字体）
• 最终标志通过 logo-design 审核和测试（svg_audit.py；在 preview_sheet.py 中检查 16 px 和单色效果）
• 已导出所有标准尺寸的 PNG
• 已生成 favicon 文件集（ico、16、32、180、192、512、webmanifest）
• OG 图片尺寸为 1280x640，且视觉居中
• 平台图标（Discord 512、GitHub 500、npm 256）
• 字体文件已与 README 一并保存
• 品牌指南 HTML 已生成并审核
• 所有资源均已提交到 brand/ 目录
• tmp/ 中的临时预览文件已清理
• 已完成项目接入（如适用）
• 已向用户说明手动操作步骤