skills.rest
mkatogui
mkatoguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

Generate design system palettes, components, and tokens with WCAG 2.2 AA checks.

3|Updated Mar 11, 2026
Search Tags:#accessibility#ai#wcag#tokens#ui-design#design-system
One-click install
npx skills add https://github.com/mkatogui/universal-design-system --skill design-system-mkatogui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/mkatogui/universal-design-system/tree/main/plugin/skills/design-system
Command: npx skills add https://github.com/mkatogui/universal-design-system --skill design-system-mkatogui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamline UI design with a production-grade AI-native design system that enforces consistency, accessibility, and fast delivery across products.

Core Features & Use Cases

  • Generates 9 structural palettes, 43 components, and 8 patterns tailored to domains like finance, healthcare, education, and e-commerce.
  • Produces token sets, color systems, typography recommendations, and Tailwind-ready config to accelerate frontend development.
  • Applies automated WCAG 2.2 AA checks and governance rules to ensure accessible, brand-consistent interfaces.

Quick Start

Provide a target domain, product type, and output preferences, and I will generate a complete, ready-to-ship design system specification.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a complete design system with WCAG 2.2 AA compliance for my UI project?▼

Generating a WCAG 2.2 AA compliant design system requires providing a target domain, product type, and output preferences to automatically produce palettes, components, patterns, tokens, and automated accessibility checks.

Can I create Tailwind-ready design tokens for specific industries like finance or healthcare?▼

Yes, you can create Tailwind-ready design tokens for industries like finance or healthcare by specifying the domain to generate tailored color systems, typography recommendations, and framework-ready configuration outputs.

Does the generated design system work with React, Vue, and Svelte frameworks?▼

Yes, the generated design system works with React, Vue, and Svelte by producing framework-ready outputs that include 43 components and 8 patterns tailored to your specified multi-domain UI project requirements.

What's the best way to automate palette governance and token generation for a multi-domain UI project?▼

The best way to automate palette governance and token generation is to specify your multi-domain UI project parameters to automatically generate 9 structural palettes, token sets, and governance rules ensuring brand consistency.

What components and patterns are included when building a design system for an ecommerce or enterprise dashboard?▼

Building a design system for an ecommerce or enterprise dashboard includes 43 components and 8 structural patterns, along with 9 tailored palettes and typography recommendations to ensure consistent interface delivery across products.

Related Skills

Explore More Design & Creative Skills→
LerianStudioLerianStudio
205

pre-dev-prd-creation

Generate a complete PRD with problem discovery, user stories, and success metrics.

Official
Basic
rayriffyrayriffy
127

daisyui

Provide semantic class names and Tailwind CSS components with themes.

Community
Advanced
angelgarciasolorzanoangelgarciasolorzano

shadcn

Generate design system guidelines for Shadcn UI components with WCAG 2.2 AA compliance.

Community
Advanced
CutTheChexxCutTheChexx

brand-builder

Create cohesive brand identities and scalable design systems for web applications.

Community
Advanced