Guide zum Video MARKEN

Claude baut deine Seite im Look großer Marken.

Die Bibliothek besteht aus DESIGN.md-Dateien: Farben, Schriften, Abstände, Layouts und klare Regeln einer Marke in einer Textdatei. Du legst eine in dein Projekt, Claude Code liest sie und baut im selben Stil.

Kostenlos · Open Source (MIT) · 80+ Marken · Für Claude Code

Am Laptop geht’s am schnellsten. Den Befehl fügst du im Terminal am Computer ein. Schick dir den Link einfach rüber.

Marke aussuchen

Such dir einen Look aus. Mit einem Tipp kopierst du den Befehl, den du gleich im Terminal einfügst.

TeslaRadikal reduziert: Vollbild-Fotos und fast keine Oberfläche.

npx -y getdesign@latest add tesla

AppleViel Weißraum, ruhige Schrift, große Produktbilder.

npx -y getdesign@latest add apple

FerrariSchwarz-Weiß wie ein Magazin, Ferrari-Rot nur als Akzent.

npx -y getdesign@latest add ferrari

ClaudeDer Look von Anthropic: warmes Terrakotta, ruhiges Layout.

npx -y getdesign@latest add claude

Alle Marken ansehen

Wie bekomme ich den Befehl für eine andere Marke?

Ersetz im Befehl den letzten Teil durch den Namen der Marke, zum Beispiel stripe, notion oder spotify. Alle Namen zeigt dir dieser Befehl im Terminal:

npx -y getdesign@latest list

Datei ins Projekt legen

Öffne das Terminal und geh mit cd in deinen Projektordner. Füg dann den Befehl ein und drück Enter, danach liegt die Datei DESIGN.md in deinem Projekt.

cmd + Leertaste→Terminal→Enter

Noch kein Projekt?Dieser Befehl legt einen neuen Ordner an und geht hinein.

mkdir -p meine-seite && cd meine-seite

Das Terminal meldet einen Fehler?

Bei command not found: npx fehlt Node.js. Lade die LTS-Version von nodejs.org, öffne ein neues Terminal-Fenster und füg den Befehl noch mal ein.

Ohne Node.js geht es auch von Hand: Öffne die Datei bei GitHub, tipp auf das Download-Symbol und leg sie als DESIGN.md in deinen Projektordner. Tesla · Apple · Ferrari · Claude

Unter Windows streikt die ältere PowerShell bei &&. Dann gib den Ordner-Befehl in zwei Teilen ein: erst mkdir meine-seite, dann cd meine-seite.

In meinem Ordner liegt schon eine DESIGN.md?

Dann überschreibt der Befehl nichts. Er legt die neue Datei in einen Unterordner mit dem Namen der Marke, zum Beispiel ferrari/DESIGN.md. Schreib im nächsten Schritt einfach diesen Pfad in den Prompt.

Claude Code bauen lassen

Starte Claude Code im selben Ordner und kopier den Prompt hinein. Ersetz den Teil in eckigen Klammern durch das, was du bauen willst.

claude

Lies zuerst die Datei DESIGN.md in diesem Ordner ganz durch. Bau mir dann [eine Startseite für mein Café mit Menü und Kontakt] und halte dich genau an die Farben, Schriften, Abstände, Layouts und Regeln aus der Datei. Nutz keine Logos oder Markenzeichen der Marke.

Claude liest die Datei und baut deine Seite im Stil der Marke. Fragt es, ob es Dateien anlegen darf, sag ja. Übernimm den Look, nicht die Marke: Logos und Markenzeichen gehören der Marke und bleiben draußen.

Claude Code ist noch nicht installiert?

Claude Code gibt es mit Claude Pro, Max, Team oder Enterprise. Auf dem Mac füg diese Zeile ins Terminal ein, öffne danach ein neues Fenster und starte claude. Beim ersten Start meldest du dich an.

curl -fsSL https://claude.ai/install.sh | bash

Unter Windows nimmst du in der PowerShell diese Zeile:

irm https://claude.ai/install.ps1 | iex

Das Ergebnis sieht der Marke nicht ähnlich genug aus?

Die Dateien sind Analysen der öffentlichen Webseiten, kein Original. Lass Claude nachprüfen:

Vergleiche meine Seite Punkt für Punkt mit der DESIGN.md: Farben, Schriften, Abstände und Layout. Korrigier alles, was abweicht.

Soll Claude den Stil auch später beachten?

Dann gib Claude die Regel dauerhaft. Eine CLAUDE.md im Projekt lädt Claude Code bei jedem Start.

Leg in diesem Ordner eine CLAUDE.md an mit dieser Regel: Lies vor jeder Änderung an der Oberfläche die DESIGN.md und halte dich an ihre Farben, Schriften, Abstände, Layouts und Regeln.