Markdown-Ausgabe

AI-translated from English; not yet reviewed by a fluent editor.

# Eine vom Eigentümer genehmigte DESIGN.md für Claude Code erstellen

> Erstellen Sie aus genehmigten Markenentscheidungen eine visuelle Spezifikation, nutzen Sie sie für zwei kleine Änderungen mit Claude Code und prüfen Sie Unterschiede und gerenderte Ergebnisse.

By BIG CHANGE Editorial

Published: 2026-10-20T01:05:55.739Z
Updated: 2026-10-20T01:05:55.739Z
Canonical: https://bigchange.ai/blog/claude-code-owner-approved-design-md-guide

![Conceptual charcoal illustration of a small visual reference clipped to a wall rail above two separate framed layout proofs.](https://bigchange.ai/api/media/file/owner-approved-design-reference-two-proofs-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

Ein KI-Programmieragent kann einer visuellen Referenz nur so gut folgen, wie deren Entscheidungen festgelegt sind. Wenn Ihnen das Projekt gehört und bereits genehmigte Markenregeln vorliegen, können Sie diese in einer überprüfbaren `DESIGN.md` zusammenführen und Claude Code dann für zwei kleine Änderungen nutzen, die Sie selbst prüfen. Das Ergebnis ist Ihre genehmigte Spezifikation. Die beiden Änderungen prüfen ihren Nutzen für genau diese Arbeitsergebnisse; sie belegen nicht, wie eine spätere Änderung ausfallen wird.

Dies ist ein dokumentationsgestütztes Verfahren. BIG CHANGE hat am 20. Oktober 2026 eine auf einen festen Revisionsstand gesetzte Sammlung von Designdateien und die Claude Code-Handbücher von Anthropic geprüft. Wir haben Claude Code nicht ausgeführt, die beiden Arbeitsergebnisse nicht bearbeitet oder gerendert und weder Kosten noch Designqualität gemessen.

## Die wesentliche Veränderung

- **Was sich ändert:** Der Eigentümer kann aus genehmigten Entscheidungen eine versionierte visuelle Spezifikation erstellen und Claude Code vor einer begrenzten Änderung genau diese Datei geben.
- **Warum das wichtig ist:** Eine einzige geprüfte Quelle stellt die Farb-, Schrift- und Layoutregeln zum Vergleich mit zwei tatsächlichen Revisionen bereit. Der Eigentümer entscheidet, ob das jeweilige Ergebnis akzeptabel ist.
- **Worauf zu achten ist:** Die Datei muss vor jeder Änderung vollständig gelesen werden. Ihre Anwesenheit im Projekt, die Nennung eines Pfads oder Claudes Zusicherung belegen nicht, dass sie geladen oder befolgt wurde.

## Vorbereitung

Sie benötigen ein eigenes Projekt, die Erlaubnis zur Bearbeitung, zwei kleine vorhandene Arbeitsergebnisse, die Sie rendern können, sowie eine wiederherstellbare Arbeitskopie oder einen Versionskontrollstand. Das können zwei Seiten oder eine Seite und eine Präsentation sein, sofern Sie den tatsächlichen Bearbeitungs- und Renderingablauf jedes Projekts kennen. Wählen Sie für jedes eine begrenzte visuelle Änderung. Halten Sie die bisherigen Texte, Links und funktionierenden Interaktionen zum Vergleich bereit.

Sammeln Sie die vom Eigentümer genehmigten Farbwerte **und ihre Funktionen**, lizenzierte oder zulässige Schriftarten samt Ersatzschriften, Regeln für Logos und Bilder, Zielgruppe, Abmessungen und Anforderungen an die Barrierefreiheit. Nutzen Sie den tatsächlichen Genehmigungsnachweis oder lassen Sie fehlende Entscheidungen vom Eigentümer klären. Eine öffentliche Unternehmenswebsite oder die Designanalyse Dritter erteilt keine Nutzungsrechte an Werten oder Materialien für Ihr Projekt. Die Genehmigung eines Materials erlaubt auch nicht automatisch seine Übermittlung an einen Modellanbieter.

Richten Sie [Claude Code](https://code.claude.com/docs/en/quickstart) mit einem geeigneten Konto oder Anbieter ein und prüfen Sie die [Datennutzungsbedingungen](https://code.claude.com/docs/en/data-usage) und [Werkzeugberechtigungen](https://code.claude.com/docs/en/permissions) des Kontos, bevor Sie privaten Code, Texte oder Materialien offenlegen. Auch ein lokal gespeichertes Projekt kann Inhalte an einen Modelldienst senden. Prüfen Sie, wer die Materialien sehen darf, welche Werkzeuge Dateien lesen oder ändern dürfen und ob Sie jedes Element übermitteln dürfen. Die [Kostenhinweise](https://code.claude.com/docs/en/costs) hängen von Konto und Anbieter ab; dieser Leitfaden kann Ihrer Sitzung keinen Festpreis zuweisen.

Die [auf einen festen Stand gesetzte Awesome DESIGN.md-Sammlung](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) kann freiwillig als Anregung für Dateibereiche dienen. Sie analysiert öffentliche Websites; sie ist kein vom Eigentümer genehmigtes Markenhandbuch. Sie können die Datei direkt aus Ihren genehmigten Entscheidungen erstellen. Wenn Sie Text aus dem Repository übernehmen, behalten Sie dessen [MIT-Urheberrechts- und Erlaubnishinweis](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) bei. Dieser Hinweis gewährt keine Rechte an Marken, Schriftdateien oder Bildern einer fremden Website.

## Die vom Eigentümer genehmigte Referenz erstellen

1. Erstellen Sie `brand-reference/DESIGN.md` im eigenen Projekt. Füllen Sie dieses minimale Schema anhand des Genehmigungsnachweises aus. Der Text in eckigen Klammern benennt Informationen, die der Eigentümer liefern muss; er schlägt keine Marke vor. Lassen Sie einen Eintrag als `UNRESOLVED` gekennzeichnet, bis der Eigentümer entschieden hat. Bitten Sie Claude nicht, fehlende Werte zu erfinden.

```markdown
# Visual specification

Owner: [owner or approving role]
Approved version/date: [version and approval date, or UNRESOLVED]
Audience and artifact purpose: [owner-approved description]
Approval evidence: [internal record or location, without private data in a shared copy]

## Color roles and values
- Background: [approved value and color format, or UNRESOLVED]
- Text: [approved value and color format, or UNRESOLVED]
- Primary action: [approved value and color format, or UNRESOLVED]
- Link, border and status roles: [each approved value, or UNRESOLVED]

## Typography and scale
- Heading family and permitted fallback: [approved names, or UNRESOLVED]
- Body family and permitted fallback: [approved names, or UNRESOLVED]
- Heading/body sizes, weights and line heights: [approved scale, or UNRESOLVED]
- Font license or use restriction: [approved terms, or UNRESOLVED]

## Spacing and layout
- Spacing scale, content width and grid: [approved values, or UNRESOLVED]
- Target artifact dimensions: [approved sizes, or UNRESOLVED]

## Components and states
- Buttons, links, inputs and navigation: [approved appearance and behavior]
- Hover, focus, disabled and error states: [approved rules, or UNRESOLVED]

## Responsive and accessibility rules
- Desktop/phone behavior and breakpoints: [approved rules, or UNRESOLVED]
- Contrast, readable type, focus order and touch use: [approved requirements]

## Assets and forbidden substitutions
- Permitted logo/image assets and usage: [approved paths and permissions]
- Do not substitute: [owner-approved prohibited colors, fonts, marks or patterns]

## Owner approval and changes
- Approved by: [person or role and date, or UNRESOLVED]
- Version: [version]
- Changelog: [date, change, approver]
- Unresolved decisions: [list, or "none" after owner review]
```

2. Prüfen Sie jede ausgefüllte Zeile gegen die ursprünglichen Entscheidungen des Eigentümers, einschließlich der Nutzungsrechte für Schriftarten und Bilder. Klären Sie mit ihm Konflikte zwischen alten Projektstilen und aktuell genehmigten Regeln. Lassen Sie genau diese Datei genehmigen und erfassen Sie ihre Version. Halten Sie jede Änderung zurück, die von einem ungeklärten Wert abhängt. Sichern Sie die genehmigte Datei und beide Ausgangsergebnisse in der Versionskontrolle oder einer anderen wiederherstellbaren Kopie.

## Die Datei für zwei begrenzte Änderungen verwenden

3. Starten Sie im eigenen Projekt eine Claude Code-Sitzung mit dem geprüften Konto und den geprüften Berechtigungen. Geben Sie die genauen Pfade zu `brand-reference/DESIGN.md` und zum ersten Arbeitsergebnis an. Bitten Sie Claude zunächst, die Referenz **vollständig** sowie das Arbeitsergebnis zu lesen und vor jeder Bearbeitung anzuhalten. Prüfen Sie das tatsächliche Datei- oder Werkzeugleseergebnis auf richtigen Pfad und vollständigen Inhalt. Ein verweigerter Lesezugriff, ein abgeschnittenes Ergebnis, die bloße Pfadnennung oder eine mündliche Zusammenfassung reichen nicht aus. Anthropic dokumentiert [Projektanweisungsdateien](https://code.claude.com/docs/en/memory) als separate Einrichtungsoption; nehmen Sie nicht an, dass eine beliebige `DESIGN.md` automatisch entdeckt wird, und verlassen Sie sich nicht darauf, dass ein `@` -Verweis in allen Versionen gleich funktioniert.
4. Sobald der vollständige Lesevorgang sichtbar ist, bitten Sie um genau die gewählte visuelle Änderung am ersten Arbeitsergebnis, ausschließlich nach den genehmigten Regeln. Begrenzen Sie die betroffenen Dateien; erhalten Sie Texte, Links, Bedienelemente und unbeteiligten Code. Lassen Sie sich den vorgeschlagenen Diff und das etablierte Renderingverfahren des Projekts zeigen. Prüfen Sie jede geänderte Datei vor der Annahme. Lehnen Sie nicht genehmigte Farben, Schriftarten, Materialien, Abhängigkeiten oder zusätzliche Änderungen ab.
5. Rendern Sie das erste Arbeitsergebnis mit seinem **tatsächlichen Projektablauf**. Vergleichen Sie die Ausgabe mit der genehmigten Datei und dem Ausgangsergebnis in zum Projekt passenden Desktop- und Handygrößen. Prüfen Sie Tokenwerte in geänderten Dateien, lesbaren Kontrast, Überschriften- und Schrifthierarchie, abgeschnittene Inhalte oder horizontalen Überlauf, sichtbaren Fokus, Tastaturbedienung und betroffene Interaktionen sowie unveränderte Texte und Links. Erfassen Sie Referenzversion, Ergebnisrevision, Prüfungen und Korrekturen. Eine Beschreibung eines Renderings ist nicht das gerenderte Ergebnis.
6. Nennen Sie beim zweiten Arbeitsergebnis erneut den genauen Pfad und `brand-reference/DESIGN.md`. Fordern Sie **vor** seiner Änderung einen erneuten vollständigen Lesevorgang an und prüfen Sie dessen Werkzeugergebnis. Fordern Sie dann eine begrenzte Änderung an, prüfen Sie den Diff, rendern Sie mit dem eigenen Ablauf des zweiten Arbeitsergebnisses und wiederholen Sie dieselben Prüfungen. Vergleichen Sie beide Revisionen mit **derselben genehmigten Dateiversion**. Erfassen Sie jede Regel als befolgt, verfehlt oder als Fall für eine vom Eigentümer genehmigte Revision. Korrigieren Sie Abweichungen und prüfen Sie beide Arbeitsergebnisse erneut, wenn sich die Referenz ändert.

Fertig sind Sie mit der genehmigten, versionierten Spezifikation, zwei geprüften und gerenderten Revisionen und einer kurzen Aufzeichnung darüber, welche Regeln eingehalten oder verfehlt wurden. Bewahren Sie die Originalrevisionen zur Wiederherstellung auf. Schlägt ein Lesevorgang fehl, prüfen Sie vor einem Änderungsauftrag den genauen Pfad, die Berechtigungen sowie Dateigröße oder Kürzungen. Widerspricht die Spezifikation den Projektstilen oder der Barrierefreiheit, klären Sie die Entscheidung des Eigentümers und begrenzen Sie die Änderung. Kann ein Arbeitsergebnis nicht gerendert oder eine Interaktion nicht geprüft werden, lassen Sie die Änderung unangenommen, bis die Prüfung möglich ist. Künftige Markenänderungen verlangen eine bewusste erneute Prüfung früherer Ausgaben.

Für die andere Aufgabe, eine Community-Datei als Referenz für eine einzelne Seite einzusetzen, lesen Sie [unseren Leitfaden zur DESIGN.md mit festem Revisionsstand](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide). Hier besteht die Arbeit zuerst darin, Ihre eigene Spezifikation zu erstellen und genehmigen zu lassen.

## Quellen und weiterführende Informationen

- Die [Awesome DESIGN.md-README mit festem Revisionsstand](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) bietet Beispielbereiche und bezeichnet ihre Dateien als unverändert bereitgestellte Analysen öffentlicher Websites. Ihre Aussagen zur Ausgabequalität sind kein hier getestetes Ergebnis. Die [MIT-Lizenz](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) gilt für kopiertes Repository-Material, nicht für Identität oder Materialien Dritter.
- Anthropics [Schnellstart](https://code.claude.com/docs/en/quickstart) behandelt Konto- und Projekteinrichtung. Die [üblichen Arbeitsabläufe](https://code.claude.com/docs/en/common-workflows) und das [Handbuch zum Projektgedächtnis](https://code.claude.com/docs/en/memory) beschreiben Datei- und Anweisungsabläufe; keines belegt, dass diese eigenständige Datei in einer Lesersitzung vollständig gelesen wurde.
- Anthropics Handbücher zu [Berechtigungen](https://code.claude.com/docs/en/permissions), [Datennutzung](https://code.claude.com/docs/en/data-usage) und [Kosten](https://code.claude.com/docs/en/costs) erläutern Kontrollen und kontospezifische Bedingungen. Sie belegen für diesen Leitfaden keine beobachtete Bearbeitung, ausschließlich lokale Verarbeitung, feste Rechnung oder Qualitätsverbesserung.

## Sources

- [Awesome DESIGN.md-README mit festem Revisionsstand](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Community-Sammlung mit festem Revisionsstand und Beispielbereichen für Designreferenzen. Sie analysiert öffentliche Websites und liefert Dateien ohne Gewähr; Werbeaussagen zu Ausgabequalität und Sofortnutzung belegen weder Ergebnisse dieses Eigentümers noch seine Genehmigung der dargestellten Marken. Vollständige private Quellenkopie und unabhängige Prüfung befinden sich im genehmigten Aufnahmeunterlagenpaket.
- [Awesome DESIGN.md-MIT-Lizenz](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Der Urheberrechts- und Erlaubnishinweis des festgelegten Repository-Stands muss kopiertem Text oder wesentlichen Teilen beigefügt bleiben. Er gewährt für sich keine Rechte am Namen, Markenzeichen, Logo, an proprietären Schriftarten oder Bildern einer dargestellten Website.
- [Claude Code-Schnellstart](https://code.claude.com/docs/en/quickstart) — Offizielle Voraussetzungen für Konto/Anbieter, Anmeldung und Projekt. BIG CHANGE hat für diesen Leitfaden weder Installation noch Zugriff oder Claude-Sitzung getestet.
- [Übliche Claude Code-Arbeitsabläufe](https://code.claude.com/docs/en/common-workflows) — Offizielle Abläufe für Projektdateien und Änderungsprüfung. Der Leitfaden verlangt pro Arbeitsergebnis einen beobachteten vollständigen Lesevorgang und den tatsächlichen Diff, statt sich auf versionsabhängige Kurzschreibweisen für Dateiverweise zu verlassen.
- [Claude Code-Projektgedächtnis](https://code.claude.com/docs/en/memory) — Dokumentiert Projektanweisungen und optionale Importe als Konfiguration. Belegt nicht, dass eine eigenständige brand-reference/DESIGN.md automatisch geladen wird oder eine Bearbeitung des Lesers ihr folgte.
- [Claude Code-Berechtigungen](https://code.claude.com/docs/en/permissions) — Offizielle Kontrollen für Werkzeugberechtigungen. Die Genehmigung von Markeninhalten durch den Eigentümer und Claudes Promptanweisungen sind von tatsächlicher Datei-/Werkzeugberechtigung und der Erlaubnis zur Übermittlung privater Materialien zu unterscheiden.
- [Claude Code-Datennutzung](https://code.claude.com/docs/en/data-usage) — Verarbeitung und Aufbewahrung abhängig von Konto und Anbieter. Ein lokales Projekt belegt keine ausschließlich lokale Modellsitzung; vor dem Bereitstellen privater Inhalte muss der Leser die Rechte prüfen.
- [Claude Code-Kosten](https://code.claude.com/docs/en/costs) — Offizielle Hinweise zu konto- und anbieterabhängiger Nutzung und Abrechnung. Für dieses Verfahren wurden weder Festpreis noch kostenloses Kontingent, Zeitersparnis oder Aufgabenkosten gemessen.
- [BIG CHANGE: eine DESIGN.md-Referenz mit festem Revisionsstand in Claude Code für eine Seite verwenden](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — Verwandte Berichterstattung zur Einordnung der Anwendung einer Community-Referenz mit festem Revisionsstand auf eine bestehende Seite. Dabei wird keine genehmigte eigentümerspezifische Spezifikation erstellt; sie ist weder Quelle der neuen Schritte noch eine Fortsetzung in „In this story“.