ckm:brand

概览

ckm:brand 是什么

ckm:brand 是来自 nextlevelbuilder/ui-ux-pro-max-skill 仓库、专注于品牌管理的 skill。它帮助你在内容、UI 和营销素材中定义、维护并执行一致的品牌形象。

ckm:brand 不把品牌当成一份静态 PDF，而是鼓励构建一个“活”的品牌系统：用结构化的指南、检查清单和脚本，把品牌决策真正连接到 design tokens、CSS 和实际素材上。

核心能力

启用 ckm:brand 后，你可以：

• 用可复用的框架定义品牌语气与声调。
• 规划视觉识别：logo 使用、色彩、排版和图像风格。
• 为活动与产品创建和优化信息传达框架（messaging frameworks）。
• 使用详细检查清单进行品牌一致性评审。
• 通过目录与元数据约定改进素材管理。
• 通过脚本将品牌指南同步为 design tokens 和 CSS。
• 检查各类素材与界面的用色与可访问性。

适合哪些人使用 ckm:brand

此 skill 适合：

• 正在制定或更新品牌规范的品牌与市场团队。
• 需要从品牌到前端顺畅交接的产品设计师和 UI/UX 团队。
• 负责品牌语气和信息传达的内容策略与文案人员。
• 搭建可重复品牌工作流的 DesignOps / Marketing Ops 角色。

如果你的品牌既涉及编辑内容，又覆盖数字产品界面，并且你重视一致性与可访问性，它会尤其有用。

什么时候适合（或不适合）使用 ckm:brand

在以下情况下建议使用 ckm:brand：

• 希望有一个品牌规范的单一可信来源（docs/brand-guidelines.md）。
• 需要在营销素材正式发布前进行可重复的评审。
• 希望把品牌决策转化为 tokens 和 CSS 变量。
• 需要为内容团队提供结构化的信息与语气框架。

在以下情况下可能不太适合：

• 只想快速定一个 logo 和配色，不打算长期治理品牌。
• 没有在代码仓库或基于代码的工作流中维护品牌资产。
• 想要的是视觉设计工具（如 Figma、Sketch），而不是规范和脚本。

如果你的品牌已经借助 Git 管理，或计划向这个方向迁移，ckm:brand 是一个有明确观点且易扩展的起点。

使用方式

1. 安装 ckm:brand skill

在你的 agent 或支持 skills 的环境中，通过 GitHub 仓库 URL 和 brand skill slug 安装：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

安装完成后，ckm:brand 的工作流和参考资料会对你的 agent 或工具变得可发现。使用 argument-hint 风格来引导调用方式：

[update|review|create] [args]

示例：

• brand update homepage-hero – 更新某个特定界面的品牌指南或决策。
• brand review campaign-email – 检查某个素材或流程的品牌一致性。
• brand create launch-messaging – 基于框架创建新的营销信息。

注意：安装命令请按上方原样使用，但可根据自身环境调整路径与集成方式。

2. 了解核心文件与目录结构

安装完成后，先查看以下文件，了解 ckm:brand 的整体结构：

• SKILL.md – 高层说明、使用场景、快速开始命令和品牌同步工作流。
• references/ – 与品牌有关的详细指南、检查清单和框架。
• scripts/ – 将品牌指南与素材、design tokens 连接起来的 Node 脚本。
• templates/ – 用于搭建自有品牌文档的起始模板。

关键参考文件：

• references/brand-guideline-template.md – 完整的品牌指南结构。
• references/visual-identity.md – 如何表达品牌的视觉层面。
• references/logo-usage-rules.md – 各类 logo 版本的使用场景与规则。
• references/color-palette-management.md – 色板层级与文档模式。
• references/typography-specifications.md – 字体层级、font stacks 与使用规范。
• references/voice-framework.md – 品牌语气特征及注意事项。
• references/messaging-framework.md – 愿景、使命、价值主张与信息架构。
• references/asset-organization.md – 素材的推荐目录和元数据结构。
• references/approval-checklist.md – 端到端素材审批检查清单。
• references/consistency-checklist.md – 跨渠道一致性审查清单。

3. 将品牌上下文注入到你的提示与工作流

为了让品牌上下文始终对 agent 或工具可用，可使用提供的脚本把品牌指南注入提示中：

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

典型用法：

• 在内容生成类 prompts 前自动追加品牌指南。
• 导出关键品牌规则的 JSON 表示，用于接入其他工具。
• 让文案和设计人员保持对齐，而无需手动复制长篇指南。

如果你的环境支持，建议把 inject-brand-context.cjs 接入 prompt 构建流水线，让所有与品牌相关的任务自动带上最新品牌规则。

4. 校验营销素材的品牌一致性与可访问性

使用校验脚本来检查指定素材是否符合品牌系统：

node scripts/validate-asset.cjs <asset-path>

该脚本基于 references/approval-checklist.md、references/consistency-checklist.md 等文档中定义的结构和检查项。实际操作中，你可以：

• 在新活动视觉上线前运行一次检查。
• 集成到 CI 流水线，在 Pull Request 中拦截不符合品牌的素材。
• 在设计评审中将其作为结构化检查清单使用。

将脚本输出与审批检查清单结合，可以确保：

• logo 与品牌色的正确使用。
• 使用品牌指定的字体和排版层级。
• 图像风格符合品牌，并达到相应质量标准。
• 可访问性基础项（对比度、alt 文本、焦点可见性）得到覆盖。

5. 管理并记录你的色彩系统

色彩是品牌和 UI/UX 的核心要素之一。ckm:brand 提供相关指南和辅助脚本，帮助你保持色板的一致性和良好文档化。

使用 color 脚本检查或对比色板：

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

典型用法：

• 从现有素材中提取颜色，检查是否匹配官方色板。
• 将拟定的新色板与当前指南进行对比。
• 按 references/color-palette-management.md 中的方式维护色彩表和 CSS variables。

色彩管理参考主要涵盖：

• 主色、辅助色、中性色与语义色的层级结构。
• 使用 Markdown 表格和 CSS variables 的文档模式。
• 如何在 Tailwind 风格配置中表示色彩。
• 符合 WCAG 2.1 的对比度可访问性标准。

6. 使用模板创建或完善品牌指南

你可以通过以下文件启动一份结构化的品牌指南文档：

• references/brand-guideline-template.md
• templates/brand-guidelines-starter.md

将其中一个复制到你的仓库中，例如命名为 docs/brand-guidelines.md，然后根据自身情况进行定制：

• 快速参考（颜色、字体、语气特征）。
• 带使用说明的详细色板。
• 字体栈与响应式字号层级。
• logo 版本、留白规范和最小尺寸规则。
• 语气原则、不同场景下的语调和示例短语。
• 信息层级和面向不同受众的关键信息。

这些模板既便于设计和市场人员阅读，也具备足够结构化的格式，方便脚本（如 sync-brand-to-tokens.cjs）进行处理。

7. 将品牌指南同步到 design tokens 和 CSS

ckm:brand 最强大的部分之一，是在 SKILL.md 中描述的 Brand Sync Workflow。它把书面的品牌指南与前端实现打通。

典型工作流：

# 1. 编辑 docs/brand-guidelines.md（或使用 /brand update）
# 2. 同步到 design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. 验证
node scripts/inject-brand-context.cjs --json | head -20

涉及的文件（在 skill 中有说明）：

• docs/brand-guidelines.md → 品牌决策的唯一事实来源。
• assets/design-tokens.json → 生成或更新的design token 定义。
• assets/design-tokens.css → 暴露给前端的 CSS variables。

实际使用方式：

• 在 docs/brand-guidelines.md 中更新颜色、字体或间距。
• 运行 sync-brand-to-tokens.cjs 将这些更改自动下发。
• 在 UI 代码中引入 assets/design-tokens.css，让品牌更新直接作用于产品界面。

这样可以让品牌指南、设计系统和实现层始终对齐，无需重复录入。

8. 使用检查清单进行品牌评审与审计

对于较大的团队或重要活动，可利用参考检查清单来搭建可重复的评审流程：

• references/approval-checklist.md – 按步骤进行素材审批。
• references/consistency-checklist.md – 跨渠道的一致性检查。

你可以：

• 将这些内容配置为项目管理工具中的评审表或 checklist。
• 把它们作为新页面或新活动的需求验收标准。
• 与 validate-asset.cjs 结合，进行半自动化检查。

这样可以确保在 Web、邮件、社媒、印刷等渠道上，品牌、UI/UX 和可访问性标准都得到持续执行。

常见问题（FAQ）

ckm:brand 在我们团队的日常工作中具体能带来什么？

ckm:brand 主要提供三方面的实际价值：

1. 可编码的品牌规范 – 通过结构化模板和参考文档，帮助你写出清晰、可执行的品牌规则。
2. 运营化工作流 – 借助脚本和检查清单，让品牌工作可重复、可复用，而不是临时拍脑袋。
3. 实现层对齐 – 将品牌指南同步为 design tokens 和 CSS，让 UI 真正反映品牌决策。

它不是一份泛泛的品牌检查表，而是围绕现代 UI/UX 和营销工作流中品牌实际使用场景来设计的。

如何从 GitHub 安装 ckm:brand？

使用 skills 安装器，指定已发布的仓库和 skill slug：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

该命令会从仓库中的 .claude/skills/brand 目录拉取 brand skill。之后查看 SKILL.md 和 references/ 文件夹，将其集成到你的仓库和流程中。

可以在自定义品牌指南的同时继续使用这些脚本吗？

可以。ckm:brand 就是为了适配各自品牌而设计的。建议：

• 将提供的模板复制到你自己的 docs/ 或 brand/ 目录中。
• 用你品牌的颜色、字体、信息和规则进行编辑。
• 大体保持结构不变，这样 sync-brand-to-tokens.cjs 等脚本才能正常解析。

如果你对文件名或结构做了较大调整，可能需要相应修改脚本以适配新的位置或格式。

ckm:brand 会取代我们现有的设计系统或 CMS 吗？

不会。ckm:brand 是与设计系统和 CMS 并行存在的：

• 它负责定义你的品牌规则和 tokens，供设计系统实现。
• 它记录你的语气和信息规范，供 CMS 中的内容遵循。

设计系统（例如组件库）和 CMS 仍然是交付层；ckm:brand 让背后的品牌逻辑保持一致并可被机器理解。

ckm:brand 如何支持无障碍（Accessibility）？

可访问性被嵌入到多个参考文档中：

• references/approval-checklist.md 涵盖视觉和内容可访问性的检查项。
• references/color-palette-management.md 记录对比度要求和语义色使用方式。

在设计评审和素材审批中使用这些内容，确保色彩对比度、焦点可见性、alt 文本和内容结构等方面符合 WCAG 2.1 AA 等常见标准。

ckm:brand 能帮助非设计人员保持品牌一致吗？

可以。虽然部分资产主要面向设计师和前端工程师，但很多文档是为市场、内容团队和其他干系人撰写的：

• 语气与信息框架提供可直接套用的表达模式。
• 检查清单以清晰的“是/否”标准呈现，不依赖设计术语。
• 注入式品牌上下文帮助非设计人员用“品牌安全”的方式使用 AI 工具。

通过集中这些资源，ckm:brand 能减少临时、口头的品牌指导需求。

如果我们已经有一份品牌 PDF 或外部风格指南怎么办？

你可以利用 ckm:brand 来让现有材料“运营化”：

• 将 PDF 中的关键内容迁移到 docs/brand-guidelines.md，并使用提供的模板结构化整理。
• 把 logo 使用规则、色板和字体规范编码到相关参考文件中。
• 使用同步和校验脚本，把这些规则转化为 tokens 和素材检查。

不需要丢弃现有品牌文档；可以把 ckm:brand 看作它的“仓库版、可自动化版本”。

ckm:brand 只适用于 UI 产品吗？能否用于一般市场营销？

ckm:brand 同时覆盖两类场景：

• 对于 UI/UX 与前端：提供 design-token 同步、CSS variables、颜色和排版规格等能力。
• 对于 市场与内容：提供信息框架、审批检查清单和素材组织建议。

只要你的品牌同时出现在网站、产品和营销活动中，ckm:brand 就能帮助把它们统一在同一套系统之下。

使用 ckm:brand 时，我们应该多久更新一次品牌指南？

该工作流假定品牌是一个持续演进的系统。一个务实的做法是：

• 每当有重要的视觉或信息变更时更新品牌指南。
• 变更后立即运行 Brand Sync Workflow，保持 tokens 和 CSS 同步。
• 定期使用检查清单在关键渠道上进行一致性审计。

由于所有内容都存放在代码仓库中，更新可以遵循正常的版本控制和评审流程。