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

universal-design-system

Generate framework-ready UI design systems from user queries.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates end-to-end AI-driven design system generation for UI projects, enabling domain-aware outputs and deterministic tokens that ship.

Core Features & Use Cases

  • Domain detection, BM25 search, and rule engine to derive palettes, tokens, patterns, and framework-ready components.
  • Tailwind/React/Vue/Svelte output flows to produce production-ready design systems in seconds.
  • Use Case: Generate a complete design system for a fintech dashboard or SaaS landing page from a single query.

Quick Start

Provide a UI design request such as "design a fintech dashboard" to generate a full design system.

Frequently Asked Questions about universal-design-system

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

FAQPage Schema
How do I generate a UI design system from a single text query?▼

Generating a UI design system from a text query requires providing a prompt like "design a fintech dashboard" to trigger automated domain detection, BM25 retrieval, and token resolution for instant output.

Can I generate design tokens for Tailwind, React, Vue, and Svelte?▼

Yes, you can generate design tokens for Tailwind, React, Vue, and Svelte. The system outputs framework-ready palettes and configurations to produce production-ready design systems across these frameworks.

How does AI domain detection work for generating design palettes?▼

AI domain detection for generating design palettes works by analyzing your text query, applying BM25-based retrieval and rule-based reasoning to derive domain-aware colors, tokens, and UI patterns.

Does this design system generator work for dashboards and landing pages?▼

Yes, this design system generator works for dashboards and landing pages. It targets dashboards, landing pages, apps, and component libraries across industries to deliver complete UI configurations.

Do I need any dependencies or component libraries to use this design system framework?▼

No, you do not need any dependencies or component libraries to use this design system framework. It operates independently to resolve tokens and generate framework-ready components without external requirements.

Related Skills

Explore More Design & Creative Skills→
digital-stoic-orgdigital-stoic-org
19

openspec-init

Initialize OpenSpec structure by detecting project framework and language.

Official
Intermediate
maurodf0maurodf0

webf-native-ui

Integrate Cupertino native UI components into React, Vue, or vanilla JS apps with TypeScript support.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
CASIA-LMCASIA-LM
17

skill-creator

Create domain-specific AI agent skills with structured workflows and validation.

Community
Intermediate