UI Design System Toolkit
Skill Verifiziert AktivUI 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.
Funktionen
- 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)
Anwendungsfälle
- 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
Nicht-Ziele
- 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.
Praktiken
- Design token generation
- Component documentation
- Responsive design
- Developer handoff
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add alirezarezvani/claude-skills/plugin install product-team@claude-code-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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
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.
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
99Extrahiert Design-Primitive aus einer öffentlichen Website und generiert Start-Token-Dateien für Ihr Projekt.
Design Intelligence
98Design system bootstrapping and token generation. Takes project context and outputs ready-to-use design tokens, Tailwind config, and CSS variables.