Design Tokens
Skill Verified ActiveGenerate 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.
Features
- 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
Use Cases
- 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
Non-Goals
- Modifying existing project files outside of token generation
- Performing design audits or scoring
- Integrating with specific UI frameworks beyond token output formats
Installation
First, add the marketplace
/plugin marketplace add Aboudjem/ui-ux-suite/plugin install ui-ux-suite@ui-ux-suiteQuality Score
VerifiedTrust Signals
Similar Extensions
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Impeccable
99Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Baseline Ui
100Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
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