83.3K+Download
Zur Nutzungsanleitung springen
frontend-designvon Anthropic

Frontend Design Skill.

Ein Skill für Claude Code und Codex für markante UI-Gestaltung: Typografie, Farbe und Layout bewusst gewählt.

  • Web & UI
  • Websites
  • UI-Redesign
  • Typography
OpenDesign herunterladenAnleitung ansehen
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 Vom Briefing zur Oberfläche

Eine Frontend-Design-Aufgabe, vom Briefing zur Oberfläche.

Geben Sie Claude Code oder Codex das Produkt, die Zielgruppe und den Inhalt – der frontend-design Skill trifft die visuellen Entscheidungen.

Beispiel-BriefingBeispiel-Workflow · keine reale Ausführung

Eine Homepage für ein Angebots-Tool

Hilft freiberuflichen Designern zu verstehen, wie sie Angebote erstellen, Scope-Änderungen vereinbaren und Kunden-Freigaben erhalten.

MarkenunterlagenPreisgestaltungFAQ-Texte
Das vollständige Prompt ansehen ↗

Was die Skill-Anleitungen zeigen

  1. 01
    Finden Sie die visuelle Richtung

    Eine Palette, Typhierarchie und ein Layout, die zum Produkt passen.

  2. 02
    Plan überprüfen

    Prüfen Sie die Richtung gegen das Briefing, bevor Sie bauen.

  3. 03
    Erstellen und verfeinern

    Eine responsive Benutzeroberfläche mit klaren Aktionen und barrierefreien Zuständen.

02 Finden Sie Ihren Favoriten

Wann Sie das frontend-design Skill verwenden sollten

Verwenden Sie den frontend-design Skill, wenn visuelle Entscheidungen Teil der Arbeit sind – eine neue Seite in Claude Code oder Codex gebaut, oder ein Redesign eines Interface, das nach Template aussieht.

Gut geeignet

  • Eine neue Seite oder Website aus einem BriefingLanding-Pages, Produktseiten, Portfolios, kleine Apps – alles, wo die erste Frage lautet: „Wie soll das aussehen?"
  • Ein visuelles Redesign einer bestehenden OberflächeSie haben eine funktionierende UI, die nach Vorlage aussieht, und wünschen sich eine Richtung, die in der Materie des Produkts verwurzelt ist.
  • Typografie und Hierarchie präzisierenSchriftgröße, Zeilenlänge, Schriftstärke und Abstände bewusst gesetzt, nicht aus Framework-Standards übernommen.
  • Briefs mit echten InhaltenDas Skill arbeitet mit den tatsächlichen Texten und Inhalten des Briefings; je mehr echtes Material Sie liefern, desto spezifischer das Ergebnis.

Grenzen kennen

  • Sie haben bereits ein Design-SystemLiefern Sie dessen Regeln und Komponenten. Der Skill sollte Ihr Briefing befolgen und innerhalb der visuellen Entscheidungen arbeiten, die offen bleiben.
  • Die Arbeit ist Logik, Daten oder BackendSein Fokus liegt auf visuellem Design. Anwendungslogik, APIs und funktionale Tests erfordern eigene Umsetzungsarbeit.
  • Sie wollen eine Komponenten-Bibliothek oder TemplatesEr liefert Design-Anweisungen, keine fertige Komponenten-Bibliothek oder Seitenvorlage.
  • Sie benötigen eine Überprüfung einer fertigen UIDie Selbstkritik bezieht sich auf den eigenen Plan. Für die Prüfung fremder Oberflächen siehe die verwandten Skills unten.

Was Sie bereitstellen sollten

  • ProduktgegenstandWas das Produkt ist und in welcher Branche es angesiedelt ist. Wenn Sie dies weglassen, schlägt das Skill eines vor und bittet um Bestätigung.
  • ZielnutzerFür wen die Seite bestimmt ist. Das bestimmt den visuellen Stil mehr als alles andere.
  • SeitenzielDie eine Aufgabe, die die Seite erfüllen muss, und die primäre Handlung.
  • Echter InhaltÜberschriften, Texte, Preise, FAQ-Antworten. Platzhaltertext erzeugt Platzhalterdesign.
  • Markenelemente & VorgabenLogo, Farbpalette, Schriften und alles bereits Entschiedene. Die eigenen Worte des Briefings gelten immer.

03 Mit Absicht gestalten

Was das Skill zum UI-Design beiträgt

Vier Dinge, die das frontend-design Skill Claude Code oder Codex anweist zu tun, und was jedes davon aus Ihrer Eingabe macht.

  1. Eine im Gegenstand verankerte visuelle Richtung

    Der Agent klärt zunächst, was das Produkt ist, wen es bedient und wie dessen Welt aussieht, bevor er irgendetwas wählt. Ein Spielzeug für Achtjährige und ein Dashboard für Analysten sollten nicht gleich aussehen.

    Sie geben
    Produktgegenstand, Zielgruppe
    Sie erhalten
    eine Richtung, die Sie annehmen oder umlenken können, bevor Code geschrieben wird

  2. Schrift, Farbe und Layout mit Absicht gewählt

    Ein oder zwei Schriftarten mit einer echten Skala, eine Farbpalette aus 4–6 Farben mit Hex-Angaben und ein Layout-Konzept mit Ausrichtungsregeln. Strukturelemente — Linien, Nummerierung, Beschriftungen — werden nur dort eingesetzt, wo sie Informationen tragen.

    Sie geben
    Brand-Assets, Vorgaben
    Sie erhalten
    ein kompaktes Token-System, auf dem die Seite aufbaut

  3. Ein Plan, geprüft gegen das Briefing, vor dem Build

    Der Skill arbeitet in zwei Durchgängen. Er entwirft den Plan und prüft dann jeden Teil gegen die Frage „würde ich das für jede ähnliche Seite produzieren?" und überarbeitet, was wie ein Standard wirkt — mit Angabe, was sich geändert hat und warum. Code kommt danach.

    Sie geben
    das Briefing
    Sie erhalten
    ein schriftlicher Plan und eine kurze Selbstprüfung, die Sie im Transkript lesen können

  4. Grundlegende Qualität ohne Nachfrage

    Responsiv bis Mobile, sichtbarer Tastaturfokus, Respekt für reduced motion, barrierefreie Farben und Text aus Sicht der Nutzer in klarer, aktiver Sprache.

    Sie geben
    Ihre Barrierefreiheits-Anforderungen
    Sie erhalten
    Hinweise für Mobile- und Tastaturnutzung

04 In Betrieb nehmen

frontend-design in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann ein Briefing für Ihren Agent und eine Checkliste für das erste Ergebnis.

frontend-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

Führen Sie den Befehl in Ihrem Projekt aus, folgen Sie der Agent-Auswahl des Installers und prüfen Sie, dass Ihr Agent frontend-design finden kann.

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

Befehlsquelle: skills.sh-Eintrag für frontend-design. Folgen Sie dem Installer und bestätigen Sie, dass der Skill in Ihrem Agent erscheint.

Dem Skill eine erste UI-Design-Aufgabe geben

Passen Sie dieses Briefing mit Ihren Produkt-Details an, hängen Sie die Brand-Assets und Texte an, auf die es verweist, und führen Sie es in Claude Code oder Codex aus.

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

Das erste Ergebnis prüfen

Ein guter erster Durchlauf ist leicht zu erkennen. Bevor Sie die Seite annehmen, prüfen Sie im Transkript und in der Ausgabe:

  • Der Plan kam vor dem Code, mit benannten Palettenwerten und Schriftartrollen.
  • Die Selbstprüfung benennt mindestens einen Standard, den sie ersetzt hat, und warum.
  • Ihre echten Texte, Preise und Brand-Assets erscheinen unverändert.
  • Ein Element ist einprägsam; der Rest der Seite bleibt ruhig.
  • Die Seite funktioniert bei 390px, Tabben zeigt einen sichtbaren Fokusring, und Motion respektiert die OS-Einstellung.
  • Wenn etwas generisch wirkt, sagen Sie, welcher Teil – das Skill ist darauf ausgelegt, diese Kritik aufzunehmen und zu überarbeiten.

Sie verwenden OpenDesign? frontend-design ist in OpenDesign enthalten: Öffnen Sie Plugins → Skills, wählen Sie es in der oberen Leiste aus, und die SKILL.md wird mit Ihrer DESIGN.md in den Prompt komponiert. Claude Code, Codex, Cursor oder OpenCode übernimmt die Arbeit.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill-Datei
skills/frontend-design/SKILL.md Inhalts-Prüfsumme bei Verifikation erfasst; Commit 34040c9
License
Apache-2.0 Aus skills/frontend-design/LICENSE.txt; SKILL.md verweist auf „Complete terms in LICENSE.txt". Das Repository-Root deklariert keine separate Lizenz.
Repository-Sterne
176.183 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository anthropics/skills, das viele Skills enthält. Keine Bewertung oder Nutzungszahl für frontend-design.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf in OpenDesign wurde auf dieser Seite noch nicht dokumentiert.
Die eigene Beschreibung des Skills
„Anleitung für ausdrucksstarkes, intentionales visuelles Design beim Erstellen neuer UI oder Umgestalten bestehender. Hilft bei ästhetischer Richtung, Typografie und Entscheidungen, die nicht nach Standard-Templates wirken."

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. Vollständige Datei auf GitHub lesen.

Frontend Design

Geben Sie Ihrem Agent ein Briefing, das es wert ist, gestaltet zu werden.

Der frontend-design Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills aus, fügen Sie den Beispiel-Prompt ein und lesen Sie den Plan vor dem Code.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design