Can I use this skill on an existing project?

Yes. The skill automatically checks for existing design system files and will prompt you to either cancel, overwrite, or generate a preview to avoid accidental data loss.

Which frontend frameworks is this compatible with?

This skill is framework-agnostic. It generates standard SCSS and CSS variables that work with React, Vue, Angular, Svelte, or vanilla HTML/CSS projects.

Does it support Dark Mode?

Yes, the skill generates a dual-theme system using CSS Custom Properties that allows for seamless switching between light and dark modes.

Can I customize the colors after they are generated?

Absolutely. All generated values are saved in modular SCSS files like _colors.scss and _typography.scss, which you can edit manually at any time.

UI Design System Generator

Name: UI Design System Generator
Author: byteAgenten

bybyteAgenten

0•

Design Tools

Initializes a comprehensive SCSS-based design system with professional themes, design tokens, and responsive typography.

The UI Theming Skill automates the foundational setup of a web project's visual identity by generating a structured, production-grade SCSS design system. It allows developers to select from curated color themes and automatically calculates accessible color variants, typography scales, and spacing grids. By establishing these design tokens as CSS Custom Properties early in the development cycle, it ensures visual consistency across components and provides built-in support for light and dark modes, significantly accelerating the path from project start to feature implementation.

Key Features

0110+ Predefined professional color themes with automated HSL variant calculation.

02Native Light and Dark mode support via semantic CSS Custom Properties and mixins.

030 GitHub stars

04Comprehensive design tokens for 8pt grid spacing, typography scales, and Material-style elevation.

05Modular SCSS architecture using modern @use and @forward rules for clean token management.

06Responsive breakpoint system with pre-configured mobile-first media query mixins.

Use Cases

01Rapidly prototyping multiple visual identities for a project using curated theme presets.

02Bootstrapping the styling architecture for a new React, Vue, or static web project.

03Standardizing a design system with tokens for consistent spacing and typography across a team.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add byteagenten/byteagenten-marketplace ui-theming

For use in Claude.ai and ChatGPT

Download Skill