brand-designer

品牌设计师

概述

品牌设计师可从调研到资源交付，打造完整的视觉识别系统。涵盖带有 SVG 组件的徽标设计、符合无障碍要求的配色方案生成、字体排版层级配置、品牌指南文档编写，以及社交媒体和印刷品模板创建。

适用场景： 全新品牌识别项目、带有 SVG 变体的徽标设计、与 Tailwind 集成的配色方案创建、字体排版系统设置、品牌指南文档编写、社交媒体模板生成、品牌资源文件整理。

不适用场景： UI 组件库设计（使用 design-system）、图像优化流程（使用 asset-manager）、Figma 到代码的工作流（使用 figma-developer）、营销文案或内容策略。

快速参考

模式	方法	要点
徽标设计	使用包含完整徽标／图标／字标变体的 SVG 组件	先设计单色版本，再添加颜色
配色方案	主色、辅助色、中性色、语义色分层	60/30/10 规则：中性色／主色／强调色
字体排版系统	显示字体与正文字体搭配，并使用 CSS 自定义属性	最多使用两种字体系列
品牌指南	徽标用法、颜色、字体排版、品牌声音与语调	明确规定留白和最小尺寸
社交媒体模板	按平台特定尺寸制作 SVG 模板	Open Graph 使用 1200x630，个人资料使用 400x400
资源整理	按结构划分目录：徽标、颜色、字体	以 SVG 为主要格式，PNG 提供 @1x/@2x/@3x 版本
网站图标生成	从 SVG 源文件通过 Sharp 脚本生成	生成 16、32、48、64、128、256px 尺寸
无障碍性	确保文字与背景的对比度符合 WCAG AA	验证主色在白色背景上符合 AA

品牌调研清单

问题	目的
公司是做什么的？	了解行业背景
目标受众是谁？	确定人口统计和心理特征
品牌价值观是什么？	确定核心身份支柱
徽标应传达什么感受？	确定情感方向
有哪些应避免的颜色或符号？	明确限制和敏感点
竞争对手有哪些？	寻找差异化机会

常见错误

错误	正确做法
先用彩色设计 Logo	先用单色设计；添加配色前，Logo 必须能以单一颜色呈现
跳过品牌调研清单	设计前务必了解公司的价值观、受众、竞争对手和限制条件
使用超过两种字体系列	限定为一种展示字体和一种正文字体，以保持协调
未提供 Logo 变体	创建完整、仅图标和仅字标的变体，并提供单色版本
仅将 Logo 导出为 PNG	优先提供 SVG 格式；针对栅格图需求，另提供 @1x、@2x、@3x 的 PNG
将品牌色用于大面积背景	遵循 60/30/10 规则：60% 中性色、30% 主色、10% 强调色
给 Logo 添加效果（阴影、渐变）	仅使用经批准的 Logo 变体，不做额外处理
未规定安全空间	将 Logo 周围的安全空间定义为最高字母的高度
未规定最小尺寸	数字：完整 Logo 为 120px / 图标为 40px；印刷：完整 Logo 为 1in / 图标为 0.25in

委派

进行品牌设计时，可委派给：

• design-system -- 令牌层级和组件架构
• asset-manager -- 图片优化和资源处理流程
• figma-developer -- Figma 到代码的实现

参考资料

• Logo 设计 -- 包含完整、仅图标和仅字标变体的 SVG Logo 组件
• 配色方案 -- 品牌颜色定义、Tailwind 配置和使用指南
• 字体排版 -- 字体选择、CSS 自定义属性和 React 字体排版组件
• 品牌指南 -- 包含品牌声音、语气和视觉规范的完整指南模板
• 模板 -- 社交媒体、名片和个人资料图片的 SVG 模板
• 资源管理 -- 文件组织、网站图标生成和 HTML 元标签