What kind of design tokens are included?

It includes 600+ W3C DTCG tokens covering typography scales, spacing, motion presets, z-index, and 9 structural palettes designed for different product contexts like AI tools, corporate sites, or luxury brands.

Which frameworks does this design system support?

It generates production-grade code for React, Vue, Svelte, and Tailwind CSS, while also providing design patterns for mobile platforms like SwiftUI and Flutter.

Can I use it for specific industries like Fintech or Healthcare?

Yes, it includes specialized reasoning for 57 industry sectors, automatically applying appropriate color palettes, component sets, and industry-specific UX guidelines while avoiding common anti-patterns.

How does it ensure web accessibility?

The skill enforces strict governance rules and WCAG 2.2 AA standards, ensuring a minimum 4.5:1 contrast ratio, valid HTML structure, and mandatory reduced-motion presets for animations.

Universal Design System

Name: Universal Design System
Author: mkatogui

bymkatogui

•

Herramientas de Diseño

Builds production-ready, accessible user interfaces across multiple frameworks using an AI-native design system governed by industry standards.

This skill transforms Claude into a professional UI/UX architect by leveraging a governed brand foundation featuring 9 structural palettes, 600 W3C-compliant tokens, and a library of 43 production-grade components. Using a BM25 reasoning engine, it analyzes user requirements across 57 industry sectors to recommend optimized design patterns, font pairings, and accessibility configurations. It ensures WCAG 2.2 AA compliance automatically and generates ready-to-use implementation code for React, Vue, Svelte, and Tailwind CSS, making it ideal for everything from high-conversion SaaS landing pages to data-dense fintech dashboards.

Características Principales

011 GitHub stars

02AI-native design reasoning with a BM25 engine across 20 databases

03600+ W3C DTCG design tokens and 9 context-specific structural palettes

04Automated WCAG 2.2 AA accessibility validation and contrast checking

05Industry-specific governance rules and anti-pattern enforcement

06Multi-framework output support for React, Vue, Svelte, and Tailwind CSS

Casos de Uso

01Generating accessible dashboard layouts for regulated sectors like fintech or healthcare

02Building high-conversion SaaS landing pages with optimized color palettes and patterns

03Establishing a cross-platform design token system for large-scale enterprise applications

Características Principales

011 GitHub stars

02AI-native design reasoning with a BM25 engine across 20 databases

03600+ W3C DTCG design tokens and 9 context-specific structural palettes

04Automated WCAG 2.2 AA accessibility validation and contrast checking

05Industry-specific governance rules and anti-pattern enforcement

06Multi-framework output support for React, Vue, Svelte, and Tailwind CSS

Casos de Uso

01Generating accessible dashboard layouts for regulated sectors like fintech or healthcare

02Building high-conversion SaaS landing pages with optimized color palettes and patterns

03Establishing a cross-platform design token system for large-scale enterprise applications