What formats does this skill support?

It supports standard CSS/SCSS variables, Tailwind CSS configuration files (TS/JS), and styled-components theme objects in TypeScript.

Does it handle typography and spacing systems?

Yes, the skill includes comprehensive logic for generating font families, size scales, weights, line heights, and rem-based spacing systems.

Does it support dark mode implementation?

Absolutely, it includes templates for data-theme='dark' attribute mappings for CSS variables and Tailwind's class-based dark mode settings.

Is it compatible with modern frameworks like Next.js?

Yes, the generated configurations and theme objects are fully compatible with Next.js, React, and other modern frontend frameworks.

Can I customize the color scales?

Yes, the skill is designed to work with design token structures that define primary, secondary, and semantic color scales ranging from 50 to 900.

CSS Design System Generator

Name: CSS Design System Generator
Author: markus41

bymarkus41

•

设计工具

Generates production-ready CSS variables, Tailwind configurations, and styled-components themes from design tokens.

This skill streamlines the bridge between design and development by automatically generating comprehensive styling code from design tokens. It provides structured templates and implementation patterns for creating scalable CSS variable systems, full Tailwind CSS configurations—including custom spacing, animations, and plugins—and TypeScript-ready styled-components theme objects. Whether you are bootstrapping a new project or maintaining a complex design system, this skill ensures visual consistency and follows modern frontend best practices.

主要功能

01Produces TypeScript-typed styled-components theme objects

02Supports dark mode token mapping and transition presets

03Creates comprehensive spacing, typography, and shadow tokens

04Automates Tailwind CSS configuration files with custom extensions

05Generates multi-scale color palettes and semantic color mappings

069 GitHub stars

使用场景

01Standardizing styling across different CSS frameworks and libraries

02Bootstrapping a new design system for React or Next.js projects

03Converting Figma design tokens into implementation-ready code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markus41/claude css-generation

For use in Claude.ai and ChatGPT