brandkit-build

构建品牌套件

第 3 步，共 4 步。输入是 brandkit-interview 生成的初稿，输出是 一个可供使用的文件夹。

真正的问题

几乎所有风格指南失败的原因都不是内容，而是篇幅。九百 行没人会读，即使是上下文窗口再大的语言模型也不会：它会读， 但会把第二十条规则和第一条看得一样重要，最后还是做出 平庸的决策。

套件要发挥作用，必须满足三点：

1. 有约束力的规则必须足够简短，让人真正读完。
2. 颜色和尺寸必须以可执行的形式提供，而不只是描述。
3. 规则必须自动生效，不需要任何人特意记着去执行。

第 3 点是所有人都会忘记的一点。它就是文件夹中的 CLAUDE.md。

会生成什么

Brand/
├── CLAUDE.md            Arbeitsregeln, greifen automatisch in diesem Ordner
├── BRAND.md             die verbindliche Kurzfassung, das Herzstück
├── REFERENCE.md         die Rohfassung aus dem Interview, als Nachschlagewerk
├── README.md            was wo liegt, plus Starter-Satz für außerhalb
├── brand-helmet.html    Farb- und Schrift-Tokens als fertiger CSS-Block
├── brand-props.json     Akzentfarbe im Design-Editor umschaltbar
├── wordmark.svg         Schriftzug, Standardfall
├── mark.svg             quadratische Bildmarke für kleine Flächen
└── beispiel/            lauffähige Referenz mit allen Bausteinen

将文件夹放在会长期保留的位置，并将其设为 Git 仓库。没有版本历史的品牌套件很容易丢失。

BRAND.md，精简版

这是最重要的文件。目标长度：少于 250 行。如果超过这个长度， 就把内容移到 REFERENCE.md。

经过验证的结构：

1. 一句话概括品牌，再用一行描述个性
2. 设计令牌表格：变量名、十六进制值、用途。再加上 各色块所占面积的百分比
3. 字体排印：两到三种用途角色，以及每种格式对应的字号范围
4. 网格和间距：数值序列、页边距、圆角、边框、阴影
5. 字标：何时使用哪个文件、最小尺寸、安全空间、禁用规则
6. 组件：常用元素及其具体尺寸
7. 格式：各用途对应的像素尺寸
8. 文案：语言、称谓方式、一则正面示例和一则负面示例，以及 禁用词清单
9. 禁止使用：明确的禁用清单，以视觉形式呈现
10. 交付前检查清单：十个可以用“是”或“否” 作答的问题

有两点决定了套件是能发挥作用，还是只作装饰：

用百分比，而不是形容词。“少量使用强调色”无法检查。“强调色占面积不到 10%，绝不作为分区背景， 也不使用渐变”则可以检查。

给出具体尺寸，而不是原则。“间距宽裕”对任何人都没有帮助。 “桌面端分区间距为 96 至 128 像素，移动端为 56 至 72 像素”才有用。

把禁用清单写详细。它们能避免流于平庸，而且遵守起来很简单。

CLAUDE.md，运行机制

没有这个文件，每次工作时都得有人手动提起这套规范。有了 它，只要在文件夹中工作，规则就会生效。

它很简短，只规定如何使用其他文件： 出现冲突时以哪个文件为准、只能使用已定义的设计令牌、 参考示例放在哪里，以及修改套件本身前必须先商定。模板位于 assets/CLAUDE.md.template。

对于文件夹之外的工作，应在 README 中加入一段启动语， 供人复制到会话开头，例如：

Lies zuerst <PFAD>\BRAND.md und halte dich exakt daran.
Referenz-Artboards: <PFAD>\beispiel\

套件不会自动加载。务必在 README 中明确说明这一点，否则 用户第一次使用时会感到困惑。

可执行部分

brand-helmet.html 包含 Google Fonts 链接和一个 :root 块，其中列出所有令牌作为 CSS 变量，此外还有基础样式和一两个用于重复角色的辅助类（例如，用于技术标签的 .lbl、用于 Mono 数字的 .val）。模板：assets/brand-helmet.html.template。

这样做的意义是：布局中之后只需使用 var(--...)，不再出现原始十六进制值。修改颜色只需改一行，而不用搜索所有文件。

brand-props.json 让设计编辑器可以切换强调色。 选项要谨慎：如果你在其中提供功能色（警告、错误），有人可能会将品牌强调色设为错误色，导致正负状态混为一谈。要么只提供品牌色，要么在 BRAND.md 中明确说明，切换是一种检查工具，而不是第二种品牌强调色。

wordmark.svg 和 mark.svg 应从字标制作，而不是从图标制作。 除非品牌明确要求，否则不要使用机器人、大脑、电路板和渐变球。

有个容易踩的坑，之后会带来麻烦：带有 <text> 的 SVG 需要显示设备上安装相应字体。在加载了 Google Font 的浏览器中显示正常，但打印时或在 Illustrator 中会使用替代字体。在 README 中说明，字标离开浏览器后必须转换为路径。

beispiel/，参考示例

至少构建两个可运行的示例界面，以正确尺寸展示所有组件，通常分别为桌面端和移动端。这部分最费工夫，也最能节省时间：下次可以直接复制，而不用从头设计。

明确标注示例数据。否则，参考画板中的虚构数字可能会出现在真实页面上。

精简，而非缩短

将原始草稿整理为 BRAND.md 时：

• 保留每个数字、每个十六进制值、每个尺寸和每份禁用清单。
• 删去理由、推导、重复内容以及所有出现两次的内容。这些内容会保留在 REFERENCE.md 中。
• 将文字说明转换为表格。“主标题大小为 52 像素，并使用 Display 字体”应改为表格中的一行。

原始草稿中尚未明确的内容，在这里也应保持未明确。请注明尚未明确。不要为了填补空白而编造一个看似合理的值，否则它会被当作从未有人作出的决定。

最后

用你刚刚写好的检查清单，对照参考画板检查一遍。如果你自己的示例未能通过自己的检查清单，那么两者中必有一处有问题。

然后简要报告：完成了什么、文件放在哪里、BRAND.md 有多长，以及还有哪些内容尚未明确。提及 brandkit-publish，以便了解如何使用 Kit 构建。