What industries is this design engine optimized for?

It is pre-configured for 57 industry sectors including Fintech, Healthcare, Ecommerce, Crypto, and Enterprise SaaS, applying domain-specific design rules for each.

Can I use my own brand colors with this skill?

Yes, you can provide brand hex values and the skill will derive a full token set—including primary, secondary, accent, and neutrals—with WCAG-aware guidance.

What frameworks does this design system support?

The skill generates code and configurations for Tailwind CSS, React, Vue, and Svelte, as well as raw JSON and Markdown specifications.

How does the skill ensure accessibility?

It includes a built-in WCAG 2.1 AA validation engine that checks contrast ratios and ensures all color palettes meet legal accessibility standards before delivery.

Universal Design System Generator

Name: Universal Design System Generator
Author: mkatogui

bymkatogui

•

Design Tools

Generates accessible, industry-specific design systems and UI components with automated WCAG compliance and multi-framework support.

This skill acts as an AI-native design engine that automates the creation of production-grade design systems across 57 industry sectors. By leveraging a BM25 reasoning engine and over 600 W3C-compliant tokens, it generates full design specifications—including palettes, typography, and accessibility-validated components—tailored to specific product types like SaaS dashboards, landing pages, and mobile apps. It supports multiple output formats including Tailwind CSS, React, Vue, and Svelte, ensuring seamless integration into modern frontend workflows while enforcing UX best practices and avoiding common anti-patterns.

Key Features

011 GitHub stars

02Automated WCAG 2.1 AA accessibility validation for all color combinations

03Industry-aware palette selection across 57 sectors and 9 structural palettes

04Generation of 600+ W3C DTCG tokens and 68 production-ready UI components

05Multi-framework support for Tailwind, React, Vue, and Svelte outputs

06Intelligent UX reasoning engine to prevent design anti-patterns and apply best practices

Use Cases

01Bootstrapping a cohesive design system for a new SaaS application or dashboard

02Creating framework-specific UI component libraries from high-level requirements

03Generating accessible, brand-aligned landing pages with pre-validated color palettes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mkatogui/universal-design-system universal-design-system

For use in Claude.ai and ChatGPT

Key Features

011 GitHub stars

02Automated WCAG 2.1 AA accessibility validation for all color combinations

03Industry-aware palette selection across 57 sectors and 9 structural palettes

04Generation of 600+ W3C DTCG tokens and 68 production-ready UI components

05Multi-framework support for Tailwind, React, Vue, and Svelte outputs

06Intelligent UX reasoning engine to prevent design anti-patterns and apply best practices

Use Cases

01Bootstrapping a cohesive design system for a new SaaS application or dashboard

02Creating framework-specific UI component libraries from high-level requirements

03Generating accessible, brand-aligned landing pages with pre-validated color palettes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mkatogui/universal-design-system universal-design-system

For use in Claude.ai and ChatGPT