design-systemvon nextlevelbuilder

Design System Skill.

Ein Skill für Claude Code und Codex für Marken- und Design-System-Arbeit: Design Tokens mit drei Ebenen, Komponenten-Spezifikationen und Folien-Generierung.

Brand & Design Systems
Design-System

OpenDesign herunterladen Anleitung ansehen

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations. --- ## When to Use ## Token Architecture ## Script Paths ## Quick Start ## Component Spec Pattern ## Scripts

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

Generiert dreischichtige Design-Token-Architekturen (Primitiv → Semantisch → Komponente), Komponentenspezifikationen und markenkonforme Präsentationsfolien. Primitiv-Tokens definieren Rohwerte wie --color-blue-600. Semantische Tokens verweisen darauf nach Zweck (--color-primary). Komponenten-Tokens legen die Verwendung pro Komponente fest (--button-bg).

Das Skill stellt Generierungs- und Validierungsskripte für CSS-Variablen, die Tailwind-Theme-Integration und ein kontextuelles Folien-System bereit, das eine BM25-Suche über 15 Deck-Strukturen, 25 Layouts und Duarte-Sparkline-Emotionsbögen nutzt. Alle Folien müssen design-tokens.css importieren und ausschließlich CSS-Variablen verwenden. Chart.js ist für die Datenvisualisierung erforderlich. Unterstützt den Bildabruf über Pexels und Unsplash.

Was er erzeugt

Token-Validierungsbericht, der hartcodierte Werte im Quellcode identifiziert, die auf Tokens verweisen sollten

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Referenz zur Token-Architektur laden
Das Skill lädt references/token-architecture.md, um die dreischichtige Token-Struktur festzulegen, bevor Tokens generiert oder validiert werden.
02
CSS aus JSON-Konfiguration generieren
Führen Sie generate-tokens.cjs mit einer JSON-Konfigurationsdatei aus, um eine CSS-Datei mit der dreischichtigen Token-Struktur als CSS-Variablen auszugeben.
03
Foliestrategien nach Ziel durchsuchen
Verwenden Sie die BM25-Suche über search-slides.py, um passende Deck-Strukturen, Emotionsverläufe und Sparkline-Beats aus slide-strategies.csv zu finden, optional gefiltert nach Domäne (copy oder chart) und kontextuellem Position.
04
Kontextuellen Entscheidungsablauf anwenden
Analysieren Sie das Ziel und fragen Sie slide-layout-logic.csv für Layout und break_pattern-Flag, slide-typography.csv für die Type-Skala, slide-color-logic.csv für die Farbbehandlung und slide-backgrounds.csv für die Bildkategorie ab.
05
HTML mit Design-Tokens generieren
Erstellen Sie Folien-HTML, das assets/design-tokens.css importiert, var() für das gesamte Styling verwendet, Chart.js für Diagramme einbindet und Navigations- sowie Animationsklassen aus slide-animations.css hinzufügt.
06
Token-Konformität validieren
Führen Sie slide-token-validator.py aus, um zu prüfen, dass das generierte Folien-HTML ausschließlich CSS-Variablen verwendet und keine hartcodierten Farb-, Schrift- oder Abstandswerte enthält.

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

Erstellung von Design-Token-Systemen mit dreischichtiger Architektur für Theme-Wechsel und Komponentenanpassung
Definition von Komponentenzustandsspezifikationen mit Hover-, Active- und Disabled-Varianten
Erstellung markenkonformer Präsentationsfolien mit kontextueller Layoutauswahl und Emotionsverlaufsplanung
Umwandlung von Design-Spezifikationen in Tailwind-Theme-Konfiguration mithilfe von Komponenten-Tokens
Design-to-Code-Übergabe mit systematischen Abstands- und Typografieskalen

Grenzen kennen

Hartcodierte Farb-, Schrift- oder Abstandswerte sind nicht erlaubt; das gesamte Styling muss CSS-Variablen aus design-tokens.css verwenden

Was Sie bereitstellen sollten

Dokument mit Markenrichtliniendocs/brand-guidelines.md liefert Markenidentität, Tonalität und Farbdefinitionen, die in die Extraktion primitiver Tokens einfließen.
Quellverzeichnis für die ValidierungEin Projektverzeichnispfad, den validate-tokens.cjs nach hartcodierten Werten durchsucht, die stattdessen Tokens verwenden sollten.

03 Innerhalb des Skills

Regeln, die das Design-System-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.

Niemals rohe Hex-Werte in Komponenten verwenden
Komponenten müssen Farbwerte immer über Tokens per CSS-Variablen referenzieren und dürfen sie niemals direkt hartcodieren.
Alle Folien müssen design-tokens.css importieren
Jede Folien-HTML-Datei muss assets/design-tokens.css als einzige verlässliche Quelle importieren und var() für alle Styling-Eigenschaften verwenden.
Chart.js für Datenvisualisierung verwenden
Diagramme müssen mit Chart.js (Version 4.4.1 oder höher) gerendert werden, nicht mit reinen CSS-Balken oder anderen Ansätzen.
Skriptpfade relativ zum SKILL.md-Verzeichnis
Skriptpfade wie scripts/generate-tokens.cjs sind relativ zum Verzeichnis, das SKILL.md enthält, nicht zum Projektstammverzeichnis.
HSL-Format für die Opazitätssteuerung verwenden
Token-Werte sollten das HSL-Farbformat verwenden, um Opazitätsanpassungen zu ermöglichen, ohne Token-Definitionen zu duplizieren.
Musterbrüche an den Positionen 1/3 und 2/3
Premium-Decks wechseln zwischen den Emotionen „What Is“ (Frustration) und „What Could Be“ (Hoffnung), wobei Musterbrüche bei 1/3 und 2/3 der Deck-Position nach der Duarte-Sparkline-Methode berechnet werden.
Folien müssen auf Überzeugung ausgerichtet sein
Alle generierten Folien müssen eine Navigation enthalten (Pfeiltasten, Klick, Fortschrittsbalken), Inhalte zentriert ausrichten und auf Überzeugungs- oder Konversionsziele fokussiert sein.
Zweck jedes Tokens dokumentieren
Jede Token-Definition muss eine Dokumentation enthalten, die ihren vorgesehenen Zweck im System erläutert.

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/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

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

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

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Prüfen Sie, ob der Chart.js-Script-Tag vorhanden ist und Diagramme den Chart.js-Konstruktor verwenden statt reinem CSS-Rendering
Prüfen Sie, ob Komponentenspezifikationen dem Zustandstabellen-Muster mit den Spalten Default, Hover, Active und Disabled folgen
Prüfen Sie die Referenzimplementierung unter assets/designs/slides/claudekit-pitch-251223.html auf Funktionsvollständigkeit

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: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill-Datei: .claude/skills/design-system/SKILL.md Inhalts-Prüfsumme bei Verifizierung erfasst; Commit 7f69fed
License: MIT Aus LICENSE; SKILL.md nennt „MIT".
Repository-Sterne: 127.450 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository nextlevelbuilder/ui-ux-pro-max-skill, 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

Wann verwendenDesign-Tokens, Komponentenspezifikationen, CSS-Variablen, Abstandsskalen, Design-to-Code-Übergabe, Tailwind-Konfiguration, Folienerstellung
Token-ArchitekturDreischichtige Struktur: primitive Rohwerte, semantische Zweck-Aliase, komponentenspezifische Tokens mit CSS-Variablen-Beispielen
Skript-PfadeSkript-Pfade relativ zum SKILL.md-Verzeichnis; Arbeitsverzeichnis im Projektstamm für Dateizugriff
SchnellstartBefehle zum Generieren von Tokens aus einer JSON-Konfiguration und zum Validieren der Token-Verwendung in Quellverzeichnissen
ReferenzenSieben Referenzdateien zu Architektur, primitiven/semantischen/komponentenbezogenen Tokens, Spezifikationen, Zuständen, Varianten und Tailwind-Integration
Muster für KomponentenspezifikationenTabellenstruktur zur Definition von Komponenteneigenschaften über die Zustände Default, Hover, Active und Disabled
SkripteFünf Skripte: Token-Generierung, Validierung, BM25-Foliensuche, Folien-Token-Validierung, Bildabruf
VorlagenStarter-JSON-Vorlage mit dreischichtiger Token-Struktur
IntegrationPrimitive aus der Marke extrahieren, Komponenten-Tokens an Tailwind übergeben; abhängig von den Skills brand und ui-styling
Folien-SystemMarkenkonforme Präsentationen mit Design-Tokens, Chart.js, kontextbezogenen Entscheidungs-CSVs, BM25-Suche
Maßgebliche QuelleMarkenrichtlinien, design-tokens.json und .css, slide-animations.css definieren das gesamte Slide-Styling
Foliensuche (BM25)Durchsuchen Sie Folienvorlagen nach Ziel mit Domänenfiltern und kontextbezogenen Parametern (Position, Gesamtzahl, vorherige Emotion)

Die eigene Beschreibung des Skills

„Token-Architektur, Komponenten-Spezifikationen und Foliengenerierung. Drei-Ebenen-Tokens (primitiv→semantisch→Komponente), CSS-Variablen, Spacing-/Typografie-Skalen, Komponenten-Spezifikationen, strategische Folienerstellung. Verwenden Sie diesen Skill für Design-Tokens, systematisches Design, markenkonforme Präsentationen."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 7.414 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.

Welche Agents sollten diesen Skill verwenden?

Der Skill definiert ui-ux-designer und frontend-developer als primäre Agents. Er integriert sich mit dem brand-Skill (zur Extraktion von Primitives aus Markenfarben und Typografie) und dem ui-styling-Skill (zum Einspeisen von Komponenten-Tokens in die Tailwind-Konfiguration).

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

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

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

In den eigenen Worten des Skills

So funktioniert es

Wann der design-system Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

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

Niemals rohe Hex-Werte in Komponenten verwenden

Alle Folien müssen design-tokens.css importieren

Chart.js für Datenvisualisierung verwenden

Skriptpfade relativ zum SKILL.md-Verzeichnis

HSL-Format für die Opazitätssteuerung verwenden

Musterbrüche an den Positionen 1/3 und 2/3

Folien müssen auf Überzeugung ausgerichtet sein

Zweck jedes Tokens dokumentieren