Design Tokens
Skill Verifiziert AktivGenerate or improve a complete design token system covering color, typography, spacing, radius, shadows, motion
To automate the creation and improvement of systematic design token libraries, ensuring consistency and quality across UI projects.
Funktionen
- Generate full design token systems
- Support for color, typography, spacing, radius, shadows, motion
- Auto-detect brand color or accept custom input
- Output in multiple formats (CSS vars, Tailwind, JSON, JS)
- Runs locally with no dependencies
Anwendungsfälle
- Establishing a new design token system from scratch
- Improving or standardizing an existing token system
- Generating tokens for a specific brand color
- Exporting tokens for use in different frameworks or styles
Nicht-Ziele
- Modifying existing project files outside of token generation
- Performing design audits or scoring
- Integrating with specific UI frameworks beyond token output formats
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add Aboudjem/ui-ux-suite/plugin install ui-ux-suite@ui-ux-suiteQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Impeccable
99Verwenden Sie dies, wenn der Benutzer ein Frontend-Interface entwerfen, neu gestalten, formen, kritisieren, prüfen, polieren, klären, destillieren, härten, optimieren, anpassen, animieren, einfärben, extrahieren oder anderweitig verbessern möchte. Deckt Websites, Landingpages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding und leere Zustände ab. Umfasst UX-Bewertung, visuelle Hierarchie, Informationsarchitektur, kognitive Last, Barrierefreiheit, Leistung, responsives Verhalten, Theming, Anti-Patterns, Typografie, Schriften, Abstände, Layout, Ausrichtung, Farbe, Bewegung, Mikrointeraktionen, UX-Texte, Fehlerzustände, Randfälle, i18n und wiederverwendbare Designsysteme oder Tokens. Verwenden Sie es auch für langweilige Designs, die mutiger oder ansprechender werden sollen, laute Designs, die leiser werden sollen, Live-Browser-Iterationen an UI-Elementen oder ambitionierte visuelle Effekte, die technisch außergewöhnlich wirken sollen. Nicht für reine Backend- oder Nicht-UI-Aufgaben.
Baseline Ui
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Refactor Plan
100Prioritized redesign action plan covering quick wins, medium effort, major rework