brand-guidelines.md：每个AI工具都需要知道你的品牌的那个文件

你曾为品牌指南支付了一大笔钱。它们现在正躺在 Google Drive 某处的 47 页 PDF 中——那是你的设计公司 18 个月前交付的。你的开发人员从未打开过它。你的 AI 工具也无法打开它。每一次有人在 Cursor 中启动一个着陆页，用 Claude 起草一封营销邮件，或者在 v0 中搭建一个组件时，他们都不得不从零开始：“我们的主色调又是什么来着？是 Inter 还是 Plus Jakarta Sans 字体？我们用圆角还是尖角？”

这个循环——解释品牌，希望它能被记住，然后修正不符合品牌的地方——每周要花费数小时。对于一个团队来说，仅返工成本每月就达数千美元。

Google 的 Stitch design-md 格式消除了这个循环。Branding5 能自动生成你完整的 brand-guidelines.md——一键下载，将其放入你的代码仓库，你团队接触的每个 AI 工具都能即时了解你的品牌。

什么是 design-md？（为什么人们称它为 DESIGN.md？）

Design-md 是一种基于 Markdown 的纯文本规范，用于品牌和设计指南。它不是一个只有人类才能（理论上）阅读的 PDF，而是一个结构化的 .md 文件，人与 AI 系统都能解析、理解并以此进行构建。

Google 创建这种格式是其 AI 驱动的 UI 生成平台 Stich 的一部分，其前提很简单：如果你为 AI 提供一个结构良好的品牌系统描述，它就可以生成 UI、撰写文案，并做出符合品牌的设计决策。无需在每次会话中重复自己。

两个名称，一个理念

用这种格式编写的文件有两个名称：

DESIGN.md — 开发者社区中的简称。它与 README.md 和 CONTRIBUTING.md 一起放在项目根目录，Cursor、Windsurf 和其他 AI 编码工具都会自动查找它。
brand-guidelines.md — Branding5 使用的名称，因为该文件包含的远不止视觉规范。它捕捉了你的定位、原型、ICP、语调和策略——完整的品牌系统，而不仅仅是颜色和字体。

两种名称都可以。格式和功能是相同的。

brand-guidelines.md 里有什么

一个完整的文件涵盖了你品牌的每个层面，从策略到像素级的规范。以下是 Branding5 生成的 brand-guidelines.md 在实践中的样子：

# Acme Analytics

## Brand Foundation

- **Positioning:** The only analytics platform built for non-technical marketing teams
  who need enterprise-grade insights without the learning curve.
- **Archetype:** The Sage — wise, trustworthy, data-driven
- **Mission:** Make data literacy accessible to every marketer.
- **Values:** Clarity over complexity. Accuracy over speed. Empowerment over dependency.

## Ideal Customer Profiles

### ICP 1: Growth Marketing Manager

- 28–38, mid-market SaaS (50–500 employees)
- Frustrated by complex BI tools; needs dashboards they can build alone
- Language patterns: "actionable insights", "self-serve", "time-to-value"
- Key objection: "Will this replace our existing BI stack?"

### ICP 2: VP of Marketing

- 35–50, reports to CMO or CEO
- Cares about cross-channel attribution and board-ready reporting
- Buys on ROI proof and integration breadth

## Visual Identity

### Colors

| Role        | Hex       | Usage                                |
| ----------- | --------- | ------------------------------------ |
| Primary     | `#2563eb` | CTAs, active states, key UI elements |
| Secondary   | `#f8fafc` | Backgrounds, cards, containers       |
| Accent      | `#16a34a` | Success states, positive metrics     |
| Neutral 900 | `#0f172a` | Body text, headings                  |
| Neutral 400 | `#94a3b8` | Placeholder text, disabled states    |
| Error       | `#dc2626` | Error states, destructive actions    |
| Warning     | `#f59e0b` | Warning states, attention alerts     |

### Typography

| Role    | Family            | Weight | Size | Line Height | Tracking |
| ------- | ----------------- | ------ | ---- | ----------- | -------- |
| H1      | Plus Jakarta Sans | 800    | 48px | 1.1         | -0.02em  |
| H2      | Plus Jakarta Sans | 700    | 36px | 1.2         | -0.01em  |
| H3      | Plus Jakarta Sans | 700    | 24px | 1.3         | 0        |
| Body    | Inter             | 400    | 16px | 1.6         | 0        |
| Caption | Inter             | 500    | 13px | 1.4         | 0.01em   |
| Code    | JetBrains Mono    | 400    | 14px | 1.5         | 0        |

### Spacing & Layout

- Base unit: 8px
- Component padding: 16px (compact), 24px (default), 32px (spacious)
- Section spacing: 64px (desktop), 48px (mobile)
- Max content width: 1200px
- Border radius: 8px (cards), 12px (modals), 9999px (pills/buttons)

### Shadows & Elevation

- Card: `0 1px 3px rgba(0,0,0,0.08)`
- Dropdown: `0 4px 12px rgba(0,0,0,0.12)`
- Modal: `0 8px 32px rgba(0,0,0,0.16)`

## Brand Voice & Tone

- **Voice:** Direct, confident, jargon-free. We explain, we don't lecture.
- **Tone shifts:** Warmer in onboarding, more assertive in sales copy,
  precise and neutral in documentation.
- **Sentence style:** Short sentences. Active voice. Lead with the benefit.
- **Avoid:** Passive constructions, "leverage", "synergy", filler phrases,
  exclamation marks in product UI.

### Examples

- ✅ "See which campaigns drive revenue — in one click."
- ❌ "Our innovative platform leverages cutting-edge technology to empower
  your marketing team with best-in-class analytics solutions."

## Component Guidelines

### Buttons

- Primary: filled, `#2563eb`, white text, rounded-full, min-height 44px
- Secondary: outlined, 1px border `#2563eb`, transparent background
- Ghost: no border, text-only, used in nav and tertiary actions
- All buttons: 16px horizontal padding, font-weight 600, no uppercase

### Cards

- Background: white, border-radius 8px, subtle shadow
- Padding: 24px
- Header: H3 weight, 8px margin-bottom
- Always include a clear CTA or next action

### Forms

- Label above input, font-weight 500
- Input height: 44px, border-radius 8px, 1px border neutral-300
- Error message below input in red, 13px
- Required fields marked with \* (not colour alone)

## Do's and Don'ts

- ✅ Always include a single, clear CTA per section
- ✅ Use real data in examples and screenshots, never "Lorem ipsum"
- ✅ Test contrast ratios — minimum WCAG AA (4.5:1 for text)
- ❌ Never use more than 3 colours in a single component
- ❌ Don't use stock photos of people pointing at screens
- ❌ Avoid centre-aligning body text longer than 2 lines

这就是其结构。现在，看看一个实际的输出是什么样的——由 Branding5 为 Oscar Stories 生成，这是一个由 AI 驱动的儿童睡前故事平台，其原型为“小丑”（The Jester）。

YAML front matter — 机器可读的层面

---
name: 'Oscar Stories'
website: 'https://www.oscarstories.com'
archetype: 'The Jester'
positioning_statement: >
  For parents who want to transform bedtime into a joyful adventure,
  Oscar Stories uses smart AI to craft personalized tales where your
  child is the star.
usp: >
  Instantly crafts unique, AI-powered tales where your child is the
  playful hero, making bedtime magical, easier for parents, and
  inspiring imagination and values every night.
voice:
  tone: 'Friendly, imaginative, and encouraging...'
  personality: 'Playful, imaginative, nurturing, innovative, and trustworthy.'
  promise: 'Make bedtime a magical, bonding time...'
values:
  - 'Joyful Connection'
  - 'Trustworthy Innovation'
  - 'Nurturing Education'
typography:
  primary_font: 'Nunito Sans'
  secondary_font: 'Lora'
colors:
  primary: '#5e219c' # Midnight Plum
  darker: '#332145'
---

文件的其余部分包含什么

在 YAML front matter 之下，完整的文件——超过 14,000 字——继续包含 AI 做出符合品牌决策所需的一切：

品牌叙事： 定位声明、使命、愿景、USP，以及“我们为什么这样做”的故事
原型深入分析： 小丑的关键特质、核心策略、潜在陷阱和示例品牌（Ben & Jerry's、M&M's、Old Spice）
视觉识别： 完整的色彩系统，包含十六进制、CMYK、HSL 值和悬停状态；带有字重和使用规则的排版层级
理想客户画像： 完整的角色——“有意识的现代父母”——包含人口统计学、心理统计学、痛点、目标和偏好渠道
SWOT 分析： 优势、劣势、机会、威胁，以及整体战略评估
营销文案： 8 个以小丑语调撰写的标题，5 个带有紧迫感策略的 CTA，以及完整的 PAS 着陆页文案
内容策略： 包含具体标题、渠道和目标的 Hero/Hub/Hygiene 内容计划
营销活动： 映射到 AIDA 框架的认知、兴趣和欲望活动

一位从未见过 Oscar Stories 团队的开发人员，可以将此文件放入 Cursor，请求一个着陆页，并获得与品牌风格相符的文案—— playful, imaginative, never preachy（俏皮、富有想象力，从不说教）——并搭配正确的紫色调和 Nunito Sans 标题。无需简报。无需反复沟通。

这就是机器可读的品牌指南在实践中的样子。不是 PDF。而是一个文件，你团队使用的每个 AI 工具都可以阅读、理解并以此进行构建。

为什么现在这很重要

三种力量的汇聚使得机器可读的品牌指南变得紧迫而非可选项：

1. AI 工具现在撰写大部分代码和文案

Cursor、GitHub Copilot、Claude、v0、Bolt、Lovable——在 AI 辅助下，开发人员和营销人员的发布速度比以往任何时候都快。但这些工具对你的品牌一无所知，除非你告知它们。每次会话、每个提示，你都在重复解释你的调色板。这不是工作流——这是速度的代价。

你的代码仓库中一个简单的 brand-guidelines.md 可以永久消除这种代价。

2. Google 正在将 design-md 推向标准

当 Google 通过 Stitch 这样的产品发布格式规范时，生态系统会引起关注。Figma 插件、VS Code 扩展和 AI 组件生成器已经开始在项目根目录查找 DESIGN.md。今天就正确地配置你的文件，意味着未来的工具将能正常工作——无需迁移，无需返工。

3. AI 速度下的品牌一致性需要机器可读的规则

如果你的团队每月生成 50 篇博客文章，每周生成 20 种广告变体，每个冲刺周期发布一个新着陆页，那么 Google Drive 中的 PDF 是毫无用处的。品牌规则需要存在于生成发生的地方——在代码仓库中，在提示上下文中，在工具的内存中。

PDF 与 brand-guidelines.md：并排比较

维度	品牌 PDF	`brand-guidelines.md`
AI 可读性	❌ 需要 OCR；失去结构	✅ 可被所有 LLM 原生解析
存储位置	❌ 存在于 Drive/Notion/Dropbox	✅ 与代码一起进行版本控制
始终最新	❌ 手动更新，版本混淆	✅ `git diff` 精确显示更改
上手速度	⏱ 30+ 分钟阅读和吸收	⏱ 5 分钟浏览；AI 即时使用
自动执行	❌ 依赖人工审核	✅ AI 在每次生成时应用规则
人工可读性	✅ 漂亮，但内容密集	✅ 清晰的 Markdown，易于浏览
更新成本	💸 代理商费用或数小时设计	✍️ 在任何编辑器中编辑文本文件

PDF 对于利益相关者演示来说并未消亡。但对于日常执行——即 AI 工具进行生成的地方——纯文本的优势是决定性的。

如何将 brand-guidelines.md 与 Google Stitch 配合使用

Google Stitch 读取你的 brand-guidelines.md 并用它来约束其 UI 生成。它不会生成通用的 Material 组件，而是输出与你的颜色系统、排版、间距和组件约定相匹配的 UI。

工作流程分为三步：

上传或放置文件。 将 brand-guidelines.md 放入你的项目根目录，或直接在 Stitch 界面中上传。
自然地发出提示。 提出你的需求：“生成一个包含三个层级并突出显示热门计划的定价部分。”
获得符合品牌的输出。 Stitch 会自动应用你的颜色、类型层级、按钮样式和间距。无需对基本内容进行设计审查。

结果不仅更接近你的品牌——而且发布速度更快，因为你跳过了通常会耗费整个下午的修正环节。

与 Cursor、Copilot 和 AI 编码工具配合使用

将 DESIGN.md（或 brand-guidelines.md）放入你的代码仓库根目录，并在你的提示中引用它：

Cursor：

@DESIGN.md Generate a hero section for the homepage.
Use the primary CTA style, heading typography, and colour system from the file.

GitHub Copilot（工作区模式）：

#file:DESIGN.md Build a testimonial card grid component
using the card guidelines and spacing system defined here.

Claude / ChatGPT（粘贴或附件文件）：

Here are my brand guidelines [attached: brand-guidelines.md].
Write three homepage headline options that match the brand voice
and speak to ICP 1 (Growth Marketing Manager).

v0 / Bolt / Lovable： 将 brand-guidelines.md 作为项目文件上传，或将相关部分粘贴到你的提示中。这些工具将把你的颜色、类型和组件规范应用于每次生成。

回报是：从未阅读品牌指南的开发人员，从他们的第一个提示开始就能生成符合品牌规范的代码。约束嵌入在工作流程中——而不是通过审查周期和 Slack 消息来强制执行。

超越视觉：为什么文件中的策略改变一切

大多数设计系统文件只停留在颜色和字体。Branding5 提供的 brand-guidelines.md 则深入得多——正是这种深度将 AI 输出从“看起来对”转变为“感觉对”。

品牌基础 告诉 AI 品牌做出这些选择的原因。当 AI 知道你是一个以非技术营销人员为目标的用户，它不仅会选择正确的按钮颜色——它还会撰写清晰自信而非夸张激动的文案。

理想客户画像 为 AI 提供了受众上下文，以生成相关的消息。针对营销副总裁的标题与针对增长营销经理的标题会非常不同。如果文件中没有 ICP，AI 就会猜测。有了它们，AI 就能精准定位。

品牌语调和语气指南 附带具体示例（好与坏）是提升文案质量的单一最高杠杆部分。一个写得好的“做/不做”示例能比一百个抽象的语气描述更好地教导 AI。

做与不做 作为硬性约束。“在一个组件中绝不能使用超过 3 种颜色”和“每个部分始终包含一个 CTA”是 AI 可以每次都按字面意义遵循的规则。没有歧义，没有偏差。

Branding5 如何生成你的文件

在 Branding5 中完成你的品牌分析后，你的 brand-guidelines.md 就可以从仪表板下载了。以下是幕后发生的事情：

你的品牌策略为文件提供内容。 定位、原型、ICP、竞争对手分析、语调——你在 Branding5 中构建的一切都直接流入结构化的 Markdown 输出。
视觉规范源自你的定位。 颜色、排版和组件约定是根据你的品牌个性生成的——而不是从通用模板中提取。
输出遵循 design-md 规范。 Stitch 和兼容工具能原生解析它。无需转换，无需重新格式化。
即刻可用。 将它放入你的代码仓库，附加到你的 AI 工具，或与你的团队分享。一个文件，所有工具，从第一天开始。

你在 Branding5 中花费的 30 分钟将产生：

一份面向你的利益相关者和投资者的战略 PDF
一套面向你的营销团队的消息框架
一份面向你的工程和设计团队未来所有 AI 工具的 brand-guidelines.md

无需文案撰写。无需手动格式化。无需 Markdown 专业知识。

开始使用：五分钟清单

已经有了品牌策略？以下是如何在五分钟内从零开始建立一个 AI 准备就绪的品牌系统：

生成你的文件。 在 Branding5 中运行你的品牌分析并从你的仪表板下载 brand-guidelines.md。
将其放入你的代码仓库根目录。 如果你的团队偏好开发者约定，将其命名为 DESIGN.md，或者保持 brand-guidelines.md 以求清晰。
告知你的团队。 分享一句话消息：“我们的品牌指南现在在项目根目录的 DESIGN.md 中。在每个 AI 提示中引用它。”
在每个 AI 会话中引用它。 在 Cursor 中使用 @DESIGN.md，在 Claude 或 ChatGPT 中附加它，在 v0 或 Bolt 中上传它。
保持更新。 当你的品牌发展时，更新文件并提交。Git 会跟踪更改。每个工具都会立即获取。

就这样。没有入职培训文档。没有设计审查瓶颈。Slack 中再也没有“我们的品牌颜色是什么？”这样的问题。

总结

AI 工具正在编写你的代码，生成你的文案，并搭建你的组件。唯一的问题是它们是否在遵循品牌规范——或者随意发挥。

一个 brand-guidelines.md 可以一次性回答这个问题。然后，在每一次生成中，通过每一个工具，对你团队中的每一个人，它都会自动再次回答。

Google 的 Stitch 格式正在使机器可读的品牌指南成为标准。DESIGN.md 正在成为开发人员期望在项目根目录找到的文件。现在就采用它的品牌将更快地发布，保持更高的一致性，并减少修正 AI 输出偏差所浪费的时间。

你的品牌策略已经在 Branding5 中。你的 brand-guidelines.md 只需点击一下即可获得。

常见问题

DESIGN.md 和 brand-guidelines.md 有什么区别？

它们是相同的格式。DESIGN.md 是在开发者社区中流行的简称——它与 README.md 的命名约定相呼应。brand-guidelines.md 更具描述性，表明该文件包含品牌策略（定位、语调、ICP），而不仅仅是视觉规范。使用你的团队偏好的任何名称；AI 工具对两者解析方式相同。

我需要了解 Markdown 才能创建或编辑文件吗？

不需要。Branding5 会根据你的品牌分析自动生成文件。如果你以后想手动编辑，Markdown 只是带有简单格式的纯文本（# 表示标题，- 表示列表，** 表示加粗）。任何人都能在两分钟内学会基本知识。

哪些 AI 工具支持 design-md / DESIGN.md？

Google Stitch 原生支持读取。当你引用或附加文件时，Cursor、GitHub Copilot、Windsurf、Claude、ChatGPT、v0、Bolt 和 Lovable 都能与它配合使用。因为它只是纯 Markdown，任何由 LLM 驱动的工具都可以解析并遵循它——无需插件或集成。

我的 brand-guidelines.md 应该有多详细？

详细到足以消除歧义。至少应包括你的调色板及使用规则、排版规范、按钮/卡片/表单约定，以及带有示例的语调指南。你的“做与不做”越具体，AI 输出的一致性就越高。Branding5 默认生成一个全面的文件——你总是可以删减不需要的部分。

我的品牌发展时，如何保持文件同步？

像对待任何其他源文件一样处理它：编辑、提交、推送。因为它存在于 Git 中，你的团队可以准确地看到何时发生了什么变化。如果你在 Branding5 中重新运行品牌分析，你可以下载更新版本并替换旧文件。没有代理商费用，没有长达一个月的修订周期。

我可以将 brand-guidelines.md 用于非代码任务，例如撰写博客文章或广告文案吗？

绝对可以。在提示 Claude、ChatGPT 或任何写作助手时，附上文件（或粘贴品牌语调和 ICP 部分）。语调指南、语调示例和受众详情都是专门设计用来改进 AI 生成文案的——而不仅仅是代码。

获取你的 brand-guidelines.md

在 Branding5 中运行你的品牌分析，并下载一个符合 design-md 规范的 brand-guidelines.md (DESIGN.md) —— 准备好用于 Google Stitch、Cursor、Copilot 和你的整个 AI 工具栈。

生成你的 brand-guidelines.md →