Brand

品牌技能

打造完整、连贯、独特，且绝不会与通用 AI 输出混淆的品牌识别系统。

与众不同之处

反 AI 垃圾内容聚焦： 此流程打造的品牌具备以下特点：

• 情感扎根 — 每个视觉选择都与人本意义相连接
• 系统性独特 — 连贯的系统，而非随机的“现代”审美
• 有意雕琢 — 专家级打磨，而非初稿默认效果

秘诀： 在任何视觉工作之前，先从情感叙事开始。这会创建深度的大模型记忆，防止向通用化漂移。

---

结构

brand-skill/
├── SKILL.md                      # Overview and routing (you are here)
├── TOOLS-REQUIRED.md             # Prerequisites checklist
├── ADDENDUM-4-WEB-PRESENCE.md    # Convergence theory (why LLMs revert to mean)
├── SKILL-AUDIT.md                # Gap analysis from AutonoLabs build
├── Workflows/
│   ├── 00-EmotiveNarrative.md    # Soul of the brand
│   ├── 01-Discovery.md            # Strategy and positioning
│   ├── 02-VisualDirection.md      # Reference exploration
│   ├── 03-MarkDevelopment.md      # Logo via tracing or hand-coding
│   ├── 04-Wordmark.md             # Typography and lockups
│   ├── 05-DesignSystem.md         # Complete system (web + iOS)
│   ├── 05A-CompositionIdentity.md # Evolutionary diverge/kill/mutate process
│   ├── 06-DesignMdCreation.md     # Consolidate to DESIGN.md
│   └── 07-Packaging.md            # Final delivery
├── Templates/
│   ├── DESIGN-template.md         # Comprehensive DESIGN.md template
│   ├── philosophy-template.md
│   ├── visual-philosophy-template.md
│   ├── design-guidelines-template.md
│   └── readme-template.md
└── Examples/
    └── sorted-brand-kit/          # Real-world example (Sorted.fund)

---

入门

在一切之前：

1. 阅读 Workflows/00-Orchestrator.md — 控制阶段推进与状态跟踪
2. 阅读 TOOLS-REQUIRED.md — 验证前置条件
3. 使用 00-Orchestrator.md 中的检查清单在项目目录中创建 .brand-progress.md。这是动态进度跟踪器 — 在每次门控检查时更新它。

触发条件

• “为 [项目] 打造品牌”
• “创建品牌指南”
• “设计一个 logo 和视觉系统”
• “我需要一个看起来不像 AI 垃圾的完整识别系统”
• “帮我创建一个包含 iOS 和 web 规范的设计系统”

---

流程（8 个阶段）

阶段 0：情感叙事 ⭐ 新增

在视觉之前创造灵魂

输出： 4-6 段优美的情感叙事

• 人本时刻（为何这重要）
• 转变（什么成为可能）
• 精神特质（价值观与原则）
• 个性（它如何穿过这个世界）
• 北极星（决策的指引之光）

为何优先： 这成为后续每个阶段都会引用的情感语境。它通过将一切选择扎根于人本意义，防止向通用的“简洁现代”漂移。

时间： 20-30 分钟

---

阶段 1：探索

建立战略基础

输出： 品牌定位、语调指南

• 定位陈述
• 核心隐喻
• 品牌个性特质
• 语调与语气原则

语境感知： 如果你有代码库访问权限，先阅读项目文件并起草定位假设。不要一上来就用问卷。

时间： 15-20 分钟

---

阶段 2：视觉方向

生成参考图像以寻找美学领域

输出： 探索方向的参考图像（PNG）

• 3-4 个探索不同诠释的提示词
• 用户挑选方向
• 如需要则生成细化版本

可选： 可跳过并直接进入 SVG 迭代（阶段 3）

时间： 10-15 分钟

---

阶段 3：标志开发

通过描摹或手写 SVG 开发 logo

输出： [brand]-mark-final.svg、favicon PNG

• 主路径： 生成参考 → 描摹为 SVG（vtracer）→ 细化
• 次路径： 手写简单几何标志
• 每次更改后进行渲染验证循环（rsvg-convert）
• 迭代上限：5-8 轮，然后转向其他方法
• 在 favicon 尺寸（32px、16px）下测试

时间： 20-60 分钟

---

阶段 4：文字标志

将标志与字体排印配对

输出： [brand]-wordmark-final.svg、变体

• 横向、堆叠、纯文字组合
• 通过迭代优化对齐
• 在真实场景中测试

时间： 30-45 分钟

---

阶段 5：设计系统 ⭐ 已更新

为 web 和 iOS 定义完整的视觉语言

输出： [brand]-design-guidelines.md

• 色彩（web CSS + iOS Swift）
• 字体排印（web + iOS，支持 Dynamic Type）
• 间距（统一的 8pt/px 基准）
• 组件（web + iOS 实现）
• 动效与动画原则
• 平台特定考量

包括 iOS 规范：

• SwiftUI 组件
• Asset Catalog 设置
• Dynamic Type 支持
• 安全区域处理
• 触控目标指南

时间： 30-60 分钟

---

阶段 5.5：构图与视觉识别 ⭐ NEW

定义品牌如何以独特方式占据空间

输出： 构图框架 + 3-5 个具名结构变体，用于对比

进化过程就在这一阶段发生。令牌（阶段 5）定义材料；构图则定义如何用这些材料进行创作。缺少这一阶段，无论令牌如何，每个品牌最终都会收敛到相同的布局。

流程：

1. 创建反面参考板（明确要避开的站点/模式）
2. 生成 3-5 个结构各异的页面变体，每个变体都对抗一种具名惯例
3. 部署到对比页面，供用户直观评估
4. 用户淘汰变体（不进行混合）。保留的方向会继续演变。
5. 重复上述过程，直到构图通过模糊测试，呈现出鲜明特色（在 20% 可见度下，布局轮廓仍能与反面参考区分开来）

关键： 用户提供的参考图和直觉反应完全主导这一阶段。LLM 负责生成，用户负责选择。完整流程见 05A-CompositionIdentity.md。

时间： 60-120 分钟（这是塑造鲜明特色最重要的阶段）

---

阶段 6：创建 DESIGN.md

将所有内容整合到一份主参考文档中

输出： DESIGN.md（全面且持续更新的文档）

包含：

1. 情感叙事（来自阶段 0）
2. 战略基础（来自阶段 1）
3. 视觉理念（来自阶段 1/2）
4. Logo 系统（来自阶段 3/4）
5. 设计令牌（颜色、字体、间距——Web + iOS）
6. 组件（Web + iOS 实现）
7. 实施指南（平台专属规范）
8. 反 AI 垃圾内容原则（质量验证）

为何至关重要： 单一事实来源。任何 LLM 都可以阅读 DESIGN.md 并理解完整品牌，从而永远避免风格泛化。

时间： 20-30 分钟

---

阶段 7：打包

收集资源以便交付

输出： [brand]-brand-kit/ 文件夹（或 .zip）

• 整理所有最终资源
• 快速入门 README
• DESIGN.md 作为主参考文档

时间： 10-15 分钟

---

总投入时间

• 快速流程： 3-4 小时（方向明确，迭代较少）
• 完整流程： 5-7 小时（探索与完善）
• 复杂品牌： 8 小时以上（多个概念，大量迭代）

---

关键产出

过程中

• [brand]-emotive-narrative.md（阶段 0）
• [brand]-philosophy.md（阶段 1）
• [brand]-visual-philosophy.md（阶段 1/2）
• 参考图片（阶段 2）
• [brand]-mark-final.svg + favicon（阶段 3）
• [brand]-wordmark-*.svg（阶段 4）
• [brand]-design-guidelines.md（阶段 5）

最终交付物

• DESIGN.md —— 单一事实来源（阶段 6）
• 品牌套件文件夹 —— 打包后的所有资源（阶段 7）

---

关于 LLM 的设计局限——请先阅读

每次与品牌合作开始时，都要向用户坦诚说明这一点。

此技能可以产出优秀的素材——情感叙事、调色板、字体系统、设计令牌。但它无法独立产出鲜明的构图——也就是如何将这些素材组合起来，打造出不同于其他所有精美页面的作品。

为什么会发生这种情况

大模型通过预测最可能的下一个 token 来生成输出。这是一种统计平均操作。输出并不是逐渐漂向平均值——它一开始就处在平均值，因为平均值正是这一机制被优化去寻找的东西。训练数据中的“好设计”绝大多数都是精致的、平衡的、完成的、常规的。每个要求“好”的品牌，得到的都是同一种好。

具体来说：

• 大模型看不到自己正在产出什么。 它把 HTML/CSS/SVG 写成文本 token，没有视觉反馈回路。它是在蒙着眼睛作画。
• 它优化的是连贯性。 刻意未完成、错位或打破规则的设计，与它的训练权重相悖。它会把任何看起来像错误的东西“修正”掉，哪怕那个错误正是重点。
• 它感受不到张力。 伟大的设计会制造有生产性的不适感。大模型无法校准这一点——它要么产出令人舒适的东西（趋同），要么随机地破坏东西。
• 它没有品味。 品味是无法被还原为规则的判断力。大模型用启发式方法近似品味，而启发式方法是概括，概括则会收敛到均值。

这对流程意味着什么

用户的方向、参考和直觉反应不是可选项——它们就是设计本身。 大模型是手。用户是眼。

规定技法没有用：“大胆一点”会收敛到大胆的均值。“打破网格”会收敛到打破网格的均值。就连“给我惊喜”也会收敛到惊喜的均值。任何具体到足以产出独特结果的指令，都会成为新的收敛中心。

唯一的出路是流程，而不是指令：

1. 发散 — 生成 3-5 个结构上不同的变体（不是换颜色——而是不同的空间逻辑）。每个变体都必须说明它在“对抗”哪条设计惯例。
2. 淘汰 — 用户做二元决策。存活或淘汰。不要混合——混合就是取平均。
3. 变异 — 在存活下来的方向内，刻意引入有明确命名的“打破”（对惯例的违反）。
4. 重复 — 每一轮循环都会进一步远离中心。用户的选择才是创作行为。

这一演化流程被编码在 Phase 5.5（Composition）中。另见：ADDENDUM-4-WEB-PRESENCE.md 获取完整理论框架。

这项技能仍然能防止什么

上述内容并不意味着品牌阶段没有意义。情感叙事、哲学和 token 做着至关重要的工作：

• 情感叙事 让每个选择都扎根于意义（防止任意决策）
• 视觉哲学 定义一场具体的美学运动（防止“简洁现代”）
• 系统化 token 创造连贯性（防止随机的尺寸/间距）
• DESIGN.md 嵌入哲学（防止随时间漂移）

但仅靠 token 无法防止构图上的趋同。这项技能产出优秀的食材。用户 + 演化流程决定这顿饭。

---

指南

关于迭代

不要追求第一次就完美。这个过程是演化的：

• 发散 — 生成结构上不同的选项，而不是同一主题的变体
• 淘汰 — 用户挑选存活者。淘汰就是淘汰。不要混合。
• 变异 — 把存活者推向出人意料的方向
• 重复 — 每一轮都会更具辨识度

第 15 版通常比第 3 版好得多——但前提是这些迭代由人类选择压力驱动，而不是由大模型朝着自己的中心不断精修。

关于用户输入

你带来专业能力；他们带来品味。展示选项时附上你的推理，但让他们来选择。当你确实需要方向时使用 AskUserQuestion，而不是为了获得认可。

关于情感基础

Phase 0 不是可选项。 跳过它会导致没有灵魂的设计。叙事会创造：

• 深层的大模型记忆（防止泛化的漂移）
• 决策框架（用叙事来检验选择）
• 情感连贯性（视觉系统表达故事）

关于测试

Logo 存在于多个尺寸：主视觉（200px+）、应用图标（64px）、favicon（32px、16px）。全部都要测试。如果缩小后效果崩坏，就简化。

关于色彩

深色背景应带一点暖意——纯 #000 显得死气沉沉。功能性颜色（绿色表示成功、红色表示错误）承载含义；不要把它们当作装饰使用。

关于平台特性

Web 和 iOS 应该感觉像“同一个品牌”，但各自原生适配其平台：

• Web 可以更具表现力（渐变、阴影）
• iOS 应遵循系统惯例（SF Pro、原生导航）
• 色板和间距节奏保持完全一致
• 组件可识别为“同一个”，但符合平台习惯

关于字体排印与组合标志开发

字体搭配需要方法论，而非直觉。 在为展示字体选择正文搭配字体时：

• 调研同类品牌实际使用什么（金融科技、技术、奢侈品语境差异巨大）
• 使用专业搭配数据库来了解经过验证的组合
• 应用 x-height 分析——相近的 x-height 带来统一感，对比带来层次感
• 每个选项都要给出理由：解释为什么这个搭配有效，而不只是它是什么
• 对于技术/机构类品牌，正文使用无衬线字体没有商量余地——屏幕可读性优先于编辑风格

关于组合标志的打磨： 定稿前展示 3-4 个间距和 sizing 变体。文字高度应为标志高度的 60-75%，以实现视觉平衡。标志与文字之间的间距：紧凑间距（0.25 倍标志高度）带来密度感，宽松间距（0.75 倍）带来呼吸感。让品牌理念来指引哪种感觉更对。

关于技术执行： 尽早测试字体排印渲染——SVG 文本、Web 字体和导出格式各有各的怪癖，崩坏方式各不相同。在展示前先验证，以捕捉用户不该看到的问题。如果装饰元素是概念的一部分，把它们放在自然边界处（词的末尾、下划线、独立标记），而不是试图让它们对齐特定的字形特征。

关于质量

避免通用套路：紫蓝色渐变、过度圆润的形状、无意义的几何装饰。创造一些独特、品牌可以据为己有的东西。

记住： 通用很容易。独特需要用心。

---

依赖项

完整清单及安装命令见 TOOLS-REQUIRED.md。

必需

• Node.js — SVGO 优化所需
• SVGO — SVG 优化（npx svgo@latest — 无需全局安装）
• 浏览器 — SVG/HTML 预览

推荐

• rsvg-convert (librsvg) — 用于渲染-验证循环的 SVG→PNG 渲染（备选：浏览器或 macOS 上的 qlmanage）
• vtracer — PNG→SVG 描摹（阶段 3 标志开发的主要路径）
• potrace — 位图描摹（vtracer 的更简单替代方案）

备选

• freeconvert.com/png-to-svg — 当本地工具不可用或无法产生忠实结果时，使用基于浏览器的 PNG→SVG 描摹。文件大小比 vtracer 更大——没关系，对参考的忠实度更重要。
• qlmanage (macOS) — 内置 SVG 渲染，用于视觉验证

图像生成（可选）

阶段 2 可以使用 AI 图像生成进行参考探索。需要 API 密钥——设置见 TOOLS-REQUIRED.md。

1. 任何文本转图像工具 — Gemini、DALL-E、Midjourney、Flux 等。
2. 手动参考 — 用户提供情绪板图片或链接
3. 直接跳到 SVG — 带着更多初始变体（8-10 个）直接进入阶段 3

阶段 0-1 无需任何图像生成即可工作。 只有进入阶段 2 模式 A 时才需要 API 密钥。

字体

在阶段 4 根据品牌个性选择。不预设默认值。

---

工作流文件

每个阶段在 Workflows/ 中都有详细说明：

• 00-EmotiveNarrative.md — 创建灵魂与情感基础 ⭐ 新增
• 01-Discovery.md — 具备上下文感知模式的完整探索流程
• 02-VisualDirection.md — 参考图像生成指南
• 03-MarkDevelopment.md — SVG 迭代技巧
• 04-Wordmark.md — 字体搭配与对齐
• 05-DesignSystem.md — Token 与组件定义（web + iOS）
• 05A-CompositionIdentity.md — 品牌如何占据空间（演化过程）⭐ 新增
• 06-DesignMdCreation.md — 整合为 master DESIGN.md
• 07-Packaging.md — 资产收集与交付

在执行每个阶段时，阅读相关工作流文件。

---

DESIGN.md 的优势

为什么这很重要：

传统品牌系统：

• 分散在多个文件中
• 知识存在于人们的头脑中
• 随时间推移会发生设计漂移
• 通用模式会悄然渗入

使用 DESIGN.md：

• ✅ 一个文件，完整系统
• ✅ 任何大模型都能读取并保持一致
• ✅ 嵌入情感叙事（防止通用化漂移）
• ✅ 平台特定实现（web + iOS）
• ✅ 内置反 AI 垃圾验证
• ✅ 上手即刻完成
• ✅ 品牌永远保持独特性

这是抵御通用设计的保险策略。

---

示例用法

从零开始

"Use the brand-skill to build a complete brand identity for [project].
Start with Phase 0: create the emotive narrative that captures the soul
of what we're building."

中途继续

"Continue Phase 3 of the brand process. Here's feedback on v1-v5:
[your feedback]. Create the next iteration batch."

跳过阶段

"I already have a logo. Skip to Phase 5 and create a design system
(web + iOS) that complements this mark: [describe logo]."

最终整合

"We've completed Phases 0-5. Now create the master DESIGN.md file
that consolidates everything into one comprehensive reference."

---

质量标准

使用此技能创建的每个品牌都应：

1. 具备情感深度（而不仅仅是视觉风格）
2. 系统上协调一致（而非随机选择）
3. 在构图上具有独特性，而不仅仅在 Token 上（相同布局搭配不同颜色并不算独特）
4. 通过模糊测试（在 20% 可见度下，布局轮廓应仍可辨认）
5. 跨平台可用（web + iOS 实现）
6. 可实施（复制粘贴即可用的代码）
7. 保持一致性（DESIGN.md 防止 Token 漂移；构图身份防止布局漂移）

如果它可以是任何带有不同十六进制色值的"简洁现代"品牌，那我们就失败了。独特性存在于构图之中——即品牌如何占据空间——而不仅仅在于 Token。

---

真实案例

此技能库曾被用于创建：

1. Compost.fi — "Quiet Infrastructure" 品牌

   • 流程记录于：compost.fi/process.html
   • 从理念到生产约 2,600 次 API 调用
   • 26 次 logo 迭代，完整设计系统

2. Sorted.fund — "Utility Sublime" 品牌

   • 示例位于：Examples/sorted-brand-kit/
   • 温暖的基础设施美学
   • 密集、功能性的设计语言

两者都展示了完整的 7 阶段流程在实际中的应用，并呈现出独特的结果。

---

最后更新：2026 年 2 月 — 版本 3.0 新增：大模型设计局限性的坦诚说明、阶段 5.5 构图（演化过程）、标志的位图描摹、字体探索、收敛框架