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

Eine vorhandene Seite bietet etwas Konkretes zum Verbessern und Bewahren. Die Awesome DESIGN.md-Sammlung 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 ü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 und die Werkzeugberechtigungen 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. 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 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 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 und gesonderte Projektanweisungsdateien; 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.

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 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 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 veranschaulicht Format und innere Widersprüche. Sie ist weder eine von Notion freigegebene Spezifikation noch eine Rechtequelle für Notion-Ressourcen.
• Die MIT-Lizenz des Repositorys verlangt den Urheberrechts- und Erlaubnishinweis in Kopien oder wesentlichen Teilen.
• Anthropics Claude Code-Schnellstart, Hinweise zu Dateiverweisen und Dokumentation der Projektanweisungen 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, Datennutzung und Berechtigungen erklärt kontobedingte Nutzung und Kontrollen. Für diese Anleitung wurde keine Sitzung, Rechnung oder resultierende Seite getestet.