Guide · Setup & Grundlagen
Schluss mit Standard-Design
Warum Claude dir immer dieselbe Seite baut und die vier Sachen, mit denen du das abstellst.
- über 1 Mio
- Installationen
- 2 Zeilen
- zum Einrichten
- 4 Schritte
- insgesamt
Das liegt nicht am Modell, sondern an dem, was du ihm nicht sagst. Wenn du keine Richtung vorgibst, nimmt Claude die Mitte von allem, was er kennt. Anthropic hat dafür ein eigenes Plugin gebaut, das ihn zwingt, sich vorher zu entscheiden.
Quelle: das Plugin frontend-design im offiziellen Repo anthropics/claude-code in der Fassung vom 2. September 2026, geprüft am 12. September 2026. Die Installationszahl steht auf claude.com/plugins/frontend-design, Stand 11. September 2026.
SCHRITT 1
Das Plugin installieren
Erst den Marketplace einhängen, dann das Plugin holen
In Claude Code eintippen
/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-pluginsWarum zwei Zeilen und nicht eine
Die erste Zeile hängt Anthropics eigenen Marketplace ein, die zweite installiert daraus das Plugin. Wenn du nur die zweite eintippst, kennt Claude Code die Quelle nicht und meldet, dass er nichts findet.
Du musst es nicht aufrufen
Es ist ein Skill und kein Befehl. Der springt von alleine an, sobald du etwas an einer Oberfläche baust oder umbaust. Du merkst also erstmal nichts, außer dass die Ergebnisse anders aussehen.
Was drinsteht
Es ist eine Anweisung, wie ein Designer vorgeht, und kein Baukasten mit fertigen Bausteinen. Claude soll sich verhalten wie die Designleitung in einem Studio, das jedem Kunden einen eigenen Look gibt, und die Anweisung sagt ihm ausdrücklich, dass er ein gestalterisches Risiko eingehen soll, wenn er es begründen kann.
Der Vorher-Nachher-Test dauert fünf Minuten. Lass dir dieselbe Seite zweimal bauen, einmal bevor du es installierst und einmal danach, und leg die beiden nebeneinander. Anders merkst du den Unterschied nicht, weil du das Vorher ja gewohnt bist.
DER INTERESSANTE TEIL
Die fünf Looks, die es rauswirft
Anthropic schreibt selbst rein, wo KI-Design gerade immer wieder landet
Auf claude.com steht, dass es lila Verläufe, Standardschriften und Baukasten-Bausteine vermeidet.
Creme mit Serifenschrift
Ein cremefarbener Hintergrund um F4F1EA mit Serifenschrift und Terrakotta als Akzent. Der liegt oft bei D97757, und das ist ausgerechnet Anthropics eigene Farbe für Claude.
Fast Schwarz mit einer grellen Farbe
Ein fast schwarzer Hintergrund mit genau einer grellen Akzentfarbe, also Grün oder Rotorange.
Zeitungslayout
Die Seite ist aufgebaut wie eine Zeitung, also haarfeine Linien und enge Spalten, und nirgends ist eine Ecke abgerundet.
Der Karten-Baukasten
Alles steckt in gleichen Karten mit demselben Radius und demselben grauen Schatten, egal wie wichtig der Inhalt ist, und dazu kommen Farbverläufe, die nur Deko sind.
Vorlagen-Deko bei jedem Thema
Über jeder Überschrift steht ein kleines Label in Großbuchstaben und hinter jedem Link hängt ein Pfeil. Statt echtem Schwarz nimmt er ein getöntes Fast-Schwarz wie 111.
Alle fünf sind für sich in Ordnung, sie tauchen nur bei jedem Thema auf. Deswegen stehen sie in der Anweisung als Voreinstellungen und nicht als Entscheidungen. Wenn du selbst einen davon willst, sagst du es einfach, dann setzt Claude ihn auch um, weil deine Vorgabe immer gewinnt.
SEIN VORGEHEN
Vier Bausteine vor dem Code
Das Plugin lässt Claude erst planen und dann erst bauen
Zuerst klärt er, worum es geht
Wenn in deiner Anfrage nicht steht, was das für ein Produkt ist, schlägt er selbst ein Thema, die Zielgruppe und den Hauptzweck der Seite vor und fragt dich, ob das passt. Schreib das also am besten gleich mit rein, weil aus diesem Thema später Schrift und Farben kommen sollen.
Was Claude festlegt
- Farbe: Vier bis sechs Grundfarben als Farbwerte, jede mit einem Namen
- Schrift: Die Schriften und ihre Rollen, also eine Familie oder zwei klar verschiedene
- Layout: Ein Konzept in einem Satz, eine grobe Skizze und die Ausrichtung
- Prinzipien: Was genau diese Seite von anderen unterscheidet
Danach kommt eine Prüfrunde, und die ist der eigentliche Trick. Claude soll seinen eigenen Plan nochmal gegen die Aufgabe halten und sich fragen, ob er bei einer ähnlichen Aufgabe genauso geantwortet hätte. Wenn ja, muss er den Teil ändern und dazuschreiben, was er geändert hat und warum. Erst danach darf er Code schreiben.
Mut an genau einer Stelle
Die Anweisung sagt, er soll seinen Mut an einer einzigen Stelle ausgeben und drumherum ruhig bleiben. Wenn dir eine Seite zu unruhig ist, sagst du ihm also einfach, welches Element das auffällige sein soll, und der Rest wird leiser.
SCHRITT 2
Zwanzig Zeilen für deine CLAUDE.md
Nur Verbote und Vorgaben, keine Wünsche
Block zum Kopieren
## Design
Schriften: Überschrift <deine Schrift>, Fließtext <deine Schrift>.
Keine anderen Schriften ohne Rückfrage.
Farben: nur diese Werte <deine Hex-Werte>.
Neue Farbe heißt Rückfrage, nicht selber erfinden.
Abstände: Vielfache von 4px. Radius nach Wichtigkeit, nicht überall gleich.
Verboten:
- Farbverläufe als Flächen
- Systemschriften als Ersatz, wenn eine Schrift fehlt
- Karten-Raster als Standardantwort auf jede Liste
- Emoji als Icons
- mehr als eine Animation pro Bildschirmseite
Vor dem Bauen: nenn mir Schrift, Farben und das eine
Element, an das man sich erinnern soll. Warte auf mein Ja.
Mobil zuerst prüfen. Tastaturfokus muss sichtbar sein.Warum keine Wünsche reingehören
Ein Wort wie modern oder clean lässt sich nicht prüfen, deswegen passiert damit auch nichts. Ein Satz wie keine Farbverläufe als Flächen ist dagegen eindeutig, und Claude kann selber sehen, ob er sich daran gehalten hat.
Die vorletzte Zeile ist die wichtigste
Damit zwingst du ihn, dir die Entscheidung vorher zu zeigen. Du korrigierst dann drei Zeilen Plan statt vierhundert Zeilen Code, und genau da liegt die Zeitersparnis.
Halt es kurz
Eine CLAUDE.md, die auf zweihundert Zeilen anwächst, wird schlechter befolgt und nicht besser. Zwanzig Zeilen, die stimmen, schlagen jede lange Liste.
SCHRITT 3 UND 4
shadcn und die Schleife
Fertige Bausteine anbinden und ihm ein Vorbild geben
Im Terminal, im Projektordner
npx shadcn@latest mcp init --client claude
# danach Claude Code neu starten und pruefen
/mcpWas du davon hast
Claude kann dann in die Sammlung schauen und sich einen fertigen Baustein holen, statt jeden Knopf selber zu bauen. Du sagst also hol mir ein Anmeldeformular und er nimmt eins, das es schon gibt, statt ein drittes eigenes zu erfinden.
Die Screenshot-Schleife
Mach einen Screenshot von einer Seite, die dir gefällt, gib ihn Claude und sag ihm, was genau dir daran gefällt, also die Schrift, die Abstände oder die Farbführung. Dann baut er, du machst einen Screenshot vom Ergebnis, gibst ihm den zurück und sagst, was noch nicht passt.
Warum das besser wirkt als jede Beschreibung
Ein Bild transportiert Abstände, Kontraste und Proportionen auf einmal, und dafür bräuchtest du sonst einen halben Absatz. In der Anweisung des Plugins steht sogar drin, dass Claude sich beim Bauen selber Screenshots machen soll, wenn seine Umgebung das hergibt.
Und der Satz, der dir am meisten Zeit spart. Sag ihm nicht modern und nicht clean. Sag ihm die Schriftart, die Farbwerte und wofür die Seite da ist. Alles, was du nicht vorgibst, entscheidet er selbst, und dann landest du wieder bei einem der fünf Looks von Seite 3.
NÄCHSTER SCHRITT
Direkt umsetzen
Eine halbe Stunde, dann läuft es dauerhaft
Die zwei Zeilen von Seite 2 eintippen
Das ist der Schritt, der am meisten bringt und am wenigsten kostet. Danach greift das Plugin bei jeder Oberfläche, ohne dass du daran denken musst.
Den Block von Seite 5 anpassen und einfügen
Trag deine Schrift und deine Farbwerte ein und wirf raus, was für dich nicht gilt. Bei mir stehen da schwarz, der Verlauf von Orange über Pink nach Violett und Inter, und danach diskutiere ich das nicht mehr.
Beim nächsten Projekt einen Screenshot bereitlegen
Such dir vorher eine Seite, die in die Richtung geht, und leg sie dir hin. Wenn du erst suchst, wenn Claude schon gebaut hat, nimmst du meistens doch, was da ist.
Angaben geprüft am 12. September 2026 im Repo anthropics/claude-code, Datei plugins/frontend-design/skills/frontend-design/SKILL.md in der Fassung vom 2. September 2026, und auf ui.shadcn.com/docs/mcp. Installationszahl und Beschreibung stammen von claude.com/plugins/frontend-design, Stand 11. September 2026. Plugins und Befehle können sich ändern.
Wir bauen dir das fertig.
Mit dem Guide kannst du es selbst einrichten. Oder wir machen das für dich, mit deinen Daten und Zugängen, und zwar so, dass es bei dir im Alltag läuft.
Bauen lassen