Brand Guidelines v{X.Y}

Brand Guidelines v{X.Y}

【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill

Quick Reference

• Primary Color:#XXXXXX
• Secondary Color:#XXXXXX
• Primary Font:{font-family}
• Voice:{3 key traits}

1. Color Palette

2. Typography

3. Logo Usage

4. Voice & Tone

5. Imagery Guidelines

这套结构有两条设计意图： 1. **快速参考先行**：把最重要的三个要素（主色、主字体、声音特质）放在文档最顶部，既方便人扫读，也方便解析器优先定位。从 [inject-brand-context.cjs](https://link.gitcode.com/i/f3d956ad9975c04e67b267a7f0640c40) 的源码看，它专门用 `Quick Reference` 里的 `Primary Color` / `Secondary Color` 正则（`/Primary Color\s*\|\s*#([A-Fa-f0-9]{6})/i`）兜底提取基础色。 2. **版本化治理**：标题自带 `v{X.Y}` 占位，配合文档末尾的 Changelog 表格，让品牌规范的每次变更都可追溯。仓库的 starter 模板 [brand-guidelines-starter.md](https://link.gitcode.com/i/73b52c2c48f098e2e30c45383aa458a4) 在末尾就提供了 `| 1.0 | {DATE} | Initial guidelines |` 这样的变更记录示例。 ## 一、Quick Reference：品牌信息的一屏速览 快速参考区把品牌的核心标识压缩成四行，模板给出的形式是列表： ```markdown ## Quick Reference - **Primary Color:** #XXXXXX - **Secondary Color:** #XXXXXX - **Primary Font:** {font-family} - **Voice:** {3 key traits}

starter 模板提供了真实填法示例（也兼容表格形式）：

值得注意：sync-brand-to-tokens.cjs的extractColorsFromMarkdown函数同时支持列表行（| Primary Color | #2563EB |）解析，而inject-brand-context.cjs用正则匹配Primary Color ... #hex。因此填写时务必保证「字段名 + 冒号/竖线 + 6 位十六进制色值」的模式完整，大小写均可（解析器对 hex 不区分大小写）。

二、Color Palette：颜色体系的四个层级与无障碍基线

主色（Primary Colors）

主色是品牌识别度最高的颜色，用于 CTA、页头、链接等关键元素。模板要求每行提供 Name、Hex、RGB、Usage 四列：

辅色（Secondary Colors）

辅色起衬托与高亮作用，数量控制在 2～3 个，通常包含一个强调色（accent）。color-palette-management.md 给出的层级建议是：

Primary Colors (1-2) ├── Main brand color - Used for CTAs, headers, key elements └── Supporting primary - Secondary emphasis Secondary Colors (2-3) ├── Accent colors - Highlights, interactive states └── Supporting visuals - Icons, illustrations Neutral Palette (3-5) ├── Background colors - Page, card, modal backgrounds ├── Text colors - Headings, body, muted text └── UI elements - Borders, dividers, shadows Semantic Colors (4) ├── Success - #22C55E (green) ├── Warning - #F59E0B (amber) ├── Error - #EF4444 (red) └── Info - #3B82F6 (blue)

中性色板（Neutral Palette）

中性色是界面骨架，模板固定了四行结构：Background（页面背景）、Text Primary（正文）、Text Secondary（说明/弱化文字）、Border（分隔线与边框）。这四行在sync-brand-to-tokens.cjs之外虽不直接参与颜色尺度生成，但被inject-brand-context.cjs的### Neutral区块正则捕获后汇入品牌调色板，用于后续合规比对。

无障碍基线（Accessibility）

模板强制要求记录三组对比度数据，这是品牌色「可发布」的硬门槛：

- Text/Background Contrast: {ratio}:1 (WCAG {level}) - CTA Contrast: {ratio}:1 - All interactive elements meet WCAG 2.1 AA

参照 color-palette-management.md 的 WCAG 2.1 量化标准：普通文本 AA 需 4.5:1、大文本/UI 组件 3:1；AAA 级普通文本 7:1、大文本 4.5:1。starter 模板给出的实测值很有参考性：#111827正文配白底对比度 7.2:1（AAA），主色#2563EB配白底 4.6:1（AA）。该参考文档还给出了相对亮度与对比度的 JavaScript 计算公式，可在编写指南时自行验证：

function luminance(r, g, b) { const [rs, gs, bs] = [r, g, b].map(v => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs; } function contrastRatio(l1, l2) { const lighter = Math.max(l1, l2); const darker = Math.min(l1, l2); return (lighter + 0.05) / (darker + 0.05); }

另外两条实战禁忌（同样出自 color-palette-management.md）：正文不要用纯黑#000000（推荐#111827一类的深灰蓝），也不要仅靠颜色传达语义——错误、成功等状态应同时配图标或文字。starter 模板为此专门增加了「Semantic Colors」区块（Success#22C55E、Warning#F59E0B、Error#EF4444、Info#3B82F6），这是对模板的可选扩展。

三、Typography：字体栈、字号阶梯与加载方式

模板用 CSS 变量形式定义字体栈，让字体信息可以直接被设计系统消费：

--font-heading: '{Font}', sans-serif; --font-body: '{Font}', sans-serif; --font-mono: '{Font}', monospace;

inject-brand-context.cjs的extractTypography正是通过正则匹配--font-heading:/--font-body:/--font-mono:来提取字体名的，所以这三行变量名必须保持原样。starter 模板给出了完整回退栈示例：

--font-heading: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

字号阶梯（Type Scale）是模板中信息密度最高的表格，它同时约束 Desktop 与 Mobile 两套尺寸，保证响应式下的层级一致：

starter 模板在此基础上补充了Body Large 18px / 1.6一档，并额外提供了字体加载的<link>预连接写法，便于直接粘贴进 HTML：

<link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

四、Logo Usage：变体、留白、最小尺寸与红线

模板把 Logo 规范收敛为四类约束：

变体（Variants）——按使用场景划分四档：带字标的完整横版（Primary）、方形空间用的竖排版（Stacked）、favicon 与应用图标用的纯符号版（Icon）、受限配色环境的单色版（Monochrome）。starter 模板进一步为每个变体指定了文件命名（logo-full-horizontal.svg、logo-stacked.svg、logo-icon.svg、logo-mono.svg）——这与validate-asset.cjs的命名校验规则一脉相承。

留白（Clear Space）——模板给出极简规则：Minimum clear space = height of logo mark（最小留白等于 Logo 图形本身的高度），避免其他元素侵入 Logo 的可读区。

最小尺寸（Minimum Size）——数字与印刷分开约束：

• Digital: 80px width minimum
• Print: 25mm width minimum

starter 模板给出了更细分的版本（数字横版 120px、数字图标 24px、印刷横版 35mm、印刷图标 10mm），品牌方可根据自身 Logo 复杂度调整。

红线清单（Don'ts）——模板固定五条禁令，任何品牌指南都应继承：

• Don't rotate or skew（禁止旋转或倾斜）
• Don't change colors outside approved palette（禁止使用批准调色板之外的配色）
• Don't add effects (shadows, gradients)（禁止添加阴影、渐变等特效）
• Don't crop or modify proportions（禁止裁切或篡改比例）
• Don't place on busy backgrounds（禁止放置在杂乱背景上）

这些规范最终会被validate-asset.cjs以「文件名 + 尺寸 + 格式 + 清单注册」的形式机器化执行，因此模板中的logo.variants、logo.minSize字段在填写时越精确，后续资产校验越可落地。

五、Voice & Tone：声音人格、语境语调与禁用词

声音规范决定「品牌如何说话」，模板把它拆成四个可量化的部分：

品牌人格（Brand Personality）——用 2～3 个特质词各配一句描述，例如 starter 模板的Professional: Expert knowledge, authoritative yet approachable。

声音对照表（Voice Chart）——每个特质必须同时给出「We Are」与「We Are Not」，通过反例限定边界：

按语境调整语调（Tone by Context）——同一品牌在不同场景语气不同，模板强制列出 Marketing / Support / Error Messages / Success 四类语境并各配一句示例文案：

starter 模板的示例非常具体：营销「Create campaigns that convert.」、文档「Run the command to start.」、报错「Try refreshing the page.」、成功「Campaign published!」。

禁用词（Prohibited Terms）——每项都要注明禁用理由，例如 starter 模板列出：Revolutionary（过度使用）、Best-in-class（模糊声明）、Seamless（过度使用）、Synergy（企业黑话）、Leverage（建议改用 use）。这些词会被inject-brand-context.cjs的extractVoice提取进voice.prohibited数组，最终注入到 AI 生成内容的系统提示词中，从源头拦截不符合品牌语气的文案。

六、Imagery Guidelines：摄影、插画与图标的风格基线

图像规范帮助 AI 图像生成与设计师对齐视觉语言，模板覆盖三个层次：

• 摄影风格（Photography Style）：光照偏好、主体规范、后期色调处理；
• 插画（Illustrations）：风格描述、仅限品牌调色板、描边粗细{weight}px；
• 图标（Icons）：风格（outlined/filled/duotone 三选一）、24px 基准网格、圆角值。

starter 模板给出了可直接套用的实例：摄影走自然柔和光、真实人物与场景；插画为现代扁平风加微渐变、2px 统一描边、4px 圆角；图标为 outline 风格、24px 网格、1.5px 描边、2px 圆角。它还额外扩展了「AI 图像生成」章节——Base Prompt 模板、风格关键词表（光照/情绪/构图/处理/美学）、视觉情绪描述词、视觉 Don'ts 表与示例提示词，这套扩展能被inject-brand-context.cjs的extractImageStyle完整识别（它逐一匹配Base Prompt Template、Style Keywords、Visual Mood Descriptors、Visual Don'ts、Example Prompts区块），最终作为IMAGE GENERATION段注入提示词。

七、从模板到工作流：四步使用法与脚本联动

模板末尾给出标准使用流程：

1. Copy template above—— 复制模板全文
2. Fill in brand-specific values—— 填入品牌专属值
3. Save asdocs/brand-guidelines.md—— 保存为指南文档
4. Reference in content workflows—— 在内容工作流中引用

在这四步之上，ui-ux-pro-max-skill 的 brand 技能把「引用」升级为「机器可执行的品牌闭环」，与模板配套的四个脚本各自消费模板的一个侧面：

1. 品牌上下文注入（inject-brand-context.cjs）：解析docs/brand-guidelines.md，提取颜色、字体、声音、图像风格，输出一段可直接拼进 AI 系统提示词的BRAND CONTEXT文本；--json模式输出结构化 JSON，便于程序消费。

node cli/assets/skills/brand/scripts/inject-brand-context.cjs node cli/assets/skills/brand/scripts/inject-brand-context.cjs --json

2. 同步到设计令牌（sync-brand-to-tokens.cjs）：把指南中的颜色按primary / secondary / accent三种角色提取出来，生成 50～900 的十档色阶写入design-tokens.json，再调用 design-system 技能重新生成design-tokens.css。模板中的### Primary Colors等标题就是它的解析锚点——标签含dark的行归入深色档、含light的行归入浅色档，其余首个颜色作为 base 色：

node cli/assets/skills/brand/scripts/sync-brand-to-tokens.cjs node cli/assets/skills/brand/scripts/sync-brand-to-tokens.cjs --dry-run

--dry-run只预览将要写入的颜色尺度而不落盘，适合正式同步前检查解析结果。注意它硬编码读取工作区根目录的docs/brand-guidelines.md，与模板第 3 步的保存路径约定一致。

3. 颜色合规校验（extract-colors.cjs）：--palette模式直接打印指南中按主/辅/中性/语义分组的品牌调色板；传入图片路径时，生成 ImageMagick 提取指令，并以 RGB 欧氏距离 ≤50 为阈值计算品牌合规百分比（calculateCompliance）。这让模板中的色值成为可执行的「品牌色白名单」。

node cli/assets/skills/brand/scripts/extract-colors.cjs --palette node cli/assets/skills/brand/scripts/extract-colors.cjs <image-path> --brand-file docs/brand-guidelines.md

4. 资产命名与尺寸校验（validate-asset.cjs）：按{type}_{campaign}_{description}_{timestamp}_{variant}.{ext}命名约定校验营销资产的命名、格式、尺寸与文件大小，并检查是否注册进.assets/manifest.json。它对图片默认限 5MB（推荐 1MB）、SVG 限 500KB，未达标时给出建议文件名：

node cli/assets/skills/brand/scripts/validate-asset.cjs <asset-path> node cli/assets/skills/brand/scripts/validate-asset.cjs <asset-path> --json

【免费下载链接】ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.项目地址: https://gitcode.com/gh_mirrors/ui/ui-ux-pro-max-skill