What design tokens does this skill manage?

It manages comprehensive CSS variables for colors, typography scales, 4px-grid spacing, border radii, and box shadows.

Can it analyze my existing code before making changes?

Yes, the 'Phase 0' workflow triggers a critical analysis of your existing codebase to identify and extend current design patterns rather than overwriting them.

Does this skill support Tailwind CSS?

Yes, it is specifically optimized for Tailwind v4, providing CSS-first configuration and @theme block generation for custom palettes and fonts.

Why does it use OKLCH instead of Hex or RGB?

OKLCH supports the P3 wide gamut, offering more vibrant colors and better perceptual uniformity for modern displays compared to traditional sRGB formats.

Design System Architect

Name: Design System Architect
Author: fusengine

byfusengine

디자인 도구

Architects scalable, production-grade design systems using modern tokens, OKLCH color palettes, and Tailwind CSS v4 configurations.

소개

This skill empowers Claude to architect comprehensive design systems from scratch or extend existing implementations by analyzing CSS variables, Tailwind configurations, and typography scales. It focuses on modern design standards, utilizing OKLCH for wide-gamut P3 colors, implementing 4px spacing grids, and managing semantic theming for robust dark mode support. Ideal for developers needing consistent styling across large applications, it enforces best practices while replacing generic system fonts with high-quality typographic alternatives to ensure a distinct visual identity.

주요 기능

Semantic mapping for consistent light and dark mode theming
Standardized 4px grid spacing and typographic scale management
Advanced OKLCH color system implementation for P3 wide gamut support
Automated design token generation for colors, typography, and spacing
Seamless Tailwind CSS v4 configuration and @theme integration
0 GitHub stars

사용 사례

Migrating legacy CSS projects to modern, token-based design systems
Initializing new web applications with customized Tailwind v4 themes
Implementing system-wide dark mode support with semantic color variables

소개

주요 기능

Semantic mapping for consistent light and dark mode theming
Standardized 4px grid spacing and typographic scale management
Advanced OKLCH color system implementation for P3 wide gamut support
Automated design token generation for colors, typography, and spacing
Seamless Tailwind CSS v4 configuration and @theme integration
0 GitHub stars

사용 사례

Migrating legacy CSS projects to modern, token-based design systems
Initializing new web applications with customized Tailwind v4 themes
Implementing system-wide dark mode support with semantic color variables