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

0•

Design Tools

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.

Key Features

01Semantic mapping for consistent light and dark mode theming

02Standardized 4px grid spacing and typographic scale management

03Advanced OKLCH color system implementation for P3 wide gamut support

04Automated design token generation for colors, typography, and spacing

05Seamless Tailwind CSS v4 configuration and @theme integration

060 GitHub stars

Use Cases

01Migrating legacy CSS projects to modern, token-based design systems

02Initializing new web applications with customized Tailwind v4 themes

03Implementing system-wide dark mode support with semantic color variables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents designing-systems

For use in Claude.ai and ChatGPT

Download Skill