Implements scalable design systems and CSS-first themes using Tailwind 4 tokens and OKLCH color spaces.
The Design-Theme skill automates the creation and maintenance of professional design systems within Claude Code by establishing a robust token architecture. It leverages Tailwind 4's @theme directive to define typography, spacing, and color palettes using the modern OKLCH space for perceptual uniformity. A standout feature of this skill is its mandatory delegation of heavy CSS implementation to the Kimi K2.5 model via MCP, ensuring high-fidelity styling while Claude manages the high-level design DNA and final quality validation. This is ideal for developers looking to eliminate design debt or establish a consistent UI foundation from scratch.
Key Features
01Tailwind 4 @theme directive implementation
02Automated CSS token architecture generation
03Modular typography and spacing scales
04Multi-model delegation to Kimi K2.5 for CSS tasks
055 GitHub stars
06OKLCH color space for perceptually uniform palettes
Use Cases
01Refactoring hardcoded CSS values into a standardized token system
02Establishing a design system for a new project after selecting a direction
03Implementing dark mode and theme variants via CSS variables
