Markdown-Ausgabe

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

# Eine fixierte DESIGN.md-Referenz in Claude Code für eine Seite nutzen

> Wähle eine fixierte DESIGN.md-Datei, übergib sie Claude Code für eine erlaubte Seitenänderung und prüfe den geänderten Code sowie die Desktop- und Smartphone-Darstellung.

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

Eine vorhandene Seite bietet etwas Konkretes zum Verbessern und Bewahren. Die [Awesome DESIGN.md-Sammlung](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) von VoltAgent enthält Klartextanalysen öffentlicher Websites als Kontext für einen KI-Programmieragenten. Diese Anleitung nutzt eine Datei aus dem Commit vom 14. Oktober 2026 als visuelle Referenz für eine begrenzte Claude Code-Änderung. Das Ergebnis gilt erst nach deiner eigenen Prüfung des geänderten Codes und der dargestellten Seite.

BIG CHANGE hat das fixierte Repository und die Claude Code-Dokumentation geprüft. Wir haben Claude Code nicht ausgeführt, keine Seite geändert, keine Zeit gemessen und kein erzeugtes Ergebnis untersucht. Der fixierte Verzeichnisbaum enthält 84 Dateien direkt unter `design-md/*/DESIGN.md`; diese Zahl beschreibt den Commit, keine dauerhafte Kataloggröße.

## Die große Veränderung

- **Was sich ändert:** Eine einzelne, auf eine Version fixierte Designanalyse lässt sich als ausdrücklicher Kontext für die Änderung einer freigegebenen Seite verwenden.
- **Warum das wichtig ist:** Verantwortliche können eine nützliche Layout- oder Abstandsidee übernehmen und das Ergebnis am tatsächlichen Inhalt, Erscheinungsbild und Verhalten ihrer Seite messen.
- **Worauf zu achten ist:** Die Referenz ist eine Community-Analyse. Angaben zur Marke und sogar einzelne interne Anweisungen können falsch oder für deine Seite ungeeignet sein.

## Vor dem Start

Du brauchst eine Seite und ein Repository, die du bearbeiten darfst, eine Arbeitskopie oder einen Branch, eine lokale Darstellungsmöglichkeit und Zugang zu [Claude Code](https://code.claude.com/docs/en/quickstart) über ein berechtigtes Konto oder einen Anbieter. Bestimme die zu ändernde Datei sowie die üblichen Start- und Prüfverfahren des Projekts. Notiere Zielgruppe, wesentliche Texte und Links, freigegebene Farben, Schriften und Logo sowie das eine zu lösende Gestaltungsproblem. Halte diese Vorgaben neben der Arbeitskopie bereit, um Änderungen beurteilen zu können.

Prüfe die [Datenrichtlinie](https://code.claude.com/docs/en/data-usage) und die [Werkzeugberechtigungen](https://code.claude.com/docs/en/permissions) deines Kontos, bevor du vertrauliches Kundenmaterial übergibst. Claude Code verarbeitet Anfragen und Projektinhalte nach den Kontobedingungen; ein lokales Projekt macht die Modellsitzung nicht rein lokal. Kläre die Erlaubnis zur Weitergabe privater Texte, Ressourcen und Codes, die bei der Aufgabe offengelegt würden.

## Eine Referenz für eine Seite verwenden

1. Öffne die [README der fixierten Sammlung](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). Wähle eine `design-md/<name>/DESIGN.md` mit einer passenden Idee für das beschriebene Problem. Lies vor der Nutzung die ganze Datei. Das [Notion-Beispiel](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) zeigt das Format: Vorschläge zu Layout, Schrift, Abständen und Komponenten. Es beschreibt sowohl kapselförmige als auch rechteckige Schaltflächen. Dieser Widerspruch verlangt eine eigene Entscheidung, statt Claude Code jede Zeile befolgen zu lassen.
2. Kopiere diese eine fixierte `DESIGN.md` in dein Arbeitsprojekt, beispielsweise nach `design-reference/DESIGN.md`. Halte daneben Ursprungs-URL, Pfad und Commit `3b605329240ce735b510037cca322f1831fdd7f8` fest. Bewahre mit der Kopie den [MIT-Urheberrechts- und Erlaubnishinweis](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) des Repositorys auf. Die Markdown-Referenz braucht keine Paketinstallation. Die Lizenz gilt für das Repository-Material; sie erlaubt nicht die Nutzung von Logo, Schriftdateien, Bildern oder Marke des dargestellten Unternehmens.
3. Öffne Claude Code im freigegebenen Projekt und übergib die kopierte Datei ausdrücklich als Kontext. Anthropic dokumentiert [Dateiverweise](https://code.claude.com/docs/en/common-workflows) und gesonderte [Projektanweisungsdateien](https://code.claude.com/docs/en/memory); eine eigenständige `DESIGN.md` in einem Ordner belegt nicht, dass Claude Code sie geladen hat. Ersetze den Seitenpfad und die Vorgaben in eckigen Klammern durch echte Werte und bestätige vor der Annahme einer Änderung, dass die Referenz gelesen wurde.

```markdown
Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.
```

4. Lies die vorgeschlagenen Unterschiede vor Ausführung oder Annahme. Prüfe jede geänderte Datei, jeden Text und Link. Lehne unerbetene neue Abhängigkeiten, Ressourcen oder Änderungen anderer Seiten ab. Stelle die Seite mit dem dokumentierten Startbefehl deines Projekts dar. Öffne sie in Desktop- und Smartphone-Breite und prüfe die tatsächliche Seite, nicht die Beschreibung der Absichten des Agenten.
5. Vergleiche die Darstellung mit deinen schriftlichen Anforderungen. Prüfe den Erhalt vorgesehener Texte und Links, eine sinnvolle Überschriftenfolge, ausreichende Kontraste und ein Smartphone-Layout ohne abgeschnittene Inhalte oder horizontales Scrollen. Erreiche und bediene betroffene Links, Schaltflächen, Menüs und Formulare per Tastatur. Teste geänderte Interaktionen einschließlich sichtbarer Fokus- und Fehlerzustände. Notiere Seitenrevision, Breiten, Prüfungen und Mängel. Akzeptiere die Änderung erst nach bestandenen Prüfungen deiner Seite.

Übersieht Claude Code die Referenz, verweise erneut auf die Datei und frage nach den verwendeten Abschnitten. Widerspricht sie deinen Markenvorgaben, entferne diese Anweisung aus der Anfrage und überarbeite den betroffenen Seitencode. Bricht ein Link, Fokuspfad oder eine Interaktion, stelle das vorherige Verhalten wieder her und ändere weniger. Kannst du die Seite nicht darstellen oder das Ergebnis prüfen, bleibt die Änderung bis dahin unakzeptiert.

Die Sammlung besteht aus Community-Beschreibungen anderer Websites und wird von ihren Betreuern ohne Gewähr bereitgestellt. Die Notion-Datei enthält widersprüchliche Schaltflächenformen, undokumentiertes Hover-Verhalten und einen hier nicht geprüften Lint-Befehl. Nutze die bekannten Projektprüfungen statt dieses Vorschlags. Claude Code-Nutzung sowie spätere Hosting- und Ressourcenkosten hängen von Konto und Projekt ab; eine Bearbeitungsdauer oder fertige Designqualität wird hier nicht belegt.

Für einen anderen Ansatz zur KI-gestützten Seitenarbeit erläutert [unsere Genspark-Prototyp-Anleitung](https://bigchange.ai/blog/genspark-design-prototype-source-zip) das Kopieren eines gehosteten Prototyps und die Prüfung seines exportierten Quellcode-ZIP. Diese Aufgabe beginnt mit einem anderen Artefakt und hat ein anderes Abschlusskriterium.

## Quellen und weiterführende Lektüre

- [Die fixierte README von VoltAgent](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) beschreibt die Sammlung und ihre ohne Gewähr bereitgestellten Analysen öffentlicher Seiten. Die Dateizahl stammt aus dem fixierten rekursiven Verzeichnisbaum, nicht aus einer Behauptung über künftige Versionen.
- Die fixierte [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) veranschaulicht Format und innere Widersprüche. Sie ist weder eine von Notion freigegebene Spezifikation noch eine Rechtequelle für Notion-Ressourcen.
- Die [MIT-Lizenz](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) des Repositorys verlangt den Urheberrechts- und Erlaubnishinweis in Kopien oder wesentlichen Teilen.
- Anthropics [Claude Code-Schnellstart](https://code.claude.com/docs/en/quickstart), [Hinweise zu Dateiverweisen](https://code.claude.com/docs/en/common-workflows) und [Dokumentation der Projektanweisungen](https://code.claude.com/docs/en/memory) erläutern Zugang und ausdrücklichen Kontext. Sie bestätigen weder diese Seitenänderung noch ein automatisches Laden der eigenständigen Referenz.
- Anthropics Dokumentation zu [Kosten](https://code.claude.com/docs/en/costs), [Datennutzung](https://code.claude.com/docs/en/data-usage) und [Berechtigungen](https://code.claude.com/docs/en/permissions) erklärt kontobedingte Nutzung und Kontrollen. Für diese Anleitung wurde keine Sitzung, Rechnung oder resultierende Seite getestet.

## Sources

- [Fixierte Awesome DESIGN.md-README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Primäre Repository-Beschreibung und Anleitung zum Kopieren einer einzelnen Datei am unveränderlichen Commit. Die öffentlichen Websiteanalysen werden ohne Gewähr geliefert; Aussagen zur Ergebnisqualität sind Werbung. Der unabhängig geprüfte vollständige Baum dieses Commits enthält 84 direkte DESIGN.md-Dateien, eine versionsgebundene Zahl.
- [Notion DESIGN.md-Beispiel am fixierten Commit](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — Beispielanalyse zu Layout, Abständen, Typografie und Komponenten. Sie widerspricht sich bei kapselförmigen oder rechteckigen Schaltflächen, belegt kein geprüftes Hover- oder Bewegungsverhalten und empfiehlt einen ungeprüften Lint-Befehl. Community-Analyse, keine verbindliche Notion-Markenspezifikation oder Erlaubnis zum Kopieren von Ressourcen.
- [Awesome DESIGN.md-MIT-Lizenz](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; Urheberrechts- und Erlaubnishinweis müssen in Kopien oder wesentlichen Teilen bleiben. Diese Repository-Lizenz belegt keine Rechte an Marke, Logo, proprietärer Schrift oder Bildern einer dargestellten Website.
- [Claude Code-Schnellstart](https://code.claude.com/docs/en/quickstart) — Offizielle Voraussetzungen zu Projekt, Konto oder Anbieter und Anmeldung. Leser müssen einen berechtigten Zugang und ihr eigenes Projekt nutzen; BIG CHANGE hat weder die Claude Code-Einrichtung noch ein Bezahlkonto getestet.
- [Übliche Claude Code-Abläufe](https://code.claude.com/docs/en/common-workflows) — Offizielle Hinweise zu ausdrücklichem @file-Kontext und Projektarbeit. Sie stützen das bewusste Verweisen auf die kopierte Datei innerhalb von Einstellungen und Grenzen, kein automatisches Laden einer beliebigen DESIGN.md.
- [Claude Code-Projektgedächtnis](https://code.claude.com/docs/en/memory) — Erklärt Projektanweisungsdateien und das konfigurationsabhängige Laden. Belegt nicht, dass eine eigenständige DESIGN.md allein durch ihre Anwesenheit im Repository geladen wird; diese Anleitung ändert keine Anweisungskonfiguration.
- [Claude Code-Kosten](https://code.claude.com/docs/en/costs) — Kontobedingter Nutzungs- und Abrechnungskontext. Eine Markdown-Referenz erzeugt keine Paketabhängigkeit; diese Anleitung belegt aber keinen festen Claude Code-Aufgabenpreis, kein Freikontingent und keine Zeitersparnis.
- [Claude Code-Datennutzung](https://code.claude.com/docs/en/data-usage) — Offizielle kontobedingte Datenverarbeitung und Verhalten lokaler Sitzungsprotokolle. Verantwortliche müssen vor Weitergabe privaten Kundencodes oder von Ressourcen die Richtlinie prüfen; eine allgemeine rein lokale Verarbeitung oder Trainingsbehauptung wird nicht aufgestellt.
- [Claude Code-Berechtigungen](https://code.claude.com/docs/en/permissions) — Offizielle Werkzeugberechtigungen. Anweisungen in Anfragen gewähren oder erzwingen keinen Werkzeugzugriff; Leser müssen die vorgeschlagenen Aktionen und tatsächlich geänderten Dateien prüfen.