create-design-mdvon Julien Thibeaut

Create Design MD Skill.

Ein Claude Code und Codex Skill für Marken- und Design-System-Arbeit: erstellt oder aktualisiert eine DESIGN.md aus einem bestehenden Produkt-Repository oder einer öffentlichen Website.

Brand & Design Systems
DESIGN.md

OpenDesign herunterladen Anleitung ansehen

ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md

--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document

Front Matter und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 16.176 Zeichen insgesamt

01 Was es tut

Was das create-design-md Skill in Claude Code und Codex bewirkt

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

Verwandelt ein bestehendes Produkt in einen schriftlichen Design-Vertrag. Im Repository-Modus prüft es die Tokens, Themes, gemeinsamen Primitives und gerenderten Routen eines lokalen Produkts und schreibt DESIGN.md im Root dieses Produkts; im URL-Modus rekonstruiert es einen Entwurf aus dem DOM, den berechneten Stilen und geladenen Stylesheets bei Desktop- und Mobile-Breiten.

Beide Modi teilen sich eine Evidenz-Pipeline — Rolle, Wert, Quelle, Geltungsbereich, Wiederkehr, Konfidenz — und ein flaches Token-Schema, mit den Export-Zielen css-tailwind, json-tailwind oder dtcg. Werte bleiben nur erhalten, wenn eine maßgebliche Quelle sie benennt oder sie ein Drei-Nachweis-Gate passieren, und das Dokument wird erst freigegeben, wenn Lint und Export erfolgreich sind. Es ändert nichts außer DESIGN.md.

Was er erzeugt

Ein rekonstruierter DESIGN.md-Entwurf, der im URL-Modus in den aktuellen Arbeitsbereich geschrieben und als Entwurf gekennzeichnet wird.
Ein Bericht, der den Modus und das geprüfte Produkt oder die URL, die verwendeten maßgeblichen Quellen sowie die Konflikte oder nicht belegten Bereiche aufführt, die aus dem Dokument ausgeschlossen wurden.
Die abschließenden Lint- und Export-Ergebnisse, die beide erfolgreich sein müssen, bevor das Dokument zurückgegeben wird.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Den Modus wählen
Repository-Modus, wenn ein lokales Produkt-Repository verfügbar ist, wobei DESIGN.md im Root dieses Produkts geschrieben wird; URL-Modus, wenn nur eine öffentliche URL angegeben ist, wobei ein rekonstruierter Entwurf im aktuellen Arbeitsbereich erstellt wird.
02
Evidenz sammeln und Herkunft festhalten
Jeder Kandidat wird mit seiner Quelle, seinem Geltungsbereich und seiner Wiederkehr erfasst, bevor irgendetwas normalisiert wird, sodass beide Modi dieselbe Erfassungs-Pipeline durchlaufen.
03
In das DESIGN.md-Schema normalisieren
Kandidaten, die unsicher, lokal ohne Vertrag oder nicht implementierungsrelevant sind, werden verworfen; der Rest wird auf das kanonische flache Token-Schema abgebildet.
04
Den Entwurf hinter Validierung absichern
Markdown wird erst geschrieben, nachdem das geparste Frontmatter Formprüfungen bestanden hat, sodass der Fließtext nie zuerst entworfen und nachträglich an das YAML angepasst wird.
05
Lint und Export
Zunächst läuft die strukturelle Lint-Prüfung, dann ein Kompatibilitäts-Export im gewählten Ziel, und jede befüllte Kategorie muss in der Ausgabe erscheinen.
06
Modus, Quellen und Lücken berichten
Der Bericht benennt den Modus und das geprüfte Produkt oder die URL, die verwendeten maßgeblichen Quellen, alles als nicht belegt Ausgelassene sowie die Lint- und Export-Ergebnisse.

02 Finden Sie Ihren Favoriten

Wann Sie den create-design-md Skill verwenden

Verwenden Sie den create-design-md Skill in Claude Code oder Codex, wenn die Aufgabe Marken- und Designsystem-Arbeit dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Dokumentiert die Designsprache einer Schnittstelle und rekonstruiert ihr visuelles System aus aktueller Evidenz im Codebase.
Gibt Coding-Agents dauerhaften UI-Kontext, statt Designentscheidungen pro Aufgabe zu wiederholen.
Eine öffentliche Website ohne verfügbaren Quellcode, bei der ein rekonstruierter Entwurf aus DOM, berechneten Stilen und geladenem CSS akzeptabel ist.

Grenzen kennen

Bearbeitung von Produktquellcode, Abhängigkeiten oder Konfiguration, um dem dokumentierten Design zu entsprechen — nur die Datei DESIGN.md ist im Geltungsbereich.
Auslesen interner Token-Namen, Komponenten-Zuständigkeiten oder undokumentierter Absichten aus einer Live-Website: URL-Evidenz kann dies nicht belegen.
Arbeiten ohne gerenderte Browser-Inspektion; Screenshots oder Quelldateien müssen stattdessen angefordert werden, statt aus Text oder HTML zu schließen.
Auflisten jedes gefundenen Tokens oder jeder Komponente — erschöpfende Inventare liegen ausdrücklich außerhalb des Geltungsbereichs.

Was Sie bereitstellen sollten

Welches Produkt, falls das Repository mehrere ausliefertDer Nutzer muss das dokumentierte, auslieferbare Produkt benennen; ist die Zuordnung unklar, fragt der Skill nach, bevor er schreibt.
Eine öffentliche URL plus gerenderter BrowserzugriffDer URL-Modus untersucht das DOM, berechnete Stile und öffentlich geladene Stylesheets bei Desktop- und Mobile-Breiten; Screenshots allein können keine exakten Werte belegen.
Ein abweichendes Export-Ziel, falls vorhandenDie URL-Ausgabe verwendet standardmäßig css-tailwind, sofern der Nutzer kein anderes Ziel angibt, da Token-Namen dafür gültig bleiben müssen.

03 Innerhalb des Skills

Regeln, die der create-design-md Skill Claude Code und Codex vorgibt

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

Nur das Dokument berühren
Der Repository-Modus darf Produkt-Quellcode, Abhängigkeiten, Konfiguration oder generierte Dateien nicht verändern und darf zufällige Implementierungsmuster nicht zu Design-Entscheidungen aufwerten.
Repository-Belege bevorzugen
Der Repository-Modus wird immer gewählt, wenn Quellcode verfügbar ist; eine angegebene URL kann die gerenderte Darstellung verifizieren, ersetzt aber niemals Repository-Belege.
Ein Schema, nur Mapping-Formen
Token-Gruppen sind Mappings, niemals Sequenzen, und beide Modi müssen dieselben flachen Token-Namen verwenden, ohne ein zweites Schema einzuführen.
Export-Ziel vor dem Schreiben festlegen
css-tailwind für Tailwind v4, json-tailwind für Tailwind v3, sonst dtcg; Token-Namen müssen für das gewählte Ziel gültig sein.
Drei Belege für URL-Aussagen
Eine Aussage im URL-Modus benötigt Beobachtung, Begründung und Konsequenz; fehlt einer dieser Belege, wird die Aussage weggelassen statt geraten.
Nur regex-gültige Token-Namen ausgeben
Jeder ausgegebene Token-Name muss ^[a-zA-Z0-9][a-zA-Z0-9-]*$ entsprechen; jeder fehlerhafte Schlüssel wird abgelehnt und neu geschrieben.
Einen einzelnen Token auf Gruppenebene normalisieren
Ein einzelner Quell-Token wie --radius wird zu rounded.base; sm, md, lg und xl werden niemals aus Utility-Klassen oder wiederholten Werten abgeleitet.
Keine Freigabe bei fehlgeschlagener Validierung
Das Dokument wird nie zurückgegeben, während Lint oder Export fehlschlägt, und eine befüllte Kategorie, die im Export fehlt, gilt als Schemafehler.

04 In Betrieb nehmen

Installieren Sie create-design-md in Claude Code oder Codex

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

Fügen Sie create-design-md zu Claude Code, Codex oder Ihrem Agent hinzu

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

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

Allgemeine skills-CLI-Form für skills/create-design-md/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

Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

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:

Führen Sie genau einen Kompatibilitätsexport im zuvor gewählten Ziel aus und prüfen Sie die Ausgabe.
Prüfen Sie bei css-tailwind, dass Farben auf --color-, Schriftfamilie auf --font-, Größe auf --text-, rounded auf --radius- und Abstände auf --spacing- abgebildet werden; ein befüllter Typografie-Block, der weder --font- noch --text-* ausgibt, bedeutet, dass das Dokument neu geschrieben werden muss.
Lesen Sie vor dem Speichern die geparsten Frontmatter-Daten erneut und lehnen Sie selbstständig skalare Typografie-Kindwerte oder rounded-Schlüssel ab, die in der maßgeblichen Quelle fehlen.
Wenn Sie ein bestehendes Dokument aktualisieren, behalten Sie den ursprünglichen Inhalt vorübergehend bei und vergleichen Sie ihn mit der neuen Datei, um jede akzeptierte Entscheidung, die entfernt wurde, wiederherzustellen.
Prüfen Sie die installierte Spezifikation, bevor Sie Theme-Modi codieren, und greifen Sie nur dann auf eine Themes-Tabelle zurück, wenn Modi nicht unterstützt werden.

In OpenDesign importieren Sie create-design-md über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann 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: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Skill-Datei: skills/create-design-md/SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 79081ab
License: MIT Aus LICENSE.
Repository-Sterne: 8.402 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository ibelick/ui-skills, das 5 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für create-design-md.
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

GrenzenNur Änderungen an DESIGN.md; kein konkurrierendes Schema, kein Auskippen jedes entdeckten Tokens.
1. Modus wählenRepository- versus URL-Modus, was jeder davon belegen kann und wann zuerst nachgefragt werden sollte.
Gemeinsame Evidenz-PipelineSechsstufige Aufzeichnungs-Pipeline und Auslassungsregeln, denen beide Modi folgen müssen.
2. Der Evidenz folgenPrüfreihenfolge für Repos; Stichprobenliste, Nachweise und Evidenzprotokoll für URLs.
3. Entscheiden, was dazugehörtSchema-Gestaltung, Auswahl des Export-Ziels, Umgang mit Themes und was der Fließtext behaupten darf.
4. Das Dokument schreibenMinimales Frontmatter, zulässige Abschnittsreihenfolge und was vor dem Speichern gelöscht werden muss.
5. ValidierenLint, ein Export, Kategorieprüfungen und Diff eines aktualisierten Dokuments.
6. BerichtWas zurückgemeldet werden muss: Modus, geprüftes Ziel, Quellen, Auslassungen, Validierungsergebnisse.

Die eigene Beschreibung des Skills

„Erstellen oder aktualisieren Sie eine DESIGN.md aus einem bestehenden Produkt-Repository oder einer öffentlichen Website. Verwenden Sie dies, wenn Sie gebeten werden, die Design-Sprache einer Oberfläche zu dokumentieren, ihr visuelles System zu rekonstruieren, Design-Tokens und Richtlinien aus aktuellen Belegen zu extrahieren oder Coding-Agents persistenten UI-Kontext zu geben. Ändern Sie nicht die Produktquelle und erheben Sie keine versehentlichen Implementierungsmuster zu Design-Entscheidungen."

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

Create Design MD

Führen Sie create-design-md auf einer echten Marke und einer design-system-Arbeitsaufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie create-design-md über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

Was das create-design-md Skill in Claude Code und Codex bewirkt

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den create-design-md Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der create-design-md Skill Claude Code und Codex vorgibt

Nur das Dokument berühren

Repository-Belege bevorzugen

Ein Schema, nur Mapping-Formen

Export-Ziel vor dem Schreiben festlegen

Drei Belege für URL-Aussagen

Nur regex-gültige Token-Namen ausgeben

Einen einzelnen Token auf Gruppenebene normalisieren

Keine Freigabe bei fehlgeschlagener Validierung