Verbesserung des Frontend-Designs durch Skills

Sie werden vielleicht feststellen, dass ein LLM, das ohne Anleitung eine Zielseite erstellen soll, fast immer Inter-Fonts, lila Farbverläufe auf weißen Hintergründen und minimale Animationen verwendet. 

Das Problem?  Vertriebskonvergenz. Während der Stichprobenanalyse sagen Modelle Tokens basierend auf statistischen Mustern in den Schulungsdaten voraus. Sicheres Design, das universell funktioniert und niemanden verletzt, dominiert die Webschulungsdaten. Ohne klare Anweisungen entnimmt Claude Proben aus diesem Hochwahrscheinlichkeitscenter.

Für Entwickler, die Produkte für Kunden entwickeln, untergräbt diese generische Ästhetik die Markenidentität und macht KI-generierte Schnittstellen sofort erkennbar. Also wird sie verworfen.

Die Herausforderung der Steuerung

Die gute Nachricht ist, dass Claude mit den richtigen Eingabeaufforderungen sehr gut steuerbar ist. Sagen Sie Claude, er soll „Inter und Roboto vermeiden“ oder „atmosphärische Hintergründe anstelle von Farben verwenden“, und die Ergebnisse verbessern sich sofort. Diese Sensibilität für Vorgaben bedeutet, dass sich Claude an unterschiedliche Designkontexte, Anforderungen und ästhetische Präferenzen anpassen kann. 

Dies stellt jedoch eine praktische Herausforderung dar: Je spezieller die Aufgabe ist, desto mehr Kontext muss bereitgestellt werden. Für das Frontend-Design umfassen effektive Leitlinien Typografie, Farbtheorie, Animationsmuster und Hintergrundbehandlung. Sie müssen angeben, welche Standardeinstellungen Sie vermeiden und welche Alternativen Sie bevorzugen möchten, in mehreren Dimensionen.

Man könnte all dies in einen Systemprompt packen, aber dann beinhaltet jede Anfrage – Python-Debugging, Datenanalyse, E-Mails schreiben – den Frontend-Design-Kontext. Die Frage lautet: Wie kann man Claude genau dann fachspezifische Anweisungen geben, wenn sie benötigt werden, ohne dabei einen permanenten kontextbezogenen Mehraufwand für nicht relevante Aufgaben zu generieren?

Skills: dynamisches Kontextladen

Genau dafür wurden Skills entwickelt: die Bereitstellung spezieller Kontexte nach Bedarf ohne permanenten Overhead. Ein Skill ist ein Dokument (oft Markdown) mit Anweisungen, Anforderungen und Branchenwissen, das in einem bestimmten Verzeichnis gespeichert ist, auf das Claude über einfache Datei-Lese-Tools zugreifen kann. Claude kann diese Fähigkeiten nutzen, um die benötigten Informationen dynamisch zur Laufzeit einzugeben und den Kontext schrittweise zu verbessern, anstatt alles im Voraus zu laden. 

Wenn Claude über diese Skills und die notwendigen Tools verfügt, kann es die relevanten Skills unabhängig identifizieren und laden, die für die jeweilige Aufgabe relevant sind. Wenn Claude beispielsweise eine Landingpage oder eine React-Komponente erstellen soll, kann es einen Frontend-Design-Skill laden und die Anweisungen anwenden, die es benötigt. Dies ist das grundlegende mentale Modell: Skills sind Prompts und kontextbezogene Ressourcen, die bei Bedarf aktiviert werden und spezielle Anleitungen für bestimmte Aufgaben liefern, ohne dass ein permanenter Kontextaufwand entsteht.

Dadurch können Entwickler die Vorteile der Steuerbarkeit von Claude nutzen, ohne das Kontextfenster zu überlasten, indem sie unterschiedliche Anweisungen für viele Aufgaben in das Systemprompt stecken. Wie wir bereits erläutert haben, können zu viele Tokens im Kontextfenster zu Leistungseinbußen führen. Daher ist es äußerst wichtig, den Inhalt des Kontextfensters präzise und fokussiert zu halten, damit das Modell die beste Leistung erzielen kann. Skills löst dieses Problem, indem es Prompts wiederverwendbar und kontextbezogen macht.

Prompt für bessere Frontend-Ergebnisse

Mit Claude erhalten wir wesentlich bessere UI-Generationen ohne permanenten Kontext-Overlaod, indem wir einen Frontend-Design-Skill entwickeln.  Betrachten Sie das Frontend-Design so, wie es ein Frontend-Engineer es tun würde. Je besser man ästhetische Verbesserungen im implementierten Frontend-Code unterbringen kann, desto besser kann Claude diese ausführen.

Wir haben mehrere Bereiche identifiziert, in denen gezielte Prompts gut funktionieren: Typografie, Animationen, Hintergrundeffekte und Themen. All dies wird in Code übersetzt, den Claude schreiben kann. Die Implementierung in Ihre Prompts erfordert keine detaillierten technischen Anweisungen. Schon die Verwendung einer Zielsprache, die das Modell dazu anregt, kritischer über diese Designachsen nachzudenken, reicht aus, um bessere Ergebnisse zu erzielen. Dies entspricht den Leitlinien, die wir in unserem Blogartikel für Kontext-Engineering bereitgestellt haben, um das Modell in der richtigen Höhe zu steuern und die beiden Extreme zu vermeiden: eine hardcodierte Logik in niedrigen Höhen, wie die Angabe exakter Hex-Codes und vage Richtlinien für große Höhen, die einen gemeinsamen Kontext voraussetzen.

Typografie

Um dies im Einsatz zu sehen, betrachten wir zunächst die Typografie als eine Dimension, die wir per Prompt beeinflussen können. Der folgende Prompt leitet Claude speziell dazu, interessantere Schriften zu verwenden:

Generierte Ausgabe mit dem Basisprompt:

Generierte Ausgabe mit Basisprompt und Typografieabschnitt

‍

Interessanterweise scheint das Mandat zur Verwendung interessanter Schriften das Modell zu ermutigen, auch andere Aspekte des Designs zu verbessern. 

Typografie allein führt zu deutlichen Verbesserungen, aber Schriften sind nur eindimensional. Wie sieht es mit der kohärenten Ästhetik der gesamten Benutzeroberfläche aus? 

Themen

Eine weitere Dimension, die wir einbeziehen können, sind Designs, die von bekannten Themen und Ästhetik inspiriert sind. Claude verfügt über ein umfassendes Verständnis für beliebte Themen; wir können dies verwenden, um die spezifische Ästhetik zu kommunizieren, die unser Frontend verkörpern soll. Hier ist ein Beispiel:

Dies ergibt die folgende RPG-Benutzeroberfläche:

Typografie und Themen zeigen, dass gezielte Prompts funktionieren. Aber die manuelle Spezifizierung jeder Dimension ist mühsam. Was wäre, wenn wir all diese Verbesserungen in einem wiederverwendbaren Asset kombinieren könnten?

Ein allgemeiner Prompt

Das gleiche Prinzip gilt für andere Designdimensionen: Bewegungen (Animationen und Mikrointeraktionen) verbessern statische Designs und verbessern ihre Funktionen, während die Orientierung des Modells an interessanteren Hintergrundoptionen Tiefe und visuelles Interesse. Hier glänzt ein umfassendes Know-how.

Zusammenfassend haben wir einen Token-Prompt entwickelt – kompakt genug, um ohne Kontext zu überlasten (selbst wenn es als Skill geladen wird) –, der die Frontend-Ausgabe über Typografie, Farben, Bewegungen und Hintergründe erheblich verbessert:

Im obigen Beispiel geben wir Claude zunächst den allgemeinen Kontext des Problems und geben an, was wir lösen möchten. Wir haben festgestellt, dass die Bereitstellung dieses allgemeinen Kontexts für das Modell eine hilfreiche Taktik ist, um die Ergebnisse zu kalibrieren. Wir identifizieren dann die Vektoren für ein verbessertes Design, die wir bereits besprochen haben, und geben gezielte Ratschläge, um das Modell zu einem kreativeren Denken in all diesen Dimensionen zu bewegen.

Wir fügen auch zusätzliche Richtlinien hinzu, um zu verhindern, dass Claude ein anderes lokales Maximum erreicht. Selbst bei expliziten Anweisungen, bestimmte Muster zu vermeiden, kann das Modell standardmäßig andere gängige Optionen verwenden (wie Space Grotesk für Typografie). Die letzte Erinnerung an den Gedanken „über den Tellerrand hinaus“ verstärkt die kreative Variation.

Auswirkungen auf das Frontend-Design

Mit diesem Skill verbessert sich die Leistung von Claude über mehrere Frontend-Designs hinweg, darunter: 

Beispiel 1: SaaS-Zielseite

Beispiel 2: Blog-Layout

Beispiel 3: Admin-Dashboard

‍

Verbesserung der Artefaktqualität in claude.ai mit Skills

Der Designgeschmack ist nicht die einzige Einschränkung. Claude muss auch architektonische Einschränkungen beim Bau von Artefakten erfüllen. Artefakte sind interaktive, bearbeitbare Inhalte (wie Code oder Dokumente), die Claude erstellt und zusammen mit Ihrem Chat anzeigt.

Zusätzlich zu dem oben beschriebenen Problem mit dem Designgeschmack hat Claude ein weiteres Standardverhalten, das seine Möglichkeiten einschränkt, fantastische Frontend-Artefakte in claude.ai zu generieren. Derzeit erstellt Claude bei der Erstellung eines Frontends nur eine einzige HTML-Datei mit CSS und JS. Der Grund dafür ist, dass es sich bei den Frontends um einzelne HTML-Dateien handeln muss, die korrekt als Artefakte gerendert werden.

Genauso wie man erwartet, dass ein menschlicher Entwickler nur sehr einfache Frontends erstellen kann, wenn er nur HTML/CSS/JS in einer einzigen Datei schreiben kann, haben wir angenommen, dass Claude in der Lage ist, beeindruckende Frontend-Artefakte zu generieren, wenn wir ihm die Anweisung geben, umfangreichere Tools zu verwenden.

Dies veranlasste uns, einen Web-Artefakt-Builder-Skill zu entwickeln, der die Fähigkeit von Claude nutzt, einen Computer zu verwenden und Claude dazu bringt, Artefakte mit mehreren Dateien und modernen Webtechnologien wie React, Tailwind CSS und shadcn/ui zu erstellen. Der Skill stellt Skripte bereit, die (1) Claude helfen, ein einfaches React-Repository einzurichten und (2) alles in einer einzigen Datei mit Parcel zu bündeln, um die Anforderungen an eine einzige HTML-Datei zu erfüllen, nachdem es bearbeitet wurde. Dies ist einer der wichtigsten Vorteile von Skills: Claude kann auf Skripte zugreifen, um Standardaktionen auszuführen, und kann die Token-Nutzung minimieren und gleichzeitig die Zuverlässigkeit und Leistung erhöhen.

Mit dem Web-Artefakt-Builder konnte Claude die Formularkomponenten von shadcn/ui und das responsive Grid-System von Tailwind nutzen, um ein umfassenderes Artefakt zu erstellen.

Beispiel 1: Whiteboard-App

Als Claude beispielsweise aufgefordert wurde, eine Whiteboard-App ohne den Web-Artefakt-Builder-Skill zu erstellen, gab er eine sehr einfache Benutzeroberfläche aus:

Auf der anderen Seite generierte Claude mit dem neuen Web-Artefakt-Builder-Skill eine Anwendung mit viel mehr Funktionen, die das Zeichnen verschiedener Formen und Texte beinhaltete:

‍

Beispiel 2: Task Manager App

Als Claude gebeten wurde, eine Aufgabenmanagement-App zu entwickeln, generierte er eine funktionale, aber sehr minimale Anwendung:

Mit dem Skill generierte Claude eine App mit mehr Funktionen direkt beim ersten Einsatz. Claude hat beispielsweise eine Formularkomponente „Neue Aufgabe erstellen“ integriert, mit der Benutzer eine Kategorie und ein Fälligkeitsdatum für die Aufgaben festlegen können:

‍

Um diesen neuen Skill in Claude.ai auszuprobieren, aktivieren Sie den Skill einfach und bitten Claude dann, den Web-Artefakt-Builder-Skill zu verwenden, wenn er Artefakte entwickelt.

Optimierung der Frontend-Designfunktionen von Claude mit Skills

Diese Frontend-Design-Fähigkeit zeigt ein allgemeineres Prinzip über die Funktionen von Sprachmodellen: Die Modelle können oft mehr als das, was sie standardmäßig angeben. Claude hat ein gutes Design-Verständnis, aber die Konvergenz der Distribution verdunkelt es ohne Orientierung. Diese Anweisungen können zwar dem Systemprompt hinzugefügt werden, aber dies bedeutet auch, dass jede Anfrage den Frontend-Design-Kontext enthält, selbst wenn dieses Wissen für die jeweilige Aufgabe nicht relevant ist. Stattdessen verwandelt die Verwendung von Skills Claude von einem Tool, das ständige Leitlinien benötigt, in ein Tool, das Fachwissen in jede Aufgabe einbringt. 

Skills sind außerdem in hohem Maße anpassbar – du kannst deine eigenen erstellen, die auf deine Bedürfnisse zugeschnitten sind. Auf diese Weise können Sie die exakten Primitive definieren, die Sie in den Skill einbauen möchten – sei es das Designsystem Ihres Unternehmens, bestimmte Komponentenmuster oder branchenspezifische Benutzeroberflächenkonventionen. Durch die Kodierung dieser Entscheidungen in einem Skill verwandeln Sie Teile des Denkens eines Agenten in eine wiederverwendbare Ressource, die Ihr gesamtes Entwicklungsteam nutzen kann. Die Fähigkeit wird zu unternehmensweitem Wissen, das beständig und skaliert wird, um eine konstante Qualität über alle Projekte hinweg sicherzustellen.

Dieses Muster geht über die Frontend-Arbeit hinaus Jeder Bereich, in dem Claude generische Ergebnisse erzeugt, obwohl er umfassenderes Verständnis hat, eignet sich für die Skill-Entwicklung. Die Methode ist konsistent: konvergente Standardeinstellungen identifizieren, konkrete Alternativen bereitstellen, die Leitlinien auf der richtigen Höhe strukturieren und sie über Skills wiederverwendbar machen.

Für die Frontend-Entwicklung bedeutet dies, dass Claude ohne Prompt-Engineering individuelle Schnittstellen generieren kann. Um zu beginnen, lesen Sie unser Frontend-Design-Kochbuch oder probieren Sie unser neues Frontend-Design-Plugin in Claude Code aus.

Lust auf Inspiration? Um Ihre eigenen Frontend-Skills zu erstellen, nutzen Sie unseren Skill-Creator.

‍

Danksagung
Geschrieben vom Anthropic-Team für angewandte KI: Prithvi Rajasekaran, Justin Wei und Alexander Bricken, sowie unseren Marketingpartnern Molly Vorwerck und Ryan Whitehead.

‍