Universal Design System
The first AI-native design system. Describe your product — get a complete, accessible, shipping-ready design system in seconds.
Live Demo · Documentation · Component Library · Token Reference
Why Universal Design System?
Most design systems give you components. We give AI a deterministic recommendation engine that understands your domain and makes design decisions for you.
python3 src/scripts/design_system.py "fintech dashboard"
# => palette: corporate, components: data-table, tabs, badge, side-nav
# anti-patterns: playful-animations (CRITICAL), neon-colors (CRITICAL)
# tokens: 4px radius, subtle shadows, Inter font, minimal motion
One command. Full design system. WCAG-validated. Domain-appropriate.
How it compares
| Feature | UDS | Material UI | DaisyUI | Style Dictionary | Radix UI |
|---|
| Deterministic recommendation engine | Yes | No | No | No | No |
| Domain-aware recommendations | 55 sectors, 21 product types | Manual selection | Manual selection | N/A | N/A |
| WCAG 2.2 AA automated audit | Automated contrast validation (108 pairs) | Partial | No | No | Yes (runtime) |
| Anti-pattern detection | 84 domain-specific rules | No | No | No | No |
| Multi-framework output | React, Vue, Svelte | React only | CSS only | Platform tokens | React only |
| AI platform support | 20 platforms | N/A | N/A | N/A | N/A |
| Design tokens (W3C DTCG) | ~600 tokens | Custom format | CSS vars | Yes (tooling) | CSS vars |
| Zero-config palette system | 9 palettes + custom | Theming API | 30+ themes | N/A | N/A |
| BM25 search across 20 databases | Yes (1,676+ rows) | No | No | No | No |
| Tailwind CSS generation | Built-in | Community | Built-in | Plugin | No |
Architecture
User Query -> Domain Detection -> BM25 Search -> Rule Application -> Output
(55 sectors, (20 CSVs, (190 rules,
21 product types) 1,676+ rows) 84 anti-patterns)
Layer 1 -- Domain Detection: Classifies your product across 55 industry sectors and 21 product types with confidence scores.
Layer 2 -- BM25 Search: Okapi BM25 ranking (k1=1.5, b=0.75) with Porter stemmer and synonym expansion across 20 CSV databases. Surfaces the most relevant palettes, components, patterns, typography, and color schemes.
Layer 3 -- Rule Application: Evaluates 190 conditional rules and flags 84 industry-specific anti-patterns. First match wins for palette; all matching rules accumulate.
Ecosystem and token pipeline
UDS is the inference layer: it infers design decisions (palette, components, anti-patterns) from your query. The rest of the pipeline is optional and tool-agnostic:
- Tokens: UDS uses
tokens/design-tokens.json as the source of truth. Style Dictionary (already integrated via npm run build) compiles tokens to CSS, JS, iOS Swift, and Android XML. No extra setup required.
- Optional tooling: You can combine UDS with Tokens Studio (Figma ↔ Git sync), Specify (enterprise token lifecycle), Storybook (component testing and docs), or Zeroheight (design system documentation). UDS does not depend on them; it only produces the spec and tokens. Use these tools to govern, test, or document the system after generation.
- Reference systems: UDS is informed by lessons from Material Design, Polaris, and Primer (see SPECIFICATION.md §0.7). Future directions (analytics, multi-agent orchestration, visual token interaction) are noted in §0.8.
Quick Start
For a React app (recommended path)
mkatogui