# UIX Design System > UIX makes your app's design system in minutes: color scales, fonts, light and dark themes, spacing and components, with a contrast check of every text color. Make it on the web, in Figma or from your AI agent, save it to your UIX account, and use it everywhere. Made by Sigma Studio. The journey: Create (the wizard at /generate: pick a main color, take or change the suggested second and third colors, choose fonts and corners, save; sign in with Google or an emailed link, no password) → Tweak (Studio at /studio/: colors, fonts, light and dark themes, spacing, components) → Use it (a hosted CSS link, the CLI, shadcn, code export, Figma or an AI agent). Saved systems are listed at /account (My design systems, plan, API key). Docs: https://useuix.com/docs ## Three ways in - Web: the wizard at https://useuix.com/generate and the full editor, Studio, at https://useuix.com/studio/ (no Figma needed). 251 presets (41 free) open in Studio with "Use this preset". Each saved system gets a link, /s/. - Figma: UIX Design System Generator (https://www.figma.com/community/plugin/1632177375200350305) turns the same system into Figma variables, styles, 74 components in 10 visual styles and a docs page. Typing the code the plugin shows on /account lets it open the systems saved in the account. - AI agents: the MCP server at https://useuix.com/mcp (details below). Studio → Use it → AI tools also has copy-a-prompt cards for Lovable, Bolt, v0, Cursor and Claude Code. ## Use it in your app The id is the last part of the Studio address (/s/) or is shown in Account → My design systems. - Hosted CSS (CSS variables, light and dark; updates when the system is saved): `` - Tailwind v4 theme: `https://useuix.com/s/.tailwind.css`. W3C design tokens: `https://useuix.com/s/.json` - CLI: `npx uix-ui@latest new my-app --theme ` (or `new my-app ` for a saved system) starts a new project with the full system; `npx uix-ui pull ` writes the theme, tokens and components into an existing repo; `npx uix-ui sync` pulls later changes. No API key needed. - shadcn: `npx shadcn@latest add https://useuix.com/r//button.json` installs a component in the system's colors. - Code export from Studio: 21 formats, 4 free (see Key facts). ## Key facts - Made by: Sigma Studio (https://sigmastudioo.com), founder Rakib Shekh. - Price: free plan (1 saved design system, the 41 free presets, the free components and 4 free code formats); UIX Pro (everything: unlimited saved systems, all 251 presets, all 74 components, all 21 formats, MCP Pro features, Figma Pro) has a 7-day free trial, then costs $5.99 per month or $48.99 per year (USD, taxes added at checkout). Sold through Paddle as Merchant of Record. One license works on up to 3 devices. 14-day refund on the first payment. Launch price: 50% off until April 10, 2027; subscribers who join before then keep their price. After that the regular price is $11.99 per month or $97.99 per year. - What the Figma plugin creates: variable collections for primitives (color scales), theme (light and dark modes), typography and dimensions; text styles for Desktop, Tablet and Mobile; effect styles (shadows, glass, glow); a documentation page; 74 token-bound components in 10 visual styles (Modern, Glass, Neumorphism, Brutalism, Neon, Clay, Gradient, Minimal, Tonal, Skeuomorphic). - Color: 11-step OKLCH scales for brand, neutral and feedback colors, with WCAG contrast checks on every shade, a library of 34 palettes, palette from a logo or image, APCA and color-blind preview. All free. - Typography: 50 font pairings, modular type scales; Tablet and Mobile sizes are Pro. - Color pages: https://useuix.com/generate/ (e.g. /generate/962e65) shows OKLCH scales, light and dark tokens, a WCAG 2 + APCA contrast receipt for every text pair, and Tailwind v4 / CSS / DTCG / DESIGN.md code for one color. - Code export (21 formats): CSS variables, Tailwind v4, W3C DTCG / Style Dictionary and AI Pack (free); React, MCP server, SwiftUI, Android XML, Jetpack Compose, Flutter, WordPress, Elementor, Webflow, email, SCSS, Tailwind v3, Tokens Studio, UIX JSON, Markdown, HTML style guide and a docs website (Pro). Exports include DESIGN.md, AGENTS.md and llms.txt for AI tools. From Figma, Pro can also open a GitHub pull request. - Other Figma tools: design system audit with health score and one-click fixes, part-by-part sync (e.g. only colors), version history, optional AI brand generator using the user's own API key. - Privacy: systems saved on the web are stored in the user's UIX account; in Figma the design system lives in the user's file. ## Free vs Pro - Free: the full color engine (OKLCH, palettes, palette from a logo or image, APCA, color-blind preview); light theme with semantic tokens; the full type scale; every token type; 12 core components (Button, Icon Button, Input, Select, Checkbox, Radio, Switch, Badge, Avatar, Card, Alert, Tabs) in the Modern style with all 3 shapes; brand guidelines (preview all 5 styles, add Bold or Corporate to Figma with 3 applications); social posts (2 templates, Instagram post size, up to 6 posts per run, in Figma Design and Figma Buzz); code export to CSS, Tailwind v4, W3C DTCG and AI Pack; audit with 3 one-click fixes per scan; a docs page in Figma with UIX branding; 1 saved system and the last 3 versions. - Pro: everything in Free plus dark, high-contrast and multi-brand themes with Material 3, shadcn and UIX Extended presets; responsive Tablet and Mobile type; all 74 components in 10 styles and page templates; all 5 guideline styles, all 14 applications, PDF, PNG and HTML export and a brand book website; all 8 social templates, 6 sizes, up to 120 posts per run and "My Figma design" fill; all 21 code formats including React and MCP server, Download all (.zip) and GitHub sync; unlimited audit fixes, Make components and bulk rename; white-label docs and docs export; unlimited saved systems and up to 25 versions per file; AI assistant. ## MCP server for AI agents - Endpoint: `https://useuix.com/mcp` (streamable HTTP). Claude Code: `claude mcp add --transport http uix https://useuix.com/mcp --header "Authorization: Bearer "`. The key is free: sign in at /account and create one. Preset tools work without it. - `create_design_system(brief, primary?, style?, name?)`: a full design system from one sentence (color scales, light and dark themes, fonts, radius, shadcn-compatible tokens), with a WCAG contrast receipt. With a key it is saved to the account and returns its id, a Studio link (/s/) and install commands: hosted CSS (/s/.css, /s/.tailwind.css), `npx shadcn add https://useuix.com/r//theme.json`, `npx uix-ui pull `. Free accounts keep 1 saved system, Pro unlimited. - `list_my_design_systems`, `get_design_system(id, file?)` (tokens summary and CSS variables, or the Tailwind theme, AGENTS.md, DESIGN.md), `get_component(id, name)` (shadcn-style React in that system's tokens; 12 core components free, all with Pro). - `search_presets`, `get_preset(id, format)`: the 251 ready presets (41 free). ## Sister product: uix-ui - [uix-ui](https://useuix.com/ui) is a separate, open-source React component library from the same team (MIT licence). React + Tailwind v4, 64 components with the same names as the components UIX Design System Generator builds in Figma, 41 free themes plus the UIX default, installed through its CLI, the shadcn registry or MCP. It does not need the Figma plugin; the plugin does not need it. ## Free tools Free, in the browser, no account needed to start (a free account shows every result and the Markdown download): - [Accessibility check](https://useuix.com/tools/accessibility-checker): paste a URL; text contrast against WCAG 2.2 AA with a passing color for each failure, missing alt text, form labels, link and button names, heading order, page language, pinch zoom and tap targets under 24 px. - [Design health check](https://useuix.com/tools/design-health-check): every color, font, font size, corner radius and spacing value a page really uses, near-duplicate colors, and a consistency score out of 100. - [DESIGN.md generator](https://useuix.com/tools/design-md-generator): DESIGN.md, AGENTS.md and tokens.css for AI coding agents, from a website (brand color, fonts, corners) or a few answers, built with the same engine as /generate. Free to copy or download. ## Links - [Home](https://useuix.com/): product overview and FAQ - [Docs](https://useuix.com/docs): get started, save and sign in, use it in your app (CSS link, CLI, shadcn), AI agents (MCP setup for Claude Code and Cursor), Figma plugin [Installation](https://useuix.com/docs/installation), [Quick start](https://useuix.com/docs/quick-start), [Tokens and naming](https://useuix.com/docs/tokens), [Themes and dark mode](https://useuix.com/docs/themes), [Contrast](https://useuix.com/docs/contrast), [Components](https://useuix.com/docs/components), [CSS link and Tailwind](https://useuix.com/docs/css-link), [CLI](https://useuix.com/docs/cli), [shadcn registry](https://useuix.com/docs/shadcn), [Code export](https://useuix.com/docs/code-export), [Figma plugin basics](https://useuix.com/docs/figma-plugin), [MCP server](https://useuix.com/docs/mcp), [AGENTS.md and AI Pack](https://useuix.com/docs/ai-pack), [Account and plans](https://useuix.com/docs/account), [FAQ](https://useuix.com/docs/faq) - [Start free](https://useuix.com/generate): the wizard that makes a first design system - [Pricing](https://useuix.com/pricing): plans, full feature comparison, billing FAQ - [Presets](https://useuix.com/presets): 251 ready design systems (41 free), each with color ramps, a font pairing and radius that pass WCAG AA in light and dark; catalog JSON at /registry/index.json; free presets ship DESIGN.md, a Tailwind v4/shadcn theme, W3C tokens and a shadcn install item (/registry/r/.json) - [Services](https://useuix.com/services): done-for-you design systems by the UIX team — audit from $299, DS Starter in 48 hours for $990, DS Pro from $2,490, brand kit add-on $490, monthly care from $490/mo - [UIX Design System Generator](https://useuix.com/generator): the product page for the web wizard, Studio and the Figma plugin: colors, typography, tokens, themes, components, code export and audit - [Figma plugin](https://useuix.com/figma): what UIX Design System Generator does in Figma, how it works, and its Free and Pro plans - [UIX UI](https://useuix.com/ui): the open-source React component library (sister product) - [For AI agents](https://useuix.com/ai): MCP server, llms.txt, AGENTS.md and the AI Pack, copy-a-prompt cards - [Free tools](https://useuix.com/tools): accessibility check, design health check, DESIGN.md generator - [Why UIX](https://useuix.com/why): what UIX does differently, and a fair comparison with shadcn/ui, Tailwind Plus, UX Pilot and Figma UI kits - [Full docs as plain text](https://useuix.com/llms-full.txt): every docs page in one file - [Guide: How to create a design system in Figma](https://useuix.com/guide/create-a-design-system-in-figma): 11 steps from an empty file to code - [Install on Figma](https://www.figma.com/community/plugin/1632177375200350305) - [Buy UIX Pro](https://useuix.com/checkout) - Support: support@useuix.com - [Terms](https://useuix.com/terms), [Privacy](https://useuix.com/privacy), [Refunds](https://useuix.com/refunds) ## Blog - [UIX Blog](https://useuix.com/blog): guides and comparisons by the founder, MD Rakib Shekh. RSS: https://useuix.com/blog/rss.xml - [Figma Specs and the move to markdown context](https://useuix.com/blog/figma-specs-markdown-design-systems): Figma Specs puts markdown documents on the canvas and lets agents read them through MCP. What it is, its beta status, and how it sits next to DESIGN.md. - [What Config 2026 changed for design systems](https://useuix.com/blog/config-2026-design-systems): Figma Config 2026 was mostly motion, shaders, code layers and agents. Here is what it changed for design systems, with beta status for each item. - [How to export Figma variables as DTCG JSON](https://useuix.com/blog/export-figma-variables-dtcg-json): How to export Figma variables to JSON: the built-in export, what DTCG import accepts, and when you need the REST API, the plugin API or Tokens Studio. - [The design tokens spec turned one. What it means](https://useuix.com/blog/dtcg-design-tokens-spec-stable): The design tokens specification 2025.10 shipped on October 28, 2025. Here is what it covers, who implements it, and why it is not a W3C standard.