ui-ux-pro-max-skill 品牌技能Logo 使用规则完整指南变体、留白、最小尺寸与审批流程【免费下载链接】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导读本指南基于开源仓库ui-ux-pro-max-skill中 Brand 技能模块的 logo-usage-rules.md 编写系统讲解 Logo 在各类营销物料中的规范实现变体选择、安全留白、最小尺寸、背景配色、联合品牌布局、文件格式以及上线前的审批流程。读完本文你将掌握一套可落地的 Logo 合规检查方法并能借助仓库内 validate-asset.cjs 与 extract-colors.cjs 脚本对品牌资产进行自动化校验确保 Logo 在所有触点保持一致。Logo 变体体系先选对形态再谈使用规范 Logo 使用的第一步是明确当前场景该用哪个变体。原文档将变体分为两类结构变体与颜色变体。主要变体结构形态变体文件名适用场景全横版Full Horizontallogo-full-horizontal.{ext}网站页头、文档堆叠版Stackedlogo-stacked.{ext}方形空间、社交头像仅图标Icon Onlylogo-icon.{ext}Favicon、应用图标、小尺寸空间仅字标Wordmark Onlylogo-wordmark.{ext}图标已单独出现时这四种形态覆盖了从完整品牌呈现到最小可辨识单元的完整梯度。logo-usage-rules.md中给出的建议是空间充裕且需要传达完整品牌信息时优先使用全横版正方形或圆形裁切场景如社交头像使用堆叠版极小尺寸或功能入口如标签页图标使用仅图标版。颜色变体变体适用场景全彩Full Color白色/浅色背景下的默认选择反白Reversed深色背景单色深Monochrome Dark浅色背景且无法使用彩色时单色浅Monochrome Light深色背景且无法使用彩色时这一套变体规则与仓库中 brand-guidelines-starter.md 模板第 3 节的 Variants 表格完全一致说明该模板已将 Logo 变体约定固化为新品牌指南的标准章节。变体选择的决策顺序可以概括为先判断媒介与空间确定结构形态再判断背景明暗确定颜色形态。安全留白Clear SpaceLogo 周围的最小呼吸区Logo 周围必须保持无任何文字、图形或边缘元素干扰的空白区域这就是安全留白。原文档给出的硬性标准是最小留白 Logo 标志图标部分的高度原文档用 ASCII 示意如下┌─────────────────────────────┐ │ [x] │ │ ┌───────────────────┐ │ │ │ │ │ [x] │ │ [LOGO] │ [x] │ │ │ │ │ │ └───────────────────┘ │ │ [x] │ └─────────────────────────────┘其中[x]即图标mark的高度。也就是说无论 Logo 水平放置还是堆叠放置其上下左右四个方向都要预留一个图标高度宽度的空白。这一规则同样被写入 visual-identity.md 的 Quick Checks 清单[ ] Sufficient clear space并在审批环节强制核验。实操建议在 Figma / Sketch 等设计工具中可将 Logo 与其图标高度等宽的正方形辅助线对齐检查留白在网页实现中可用 CSS padding 保证留白不被容器裁切padding值取--logo-mark-height即可。最小尺寸数字与印刷场景的底线Logo 缩小到无法辨认时会损害品牌辨识度因此必须设定最小显示尺寸。数字场景格式最小宽度说明完整 Logo120px所有元素清晰可辨仅图标24pxFavicon / 小图标仅图标32pxUI 元素印刷场景格式最小宽度说明完整 Logo35mm名片、信头仅图标10mm小型印刷品注意数字与印刷的最小尺寸不可互相套用120px 在印刷中可能不足以保证 35mm 的清晰度反之亦然。这些阈值与 brand-guidelines-starter.md 中 Minimum Size 表格数字完整 Logo 120px、数字图标 24px、印刷完整 Logo 35mm、印刷图标 10mm保持一致。尺寸校验的自动化实现仓库中的 validate-asset.cjs 为尺寸校验提供了参考实现其RULES.dimensions按资产类型设定最小宽高如 banner 需 ≥600×300、logo 需 ≥100×100、design 需 ≥800×600validateFileSize()则对不同格式设定体积上限图片最大 5MB、建议 1MBSVG 最大 500KB、建议 100KB。虽然脚本校验的是文件级尺寸而非渲染尺寸但它展示了尺寸底线必须可被程序化检查的思路可作为 CI 门禁的起点。颜色使用背景适配与不可逾越的红线已批准的背景组合背景应使用的 Logo 版本白色全彩或深色单色浅灰#F5F5F5 及以上亮度全彩或深色单色品牌主色反白白色深色#333 或更暗反白白色摄影图片确保足够对比度颜色使用铁律不得使用批准色板之外的任何颜色不得在 Logo 上使用渐变不得对 Logo 元素应用透明度不得添加阴影或任何特效。这些规则与仓库中 approval-checklist.md 的 Logo 检查项一一对应Approved colors only、No unauthorized modifications、Appropriate for background也与 color-palette-management.md 的合规规则互相印证——后者要求主色占比 60–70%、辅色 20–30%、强调色 5–10%且非色板颜色容差不超过 20%。用 extract-colors.cjs 自动校验颜色合规要判断一张图片上的 Logo 是否用了批准色仓库提供了 extract-colors.cjs# 查看品牌色板从 docs/brand-guidelines.md 解析 node cli/assets/skills/brand/scripts/extract-colors.cjs --palette # 生成图片取色命令ImageMagick 直连 node cli/assets/skills/brand/scripts/extract-colors.cjs image-path该脚本的核心逻辑值得留意parseBrandColors()从品牌指南 Markdown 中按### Primary / Secondary / Neutral / Semantic小节正则提取全部#RRGGBB色值归入primary/secondary/neutral/semantic/all四个桶hexToRgb()/rgbToHex()完成色值换算colorDistance()在 RGB 空间计算欧氏距离findNearestBrandColor()找出最邻近的品牌色calculateCompliance()以距离阈值 50RGB 空间最大距离约 441判定某颜色是否合规并输出合规百分比——这正是不得使用批准色板之外颜色规则的量化版本。对于需要全彩识别的场景脚本会输出 ImageMagick 命令magick image -colors 10 -depth 8 -format %c histogram:info:将主色提取后再与品牌色板比对。错误用法清单绝对禁止的十种操作原文档以Absolute Donts形式给出硬性禁令任何物料审核都应逐条对照❌ 拉伸或压缩 Logo破坏比例❌ 任意角度旋转❌ 添加投影❌ 应用渐变填充❌ 使用未批准颜色❌ 添加描边或轮廓❌ 放置于杂乱背景❌ 裁切任何部分❌ 重新排列元素❌ 添加额外元素。原文档同时给出三个典型反例示意拉伸、旋转、错误配色。这套清单已沉淀进 brand-guidelines-starter.md 的 Donts 小节不旋转/倾斜、不改色、不加阴影特效、不裁切改比例、不置于对比度不足的杂乱背景并在 visual-identity.md 的 Incorrect Usage 模板中重复强调属于品牌知识库中跨文档收敛的共识。联合品牌Co-branding规则与合作伙伴 Logo 同屏出现时遵循五条原则视觉权重对等双方 Logo 高度一致充分间隔Logo 之间保持足够距离必要时使用分隔线清晰划分双方区域双方均使用批准色不允许任一方偏离其官方色板安全留白对双方同时生效每个 Logo 周围都需满足前文的[x]留白标准。布局上提供两种标准方案方案 A水平并列 分隔线 [我方 LOGO] | [合作方 LOGO] 方案 B垂直堆叠 [我方 LOGO] [合作方 LOGO]联合品牌场景的审核可复用 approval-checklist.md 的通用检查项正确变体、留白、最小尺寸、批准色、无未授权修改无需额外流程。文件格式与目录组织推荐格式用途格式说明WebSVG首选矢量可缩放Web 降级PNG需带透明通道印刷PDF矢量、高质量印刷备选EPS兼容旧系统文档插图PNG高分辨率300dpi标准目录结构原文档给出的推荐结构assets/logos/ ├── full-horizontal/ │ ├── logo-full-color.svg │ ├── logo-full-color.png │ ├── logo-reversed.svg │ ├── logo-mono-dark.svg │ └── logo-mono-light.svg ├── icon-only/ │ ├── icon-full-color.svg │ ├── icon-reversed.svg │ └── favicon.ico └── monochrome/ ├── logo-black.svg └── logo-white.svg这套结构在仓库的 asset-organization.md 中被进一步体系化assets/logos/下细分full-horizontal/含字标的完整 Logo、icon-only/仅符号、monochrome/单色版与variations/特殊版本配套命名规范为{type}_{campaign}_{description}_{timestamp}_{variant}.{ext}例如logo_brand-refresh_horizontal-full-color_20251209.svg。命名规范并非纸上谈兵——validate-asset.cjs 的RULES.naming.pattern用正则/^[a-z]_[a-z0-9-]_[a-z0-9-]_\d{8}(_[a-z0-9-])?\.[a-z]$/强制校验type 必须小写、campaign 与 description 必须 kebab-case、时间戳必须 8 位 YYYYMMDD。文件名不合规时脚本会自动给出建议文件名suggestFilename()实现错误即时纠正。平台特定指南社交、网站与文档社交媒体全部使用仅图标版平台格式尺寸LinkedInPNG300×300pxTwitter/XPNG400×400pxFacebookPNG180×180pxInstagramPNG320×320px网站位置变体尺寸页头Header全横版宽 120–200px页脚Footer全横版宽 100–150pxFavicon仅图标32×32pxApple Touch仅图标180×180px文档文档变体位置信头Letterhead全横版左上角演示文稿图标 字标标题页报告全横版封面 页脚需要强调的是社交头像虽然尺寸各异但规则一致一律使用仅图标变体避免小尺寸下字标不可读网站 Favicon 建议同时输出 32×32 与 180×180Apple Touch两档配合 SVG 保证高分屏清晰度。这些平台约束可直接与 asset-organization.md 的 Tagging System 配合如platform: instagram、format: 1x1让资产可按平台维度检索。Logo 审批流程使用前五步自查确认拿到的版本正确结构 颜色变体检查背景兼容性对照已批准的背景组合表确认满足最小尺寸要求确认安全留白分配到位对照本指南逐条复核。非标准用法的审批请求提交包含拟用效果图的 Mockup说明使用语境媒介、受众等待品牌团队批准记录已批准的特殊例外便于后续追溯。用 validate-asset.cjs 把审批自动化validate-asset.cjs 将上述人工检查中的文件级项目程序化node cli/assets/skills/brand/scripts/validate-asset.cjs asset-path node cli/assets/skills/brand/scripts/validate-asset.cjs asset-path --json node cli/assets/skills/brand/scripts/validate-asset.cjs asset-path --fix脚本执行五项检查文件名合规命名正则、文件格式白名单 png/jpg/jpeg/webp/gif/svg/mp4/mov/webm/pdf/psd/ai/fig、文件大小按格式分级阈值、manifest 注册状态检查.assets/manifest.json中是否登记以及文件名修正建议--json输出结构化结果便于 CI 解析退出码 0/1 直接作为门禁信号。该脚本的能力边界在 approval-checklist.md 的 Automation Support 一节有明确说明可自动检查色板合规配合 extract-colors.cjs、最小尺寸、文件格式/大小、命名规范与基础元数据。在 Brand 技能中的定位与整体工作流本规则文档是 Brand 技能见 cli/assets/skills/brand/SKILL.md参考库中的一环与 Voice Framework、Visual Identity、Messaging、Consistency Checklist、Asset Organization、Color Management、Typography、Approval Checklist 共同构成完整的品牌治理体系。SKILL.md 给出的典型工作流为# 1. 编辑 docs/brand-guidelines.md或使用 /brand update # 2. 同步品牌色到设计令牌 node cli/assets/skills/brand/scripts/sync-brand-to-tokens.cjs # 3. 验证注入的品牌上下文 node cli/assets/skills/brand/scripts/inject-brand-context.cjs --json | head -20其中 sync-brand-to-tokens.cjs 会把docs/brand-guidelines.md中的 Primary/Secondary/Accent 色值解析出来自动生成 50–900 的色阶generateColorScale()基于adjustBrightness()线性调亮/调暗写入assets/design-tokens.json并重生成assets/design-tokens.css保证Logo 批准色板能直接贯通到 UI 开发层。结合 inject-brand-context.cjs品牌与 Logo 规范可以作为上下文注入到 Agent 的每次生成任务中从源头避免违规使用。小结Logo 使用规则的核心可以压缩为四句话变体按场景选、留白等于图标高度、尺寸设底线、颜色只在批准色板内。落到执行层面人工对照本指南做五步自查再叠加validate-asset.cjs命名/格式/大小与extract-colors.cjs颜色合规做程序化校验即可形成规范定义 — 资产组织 — 自动校验 — 人工审批的完整闭环。仓库中的相关文档与脚本路径汇总如下供进一步深入规则原文cli/assets/skills/brand/references/logo-usage-rules.md品牌技能入口cli/assets/skills/brand/SKILL.md资产组织与命名cli/assets/skills/brand/references/asset-organization.md审批检查清单cli/assets/skills/brand/references/approval-checklist.md资产校验脚本cli/assets/skills/brand/scripts/validate-asset.cjs颜色合规脚本cli/assets/skills/brand/scripts/extract-colors.cjs品牌指南起始模板cli/assets/skills/brand/templates/brand-guidelines-starter.md视觉识别基础cli/assets/skills/brand/references/visual-identity.md色板管理规范cli/assets/skills/brand/references/color-palette-management.md【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考