brandkit-build

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Brand Kit bauen

构建品牌工具包

Schritt 3 von 4. Eingabe ist die Rohfassung aus

brandkit-interview

, Ausgabe ein Ordner, mit dem sich arbeiten lässt.

第3步（共4步）。输入为

brandkit-interview

生成的初稿，输出为一个可直接使用的文件夹。

Das eigentliche Problem

核心问题

Fast jeder Styleguide scheitert nicht am Inhalt, sondern an der Länge. Neunhundert Zeilen liest niemand, auch kein Sprachmodell mit Kontextfenster: Es liest sie, gewichtet aber die zwanzigste Regel wie die erste und trifft dann trotzdem Durchschnittsentscheidungen.

Ein Kit funktioniert, wenn drei Dinge stimmen:

Die verbindlichen Regeln sind kurz genug, dass sie wirklich gelesen werden.
Farben und Maße liegen ausführbar vor, nicht nur als Beschreibung.
Die Regeln greifen von selbst, ohne dass jemand daran denken muss.

Punkt 3 ist der, den alle vergessen. Er ist ein

CLAUDE.md

im Ordner.

几乎所有风格指南的失败都不在于内容，而在于篇幅。没人会去读九百行的内容，哪怕是有上下文窗口的语言模型：它会读取，但会将第二十条规则与第一条同等看待，最终做出的仍是折衷决策。

一个工具包要发挥作用，必须满足三个条件：

具有约束力的规则足够简短，确保真的会被阅读。
颜色和尺寸以可直接执行的形式呈现，而非仅作为描述。
规则自动生效，无需刻意记忆。

第3点是所有人都会忽略的部分。它就是文件夹中的

CLAUDE.md

。

Was entsteht

生成内容

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

Lege den Ordner dort an, wo er dauerhaft bleibt, und mache ihn zu einem Git-Repository. Ein Brand Kit ohne Versionsgeschichte verliert man.

Brand/
├── CLAUDE.md            工作规则，在此文件夹内自动生效
├── BRAND.md             具有约束力的精简版，核心文件
├── REFERENCE.md         访谈生成的初稿，作为参考资料
├── README.md            文件说明，以及面向外部的启动话术
├── brand-helmet.html    包含颜色和字体令牌的现成CSS代码块
├── brand-props.json     可在设计编辑器中切换的强调色
├── wordmark.svg         标准版文字标志
├── mark.svg             适用于小空间的方形图形标志
└── beispiel/            包含所有组件的可运行参考示例

请将该文件夹放置在长期保存的位置，并将其创建为Git仓库。没有版本历史的品牌工具包很容易丢失。

BRAND.md, die Kurzfassung

BRAND.md：精简版

Das ist die wichtigste Datei. Zielgröße: unter 250 Zeilen. Wird sie länger, wandert Material nach

REFERENCE.md

Bewährter Aufbau:

Marke in einem Satz plus Persönlichkeit in einer Zeile
Tokens als Tabelle: Variablenname, Hexwert, Rolle. Dazu die Flächenverteilung in Prozent
Typografie: die zwei bis drei Rollen und eine Größenskala je Format
Raster und Abstände: Zahlenreihe, Seitenränder, Radien, Rahmen, Schatten
Wordmark: welche Datei wann, Mindestgröße, Schutzraum, Verbote
Bausteine: die wiederkehrenden Elemente mit konkreten Maßen
Formate: Pixelmaße je Zweck
Text: Sprache, Ansprache, ein gutes und ein schlechtes Beispiel, die Verbotsliste
Nicht benutzen: die harte Verbotsliste, visuell
Prüfliste vor dem Abgeben: zehn Fragen, die sich mit ja oder nein beantworten lassen

Zwei Dinge machen den Unterschied zwischen einem Kit, das wirkt, und einem, das dekoriert:

Prozentangaben statt Adjektive. „Akzentfarbe sparsam einsetzen" ist nicht prüfbar. „Akzentfarbe unter 10 Prozent der Fläche, nie als Sektionshintergrund, nie als Verlauf" ist es.

Konkrete Maße statt Prinzipien. „Großzügige Abstände" hilft niemandem. „Sektionsabstand 96 bis 128 Pixel auf Desktop, 56 bis 72 auf Mobil" schon.

Schreibe die Verbotslisten ausführlich. Sie sind der Teil, der Durchschnitt verhindert, und sie sind billig zu befolgen.

这是最重要的文件。目标篇幅：少于250行。如果篇幅过长，相关内容需移至

REFERENCE.md

。

经过验证的结构：

一句话品牌定义 加一行品牌个性描述
令牌表格：变量名、十六进制值、用途。附加占比百分比
排版：2-3种字体角色，以及各格式对应的尺寸层级
网格与间距：数值序列、页边距、圆角、边框、阴影
Wordmark：不同场景使用的文件、最小尺寸、留白规范、禁用场景
组件：重复使用的元素及具体尺寸
格式规范：不同用途的像素尺寸
文案：语言风格、称呼方式、正反示例、禁用列表
禁用内容：明确的视觉禁用列表
交付前检查清单：10个可用是/否回答的问题

区分实用工具包与装饰性工具包的两个关键：

用百分比替代形容词。“谨慎使用强调色”无法验证。“强调色占比低于10%，不得用作区块背景，不得用于渐变”则可以。

用具体尺寸替代原则。“宽松间距”对任何人都没用。“桌面端区块间距96-128像素，移动端56-72像素”才有用。

详细撰写禁用列表。它们是避免折衷决策的关键，且遵循成本极低。

CLAUDE.md, der Mechanismus

CLAUDE.md：机制保障

Ohne diese Datei muss jemand das Kit bei jeder Sitzung von Hand erwähnen. Mit ihr gelten die Regeln, sobald im Ordner gearbeitet wird.

Sie ist kurz und regelt nur, wie mit den anderen Dateien umzugehen ist: welche Datei bei Widerspruch gewinnt, dass nur definierte Tokens benutzt werden, wo die Referenzbeispiele liegen, und dass Änderungen am Kit selbst vorher abzustimmen sind. Eine Vorlage liegt in

assets/CLAUDE.md.template

Für Arbeit außerhalb des Ordners gehört ein Starter-Satz in die README, den man an den Anfang einer Sitzung kopiert, etwa:

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

Das Kit lädt sich nicht von allein. Sag das in der README ausdrücklich, sonst wundert sich die Person beim ersten Mal.

没有这个文件，每次会议都需要手动提及工具包。有了它，只要在该文件夹内工作，规则就会自动生效。

它篇幅简短，仅规定如何处理其他文件：出现冲突时以哪个文件为准、仅使用已定义的令牌、参考示例的位置、工具包自身的变更需提前确认。模板位于

assets/CLAUDE.md.template

。

对于文件夹外的工作，需在README中添加启动话术，可在会议开始时复制使用，例如：

请先阅读<路径>\BRAND.md并严格遵守。
参考画板：<路径>\beispiel\

工具包不会自动加载。请在README中明确说明这一点，否则用户第一次使用时会感到困惑。

Die ausführbaren Teile

可执行部分

brand-helmet.html enthält den Google-Fonts-Link und einen

:root

-Block mit allen Tokens als CSS-Variablen, dazu Grundstile und ein bis zwei Hilfsklassen für wiederkehrende Rollen (etwa

.lbl

für technische Labels,

.val

für Zahlen in Mono). Vorlage:

assets/brand-helmet.html.template

Der Sinn: Im Layout stehen danach nur noch

var(--...)

, keine rohen Hexwerte. Eine Farbänderung ist dann eine Zeile statt einer Suche über alle Dateien.

brand-props.json macht die Akzentfarbe in Design-Editoren umschaltbar. Vorsicht bei den Optionen: Bietest du dort funktionale Farben an (Warnung, Fehler), kann jemand den Markenakzent auf die Fehlerfarbe stellen, und positiv und negativ fallen zusammen. Entweder nur Markenfarben anbieten, oder in BRAND.md ausdrücklich schreiben, dass die Umschaltung ein Prüfwerkzeug ist und kein zweiter Markenakzent.

wordmark.svg und mark.svg baust du aus dem Schriftzug, nicht aus Symbolen. Verzichte auf Roboter, Gehirne, Platinen und Verlaufskugeln, außer die Marke verlangt sie ausdrücklich.

Ein Fallstrick, der später weh tut: Ein SVG mit

<text>

braucht die Schrift auf dem anzeigenden Gerät. Im Browser mit geladenem Google Font stimmt das, im Druck oder in Illustrator greift die Ersatzschrift. Schreibe in die README, dass die Wordmark in Pfade umgewandelt werden muss, sobald sie den Browser verlässt.

brand-helmet.html 包含Google Fonts链接和一个

:root

代码块，其中所有令牌以CSS变量形式存在，还包含基础样式和1-2个用于重复角色的辅助类（例如

.lbl

用于技术标签，

.val

用于等宽数字）。模板位于

assets/brand-helmet.html.template

。

作用：之后布局中只需使用

var(--...)

，无需直接使用十六进制值。修改颜色只需改动一行代码，而非在所有文件中搜索替换。

brand-props.json 可在设计编辑器中切换强调色。注意选项设置：如果提供功能色（警告、错误），有人可能会将品牌强调色设为错误色，导致正负标识混淆。要么仅提供品牌色，要么在BRAND.md中明确说明，切换功能是检查工具，而非第二个品牌强调色。

wordmark.svg和mark.svg 需基于文字标志创建，而非符号。除非品牌明确要求，否则避免使用机器人、大脑、电路板和渐变球体等元素。

一个后续会引发问题的陷阱：包含

<text>

的SVG需要显示设备上安装对应字体。在加载了Google Font的浏览器中没问题，但在打印或Illustrator中会使用替代字体。请在README中说明，当Wordmark脱离浏览器使用时，需将其转换为路径。

beispiel/, die Referenz

beispiel/：参考示例

Baue mindestens zwei lauffähige Beispielflächen, die alle Bausteine in den richtigen Maßen zeigen, typischerweise Desktop und Mobil. Das ist der Teil, der am meisten Arbeit macht und am meisten spart: Beim nächsten Mal wird kopiert statt neu erfunden.

Kennzeichne Beispieldaten klar als solche. Erfundene Zahlen aus einem Referenz-Artboard landen sonst auf einer echten Seite.

至少构建两个可运行的示例页面，完整展示所有组件的正确尺寸，通常为桌面端和移动端。这部分最耗时，但也最能节省后续工作：下次只需复制，无需重新设计。

请明确标记示例数据。参考画板中的虚构数据最终可能会出现在真实页面上。

Verdichten, nicht kürzen

浓缩而非删减

Beim Weg von der Rohfassung zu BRAND.md gilt:

Behalte jede Zahl, jeden Hexwert, jedes Maß, jede Verbotsliste.
Streiche Begründungen, Herleitungen, Wiederholungen und alles, was zweimal dasteht. Es bleibt in REFERENCE.md erhalten.
Verwandle Prosa in Tabellen. „Die Hauptüberschrift ist 52 Pixel groß und wird in der Display-Schrift gesetzt" wird eine Tabellenzeile.

Was in der Rohfassung offen blieb, bleibt auch hier offen. Schreibe hin, dass es offen ist. Erfinde keinen plausiblen Wert, um eine Lücke zu füllen: Er wird sonst wie eine Entscheidung behandelt, die nie jemand getroffen hat.

从初稿到BRAND.md的转换需遵循：

保留所有数字、十六进制值、尺寸、禁用列表。
删除理由、推导过程、重复内容以及所有重复出现的信息。这些内容会保留在REFERENCE.md中。
将散文转换为表格。“主标题为52像素，使用Display字体”应转换为表格行。

初稿中未明确的内容，此处也需保留未明确状态。请注明该内容未明确。不要为了填补空白而编造合理值：否则它会被当作已做出的决策，而实际上从未有人决定过。

Zum Schluss

最后一步

Gehe die Prüfliste, die du gerade geschrieben hast, einmal gegen die Referenz-Artboards durch. Wenn dein eigenes Beispiel deine eigene Prüfliste nicht besteht, stimmt eines von beiden nicht.

Berichte dann kurz: was entstanden ist, wo es liegt, wie lang BRAND.md geworden ist, und was noch offen blieb. Verweise auf

brandkit-publish

für das Bauen mit dem Kit.

用你刚编写的检查清单，对照参考画板逐一检查。如果你的示例无法通过自己的检查清单，说明其中一项存在问题。

然后简要汇报：生成了什么、存放位置、BRAND.md的篇幅、以及仍未明确的内容。如需基于该工具包进行构建，请参考

brandkit-publish

。