UI Design System Toolkit
Skill Verified ActiveUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
To streamline the creation and maintenance of design systems by automating the generation of design tokens and providing clear guidance for developer handoff and integration.
Features
- Design token generation from brand color
- Support for modern, classic, and playful styles
- Export tokens to JSON, CSS, and SCSS formats
- Documentation on component architecture and responsive design
- Framework integration patterns (React, Vue, Next.js, Tailwind)
Use Cases
- Generating a complete design token system for a new project
- Creating style guides and component libraries
- Facilitating collaboration between designers and developers
- Ensuring visual consistency across an application
Non-Goals
- Generating UI components directly
- Writing application-specific code
- Replacing design tools like Figma entirely
- Providing real-time design feedback during active design sessions
Workflow
- Identify brand color and style preferences.
- Run the `design_token_generator.py` script with specified parameters.
- Review generated tokens for colors, typography, spacing, etc.
- Export tokens in the desired format (JSON, CSS, SCSS).
- Integrate tokens into development projects or design tools.
- Validate accessibility and visual consistency.
Practices
- Design token generation
- Component documentation
- Responsive design
- Developer handoff
Installation
First, add the marketplace
/plugin marketplace add alirezarezvani/claude-skills/plugin install product-team@claude-code-skillsQuality Score
VerifiedTrust Signals
Similar Extensions
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
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.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Extract Design System
99Extract design primitives from a public website and generate starter token files for your project.
Design Intelligence
98Design system bootstrapping and token generation. Takes project context and outputs ready-to-use design tokens, Tailwind config, and CSS variables.