design-systemvon Alireza Rezvani

Design System Skill.

Ein Skill für Claude Code und Codex für Marken- und Design-System-Arbeit: erfasst Markenidentität einmalig über einen Assistenten mit 10 Fragen für spätere Dokumente und Präsentationen.

Brand & Design Systems
Design-System

OpenDesign herunterladen Anleitung ansehen

alirezarezvani/claude-skills · markdown-html/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast against WCAG 2.2 AA, derives 12 CSS custom properties in HSL space, and stores the result for every markdown-html … --- ## When to invoke ## Onboarding question set (10 questions) ## Hard rules ## Derived 12-token palette ## Forcing-question library (Matt Pocock grill-with-docs pattern) ## Customization in use (worked example)

Kopfdaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 11.234 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

Der design-system Skill ist der gemeinsame Markeneigner für das markdown-html-Plugin. Er erfasst die Markenidentität einmalig über einen Onboarding-Assistenten mit 10 Fragen – Primary- und Accent-HEX-Werte, Google Fonts für Überschriften und Fließtext, einen Designstil (editorial, technical, minimal oder playful), Standard-Ausgabeverzeichnis, Code-Theme, TOC-Verhalten sowie optionalen Firmennamen und Logo – prüft anschließend den Kontrast von Fließtext und Links gegen WCAG 2.2 AA und leitet 12 CSS-Custom-Properties im HSL-Raum ab.

Drei nur auf der Standardbibliothek basierende Python-Tools übernehmen das Onboarding, das Laden der Konfiguration und die Palettenvalidierung; die Rangfolge ist Projekt vor Global vor den integrierten Standardwerten. Jeder Konverter (md-document, md-review, md-slides) liest die gespeicherte Konfiguration, sodass eine geänderte Token-Einstellung jedes gerenderte Dokument verändert.

Was er erzeugt

Eine Konfigurationsdatei mit der Marke und der abgeleiteten Palette, die entweder global oder in das Projekt geschrieben wird.
Zwölf CSS Custom Properties, die in den Style-Block jedes Konverters eingebettet werden, etwa --md-surface, --md-border, --md-link und --md-warn.
Ein JSON-Schema für die Konfiguration, das als Asset für die Validierung mitgeliefert wird.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Onboarding einmal ausführen
Der Skill ist der gemeinsame Markeninhaber für das markdown-html-Plugin: md-document, md-review und md-slides greifen alle auf die von ihm geschriebene Konfiguration zu, sodass ein einziger Lauf jede Konvertierung markengerecht gestaltet.
02
Die zehn Fragen beantworten
Der Assistent erfasst default_output_dir, primäre und Akzent-HEX-Werte, Überschrift- und Fließtext-Schriftarten, design_style, code_theme, toc.behavior sowie optional company_name und logo_url.
03
Validierung über die Speicherung entscheiden lassen
brand_palette_validator.validate() läuft nach jeder Änderung, sodass das Paar bei jeder Feldbearbeitung erneut geprüft wird und nicht erst am Ende des Assistenten.
04
Die zwölf Tokens ableiten
derive_palette() berechnet Tokens wie --md-surface bei bg plus oder minus 4-6% Leuchtdichte und --md-text-muted als rgba(text, 0.68) und speichert sie unter derived_palette in derselben Konfigurationsdatei.
05
Konfiguration nach Rangfolge auflösen
config_loader.py ist der importierbare Loader, den jeder Konverter vor dem Rendern aufruft; er führt Projekt-, dann Global- und dann eingebaute Standardwerte zusammen und beachtet die Bypass-Umgebungsvariable.
06
Nicht interaktiv überschreiben oder zurücksetzen
Über den Assistenten hinaus akzeptiert onboard.py --defaults, --set key=value, --scope project, --show und --reset, sodass Markenfelder geändert oder gelöscht werden können, ohne die Fragen erneut zu durchlaufen.

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

Ein Workspace, in dem jemand zum ersten Mal darum bittet, Markdown in HTML umzuwandeln, sodass das Onboarding noch nie ausgeführt wurde.
Ein Repository, das eine andere Marke als der Rest Ihrer Arbeit benötigt und die globale Konfiguration nicht erben sollte.
CI oder eine flüchtige Sitzung, die kontaktlose Standardwerte benötigt statt zehn interaktiver Fragen.
Sie haben bereits mindestens einen Marken-HEX-Wert, den Sie konsistent auf HTML-Konvertierungen angewendet sehen möchten.
Sie möchten eine Kandidaten-Primär- und Akzentfarbe gegen WCAG testen, bevor Sie sie in der Konfiguration festlegen.

Grenzen kennen

Es ist kein vollständiges Design-Token-System wie Style Dictionary oder Theo; es liefert zwölf Tokens, nicht hundert.
Es hostet keine benutzerdefinierten Schriftarten – Google Fonts über CDN ist die einzige Typografiequelle.
Es ist keine Accessibility-Audit-Suite; das übernehmen axe-core oder pa11y, und der Skill setzt nur den Kontrast durch.
Es transformiert kein vorhandenes CSS – die abgeleitete Palette wird nur in neu generiertes HTML eingefügt.

Was Sie bereitstellen sollten

Standard-AusgabeverzeichnisEin Pfad, der beschreibbar sein muss; der Standardwert ist ./markdown-html-out/, und ein nicht beschreibbarer oder leerer Wert blockiert das Speichern.
Primäre Marken-HEX-FarbeWird gegen ^#?[0-9a-fA-F]{6}$ validiert; Standard #0A1628. Die Bibliothek der erzwingenden Fragen empfiehlt eine HEX-Farbe, die Sie bereits verwenden, kein Standardblau.
Akzent-HEX oder leerLassen Sie das Feld bei einem ersten Durchlauf leer, damit die Ableitung eine begleitende Farbe erzeugt; setzen Sie sie nur explizit, wenn ein Brand-Kit eine vorgibt.
Namen der Überschrift- und Fließtext-SchriftartenGoogle-Font-Namen, ausgewählt aus 12 sicheren Standardwerten, mit Inter als Standard für beide Rollen.
Optionaler Firmenname und Logo-URLBeide sind standardmäßig leere Zeichenketten; die Logo-URL darf leer sein und wird zur Renderzeit base64-eingebettet.

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.

Kontrast Muss Bestehen, Sonst Wird Nichts Gespeichert
Fließtext auf dem Hintergrund und Links auf dem Hintergrund müssen beide 4,5:1 gemäß WCAG 2.2 §1.4.3 erreichen.
Das Ausgabeverzeichnis Muss Beschreibbar Sein
Der Assistent geht zu einem vorhandenen übergeordneten Verzeichnis hoch und prüft os.access(parent, os.W_OK); ein leerer oder nicht beschreibbarer Pfad beendet den Vorgang mit Code 3, und output_path_resolver.py wendet dieselbe Regel pro Konvertierung an.
Anpassung Muss Die Ausgabe Verändern
Rein dekorative Felder scheitern an der Design-Disziplin: Jeder Verbraucher muss die Konfiguration lesen und anders rendern, wenn sich design_style, brand.primary, code_theme oder toc.behavior ändern.
Die Priorität Ist Festgelegt
Die Projektkonfiguration hat Vorrang vor der globalen Konfiguration, die Vorrang vor den integrierten Standardwerten hat, und der Deep-Merge bewahrt verschachtelte Schlüssel, sodass das Überschreiben von brand.primary in einem Projekt typography.heading_font nicht aus der globalen Konfiguration entfernt.
Der Bypass Ist Nur Für Headless-Läufe Gedacht
MARKDOWN_HTML_NO_CONFIG=1 dient CI, ephemeren Testcontainern und Evaluator-Schleifen; setzen Sie es niemals stillschweigend für einen interaktiven Nutzer, der sich dann fragt, wohin seine Tokens verschwunden sind.
Verwenden Sie Niemals Eine Kräftige Primärfarbe Als Hintergrund
Eine gesättigte Marken-Primärfarbe, die direkt als brand.bg verwendet wird, erzeugt einen geringen Textkontrast; sie gehört stattdessen in den Akzent-Slot.
Bleiben Sie Innerhalb Der 12-Token-Taxonomie
Marken-Semantik wird nicht außerhalb dieser zwölf Tokens in derived_palette kodiert; das Hinzufügen eines weiteren erfordert einen bewussten Namen, Zweck und eine Ableitungsregel.

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/alirezarezvani/claude-skills --skill design-system

Generische skills-CLI-Form für markdown-html/skills/design-system/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

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

Set up the brand for this repo: primary #FF6B35, Inter for headings and body, editorial style, sticky-sidebar TOC, and save it per-project. Point the default output at [output directory] and then convert [document.md] with md-document so it comes out branded.

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:

Prüfen Sie die effektive Konfiguration mit config_loader.py --show, das Projekt über global über Standardwerte auflöst.
Bestätigen Sie, dass die Konfigurationsdatei existiert und setup_completed_at gesetzt ist; fehlt dieser Wert oder ist er null, verweigert der Konverter die Ausführung und zeigt stattdessen das Onboarding an.
Prüfen Sie den Kontrast eines Kandidatenpaars stichprobenartig mit brand_palette_validator.py --primary und --accent, bevor Sie sich auf eine Marke festlegen.
Überprüfen Sie, ob sich der Bypass wie dokumentiert verhält, indem Sie mit MARKDOWN_HTML_NO_CONFIG=1 ausführen, was ausschließlich DEFAULTS zurückgibt.

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: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Branch main
Skill-Datei: markdown-html/skills/design-system/SKILL.md Inhalts-Prüfsumme bei Verifikation erfasst; Commit 19392f7
License: MIT Aus LICENSE; SKILL.md gibt „MIT" an.
Repository-Sterne: 25.934 GitHub-Snapshot vom 14.09.2026 für das gesamte alirezarezvani/claude-skills-Repository, das 5 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungsstatistik 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

Wann aufrufenSymptom-zu-Aktion-Tabelle: Onboarding, Konvertierung verweigern, Projektumfang, Einzelfeld setzen, Zurücksetzen, Standardwerte, Bypass.
Fragenkatalog für das Onboarding (10 Fragen)Tabelle der zehn Schlüssel, Validatoren und Standardwerte, vom Ausgabeverzeichnis bis zur Logo-URL.
Feste RegelnFünf durchnummerierte Regeln: WCAG-AA-Schranke, beschreibbares Verzeichnis, echte Individualisierung, feste Rangfolge, bewusster Bypass.
Abgeleitete 12-Token-PaletteTabelle, die jede CSS-Custom-Property ihrem Zweck und ihrer HSL-Ableitungsregel zuordnet.
Bibliothek erzwingender Fragen (Matt-Pocock-„grill-with-docs“-Muster)Fünf Fragen, eine pro Runde, mit empfohlenen Antworten und Verweisen auf den Kanon.
Individualisierung in der Praxis (durchgerechnetes Beispiel)Bash-Block, der Onboarding, Standardwerte, Setzen, Projektumfang, Zurücksetzen, Anzeigen und Bypass zeigt.
AnnahmenVier Voraussetzungen: ein Marken-HEX-Wert, ein- bis zweiminütige Einrichtung, Google Fonts, WCAG-AA-Mindestwert.
Nicht-ZieleWas es nicht ist: kein Token-System, kein Font-Hosting, kein Dark-Mode-Umschalter, keine Audit-Suite, kein CSS-Transformer.
AbgrenzungStellt diesen Validator und das Onboarding-Skript den Landing- und den Clinical-Research-Versionen gegenüber.
AusgabeartefaktBenennt die globalen und projektbezogenen JSON-Pfade sowie das Schema-Asset.
Anti-Patterns (nicht tun)Vier zu vermeidende Fehler: Onboarding überspringen, grelle Hintergrundfarbe, stiller Bypass, Tokens außerhalb der Taxonomie.
ReferenzenWCAG-Klauseln, Typografie- und Farbbücher, TOC-Leitfäden, verwandte Skripte.

Die eigene Beschreibung des Skills

„Erfasst die Markenidentität des Nutzers einmalig über einen 10-Fragen-Onboarding-Assistenten (Primär-/Akzent-HEX + Überschrift + Text Google Fonts + Designstil editorial/technical/minimal/playful + Standard-Ausgabeverzeichnis + Syntax-Theme + TOC-Verhalten + optionales Logo/Unternehmen), validiert Text- und Link-Kontrast gegen WCAG 2.2 AA, leitet 12 CSS-Custom-Properties im HSL-Farbraum ab und speichert das Ergebnis für jeden markdown-html-Konverter. Vor jeder markdown-html-Konvertierung verwenden. Wird beim ersten Onboarding ausgelöst (‚Marke einrichten', ‚markdown-html konfigurieren', ‚Onboarding ausführen'), bei explizitem Reset (‚Design-System zurücksetzen', ‚erneutes Onboarding') und von jedem Konverter über config_loader.py vor dem Rendern geprüft. Verweigert das Speichern, wenn der Text-Kontrast AA 4.5:1 nicht erreicht oder das Ausgabeverzeichnis nicht beschreibbar ist. Rangfolge ist Projekt (./.markdown-html/) > global (~/.config/markdown-html/) > eingebaute Standardwerte; MARKDOWN_HTML_NO_CONFIG=1 umgeht dies."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 11.234 Zeichen. Vollständige Datei auf GitHub lesen.

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.

Muss ich das Onboarding abschließen, bevor ich etwas konvertieren kann?

Die Konverter prüfen die Konfiguration über config_loader.py, und wenn diese fehlt oder setup_completed_at null ist, wird die Konvertierung verweigert und das Onboarding angezeigt. Bis Sie die Einrichtung abgeschlossen haben, wird die Ausgabe mit Platzhalter-Standardwerten gerendert: technisch funktionsfähig, aber ohne Markenbezug.

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