What is the BM25 reasoning engine used for?

The engine searches 20 CSV databases to find the most relevant typography, palettes, and components based on your specific product type and audience context.

Does it provide design tokens?

Yes, it provides over 600 W3C DTCG compliant tokens covering spacing, typography, motion, z-index, and color palettes.

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

Yes, it contains specialized logic for 57 sectors, applying industry-specific anti-patterns and palette rules to ensure the design meets professional standards.

How does it ensure UI accessibility?

It enforces WCAG 2.2 AA compliance by validating contrast ratios across its 9 structural palettes and automatically including reduced-motion media queries for animations.

Which frontend frameworks does this skill support?

The skill generates production-ready code for React, Vue, Svelte, and Tailwind CSS, as well as mobile-specific patterns for SwiftUI and Flutter.

Universal Design System

Name: Universal Design System
Author: mkatogui

bymkatogui

•

Design Tools

Generates production-grade, WCAG-compliant UI designs and framework-ready component code tailored to specific industry sectors.

The Universal Design System skill is an AI-native design engine that automates the creation of governed brand foundations across 57 industry sectors. It utilizes a BM25 reasoning engine to analyze user requirements against an extensive database of 600+ design tokens and 43+ components, ensuring every output is accessibility-validated (WCAG 2.2 AA) and follows sector-specific best practices. This skill provides full design specifications, including curated typography pairings, nine structural palettes, and production-ready code for React, Vue, Svelte, and Tailwind CSS, making it an essential tool for rapid frontend scaffolding and design governance.

Key Features

01Library of 600+ W3C DTCG design tokens and 43+ production-grade components.

02Automated WCAG 2.2 AA accessibility validation for all color palettes and interactive elements.

03Multi-framework output support for React, Vue, Svelte, Tailwind CSS, and mobile platforms.

04BM25 reasoning engine that matches product types to 190+ conditional design rules and anti-patterns.

05Context-aware design generation for 57 industry sectors including Fintech, SaaS, and Healthcare.

061 GitHub stars

Use Cases

01Scaffolding a data-dense dashboard with automated dark mode and data-grid components.

02Generating industry-specific design tokens and Tailwind configurations for enterprise-scale applications.

03Creating high-conversion startup landing pages with accessible gradients and hero patterns.

Key Features

01Library of 600+ W3C DTCG design tokens and 43+ production-grade components.

02Automated WCAG 2.2 AA accessibility validation for all color palettes and interactive elements.

03Multi-framework output support for React, Vue, Svelte, Tailwind CSS, and mobile platforms.

04BM25 reasoning engine that matches product types to 190+ conditional design rules and anti-patterns.

05Context-aware design generation for 57 industry sectors including Fintech, SaaS, and Healthcare.

061 GitHub stars

Use Cases

01Scaffolding a data-dense dashboard with automated dark mode and data-grid components.

02Generating industry-specific design tokens and Tailwind configurations for enterprise-scale applications.

03Creating high-conversion startup landing pages with accessible gradients and hero patterns.