Guide · Setup & Grundlagen
Schluss mit Standard-Design
Warum Claude dir immer dieselbe Seite baut und die vier Sachen, mit denen du das abstellst.
- 1,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, geprüft am 3. September 2026. Die Installationszahl steht auf claude.com/plugins/frontend-design.
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 Leitung in einem kleinen Studio, die für jeden Kunden etwas Eigenes abliefert, und die Anweisung sagt ihm ausdrücklich, dass er ein gestalterisches Risiko eingehen soll, das er 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 drei Looks, die es rauswirft
Anthropic schreibt selbst rein, worum KI-Design gerade kreist
Creme mit Serifenschrift
Ein warmer cremefarbener Hintergrund um den Farbwert F4F1EA herum, dazu eine kontrastreiche Serifenschrift als Überschrift und ein Terrakotta-Ton als Akzent. Den siehst du gerade auf jeder zweiten KI-gebauten Seite.
Fast Schwarz mit einer grellen Farbe
Ein fast schwarzer Hintergrund und genau ein sehr grelles Akzentgrün oder ein grelles Rotorange dazu. Sonst nichts.
Zeitungslayout
Haarfeine Linien, keine abgerundeten Ecken und enge Spalten wie in einer Zeitung.
Alle drei sind für sich in Ordnung, und genau das ist das Problem. In der Anweisung steht, dass es Voreinstellungen sind und keine Entscheidungen, weil sie unabhängig vom Thema immer wieder auftauchen. Wenn du selbst einen davon willst, sagst du es einfach, dann setzt Claude ihn auch um. Was er nicht mehr darf, ist von alleine dort zu landen.
Und was ist mit den lila Verläufen?
Die stehen in der offiziellen Plugin-Beschreibung als eins der Muster, das vermieden wird, zusammen mit Standard-Systemschriften und Baukasten-Bausteinen. In der Anweisung selbst tauchen sie nicht mehr auf. Der lila Verlauf ist also die vorletzte Mode, und die drei oben sind die aktuelle.
Quelle: plugins/frontend-design/skills/frontend-design/SKILL.md im Repo anthropics/claude-code, Abschnitt Process, geprüft am 3. September 2026.
SEIN VORGEHEN
Vier Bausteine vor dem Code
Das Plugin lässt Claude erst planen und dann erst bauen
Was Claude festlegt
- Farbe: Vier bis sechs Farbwerte, jeder mit einem Namen
- Schrift: Mindestens zwei Rollen, also Überschrift und Fließtext
- Layout: Ein Konzept in einem Satz plus grobe Skizze
- Signature: Das eine Element, an das man sich erinnert
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.
Signature ist der Begriff, den du dir merken solltest
Die Anweisung sagt, er soll seinen Mut an genau einer Stelle ausgeben und drumherum ruhig bleiben. Wenn dir eine Seite zu unruhig ist, kannst du also einfach sagen, dass die Signature woanders hin soll, und der Rest wird leiser.
Nebenbei erklärt sich damit auch die Nummerierung
In der Anweisung steht, dass nummerierte Marker wie 01, 02, 03 nur dann hingehören, wenn der Inhalt wirklich eine Reihenfolge hat. Sonst sind sie Deko. Das ist übrigens auch der Grund, warum sie in diesem PDF nur da stehen, wo es Schritte sind.
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 ü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 drei 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 nach Pink 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.
Alle Angaben geprüft am 3. September 2026 im Repo anthropics/claude-code und auf ui.shadcn.com/docs/mcp. Plugins und Befehle können sich ändern.