Claude Design Skills: What Actually Works and How to Build Your Own in 2026
KI & Automatisierung

Claude Design Skills: Was tatsächlich funktioniert und wie Sie 2026 Ihre eigenen erstellen

Forscher haben kürzlich 49 beliebte Agent-Skills bei 565 realen Softwareentwicklungsaufgaben getestet. Bei 39 davon änderte sich die Erfolgsquote um genau null, während die Token-Kosten um bis zu 451 % stiegen. Die Studie ist ein Preprint mit vorläufigen Ergebnissen, doch das Muster bleibt bestehen: Die meisten installierten Skills verursachen zusätzlichen Aufwand für Ratschläge, die Claude ohnehin bereits befolgt.

Das Design bildet hier die Ausnahme. Anthropics eigener 400-Token-Frontend-Skill hat identische Eingabeaufforderungen sichtbar verändert, da das Design auf den ersten Blick beurteilt wird. Und Claudes Standard-Einstellungen (Inter, ein violetter Farbverlauf, drei passende Karten) sind schon in der ersten Sekunde erkennbar.

Der Haken: Mit den offiziellen Claude-Design-Skills erreichst du nur, dass das Ergebnis „nicht wie von einer KI generiert“ aussieht. Um zu erreichen, dass es „wie deine Marke aussieht“, brauchst du eine Datei, die nur du erstellen kannst. Dieser Leitfaden behandelt beides, einschließlich der Frage, wie du deine eigene Datei an einem Nachmittag erstellen und nachweisen kannst, dass sie im Vergleich zu Claudes Basiswert funktioniert.

TL;DR: Installiere zuerst das Frontend-Design-Skill von Anthropic: Ein Befehl in Claude Code reicht aus, um eine ästhetische Ausrichtung festzulegen, noch bevor Code geschrieben wird. Füge „canvas-design“ für fertige Grafiken, „theme-factory“ oder „brand-guidelines“ für einheitliche Präsentationen hinzu – und die Figma-Skills, wenn du deine Designs in Figma erstellst.

Offizielle Skills verhindern, dass die Ausgabe wie von einer KI generiert aussieht; nur ein benutzerdefiniertes SKILL.md mit Ihren Hex-Werten, Ihrer Schriftgröße und Ihren verbotenen Mustern lässt das Ergebnis wie Ihr Produkt aussehen. Testen Sie jeden Skill auf die gleiche Weise: identische Eingabeaufforderung, mit und ohne, und löschen Sie alles, was die Ausgabe nicht sichtbar verändert. Versionsverwalten Sie die Datei dann zusammen mit Ihrem Designsystem, sonst wird die Farbe des letzten Quartals noch lange nach dem Rebranding weiterverwendet.

Was sind Claude Design-Skills?

Claude-Design-Skills sind kurze Anleitungsdateien, die Claude beibringen, wie Ihre Designs aussehen sollen. Claude liest die Datei automatisch aus, sobald eine Design-Aufgabe ansteht, sodass Sie die Regeln nicht in jeder Eingabeaufforderung wiederholen müssen.

Ein Skill kann allgemeine oder spezifische Regeln festlegen. Der Frontend-Design-Skill von Anthropic legt allgemeine Regeln fest: Wähle eine echte Schriftart aus, wähle einen visuellen Stil und erledige beides, bevor du irgendeinen Code schreibst. Ein Skill, den du selbst schreibst, legt deine eigenen Regeln fest: deine Farben, deine Schriftarten, deine Abstände und die Muster, die dein Team niemals verwendet.

Skills sind so konzipiert, dass sie nicht im Weg stehen. Claude sieht zu Beginn einer Sitzung nur den Namen des jeweiligen Skills und eine einzeilige Zusammenfassung. Die vollständigen Anweisungen werden erst angezeigt, wenn eine passende Aufgabe erscheint. So bleiben die Sitzungen auch bei einem Dutzend installierter Skills schnell.

Das bedeutet auch, dass die einzeilige Zusammenfassung wichtiger ist als alles andere in der Datei, da sie darüber entscheidet, ob Claude den Skill überhaupt öffnet. In der Dokumentation zu „Agent Skills“ von Anthropic wird dies als „progressive disclosure“ bezeichnet.

Inwiefern unterscheiden sich Design-Skills in Claude von Claude Design?

Claude Design ist ein eigenständiges Produkt von Anthropic, mit dem unter claude.ai/design Designs im Dialog erstellt werden können. Design-Skills sind Anweisungsdateien, die die Ausgabe in Claude KI und Claude Code gestalten. Skills legen außerdem fest, was Claude Design erzeugt, wenn kein importiertes Designsystem vorhanden ist. Claude Design ist in den Tarifen Pro, Max, Team und Enterprise-Plan verfügbar.

Claude Skills vs. MCP: Was ist der Unterschied?

Ein Claude-Skill sagt Claude, wie es arbeiten soll. Ein MCP-Server gibt Claude etwas, an dem es arbeiten kann, beispielsweise eine Live-Verbindung zu Ihrer Figma-Datei. Claude Projects ist ein dritter Begriff, den viele mit den beiden anderen verwechseln: ein gespeicherter Workspace, in dem die Dateien und der Kontext eines Clients zusammengeführt werden.

AspektClaude-SkillsMCP-ServerClaude-Projekte
Was ist das?Ein Ordner mit Anweisungen, den Claude lädt, wenn eine Aufgabe übereinstimmtEine Live-Verbindung zu einem externen tool wie Figma oder GitHubEin Workspace mit festgestecktem Kontext für einen laufenden Aufwand
Ideal für DesignarbeitenKodierung Ihres Designsystems, Ihrer Tokens und Ihrer ästhetischen RegelnEchte Komponentendaten aus Figma-Dateien extrahierenDen Markenkontext eines Clients in einem einzigen Thread der Arbeit zusammenfassen
SetupErstellen Sie eine SKILL.md-Datei oder installieren Sie eine in wenigen MinutenKonfigurieren Sie einen Server und die AuthentifizierungErstellen Sie ein Projekt und fügen Sie Dateien in Claude KI hinzu
KontextkostenNur Name und Beschreibung, bis zum AuslöserTool-Definitionen werden pro Sitzung geladen und können sehr umfangreich seinProjektwissen wird in jeder Unterhaltung geladen

Die meisten Design-Teams nutzen letztendlich eine Funktion zusammen mit einem MCP-Server. Die Figma-Verbindung zeigt Claude die tatsächlichen Schaltflächen, Farben und Komponenten, die bereits in Ihrer Datei enthalten sind, und die Funktion teilt ihm mit, wie diese zu verwenden sind.

Warum zahlt sich Design als Kompetenz am meisten aus?

Im Designbereich zahlt sich eine Fertigkeit schneller aus als in jedem anderen Berufsfeld, da das Ergebnis auf den ersten Blick beurteilt wird. Ein mittelmäßiger Absatz oder eine mittelmäßige Funktion muss erst gelesen werden, bevor jemand bemerkt, dass sie mittelmäßig ist, aber eine Seite, die aus Standardschriftarten und einer Vorlage erstellt wurde, wird sofort abgelehnt. Das bedeutet auch, dass sich eine Fertigkeit, die diese Probleme behebt, sofort bewährt.

Anthropic hat dies beim Aufbau seines Frontend-Skills gemessen, indem es identische Befehle mit und ohne den Skill auf einer SaaS-Landingpage, einem Blog-Layout und einem Dashboard für Administratoren ausführte. Nach dem Laden des Skills ersetzte das Dashboard flache Komponenten durch ein einheitliches dunkles Design mit fetter Schrift und bewussten Animationen, und das Blog-Layout erhielt eine redaktionelle Schriftart und angemessene Abstände. Der Befehl blieb dabei unverändert.

Das Skill, das diese Ergebnisse hervorgebracht hat, benötigt etwa 400 Token und enthält weder Hex-Codes noch Layout-Regeln. Es enthält lediglich die zu vermeidenden Schriftarten und Muster sowie die stattdessen zu befolgenden Vorgaben: eine unverwechselbare Schriftart, eine dominierende Farbe mit markanten Akzenten, eine einzige, gut getimte Animation beim Laden der Seite und einen mehrschichtigen Hintergrund. Anthropic stellte sogar fest, dass allein die typografischen Vorgaben Teile des Designs verbesserten, die gar nicht erwähnt worden waren. Denn das Modell war schon immer dazu in der Lage – es fehlte ihm lediglich ein Grund, nicht mehr die sichere Option zu wählen.

Die gleiche Logik erklärt auch die zuvor erwähnte Aufteilung des Benchmarks. Die sieben Skills, die die Ergebnisse verbesserten, kodierten spezialisiertes prozedurales Wissen, wie beispielsweise Formeln für finanzielle Risiken, und waren auf die jeweilige Aufgabe zugeschnitten.

Die 39, die nichts verändert haben, waren zu allgemein gehalten, um auch nur eine einzige Entscheidung zu beeinflussen. Drei haben die Ergebnisse sogar aktiv beeinträchtigt, da ihre Vorgaben im Widerspruch zu dem Projekt standen, in das sie eingebracht wurden. Der Benchmark testete zwar ausschließlich Aufgaben aus dem Bereich der Softwareentwicklung und nicht das Design, doch der Mechanismus lässt sich übertragen: Ein Skill benötigt eine konkrete Aussage, um etwas zu verändern.

Die offiziellen Skills von Anthropic helfen Claude dabei, bessere Schriftarten, Farben und Layouts im Allgemeinen zu erzielen. Ein Skill, den Sie auf Basis Ihres eigenen Designsystems erstellen, geht noch einen Schritt weiter und passt perfekt zu Ihrer Marke. Im weiteren Verlauf dieses Leitfadens werden beide Aspekte behandelt: welche offiziellen Skills Sie installieren sollten und wie Sie Ihre eigenen erstellen können.

Welche Claude-Skills lohnen sich für das Design?

Sechs offizielle Skills lohnen sich für die Designarbeit: „frontend-design“, „canva-design“, „theme-factory“, „brand-guidelines“, „web-artifacts-builder“ und „webapp-testing“ von Anthropic sowie die Skills von Figma, falls Ihr Team in Figma designt. Der „frontend-design“-Skill ist die erste Installation mit der größten Wirkung.

Vorgefertigte Skills sind in jedem Claude-Plan verfügbar, einschließlich des kostenlosen Plans, sobald Sie die Code-Ausführung aktivieren. Das Hochladen benutzerdefinierter Skills erfordert einen Pro-, Max-, Team- oder Enterprise-Plan. Verwalten Sie beides unter „Anpassen“ und anschließend unter „Skills“.

Registrieren Sie in Claude Code das Skill-Repository von Anthropic mit dem Befehl `/plugin marketplace add anthropics/skills` und installieren Sie anschließend die designrelevante Sammlung mit dem Befehl `/plugin install example-skills@anthropic-agent-skills`.

Ein Skill ist eine Reihe von Anweisungen, denen Ihr Agent folgt. Lesen Sie daher eine SKILL.md von Drittanbietern mit derselben Sorgfalt, mit der Sie Code lesen würden, bevor Sie ihn zusammenführen.

SkillQuelleAm besten geeignet fürÜberspringen Sie diesen Abschnitt, wenn
frontend-designAnthropicBenutzeroberflächen und Landingpages, die nicht wie von einer KI generiert aussehenEin strenges Designsystem bestimmt bereits Ihre Arbeitsergebnisse
canva-designAnthropicPoster und Grafiken für soziale Medien im PNG- oder PDF-FormatSie benötigen Dateien für die Bearbeitung der Quelltexte, keine fertigen Grafiken.
theme-factoryAnthropicAuswahl eines vorgefertigten Themas für Farben und Schriftarten für Präsentationen und SeitenDeine Marke legt bereits Farben und Schriftarten fest
MarkenrichtlinienAnthropicEin anschauliches Beispiel für eine vollständige Marken-Skill, die auf der Identität von Anthropic basiertSie erwarten, dass es Ihre Marke kennt; es wird standardmäßig mit Anthropic’s ausgeliefert.
web-artifacts-builderAnthropicInteraktive React- und Tailwind-Prototypen in Claude KIDein Prototyp benötigt deine Produktionskomponenten
webapp-testingAnthropicÜberprüfen einer erstellten Seite in einem echten Browser vor der ÜbergabeSie erstellen ausschließlich statische Design-Assets
Figma-SkillsFigmaArbeit in beide Richtungen zwischen Figma und Code übertragenIhr Team arbeitet nicht mit Figma
Ihr Design-System-SkillSieErgebnisse, die zur visuellen Sprache Ihres Produkts passenSie verfügen noch nicht über wiederverwendbare Designkonventionen

frontend-design

„frontend-design“ ist die wirkungsvollste Installation für die Arbeit an Benutzeroberflächen. Bevor Claude UI-Code schreibt, sorgt die Funktion dafür, dass er sich auf eine ästhetische Richtung committet und von den Schriftarten, Farbverläufen und Layouts ablenkt, die eine Seite als maschinell erstellt kennzeichnen.

Was gut funktioniert

  • Eine Richtung, noch bevor eine einzige Zeile Code geschrieben wird: Bei diesem Skill wählt Claude eine bestimmte visuelle Identität für das Briefing aus, einschließlich eines bewussten ästhetischen Risikos, anstatt das Design nach und nach anzupassen.
  • Zu vermeidende Standardbezeichnungen: Inter, Roboto, violette Farbverläufe auf weißem Hintergrund sowie austauschbare Komponenten sind ausdrücklich ausgeschlossen, weshalb das Ergebnis nicht mehr wie jede andere /AI-Seite aussieht
  • Geringer Speicherbedarf: Die Anleitung umfasst etwa 400 Tokens, sodass die Installation fast nichts kostet.

Einschränkungen

  • Allgemeiner Geschmack, nicht Ihr Geschmack: Die Funktion weiß, wie generisches Design aussieht, und vermeidet es, hat aber keine Ahnung, wie Ihr Produkt aussehen soll.
  • Nur für die Arbeit an Benutzeroberflächen: Dies ist der Auslöser für Aufgaben im Bereich der Web-Benutzeroberfläche; Poster und statische Grafiken gehören zum Bereich „Canva-Design“.

Überspringe diesen Abschnitt, wenn: Du bereits ein Design-System-Skill mit strengeren Regeln betreibst. In derselben Sitzung konkurrieren zwei ästhetische Ansichten miteinander, und deine sollte sich durchsetzen. In Claude Code haben beispielsweise persönliche und Projekt-Skills Vorrang vor Plugin-Installationen wie dieser, sodass deine Standardmäßig den Vorzug erhält.

Am besten geeignet für: Landingpages, Dashboards und Komponenten, bei denen die Leiste lautet „sieht nicht wie KI-generiert aus“ und noch kein Hausstil vorhanden ist.

canva-design

canvas-design erzeugt fertige visuelle Kunstwerke wie Plakate und Social-Media-Grafiken als PNG- oder PDF-Dateien. Es arbeitet in zwei Schritten und spiegelt dabei die Vorgehensweise eines Designers wider. Zunächst verfasst es eine kurze Designphilosophie für die Arbeit. Anschließend erstellt es auf Grundlage dieser Philosophie das Bild, wobei der Text auf ein Minimum reduziert und die Schrift als Teil der Komposition behandelt wird.

Was gut funktioniert

  • Ein Konzept vor den Pixeln: Der Philosophie-Schritt sorgt für eine kohärente visuelle Idee, sodass das Ergebnis eine einheitliche Ansicht aufweist und nicht nur als verzierte Leere erscheint.
  • Original gemäß Anweisung: Die Fähigkeit weist Claude ausdrücklich an, originelle Designs zu erstellen, anstatt bestehende Künstler zu imitieren.

Einschränkungen

  • Nur fertige Dateien: Sie erhalten eine gerenderte PNG- oder PDF-Datei sowie das Konzeptdokument; es gibt keine Quelldatei mit Ebenen, die Sie nachträglich bearbeiten könnten.

Überspringen Sie diesen Schritt, wenn: Das Ergebnis zur Überarbeitung wieder in Figma oder Illustrator importiert werden muss. In diesem Fall ist eine Neugenerierung die einzige Möglichkeit zur Bearbeitung.

Am besten geeignet für: Einmalige Grafiken mit einer Deadline, bei denen eine stimmige, fertige Komposition wichtiger ist als eine Datei, die für die Bearbeitung zugänglich ist.

theme-factory und brand-guidelines

Diese beiden Skills lösen das Problem der Konsistenz von zwei entgegengesetzten Seiten aus. „theme-factory“ liefert zehn vorgefertigte Designs, jedes mit einer Farbpalette und darauf abgestimmten Schriftarten. Es kann auf Wunsch ein neues Design generieren und das ausgewählte Design dann auf ein Deck, ein Dokument oder eine Seite anwenden. „brand-guidelines“ zeigt, wie ein vollständig spezifizierter Marken-Skill aussieht, in den die exakte Farbpalette und die Schriftarten eines Unternehmens integriert sind. Der Haken: Bei diesem Unternehmen handelt es sich um Anthropic. Betrachten Sie es daher als Grundlage, die Sie mit Ihren eigenen Werten anpassen können, und nicht als Skill, der Ihre Marke kennt.

Was gut funktioniert

  • Eine Entscheidung, überall angewendet: Wählen Sie einmal ein Thema aus, und jede Folie oder Seite im Dokument folgt diesem – das verhindert Abweichungen zwischen Folie 3 und Folie 14.
  • Eine Ausweichlösung, wenn noch keine Marke vorhanden ist: Für interne Arbeiten oder frühe Konzepte, für die es noch keine visuelle Identität gibt, ist ein voreingestelltes Theme besser als ein improvisiertes Styling.

Einschränkungen

  • Styling, nicht Design: Beide Skills regeln Farben und Schriftarten. Layout, Hierarchie und Bildmaterial richten sich weiterhin nach den Vorgaben, die für die jeweilige Sitzung maßgeblich sind.

Überspringen Sie diesen Abschnitt, wenn: Ihre Markenrichtlinien bereits in einem benutzerdefinierten Design-System-Skill enthalten sind. Eine zweite Quelle der Wahrheit für Farben und Schriftarten ist, wie sich die alte Akzentfarbe wieder einschleicht.

Am besten geeignet für: Teams, die in großem Umfang Präsentationen und kundenorientierte Dokumente erstellen, bei denen Konsistenz wichtiger ist als Kreativität.

web-artifacts-builder und webapp-testing

Diese beiden bilden den Rahmen für einen Prototyp. Mit „web-artifacts-builder“ kann Claude „Claude Artifacts“ mit React, Tailwind und shadcn/ui über mehrere Dateien hinweg erstellen und bündelt anschließend alles in die als „artifacts“ benötigte Einzeldatei. So entstehen Prototypen mit funktionsfähigen Formularen und echten Komponenten statt einer bloßen HTML-Seite.

webapp-testing öffnet das Ergebnis anschließend in einem echten Browser, klickt sich durch die Seite und erstellt Screenshots sowie Konsolenprotokolle. Eine fehlerhafte Interaktion wird aufgedeckt, bevor ein Stakeholder sie entdeckt.

Was gut funktioniert

  • Umfangreichere Prototypen von Haus aus: Eine mit dem Skill erstellte Aufgaben-App enthält ein funktionsfähiges Formular zum Erstellen von Aufgaben mit Kategorien und Fälligkeitsdaten, während die Version ohne den Skill minimalistisch bleibt
  • Prüfung vor der Übergabe: Ein Screenshot aus einem echten Browser gibt viel besser Aufschluss darüber, ob es tatsächlich funktioniert, als generierter Code.

Einschränkungen

  • Generische Komponentenbibliothek: Prototypen werden aus shadcn/ui-Teilen erstellt, nicht aus Ihren Produktionskomponenten, sodass die Übereinstimmung mit Ihrem Produkt begrenzt ist
  • Für das Testen ist eine lokale App erforderlich: webapp-testing führt lokale Webanwendungen aus, wodurch es eher ein Tool für den Entwickler-Workflow als ein Design-Tool ist.

Überspringen Sie diesen Abschnitt, wenn: Ihre Prototypen Produktionskomponenten verwenden müssen oder Ihre Ausgabe niemals in einem Browser ausgeführt wird.

Am besten geeignet für: Designingenieure, die interaktive Prototypen zur Begutachtung bereitstellen und möchten, dass diese nicht nur gut aussehen, sondern auch funktionsfähig sind.

Die offiziellen Skills von Figma

Figma unterhält auf GitHub ein eigenes Skillset, das für die Verwendung mit dem Figma Model Context Protocol (MCP) -Server entwickelt wurde. Das Skillset funktioniert in beide Richtungen: „figma-design-to-code“ wandelt einen Figma-Knoten in Code für Ihre eigentliche Entwicklungsumgebung um. „figma-generate-design“ erstellt Bildschirme in Figma aus Ihren veröffentlichten Komponenten und Tokens. „figma-generate-library“ erstellt eine Komponentenbibliothek aus einer Codebasis. Und „figma-code-connect“ ordnet Designs ihren Code-Implementierungen zu, sodass der Dev-Modus echten Komponentencode anstelle von generierten Annäherungen anzeigt.

Was gut funktioniert

  • Echte Komponenten statt Vermutungen: Da die Skills auf der MCP-Verbindung basieren, arbeitet Claude mit Ihren tatsächlichen Variablen, Stilen und veröffentlichten Komponenten.
  • Durchgesetzte Disziplin: Die Skills erfordern einen Designkontext, bevor Code geschrieben wird, sowie Design-System-Token anstelle von fest codierten Werten – genau das ist der Fehler, den man bei manuell gesteuerten Sitzungen begeht.

Einschränkungen

  • Per Definition auf Figma ausgerichtet: Bei jedem Skill wird davon ausgegangen, dass Ihre Designvorlagen in Figma-Dateien mit einer Verbindung zum MCP-Server gespeichert sind, und das Setup ist aufwendiger als eine Installation mit einem einzigen Befehl.

Überspringen Sie diesen Abschnitt, wenn: Ihr Team nicht mit Figma arbeitet. In der frühen Explorationsphase lohnt es sich auch zu überlegen, ob Sie Figma KI überhaupt in den Prozess einbeziehen müssen oder ob ein „Prompt-First“-Tool schneller ist.

Am besten geeignet für: Produktteams mit einem veröffentlichten Figma-Designsystem, die den Prozess vom Design zum Code und vom Code zum Design nicht mehr manuell durchführen möchten.

So erstellen Sie eine Claude-Funktion für Ihr Designsystem

Das Erstellen eines Design-System-Skills erfolgt in sechs Schritten: Wählen Sie einen wiederkehrenden Workflow aus, entwerfen Sie die SKILL.md mit Hilfe von Claude, verfassen Sie eine Beschreibung, die Claude mit realen Aufgaben abgleichen kann, füllen Sie die Anweisungen mit Ihren tatsächlichen Design-Tokens, vergleichen Sie die Ausgabe mit und ohne den Skill und installieren Sie den Ordner dort, wo Ihr Team arbeitet.

Schritt 1: Wählen Sie einen wiederkehrenden Design-Workflow aus

Schreiben Sie die Funktion für eine Aufgabe, die Sie Claude bereits mehrmals pro Woche geben. Die Wiederholung rechtfertigt die Datei: Die Funktion erspart Ihnen das Einfügen derselben Regeln in jede Sitzung, sodass eine Aufgabe, die Sie nur einmal ausführen, keine benötigt.

Häufige Kandidaten:

  • Produkt-UI: Bildschirme und Komponenten in der visuellen Sprache Ihres Produkts
  • Client-Präsentationen: Folien, die dem etablierten Stil Ihres Studios entsprechen
  • Handoff-Spezifikationen: Entwicklerdokumentation in dem Format, das Ihre Entwickler erwarten

Profi-Tipp: Wählen Sie den Workflow, bei dem generische Ausgaben den größten Nacharbeitsaufwand verursachen, und nicht den, der sich am einfachsten niederschreiben lässt.

Schritt 2: Lassen Sie Claude den Entwurf für die SKILL.md erstellen

Beschreiben Sie Claude den Workflow und lassen Sie ihn den ersten Entwurf erstellen. Er fragt nach der Aufgabe, wann das Skill aktiviert werden soll und wie das Ergebnis aussehen soll, und erstellt dann die Datei. Das sind die Fragen, deren Beantwortung die meisten Menschen vergessen, wenn sie die Datei von Hand schreiben.

Die Verfasseranleitung von Anthropic betrachtet den Entwurf als Ausgangspunkt, und der anschließende Zyklus ist kurz: Führen Sie eine reale Aufgabe aus, notieren Sie, was bei der Ausgabe falsch gelaufen ist, überarbeiten Sie die Anweisungen und führen Sie die Aufgabe erneut aus.

Schritt 3: Verfassen Sie eine Beschreibung, die tatsächlich als Auslöser dient

Die Beschreibungszeile im YAML-Frontmatter entscheidet darüber, ob Ihr Skill überhaupt ausgeführt wird. Claude liest nur diese Zeile, wenn es installierte Skills nach einer Übereinstimmung durchsucht. Daher passt „helps with design“ zu nichts, und die darunter stehenden Anweisungen werden nie geladen.

Eine Beschreibung, die drei Auslöser in den Wörtern auslöst, die du in eine Eingabeaufforderung eingeben würdest:

  • Die Aufgaben: „Erstellung von Benutzeroberflächen, Landing-Seiten oder Komponenten“
  • Der Anwendungsbereich: Das Produkt oder die Marke, auf die sich das Skill bezieht
  • Die geltenden Regeln: „Unsere Design-Token, Schriftgrößen und Abstandsregeln“

Claude KI schreibt ein kürzeres Limit von 200 Zeichen für hochgeladene Skills vor. Schreiben Sie also für 200 Zeichen und nutzen Sie die in der Spezifikation vorgesehenen 1.024 Zeichen als Spielraum für den Claude-Code.

Schritt 4: Kodieren Sie das Designsystem, nicht die Adjektive

Füllen Sie die Anweisungen mit Werten, nicht mit Beschreibungen von Werten. „Sauber und modern“ überlässt jede konkrete Entscheidung dem Modell, das diese anhand seiner Standardwerte trifft. Ihr Designsystem hat diese Entscheidungen bereits getroffen, kopieren Sie sie also einfach hinein:

  • Farbe: Genaue Hex-Werte, keine Farbnamen
  • Typ: Die vollständige Skala mit benannten Schriftarten und Schriftstärken
  • Space: Abstandsmaßeinheiten und Rahmenradien
  • Bewegung: Dauern und Beschleunigungsverläufe, sofern Ihr System diese definiert
  • Die Verbotsliste: Standard-Kartenraster, Helden mit Farbverläufen, Stock-Illustrationsstil und alles andere, was Ihr System namentlich verbietet

Die Sperrliste leistet mehr Arbeit als die Zulassungsliste, da sie die Ausweichoptionen entfernt, auf die das Modell zurückgreift, wenn die Anweisungen nicht mehr ausreichen. Wenn Sie bereits Markenrichtlinien pflegen, handelt es sich bei diesem Schritt um eine Umsetzung und nicht um eine Neuerfindung. Umfangreicheres Referenzmaterial, wie beispielsweise ein Komponentenverzeichnis oder Barrierefreiheitsregeln, gehört in einen Ordner mit Referenzen, den der Skill nur dann lädt, wenn eine Aufgabe dies erfordert.

Schritt 5: Testen Sie anhand von Claudes Baseline

Führen Sie eine reale Aufgabe zweimal aus – einmal mit installiertem Skill und einmal ohne – und vergleichen Sie die Ergebnisse nebeneinander. Der Vergleich zeigt Ihnen zwei Dinge: ob der Skill überhaupt als Auslöser fungiert hat und ob die Anweisungen sichtbare Änderungen bewirkt haben.

Wenn die beiden Ergebnisse identisch aussehen, sind die Anweisungen zu vage. Ersetze die ungenauen Zeilen durch konkrete Werte und führe die Aufgabe dann erneut aus.

Profi-Tipp: Verwenden Sie eine Komponente, die Sie kürzlich veröffentlicht haben, als Aufgabe für das Testen. Ergebnisse, die Sie mit echter Produktionsarbeit vergleichen können, decken unklare Anweisungen schneller auf als eine erfundene Eingabeaufforderung.

Schritt 6: Installiere es in deiner Arbeitsumgebung und verwalte die Versionen

Lade in Claude KI den Skills-Ordner unter „Einstellungen“, dann „Benutzerdefiniert“ und anschließend „Skills“ hoch. In Claude Code committe ihn in das Verzeichnis `claude/skills/` deines Projekts, und jeder, der das Repo klont, erhält ihn.

Aktualisiere den Skill im selben Pull Request, mit dem auch das Designsystem aktualisiert wird. Andernfalls wird das Rebranding veröffentlicht, die Tokens ändern sich, und ein Skill, den niemand angepasst hat, wendet weiterhin die Farbe des letzten Quartals auf jeden neuen Build an. Claude hat keine Möglichkeit zu erkennen, dass die Datei veraltet ist, daher muss die Überprüfung Teil deines Prozesses sein.

Profi-Tipp: Füge die Funktion zu deiner Checkliste für das Design-System-Audit hinzu, damit die Datei im gleichen Zeitplan überprüft wird wie das System, das sie beschreibt.

Fünf Fehler bei Skills, die sich direkt vor den Augen verbergen

Offensichtliche Fehler würden dir sofort auffallen: ein Skill, der eine Fehlermeldung ausgibt, eine Beschreibung mit einem Tippfehler in den Auslösern oder Anweisungen, die sich widersprechen. Die Fehler, die Design-Skills tatsächlich zunichte machen, geben sich jedoch nicht zu erkennen. Der Skill lässt sich problemlos installieren, die Sitzungen laufen einwandfrei, und die Ausgabe bleibt stillschweigend falsch. Hier sind fünf Punkte, auf die du achten solltest:

Die Skill-Sammlung, die nichts bewirkt. Ihr Skill-Ordner enthält fünfzehn Downloads, die Sitzungen werden problemlos geladen, und die Ausgabe sieht genauso aus wie vor dem Hinzufügen dieser Skills. Es treten keine Fehler auf, daher wird auch nichts hinterfragt. Jeder Skill wird entweder nie ausgelöst oder wiederholt Ratschläge, die Claude ohnehin schon befolgt, und Sie zahlen Token-Kosten für null Veränderung.

Die Lösung: Unterziehe jede installierte Funktion demselben Vorher-Nachher-Test, den du selbst durchführen würdest. Behalte die zwei oder drei Funktionen, die die Ausgabe sichtbar verändern, und lösche den Rest ohne zu zögern.

Die Funktion, die dem Modell entspricht. Ihre Anweisungen lauten „modern, übersichtlich, barrierefrei“, und Claude erstellt trotzdem die Median-Seite. Es hat Sie nicht ignoriert. Die Median-Seite ist bereits modern, übersichtlich und barrierefrei, daher hat Ihre Funktion genau das angefordert, was die Standards liefern. Adjektivische Anweisungen werden immer akzeptiert – und genau deshalb schlagen sie immer fehl.

Die Lösung: Formulieren Sie jedes Adjektiv als Entscheidung um: einen Hex-Wert, eine benannte Schriftart, ein verbotene Muster. Wenn eine Regel nicht verletzt werden darf, ist sie keine Anweisung.

Das Skill, das nie zum Einsatz kommt. Die Datei bleibt wochenlang installiert, und Claude erwähnt nie, dass sie geladen wird. Niemand bemerkt es, da die Sitzungen weiterhin Ergebnisse liefern – nur eben ungeschickte Ergebnisse. Claude wählt Skills aus, indem es Ihre Anfrage mit der einzeiligen Frontmatter-Beschreibung abgleicht, und eine vage Beschreibung passt zu nichts.

Die Lösung: Formulieren Sie die Beschreibung mit genau den Worten um, die Sie bei der Zuweisung der Aufgabe eingeben. Wenn Sie beispielsweise „Erstelle die Preisseite“ sagen, sollte die Beschreibung „Seiten“ lauten und nicht „unterstützt bei der visuellen Qualität“.

Die Funktion, die Sie als „Augen“ betrachten. Die Ausgabe bleibt bei jeder in den Anweisungen vorgesehenen Aufgabe markengerecht, weicht jedoch vom Markenbild ab, sobald eine Anfrage außerhalb dieser Anweisungen liegt. Diese Lücke gab es schon immer: Eine Funktion schränkt die Auswahlmöglichkeiten ein, kann Ihr Produkt aber nicht „sehen“. Was auch immer die Anweisungen nicht abdecken, füllt das Modell anhand seiner Standardwerte aus.

Die Lösung: Verknüpfen Sie das Skill mit etwas, das Claude tatsächlich betrachten kann – sei es eine Verbindung zu einer Designdatei, eine erfasste Komponente oder Screenshots von veröffentlichten Bildschirmen. Regeln in Verbindung mit Referenzmaterial decken das ab, was Regeln allein nicht leisten können.

Die Funktion, die den Rebranding-Prozess überdauert. Drei Wochen nach der Einführung der neuen Farbpalette wendet Claude bei jedem neuen Build weiterhin ganz selbstbewusst die alte Farbe an. An der Datei sieht nichts fehlerhaft aus, da sich darin nichts geändert hat. Genau das ist das Problem: Das Designsystem hat sich geändert, die Funktion jedoch nicht, und Claude hat keine Möglichkeit, den Unterschied zu erkennen.

Die Lösung: Binden Sie die Skill-Datei in denselben Release-Prozess wie das Designsystem ein, damit sich die beiden zwischen den Überprüfungen nicht voneinander entfernen.

So führen Sie einen Skill-gestützten Design-Workflow in ClickUp durch

Erstellen Sie eine markenspezifische Präsentation als teilbares ClickUp-Artefakt

In ClickUp findet die gesamte Arbeit rund um einen Claude-Skill statt: das Briefing, das als Grundlage dient, die Überprüfung, die den Skill formt, und die Übergabe, die ihn bereitstellt. Ein Design-Skill legt die Ausgabe von Claude fest. ClickUp legt den Workflow fest, in dem diese Ausgabe entsteht.

Was funktioniert speziell bei skill-basiertem Design besonders gut:

  • Nutzen Sie Claude und andere LLMs direkt: Wechseln Sie mitten in einer Unterhaltung in ClickUp Brain zu Claude, ohne Ihren Workspace zu verlassen. Stellen Sie Fragen zur aktuellen Designaufgabe, und Brain ruft Informationen ab, die in einer eigenständigen Claude-Sitzung nicht sichtbar sind – wie beispielsweise das letzte Feedback des Clients oder das Briefing zwei Aufgaben weiter oben im Thread.
  • Verwandeln Sie die Designregeln Ihres Teams in wiederverwendbare Leitfäden: ClickUp verfügt über eigene KI-Skills – gespeicherte Anweisungssätze, die Brain anwendet, sobald eine passende Aufgabe auftaucht. Erstellen Sie einen Skill mit dem Befehl „Bei der Überprüfung einer Landingpage anhand unserer Schriftgrößen, verbotener Muster und Abstands-Token prüfen“, und bei jeder Überprüfung wird dieselbe Checkliste durchlaufen. Die Dokumentation des Designsystems, auf die der Skill zurückgreift, kann parallel dazu als versionsverfolgtes ClickUp-Docs-Wiki bereitgestellt werden, das für das gesamte Team zugänglich ist.
Erstellen Sie benutzerdefinierte Skills mit der KI von ClickUp
Erstellen Sie benutzerdefinierte Skills mit der KI von ClickUp

Sehen Sie sich an, wie ClickUp AI-Skills in der Praxis funktionieren – von der Erstellung eines wiederverwendbaren Playbooks bis hin zum automatischen Laden der richtigen Anweisungen in das „Brain“:

  • Schließen Sie die Feedbackschleife für von Claude generierte Design-Assets: Fügen Sie das von Claude erstellte Mockup oder den Screenshot der Landingpage der entsprechenden Aufgabe als Anhang bei, und die Beteiligten können es direkt mit ClickUp Prüfung kommentieren. „Der Abstand im Hero-Bereich wirkt unausgewogen“ wird zu einer Anmerkung an den genauen Koordinaten, die einem Designer zugewiesen und auf dessen Startseite angezeigt wird.
  • Stellen Sie eine interaktive Vorschau statt eines Screenshots bereit: Bitten Sie Brain um eine Landingpage, eine Präsentation oder ein Dashboard, und es generiert ein Live-ClickUp-Artefakt: eine funktionsfähige HTML-Seite, die auf der Grundlage des Briefings, der Markendokumente und der bereits dem Projekt beigefügten Anhänge mit Aufgabendaten erstellt wird. Fügen Sie die URL an beliebiger Stelle in Ihrem Workspace ein, und sie wird für die Beteiligten rendert, die sich durchklicken können.

Limitierungen:

  • ClickUp ist nicht der Ort, an dem Sie Claude-Skills erstellen oder ausführen: Claude-Skills befinden sich in Claude KI und Claude Code. ClickUp ist das Verwaltungssystem für diese Skills, nicht die Produktionsumgebung.
  • Es gibt eine gewisse Zeit des Setups. Teams, die von einem einfacheren Tool oder gar keinem Projektmanagement-Tool kommen, müssen sich im Vorfeld Gedanken über Hierarchien und Status machen. Ein einzelner Designer mit drei Clients kommt mit einem einfacheren Tool schneller ans Ziel.

Überspringen Sie diesen Abschnitt, wenn: Sie Claude nur zur Erstellung einmaliger Grafiken benötigen und es keinen Überprüfungsprozess durch Ihr Team gibt.

Am besten geeignet für: Designteams, in denen Claude die Produktion übernimmt und ein Team aus Menschen sich um die Briefing-Erstellung, das Feedback und die Freigabe kümmert – und in denen diese Übergaben nicht länger in verstreuten Threads stattfinden sollen.

Einmal erstellen, für immer nutzen

Das Ergebnis aller aussagekräftigen Tests ist dasselbe: Skills mit einer bestimmten Ansicht verändern das Design-Ergebnis, während generische Skills keinen Unterschied machen. Installieren Sie noch heute den Frontend-Design-Skill von Anthropic – das ist die schnellste sichtbare Verbesserung. Nehmen Sie sich dann einen Nachmittag Zeit, um Ihr eigenes Designsystem in eine SKILL.md-Datei zu implementieren.

Testen Sie es anhand der Baseline und verwalten Sie die Versionen in Ihrem System. Diese eine Datei macht den Unterschied zwischen KI-Ergebnissen, die wie die aller anderen aussehen, und KI-Ergebnissen, die wie Ihre eigenen aussehen.

Zwar löst das Skill das Produktionsproblem, doch das Problem des Workflows bleibt ungelöst. Ihr Designer erhält nach wie vor den Auftrag in einer App, Feedback in einem E-Mail-Thread und die Freigabe in einem Meeting, in dem niemand Notizen gemacht hat. Das Ergebnis verbessert sich zwar, doch der umgebende Prozess bleibt fragmentiert.

Unsere Empfehlung: Überlassen Sie Claude die aufwendige Produktionsarbeit über Ihren Skill und führen Sie die Briefings, Überprüfungen und Freigaben des Teams so durch, dass sie für alle sichtbar sind.

Testen Sie ClickUp kostenlos und statten Sie Ihren Design-Workflow mit demselben System aus, das Ihr Skill gerade Ihrem Ergebnis verliehen hat.

Häufig gestellte Fragen zu Claude Design Skills (FAQs)

Wie viel Kontext verbraucht ein installiertes Skill?

Pro Skill werden etwa 100 Token verbraucht, bis dieser als Auslöser ausgelöst wird. Claude lädt beim Start lediglich den Namen und die Beschreibung jedes Skills; der vollständige Inhalt der SKILL.md-Datei (Anthropic empfiehlt weniger als 5.000 Token und 500 Zeilen) wird erst dann in den Kontext geladen, wenn eine Aufgabe passt, und gebündelte Referenzdateien werden erst beim Lesen geladen. Ein Dutzend installierte Skills verursachen einen ständigen Overhead von etwa 1.200 Token.

Kann ein Claude-Skill ausführbaren Code enthalten?

Ja. Skills können Python-, JavaScript- oder Bash-Skripte in einem Verzeichnis „scripts/“ bündeln, das im YAML-Frontmatter als Abhängigkeit deklariert wird. Claude und Claude Code können beim Laden eines Skills Pakete aus PyPI und npm installieren; API-Skills erfordern, dass alle Abhängigkeiten bereits im Container vorinstalliert sind. Die von Anthropic selbst entwickelten Dokument-Skills für Excel, Word und PDF nutzen dieses Muster.

Welcher Skill hat Vorrang, wenn zwei Skills miteinander in Konflikt stehen?

In Claude Code folgen Skills bei Namenskonflikten einer festgelegten Prioritätsreihenfolge: Zuerst von Unternehmen verwaltete Skills, dann persönliche Skills in ~/.claude/skills, anschließend Projekt-Skills in .claude/skills und zuletzt per Plugin installierte Skills. Organisationen können über Unternehmens-Skills Standards durchsetzen, während Einzelpersonen persönliche Übersteuerungen beibehalten können. Die Verwendung beschreibender Namen wie „frontend-review“ anstelle von „review“ vermeidet die meisten Konflikte.

Was ist der Unterschied zwischen einer Claude-Funktion und einem Plugin?

Ein „Skill“ ist ein einzelner Ordner mit einer SKILL.md-Anleitungsdatei; ein „Plugin“ ist ein Paket der Verteilung, das mehrere Skills zusammen mit Konnektoren und Befehlen für Claude Code bündeln kann. Anthropic liefert „frontend-design“ als Plugin aus, das den Skill enthält und mit einem einzigen Marketplace-Befehl installiert wird. Wenn Sie Ihre eigenen Designregeln erstellen, schreiben Sie einen Skill; Plugins dienen dazu, ganze Sätze davon freizugeben.

Sind Claude-Skills kostenlos nutzbar?

Vorgefertigte Skills sind in allen Claude-Plänen verfügbar, einschließlich des Free-Plans, sofern die Code-Ausführung in den Einstellungen aktiviert ist. Das Hochladen benutzerdefinierter Skills erfordert einen Pro-, Max-, Team- oder Enterprise-Plan. Die vorgefertigten Skills von Anthropic werden für alle Benutzer automatisch aktiviert, und Sie können benutzerdefinierte Skills unter „Anpassen“ und dann „Skills“ hochladen.

Nein. Ein „Skill“ ist ein Ordner, der eine SKILL.md-Datei enthält: YAML-Frontmatter mit einem Namen und einer Beschreibung, gefolgt von Anweisungen im reinen Markdown-Format. Ausführbare Python-, JavaScript- oder Bash-Skripte sind optionale Ergänzungen für fortgeschrittene Workflows. Die Dokumentation zu benutzerdefinierten Skills von Anthropic empfiehlt, zunächst nur mit Anweisungen zu beginnen und Skripte erst später hinzuzufügen, falls die Aufgabe diese erfordert.