design-systemvon Anthropic

Design System Skill.

Ein Claude Code und Codex Skill für Marken- und Designsystem-Arbeit: prüft, dokumentiert oder erweitert ein bestehendes Designsystem.

Brand & Design Systems
Design-System

OpenDesign herunterladen Anleitung ansehen

anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 5.552 Zeichen insgesamt

01 Was es tut

Was der design-system Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Ein Slash-Command-Skill für die Arbeit an einem bestehenden Design-System in drei Modi: Audit, Dokumentation oder Erweiterung. Der Audit-Durchlauf berichtet über Namenskonsistenz, Token-Abdeckung und Komponentenvollständigkeit und bewertet das System mit einer Punktzahl von 100. Der Dokumentationsmodus erstellt eine Komponentenspezifikation mit Beschreibung, Varianten, Props, Zuständen, Barrierefreiheit und Do's and Don'ts.

Der Erweiterungsmodus schlägt eine neue Komponente oder ein neues Muster im Vergleich zu den bestehenden des Systems vor, listet die dabei verwendeten Tokens auf und nennt die offenen Fragen, die sich daraus ergeben. Er umfasst Design-Tokens, Komponenten und Muster und kann bei bestehender Verbindung auf ein Design-Tool oder eine Wissensdatenbank zugreifen. Zielgruppe sind Designer und Entwickler, die ein System kohärent halten.

Was er erzeugt

Ein Design-System-Audit-Bericht, der mit priorisierten Maßnahmen endet
Komponentendokumentation mit einer Props-Tabelle aus Property, Type, Default und Description
Ein neuer Komponentenvorschlag, der mit dem gelösten Problem beginnt

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Wählen Sie den Modus über das Argument
Der Befehl nimmt einen Modus plus ein Ziel: prüfen Sie das gesamte System per Audit, oder führen Sie eine einzelne Komponente oder ein Muster durch Dokumentation oder Erweiterung.
02
Führen Sie das Audit entlang drei Achsen durch
Das Audit prüft die Namenskonsistenz, die Token-Abdeckung im Verhältnis zu hartkodierten Werten und wie vollständig jede Komponente ist, und benennt anschließend die priorisierten Maßnahmen.
03
Schreiben Sie die Komponentenspezifikation
Der Dokumentationsmodus füllt eine Vorlage mit Beschreibung, Varianten, Props mit Typen und Defaults, Zuständen, Barrierefreiheit und einer Do's-and-Don'ts-Tabelle.
04
Schlagen Sie die Erweiterung im Vergleich zum Bestehenden vor
Der Erweiterungsmodus vergleicht die neue Idee mit verwandten Komponenten und schlägt dann eine API, Varianten, Zustände und die genauen Tokens vor, die die Komponente verwenden würde.
05
Greifen Sie bei vorhandenen Verbindungen auf angeschlossene Tools zu
Bei einer Verbindung zu einem Design-Tool kann der Skill Komponenteneigenschaften und die Ebenenstruktur für die Dokumentation abrufen und Namensgebung, Varianten und Token-Nutzung in Figma prüfen.

02 Finden Sie Ihren Favoriten

Wann der design-system Skill zu verwenden ist

Verwenden Sie den design-system Skill in Claude Code oder Codex, wenn die Aufgabe Brand- und Design-System-Arbeit dieser Art ist. Eignung und Grenzen stammen aus der eigenen Datei des Skills.

Gut geeignet

Sie vermuten, dass sich Namensinkonsistenzen oder hartkodierte Werte in Ihre Komponenten eingeschlichen haben.
Sie benötigen eine Dokumentation für eine Komponente, die deren Varianten, Zustände und Hinweise zur Barrierefreiheit abdeckt.
Sie entwerfen eine neue Komponente oder ein neues Muster und möchten, dass es zu Ihrem bestehenden System passt.
Sie möchten, dass der Skill mithilfe einer verbundenen Wissensdatenbank prüft, was bereits dokumentiert ist, bevor mehr geschrieben wird.

Grenzen kennen

Einmalkomponenten, die duplizieren, was das System bereits bietet, konterkarieren den Zweck des Systems.
Ein Erweiterungsvorschlag klärt die schwierigen Entscheidungen nicht: Er kann enden, ohne dass Entscheidungen für das Design-Review getroffen wurden.
Komponenten direkt aus Figma zu lesen, funktioniert nur, wenn ein Design-Tool-Connector verfügbar ist.

Was Sie bereitstellen sollten

Der Modus und sein ZielGeben Sie dem Befehl einen Modus sowie die Komponente, das Pattern oder das System, auf das er sich bezieht, damit der Skill weiß, welche Vorlage auszufüllen ist.
Ihre bestehenden Komponenten zum VergleichEin Erweiterungsvorschlag vergleicht verwandte Komponenten hinsichtlich dessen, was sie gemeinsam haben und warum das nicht ausreicht, daher müssen diese Nachbarn bekannt sein.

03 Innerhalb des Skills

Regeln, die das Design-System-Skill Claude Code und Codex vorgibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Namensabweichungen gegen einen Standard melden
Namensinkonsistenzen werden nicht nur markiert: Jede Zeile benennt die betroffenen Komponenten und den zu übernehmenden Standard.
Hardcodierte Werte zählen, nicht schätzen
Die Token-Abdeckung stellt eine definierte Anzahl der gefundenen Instanzen gegenüber, etwa hardcodierte Hex-Werte, willkürliche Abstandswerte oder benutzerdefinierte Schriften und Größen.
Alles dokumentieren
Wenn eine Komponente, Variante oder Regel nicht schriftlich festgehalten ist, behandelt der Skill sie als nicht existent.
Innerhalb der Vorgaben flexibel bleiben
Komponenten sollen kombinierbar sein statt starr, sodass sich das Pattern-Set anpassen lässt, ohne aufgegeben zu werden.
Breaking Changes versionieren
Jeder Breaking Change muss mit einem Migrationspfad kommen, nicht nur mit einer Ersatzkomponente.
Mit einem Audit beginnen
Der Standardeinstiegspunkt ist ein Audit des aktuellen Stands des Systems, bevor irgendetwas dokumentiert oder erweitert wird.
Abdeckung schlägt Perfektion
Achtzig Prozent dokumentierte Komponenten gelten als besser als 10 Komponenten perfekt zu dokumentieren.

04 In Betrieb nehmen

design-system in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

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

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

Generische skills-CLI-Form für design/skills/design-system/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Brand- und Design-System-Arbeitsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Lesen Sie die Audit-Zusammenfassung: geprüfte Komponenten, gefundene Probleme und eine Punktzahl von 100.
Prüfen Sie die Vollständigkeitstabelle pro Komponente, da Zustände, Varianten und Dokumentation separat markiert und bewertet werden.
Bestätigen Sie, dass der Block zur Barrierefreiheit für die dokumentierte Komponente ausgefüllt ist.
Prüfen Sie bei einer Erweiterung, ob die Statustabelle Standard-, Hover- und Deaktiviert-Verhalten abdeckt, bevor sie in die Review geht.

In OpenDesign importieren Sie design-system über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart 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/knowledge-work-plugins Branch main
Skill-Datei: design/skills/design-system/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; Commit 8f877b6
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 24.012 GitHub-Snapshot vom 14.09.2026 für das gesamte anthropics/knowledge-work-plugins-Repository, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für design-system.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

VerwendungDie drei Aufrufformen: das System auditieren, eine Komponente dokumentieren, ein Pattern erweitern.
Bestandteile eines Design SystemsDefiniert Design-Tokens, Komponenten und Patterns mit ihren Unterteilen, Zuständen und ARIA-Belangen.
PrinzipienKonsistenz vor Kreativität, Flexibilität innerhalb von Grenzen, alles dokumentieren, versionieren und migrieren.
Ausgabe — AuditAudit-Vorlage: Zusammenfassungs-Score, Namenskonsistenz, Token-Abdeckung, Vollständigkeit, priorisierte Maßnahmen.
Ausgabe — DokumentierenKomponenten-Vorlage: Beschreibung, Varianten, Props, Zustände, Barrierefreiheit, Do's and Don'ts, Codebeispiel.
Ausgabe — ErweiternVorlage für neue Komponente: Problem, verwandte Patterns, API, Varianten, Zustände, Tokens, offene Fragen.
Falls Connectoren verfügbar sindOptionale Schritte für Design-Tool und Knowledge Base bei Audit, Dokumentation und Veröffentlichung.
TippsBeginnen Sie mit einem Audit, dokumentieren Sie beim Bauen, bevorzugen Sie Abdeckung vor Perfektion.

Die eigene Beschreibung des Skills

„Auditieren, dokumentieren oder erweitern Sie Ihr Design-System. Verwenden Sie diesen Skill bei der Überprüfung von Namensinkonsistenzen oder fest codierten Werten über Komponenten hinweg, beim Schreiben von Dokumentation für Varianten, Zustände und Barrierefreiheitshinweise einer Komponente oder beim Entwerfen eines neuen Musters, das zum bestehenden System passt."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 5.552 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum design-system-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Wo landet die Dokumentation eigentlich?

Die Arbeit kommt als Markdown-Vorlagen in der Konversation zurück. Ist eine Knowledge Base verbunden, kann der Skill die aktualisierte Dokumentation auch in Ihr Wiki veröffentlichen.

Kann ich damit etwas völlig Neues gestalten?

Der Erweiterungsmodus ist für eine neue Komponente oder ein Pattern gedacht, das zu Ihrem bestehenden System passt. Er geht vom Problem und der Lücke in bestehenden Patterns aus, schlägt API, Varianten, Zustände und Tokens vor und endet mit den Entscheidungen und Grenzfällen, die noch ein Design-Review benötigen.

Wie rufe ich die verschiedenen Modi auf?

Geben Sie den Slash-Befehl mit einem Modus und einem Ziel ein. Audit läuft gegen das gesamte System, während Document und Extend eine bestimmte Komponente oder ein Pattern nehmen, zum Beispiel die Extend-Form für ein Pattern, das Sie hinzufügen möchten.

Design System

Führen Sie design-system mit einer echten Brand- und Design-System-Arbeitsaufgabe aus.

OpenDesign herunterladen, design-system über dessen SKILL.md-Link importieren, die obige Eingabeaufforderung einfügen und den Plan vor dem Ergebnis lesen.

OpenDesign herunterladen Alle Skills durchsuchen