elite-brand-design

精英品牌设计

战略性品牌形象塑造——从个性定义到视觉体系。

快速参考

主题	参考文件
品牌基础	brand-fundamentals.md
视觉形象	visual-identity-system.md
色彩心理学	brand-color-psychology.md
作为声音表达的字体	brand-typography.md
品牌语调	brand-tone-voice.md
风格指南创建	brand-style-guide.md
品牌触点	brand-touchpoints.md
品牌演进	brand-evolution.md
无障碍品牌设计	brand-accessibility.md
品牌套件生成器	brand-package.md

相关技能

• elite-design-core — 设计令牌、间距、字体比例（实现层）
• elite-gsap — 标志动画、动效语言
• elite-css-animations — 原生 CSS 品牌动效
• elite-layouts — 与品牌一致的布局系统
• elite-performance — 品牌素材优化
• elite-accessibility — 包容性设计要求
• elite-ux-strategy — 品牌作为转化驱动力
• elite-inspiration — 原型案例研究

---

品牌与设计

品牌是人们接触你时的感受。它存在于他们的脑海中，而非你的文件里。

品牌塑造是通过一致的信号，有意识地塑造这种认知的行为。

品牌形象是传递这些信号的视觉、语言和体验元素体系。

本技能涵盖从零开始打造品牌形象——这些战略决策将影响后续的每一项设计选择。

---

品牌创建流程

阶段 1：探索

你是谁？你面向谁？你相信什么？ → 参见 brand-fundamentals.md

阶段 2：个性

哪种原型适合你？哪些特质定义了你的声音？ → 参见 brand-fundamentals.md

阶段 3：视觉形象

标志、色彩、字体、纹理——可见的体系。 → 参见 visual-identity-system.md、brand-color-psychology.md、brand-typography.md

阶段 4：语言形象

品牌语调、信息层级、微文案。 → 参见 brand-tone-voice.md

阶段 5：文档

能够随团队发展而扩展的动态风格指南。 → 参见 brand-style-guide.md

---

品牌原型框架

五种生产级原型，展示品牌个性如何映射到设计：

原型	个性	字体信号	色彩信号	形状信号
现代／大胆	自信、直接、技术感强	几何无衬线（Space Grotesk）	高对比度深色 + 高饱和度强调色	中等圆角
奢华／编辑风	精致、令人向往、富有感官体验	高对比度衬线（Cormorant Garamond）	中性色上的暖金属色	柔和圆角
温暖／包容	安心、共情、有人情味	柔和可变衬线（Fraunces）	柔和且丰富的配色（李子色／鼠尾草绿／薰衣草紫）	宽大圆角
权威	威严、值得信赖、底蕴深厚	厚重衬线（Gelasio）	传统权威色（海军蓝／金色）	无圆角（锐利）
专业	胜任、可靠、关怀备至	衬线 + 无衬线搭配（DM 系列）	简洁实用的中性色	标准圆角

如何将个性转化为代码

• “权威” → 衬线展示字体 + 全局 border-radius: 0 !important + 海军蓝／金色设计令牌
• “温暖／包容” → 带 SOFT 轴的可变字体 + 李子色调阴影 + 宽大圆角
• “现代／大胆” → 几何无衬线字体 + 紧凑字距 + 颗粒纹理叠加层
• “奢华／编辑风” → 高对比度衬线字体 + 斜体强调字体 + 金色／暖中性色设计令牌

→ 令牌实现参见 elite-design-core，运动语言参见 elite-gsap。

---

常见陷阱

1. 从颜色入手 — 先考虑个性和受众，再确定颜色。
2. 字体过多 — 最多使用两个字体系列。字体角色最多三种（展示、正文、等宽）。
3. 应用不一致 — 品牌系统只有在每个接触点都遵循时才有效。记录所有内容。
4. 照搬竞争对手 — 差异化才是关键。研究竞争对手，是为了避免重复他们的选择。
5. 忽视无障碍性 — 如果并非所有用户都能感知品牌，它就不完整。
6. 装饰凌驾于用途之上 — 每个品牌元素都应传达信息。如果只是装饰，就将其移除。
7. 跳过语言识别 — 语气与视觉识别同样重要。精美的网站配上千篇一律的文案，会显得空洞。

---

生成品牌资源包

完成品牌探索（阶段 1-5）后，生成包含所有交付物的完整 brand-assets/ 文件夹：

→ 参见 brand-package.md

其中包括：

• 设计令牌（Tailwind v4 @theme + 语义层）
• Logo 占位图（图标、字标、组合 SVG）
• 网站图标套装（SVG 网站图标 + Apple 触控图标）
• 社交媒体模板（OG 图片 + 个人资料图片）
• 起始 CSS（基础样式 + 组件库）
• 品牌指南文档

所有资源都将基于用户的探索答案打造，而非通用模板。