Anthropics frontend-design Skill soll Claude bessere Oberflächen bauen lassen
Mit dem frontend-design Skill will Anthropic verhindern, dass von Claude erzeugte Interfaces nach generiertem Code aussehen. Der Skill ist im Skills-Repository von Anthropic und als Plugin für Claude Code verfügbar.
Veröffentlicht am 8. Okt. • Zuerst veröffentlicht auf skillgild.dev
Das frontend-design Skill ist Anthrops eigene Anleitung, damit Claude Benutzeroberflächen entwirft, die nicht generiert aussehen. Es ist im Skills-Repository von Anthropic enthalten und als frontend-design Plugin im offiziellen Claude Code Plugin Marketplace verfügbar, und es ist das Skill, das die meisten Leute meinen, wenn sie nach "dem Claude Frontend Design Skill" suchen. Es ist eine einzige Markdown-Datei, 71 Zeilen lang, als wir sie am 9. Oktober 2026 gelesen haben. Es enthält keine Skripte und keine Komponentenbibliothek; alles, was es verändert, verändert es, indem es ändert, wie Claude plant.
Wir haben es mit einem echten Briefing ausgeführt und das Ergebnis mit demselben Briefing ohne Skill verglichen. Diese Seite behandelt, was das Skill Claude mitteilt, wie man es installiert, was der Lauf erzeugt hat und wo es an seine Grenzen stößt.
Liest man die SKILL.md, findet man vier Ideen.
Gestalte aus dem Thema heraus, nicht aus Gewohnheit. Claude wird angewiesen, zuerst das Produkt, die Zielgruppe und die eine Aufgabe der Seite zu erarbeiten und seine visuellen Entscheidungen aus der Welt des Themas selbst abzuleiten: aus seinen Materialien, seiner Sprache und seiner Branche.
Eine benannte Liste von Merkmalen generierter Designs. Das ist der nützlichste Teil des Skills. Er listet die Looks auf, um die KI-generierte Seiten sich derzeit häufen, und bittet Claude, keine freie Wahl darauf zu verschwenden:
Außerdem verbietet es drei typografische Gewohnheiten kategorisch: die Hervorhebung eines einzelnen Wortes in der Überschrift, Labels in Großbuchstaben und Labels, die niemand braucht. Nummerierte Markierungen (01, 02, 03) sind nur erlaubt, wenn der Inhalt tatsächlich eine Abfolge ist.
Plane, prüfe den Plan, dann baue. Bevor Claude Code schreibt, erstellt es ein kompaktes Token-System: 4 bis 6 benannte Hex-Farben, die Schriftarten und ihre Rollen, einen in ASCII skizzierten Layoutentwurf und die Prinzipien der Seite. Anschließend überprüft es den Plan anhand des Briefings und überarbeitet jeden Teil, der wie der Standard aussieht, den es für jede ähnliche Seite erzeugen würde.
Zurückhaltung und schlichte Texte. "Setze deine Kühnheit an einer Stelle ein", halte eine Qualitätsuntergrenze ein (responsives Verhalten, sichtbarer Fokus, Beachtung von reduced motion) und schreibe Texte, die in den Worten der Nutzer sagen, was Dinge tun.
In Claude Code, aus dem offiziellen Marketplace:
/plugin install frontend-design@claude-plugins-official Enter fullscreen mode Exit fullscreen mode Von SkillGild, das dasselbe Skill für Claude Code, Codex, Cursor oder Gemini CLI installiert:
skillgild install frontend-design --agent claude-code Enter fullscreen mode Exit fullscreen mode Oder kopiere den Ordner von Hand: Klone anthropics/skills und lege skills/frontend-design in ~/.claude/skills/ ab. Die Installationsanleitung listet die Ordner für andere Agents auf. Das Skill löst von selbst aus, wenn du UI-Arbeiten anfragst; du kannst es auch in deinem Prompt namentlich erwähnen.
Wir haben Claude Code dasselbe Briefing zweimal gegeben: eine Landingpage für Ledgerline, eine fiktive Buchhaltungsapp für freiberufliche Designer, als eine in sich geschlossene HTML-Datei mit Google Fonts als einzige externe Ressource. Das Briefing listete die Sektionen auf und verbot erfundene Testimonials, Kundenzahlen, Logos und Auszeichnungen. Ein Lauf hatte das frontend-design Skill in seinem Projektordner und wurde angewiesen, ihm zu folgen; der andere hatte kein Skill. Beide verwendeten Claude Code 2.1.278 mit Claude Opus 5 am 9. Oktober 2026, wobei das Skill-Tool deaktiviert war, damit kein anderes installiertes Skill geladen werden konnte. Jeder Lauf wurde einmal ausgeführt, also betrachte dies als ein Beispiel, nicht als Benchmark.
Mit dem frontend-design Skill. Der Hero ist eine funktionierende Tagging-Demo: Wähle eine Kundenfarbe aus, klicke auf eine Transaktion, und die Summen aktualisieren sich.
Dasselbe Briefing ohne Skill. Eine solide Seite, aufgebaut auf dem Creme-mit-Serif-Look, den das Skill als Erkennungsmerkmal listet.
Bevor es Code schrieb, erstellte der Skill-Lauf exakt den Plan, den die SKILL.md verlangt: eine fünffarbige Palette, benannt nach dem Thema ("drafting-paper sage", "navy ink"), mit vier Kundenfarben, die überall auf der Seite "Kunde" bedeuten, statt nur zu schmücken; Familjen Grotesk für Text und IBM Plex Mono nur für Beträge und Daten; einen ASCII-Wireframe des Heros. Dann baute es den Hero als kleines funktionierendes Werkzeug: Man wählt einen Kunden aus, klickt auf Transaktionen in einem Beispielmonat, und die Summen pro Kunde sowie die vierteljährliche Steuerrücklage werden neu berechnet.
Der Baseline ist nicht schlecht. Claude Opus 5 ohne Hilfe erzeugte eine ordentliche Seite mit einer Produktkarte, einem barrierefreien FAQ-Akkordeon und reduced-motion-Unterstützung. Aber sie landete genau bei den Standardlösungen, die das Skill benennt: ein cremefarbener Hintergrund mit einer Serifen-Schrift für die Headline, eine hervorgehobene Phrase in der Überschrift, ein Pill-Badge in Großbuchstaben über dem Hero und Sektionslabels in Großbuchstaben.
Wir haben diese Erkennungsmerkmale auf beiden Seiten bei 1440 px gezählt:
Die komplette frontend-design Seite von oben bis unten (ohne Ton). Auf skillgild.dev anzusehen.
Der Skill-Lauf kostete auch mehr. Er brauchte 14 Runden und 5,7 Minuten gegenüber 2 Runden und 3,3 Minuten für die Baseline, und Claude Code meldete API-äquivalente Kosten von 1,61 $ gegenüber 0,98 $. Der Großteil des Mehrbedarfs ging auf den Plan und einen Selbstkritik-Durchgang, der neun kleine Änderungen vornahm.
Beide Seiten erfanden Produktfakten, die das Briefing nie geliefert hatte. Der Skill-Lauf behauptet, Ledgerline verbinde sich mit "den meisten Banken und Kreditgenossenschaften in den USA, Kanada, Großbritannien und der EU", halte Daten 30 Tage lang exportierbar, benötige keine Kreditkarte zum Start und gleiche Belege ab. Die Baseline machte ähnliche Behauptungen. frontend-design formt, wie eine Seite aussieht und liest; es weiß nicht, was dein Produkt tut. Von den vier Skills, die wir getestet haben, verweigerte nur Impeccable das Erfinden von Fakten, weil es festhält, was das Briefing offenlässt. Bei diesem Skill gehören die echten Fakten ins Briefing, und man sollte Claude anweisen, keine Features hinzuzufügen.
Außerdem behielt es sieben gespacierte Gedankenstriche bei, sodass die Merkmaliste eher ein kräftiger Anstoß als ein Filter ist. Wenn dir ein Look wichtig ist, sag es im Briefing: Die eigene Regel des Skills lautet, dass die Worte des Briefings immer gewinnen.
Der Skill-Lauf bei 375 px. Kein horizontales Scrollen; die Demo stapelt sich unter der Überschrift.
Das Skill arbeitet auf Basis deines Briefings, gib ihm also das Material, um das es bittet:
Verwende das frontend-design Skill, um die Landingpage für <Produkt> zu bauen. Produktfakten (keine anderen hinzufügen): <was es tut, Preis, Testphase, Integrationen>. Zielgruppe: <wer>, und die eine Aktion, die die Seite bewirken soll: <Aktion>. Beibehalten: <Markenfarben, Schriftarten, Routen>. Vermeiden: <Looks, die du nicht magst>. Zeig mir den Token-Plan und das ASCII-Layout, bevor du Code schreibst. Enter fullscreen mode Exit fullscreen mode Zu bitten, den Plan zuerst zu sehen, ist günstig und gibt dir einen Entscheidungspunkt vor dem Bau. Wenn die Palette oder Typografie des Plans nicht zu deiner Marke passt, korrigiere sie an dieser Stelle.
frontend-design ist ein Richtungs-Skill: Er entscheidet, wie eine neue Seite aussehen soll. Für ein Audit einer bestehenden Benutzeroberfläche kombiniere ihn mit Web Design Guidelines oder Impeccables Audit-Befehlen. Für Motion füge die Skills von Emil Kowalski hinzu. Wenn du Optionen zur Auswahl möchtest statt einer einzigen Meinung, durchsucht UI UX Pro Max stattdessen eine Datenbank aus Styles und Paletten. Die Top 10 Claude Frontend und Design Skills vergleicht alle davon, mit demselben Briefing, das durch vier Skills läuft.
Mit Vorlagen kannst du FAQs schnell beantworten oder Snippets zur Wiederverwendung speichern.
Bist du sicher, dass du diesen Kommentar verbergen möchtest? Er wird in deinem Beitrag verborgen, aber über den Permalink des Kommentars weiterhin sichtbar sein.
Für weitere Maßnahmen kannst du in Erwägung ziehen, diese Person zu blockieren und/oder Missbrauch zu melden.
Automatisch übersetzt. Das Original auf Englisch ist unten aufklappbar.
Original (Englisch) anzeigen
Posted on Oct 8 • Originally published at skillgild.dev
The frontend-design skill is Anthropic's own guidance for making Claude design interfaces that don't look generated. It ships in Anthropic's skills repository and as the frontend-design plugin in the official Claude Code plugin marketplace, and it is the skill most people mean when they search for "the Claude frontend design skill". It is one Markdown file, 71 lines long when we read it on 9 October 2026. It contains no scripts and no component library; everything it changes, it changes by changing how Claude plans.
We ran it on a real brief and compared the result with the same brief and no skill. This page covers what the skill tells Claude, how to install it, what the run produced, and where it falls short.
Read the SKILL.md and you will find four ideas.
Design from the subject, not from habit. Claude is told to work out the product, the audience and the page's one job first, and to take its visual choices from the subject's own world: its materials, vocabulary and industry.
A named list of generated-design tells. This is the skill's most useful part. It lists the looks AI-generated pages currently cluster around, and asks Claude not to spend a free choice on them:
It also bans three typographic habits outright: accenting a single word in the headline, all-caps labels, and labels nobody needs. Numbered markers (01, 02, 03) are allowed only when the content really is a sequence.
Plan, check the plan, then build. Before any code, Claude writes a compact token system: 4 to 6 named hex colours, the typefaces and their roles, a layout sketched in ASCII, and the page's principles. It then reviews the plan against the brief, and revises any part that looks like the default it would produce for any similar page.
Restraint and plain copy. "Spend your boldness in one place", keep a quality floor (responsive, visible focus, reduced motion respected), and write copy that says what things do in the user's words.
In Claude Code, from the official marketplace:
/plugin install frontend-design@claude-plugins-official Enter fullscreen mode Exit fullscreen mode From SkillGild, which installs the same skill for Claude Code, Codex, Cursor or Gemini CLI:
skillgild install frontend-design --agent claude-code Enter fullscreen mode Exit fullscreen mode Or copy the folder by hand: clone anthropics/skills and place skills/frontend-design in ~/.claude/skills/. The install guide lists the folders for other agents. The skill triggers on its own when you ask for UI work; you can also name it in your prompt.
We gave Claude Code the same brief twice: a landing page for Ledgerline, a fictional bookkeeping app for freelance designers, as one self-contained HTML file with Google Fonts as the only external resource. The brief listed the sections and forbade invented testimonials, customer counts, logos and awards. One run had the frontend-design skill in its project folder and was told to follow it; the other had no skill. Both used Claude Code 2.1.278 with Claude Opus 5 on 9 October 2026, with the Skill tool switched off so no other installed skill could load. Each ran once, so treat this as one example, not a benchmark.
With the frontend-design skill. The hero is a working tagging demo: pick a client swatch, click a transaction, and the totals update.
The same brief with no skill. A competent page, built on the cream-and-serif look the skill lists as a tell.
Before writing code, the skill run produced exactly the plan the SKILL.md asks for: a five-colour palette named for the subject ("drafting-paper sage", "navy ink"), with four client colours that mean "client" everywhere on the page rather than decorating it; Familjen Grotesk for text and IBM Plex Mono only for amounts and dates; an ASCII wireframe of the hero. Then it built the hero as a small working tool: choose a client, click transactions in a sample month, and the per-client totals and the quarterly tax set-aside recompute.
The baseline is not bad. Claude Opus 5 without help produced a tidy page with a product card, an accessible FAQ accordion and reduced-motion support. But it landed squarely on the defaults the skill names: a cream background with a serif display face, a highlighted phrase in the headline, an all-caps pill over the hero and all-caps section labels.
We counted those tells on both pages at 1440 px:
The whole frontend-design page, top to bottom (no sound). Watch it on skillgild.dev.
The skill run also cost more. It took 14 turns and 5.7 minutes against 2 turns and 3.3 minutes for the baseline, and Claude Code reported an API-equivalent cost of $1.61 against $0.98. Most of the extra went on the plan and a self-critique pass that made nine small edits.
Both pages invented product facts the brief never gave. The skill run says Ledgerline connects to "most banks and credit unions in the US, Canada, the UK and the EU", keeps data exportable for 30 days, needs no card to start and matches receipts. The baseline made similar claims. frontend-design shapes how a page looks and reads; it does not know what your product does. Of the four skills we tested, only Impeccable refused to invent facts, because it records what the brief leaves unstated. With this skill, put the real facts in the brief and tell Claude not to add features.
It also kept seven spaced em dashes, so the tell list is a strong nudge rather than a filter. If a look matters to you, say so in the brief: the skill's own rule is that the brief's words always win.
The skill run at 375 px. No horizontal scroll; the demo stacks under the headline.
The skill works from your brief, so give it the material it asks for:
Use the frontend-design skill to build the landing page for <product>. Product facts (do not add others): <what it does, price, trial, integrations>. Audience: <who>, and the one action the page should drive: <action>. Keep: <brand colours, fonts, routes>. Avoid: <looks you dislike>. Show me the token plan and ASCII layout before you write code. Enter fullscreen mode Exit fullscreen mode Asking to see the plan first is cheap and gives you a decision point before the build. If the plan's palette or type is wrong for your brand, correct it there.
frontend-design is a direction skill: it decides how a new page should look. For an audit of an existing interface, pair it with Web Design Guidelines or Impeccable's audit commands. For motion, add Emil Kowalski's skills. If you want options to choose between rather than one opinion, UI UX Pro Max searches a database of styles and palettes instead. The top 10 Claude frontend and design skills compares all of them, with the same brief run through four.