design-tokens

Eine Sammlung von DESIGN.md Dateien Analyse durch beliebte Marken-Design-Systeme. Lege eine ein und lass Coding-Agenten eine passende UI generieren.

🐼 Universelles, typsicheres CSS-in-JS-Framework für Design-Systeme ⚡️

Konsistente, thematisierbare React-Apps basierend auf einschränkungsbasierten Designprinzipien erstellen

Ein Build-System zum Erstellen plattformübergreifender Styles.

Extrahiere das komplette Design-System jeder Website mit einem Befehl. DTCG-Token, semantisch+primitiv+komposit, MCP-Server für Claude Code/Cursor/Windsurf, Multi-Plattform-Emitter (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma-Variablen, shadcn/ui, CSS-Gesundheitsprüfung, WCAG-Behebung, Chrome-Erweiterung. MIT, Playwright, Node 20+.

Extrahieren Sie das Design-System einer Website in Sekundenschnelle in Tokens: Logo, Farben, Typografie, Ränder und mehr. Ein Befehl.

180 kostenlose CSS3-, Figma-, Sketch- & PSD-Gradients – plus ein JSON-Datensatz für Design-Tools, Generatoren und KI-Agenten.

Dies ist das offizielle DTCG-Repository für die Website und Spezifikation von Design Tokens.

Verwandeln Sie Referenz-UIs (Bilder, Screenshots, URLs) in quantifizierte Design-DNA-JSON – Tokens, qualitativer Stil, visuelle Effekte – und generieren Sie dann passende UIs aus Ihren Inhalten.

Offizielles Repository des Plugins „Tokens Studio for Figma“ (Figma Tokens)

Eine Liste von Ressourcen rund um das Thema Design Tokens

🎨 Figma-Plugin zum Exportieren von Design-Tokens in ein Amazon-Style-Dictionary-kompatibles Format.

Open-Source-Designmethoden-Engine für Claude Code, Codex & Cursor. 23 Agenten-Skills für feste Designbeurteilung, mehrere Grammatiken, semantische Paletten, Referenzkompilierung und evidenzgeprüfte Benutzeroberflächen. MIT.

Verwandeln Sie Claude in einen Senior Design Architect – DTCG Design Tokens, 42 Komponenten, WCAG 2.2 Barrierefreiheit, Framework-unabhängiger Code, 138 Design-Systeme und ausführbare Skills.

📒 Eine kuratierte Liste von Lesezeichen, Ressourcen und Artikeln über Design-Systeme mit Fokus auf Entwickler.

Figmagic schließt die Lücke zwischen DevOps und Design: Generieren Sie Design-Tokens, exportieren Sie Grafiken und extrahieren Sie Design-Token-basierte React-Komponenten aus Ihren Figma-Dokumenten.

Eine Sammlung von React-Komponenten für das PatternFly-Projekt.

🖌️ Mach dein <script> leichter und dein <style> schlauer

Dokumentation für Design-Token anzeigen, die aus Stylesheets und Icon-Dateien generiert wurde. Design-Token-Änderungen im Browser vorschauen. Design-Token mit benutzerdefinierten Doc-Blöcken zu Storybook-Docs-Seiten hinzufügen.

Kompiliere dein Design-System in ein Agent-Plugin. Extrahiere Identitäten aus Referenzen, generiere SKILL.md sowie tokens.css und prüfe, was deine Tokens umgeht.

Visuelle Entwicklungsumgebung für CSS

Eine Spezifikation zur Definition von Theme-Objekten und Design-Tokens für UI-Komponenten

Drop-in-Designsystem für das Unity 6 UI Toolkit (UIDocument + PanelRenderer, UXML + USS): Tokens, FX-Shader-Materialunterstützung, 42 Komponenten, 120 Icons, mobil-responsiv, Dark-Theme. Ein Stylesheet, keine Abhängigkeiten. Bewährt in einem veröffentlichten Cross-Play-Spiel.

200 production-grade DESIGN.md design systems for the world's best apps. Framework-neutral plus SwiftUI, Jetpack Compose, and Expo. Hand one to your AI agent, ship pixel-matched UI.

Helios Design System.