# UIX docs, full text Every page of https://useuix.com/docs as plain text. Short map: https://useuix.com/llms.txt --- # UIX docs: create, save and use your design system URL: https://useuix.com/docs ## UIX docs How to make a design system, save it, and use it in your app, in Figma or with your AI agent. Start freeRead the quick start ### What UIX makes UIX makes the design system for your app: color scales, fonts and text styles, light and dark themes, spacing, corners, shadows and components. Every text color is checked for contrast before you see it. You keep one copy of it, saved in your UIX account. Your code, your Figma file and your AI agent all read that copy, and they all use the same names. When you change a color in Studio, the hosted CSS link changes too, and npx uix-ui sync brings it into your repo. ### How it works What happenscreatetweakuse #### Create Answer a few questions at /generate, or open one of the 251 presets (41 are free). Skip any question and UIX suggests an answer. #### Tweak Your system opens in Studio. Change colors, fonts, themes, spacing and components and watch the preview update. Saving needs a free account. #### Use it Link the CSS, pull it with the CLI, add components with shadcn, hand it to your AI agent, or build it in Figma with the plugin. ### Four ways to use your system Each way reads your saved system by its id. Put your id where you see . #### Start a new app Run this in a terminal. It makes a React and Tailwind app that already uses your system. Full steps. Terminal npx uix-ui@latest new my-app #### Add it to an existing React app Run this in your project folder (Vite or Next.js with Tailwind v4). Run npx uix-ui sync after you change the system. Full steps. Terminal npx uix-ui@latest pull button card #### Any website (HTML, WordPress, Webflow) Paste this into your page’s , then use the variables in your CSS. More on the CSS link. index.html #### AI tools Lovable, Bolt, v0: in Studio, open Use it → AI tools, press Copy prompt and paste it into the tool’s chat. Cursor, Claude Code: connect the MCP server. That is the only place you need an API key. ### Find your id Your id is 10 letters and digits. You can find it in three places: - The address bar in Studio: the last part of /s/. - The Use it page in Studio, next to the commands. - Account → My design systems. ### Where to go next - InstallationNew app, existing app or any website, step by step. - Tokens and namingThe names you will use in CSS, Tailwind and Figma. - CLIEvery uix-ui command and what it writes. - MCP serverLet Claude Code or Cursor use your system. - Figma pluginVariables, styles and 74 components in your file. - FAQIds, caching, privacy, plans and help. Feature tours are on the Generator page, and plans on Pricing. Stuck? Email support@useuix.com. --- # Installation: add your design system to a project | UIX docs URL: https://useuix.com/docs/installation ## Installation Pick the path that matches what you have. Each one reads the same saved design system by its id. ### Before you start You need a saved design system and its id. If you don’t have one yet, make one at /generate and save it (see the quick start). The id is the last part of the Studio address, /s/. The React paths also need: - Node 18 or newer - React 18 or 19 - Tailwind CSS v4. The CLI stops if it finds Tailwind v3. ### New React app Start from an empty folder. The CLI makes a Vite, React and TypeScript app with Tailwind v4 and your system already in it. #### Create the app Run this where you keep your projects. my-app is the folder it makes; it must be new or empty. Terminal npx uix-ui@latest new my-app No saved system yet? Start from a free preset instead, with no id: Terminal npx uix-ui@latest new my-app --theme terracotta-drafting #### What it does It creates the Vite app, installs packages, adds Tailwind CSS and its Vite plugin, pulls your theme and tokens, adds the Button and Card components, and writes a sample src/App.tsx that uses them. #### Start it Open the address it prints. Edit src/App.tsx to build with your system. Terminal cd my-app npm run dev ### Existing React app For Vite, Next.js, Astro, Remix or any React app that already has Tailwind v4. #### Pull your system Run this in your project folder. Name the components you want after the id, or leave them out and add them later. Terminal npx uix-ui@latest pull button card #### Check what changed It writes components.json, the theme in src/styles/uix.css, your tokens in src/styles/tokens/, a cn() helper in src/lib/utils.ts and the components in src/components/ui/. It also adds the theme import to your main CSS file and saves your id in uix.json. Without a src folder, files go in the project root. #### Use the components Import them like any other component. Their colors, corners and fonts come from your system. src/App.tsx import { Button } from "@/components/ui/button"; export default function App() { return ; } #### Stay in sync After you change the system in Studio, run this in the same folder. It does nothing if the version hasn’t changed. Terminal npx uix-ui sync Files you already have are kept. Add --overwrite to replace them. See the CLI reference for every command and option. ### Any website For plain HTML, WordPress, Webflow or any page where you can add a stylesheet. No build step. #### Link the CSS Paste this into the page’s . index.html #### Use the variables Every color, font, space and radius is a CSS variable. Use the semantic names, so dark mode works on its own. styles.css .card { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-6); } #### Done The page picks up your changes when you save in Studio. Dark mode follows the visitor’s device, or set data-theme="dark" on . See Themes and dark mode. ### Just the files Run pull in a folder without a package.json and it writes plain files instead: uix/uix.css and your token JSON files in uix/. Link the CSS from any page: Terminal npx uix-ui@latest pull index.html ### AI app builders - Lovable, Bolt, v0: in Studio, open Use it → AI tools, press Copy prompt and paste it into the tool’s chat. - Claude Code, Cursor and other agents: connect the MCP server, or add the AI Pack files to your repo. --- # Quick start: make your first design system | UIX docs URL: https://useuix.com/docs/quick-start ## Quick start Make a design system, save it, change it and use it. It takes a few minutes and a free account. ### Your first design system #### Answer a few questions Open /generate. UIX asks about your app one question at a time, and the preview updates as you answer: What are you building? What field is it in? Do you have a brand color? How should it feel? What kind of corners? How much space between things? Which fonts? Light, dark or both? Which parts do you need first? How strict should contrast be? Pick an option or type your own answer. Skip any question and UIX suggests an answer that fits what you said so far. #### Save it Saving needs a free UIX account. Sign in with Google, or type your email and open the link we send you. There is no password. A free account keeps one design system; UIX Pro keeps as many as you like. Each saved system gets its own id and its own Studio page at /s/. #### Tweak it in Studio Your system opens in Studio. Studio has three steps, each with its own tabs: Create: Ready-made, From my brand, Bring my own, Saved. Tweak: Colors, Fonts, Themes, Spacing & sizes, Components. Use it: Code, AI tools, Figma. Everything previews live. Brand kit and Check my file only work on the Figma canvas, so Studio on the web leaves them out. #### Use it Open Use it. Code has the CSS link, the CLI commands and code export. AI tools has a prompt to copy for Lovable, Bolt and v0, and the setup for Claude Code and Cursor. Figma takes the system into the Figma plugin. Terminal npx uix-ui@latest pull button card Next, Installation walks through each way to use it in code. ### Start from a preset Want a head start? Open one of the 251 presets (41 are free) and press Use this preset. It opens in Studio as a new system, ready to change. If you’re signed in, it is saved to your account right away. To start a new React app from a free preset, with no account, run npx uix-ui@latest new my-app --theme and use the preset’s name. See the CLI reference. ### Start from your AI agent If you work in Claude Code, Cursor or another agent, it can make the system for you. Connect the MCP server and ask. The agent calls create_design_system with a short brief, like “a calm telehealth app for busy parents, teal”. With your API key, the system is saved to your account and opens in Studio like any other. ### Start in Figma The Figma plugin starts the same way. Its Start step has four tabs: - Ready-made: start from a ready design system, then make it yours. - From my brand: a brand color, a logo, a palette, or describe it to AI. - Bring my own: from this Figma file, Tokens Studio, Style Dictionary, CSS or Tailwind. - Saved: systems in your UIX account and on this computer. --- # Tokens and naming: colors, type, spacing | UIX docs URL: https://useuix.com/docs/tokens ## Tokens and naming Every value in your system has one name. The same name shows up in your CSS, your Tailwind classes, your Figma variables and what your AI agent reads. ### Two layers UIX keeps colors in two layers: - Primitives are the raw scales, like --color-primary-500. Each has a fixed value. - Semantic tokens say what a color is for, like --bg-surface or --text-secondary. Each one points to a primitive, and the theme decides which one. In light mode --bg-surface may be white; in dark mode it is a dark neutral. Build your UI with semantic tokens. Then dark mode, a new brand color or a contrast fix changes the whole UI without touching your components. ### Color scales Primary, secondary and neutral each get 11 steps, from 50 (lightest) to 950 (darkest). Error, warning and success get 5 steps: 50, 300, 500, 800 and 950. There is also a base white and black. tokens.css :root { --color-base-white: #FFFFFF; --color-base-black: #000000; --color-primary-50: #EDF8F6; --color-primary-100: #D8F0EB; /* … 200 to 900 … */ --color-primary-950: #002E28; --color-neutral-50: #F9FAFA; /* … */ --color-error-50: #FFF3EE; --color-error-300: #F6AC8F; --color-error-500: #D04D00; --color-error-800: #882F00; --color-error-950: #451501; } These values come from a teal system. Yours will differ. ### Semantic colors There are four groups. Each name becomes a CSS variable, like --bg-brand-hover or --text-on-brand. Group | Names | bg | canvas, surface, subtle, muted, inverse, disabled, overlay; brand, brand-hover, brand-pressed, brand-subtle; secondary, secondary-hover, secondary-pressed, secondary-subtle; danger, danger-hover, danger-pressed, danger-subtle; warning, warning-subtle; success, success-subtle; info, info-subtle | text | primary, secondary, tertiary, disabled, inverse, on-brand, on-secondary, on-danger, brand, danger, warning, success, info | border | default, subtle, strong, brand, focus, danger, warning, success | icon | primary, secondary, brand, on-brand, danger, warning, success | The on- names are for text and icons on a filled color. text/on-brand is the label on a primary button. ### Same name in every place A token has one path, like bg/surface. Each place writes that path its own way. Token | CSS variable | Tailwind | Figma variable | bg/surface | --bg-surface | bg-surface | bg/surface | bg/brand | --bg-brand | bg-brand | bg/brand | text/primary | --text-primary | text-fg-primary | text/primary | text/secondary | --text-secondary | text-fg-secondary | text/secondary | border/default | --border-default | border-line-default | border/default | border/focus | --border-focus | border-line-focus | border/focus | In Tailwind, text colors start with text-fg- and borders with border-line-. In Figma, the semantic colors live in the Theme collection, with one mode per theme. Your AI agent gets the full table in AGENTS.md. ### Type There are three font variables and one class per text style. Each style has its own size, line height and letter spacing variables. tokens.css --font-heading: 'Manrope', ui-sans-serif, system-ui, sans-serif; --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-heading-1-size: 48px; --text-heading-1-line-height: 1.2; --text-heading-1-letter-spacing: -0.01em; .text-heading-1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-heading-1-size); line-height: var(--text-heading-1-line-height); letter-spacing: var(--text-heading-1-letter-spacing); } The styles are display (large and medium), heading 1 to 6, title, subtitle, body (xl to xs), label, caption, overline and code. Use the class, like text-heading-2 or text-body-medium, in plain CSS or as a Tailwind utility. ### Spacing, corners and the rest Variables | Example values | --space-* | --space-1 4px, --space-4 16px, up to --space-32 128px | --radius-* | none, xs, sm, md, lg, xl, 2xl, 3xl, full | --border-width-* | none, thin, medium, thick | --size-icon-* | xs 12px, sm 16px, md 20px, lg 24px | --shadow-* | xs, sm, md, lg, xl, 2xl, tinted by --shadow-color | --opacity-* | 0, 5, 10, 20, 40, 60, 80, 100 | --z-* | base, raised, dropdown, sticky, overlay, modal, popover, toast, tooltip | --duration-* | instant, fast, normal, slow, slower | --ease-* | standard, enter, exit, linear | --breakpoint-* | sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px | The values depend on your choices. The corners you pick, for example, change every radius. ### Rules worth keeping - Never hard-code colors, font sizes, spacing, radii, shadows or durations. Use the variables or Tailwind classes. - Semantic over primitive: bg-surface and text-fg-primary, not blue-500 or #2563eb. - No separate dark colors. The tokens switch with data-theme. See Themes and dark mode. - Missing a value? Add a token instead of a one-off color, shadow or radius. --- # Themes and dark mode | UIX docs URL: https://useuix.com/docs/themes ## Themes and dark mode Your UI uses one set of names. The theme decides which shade each name points to, so dark mode needs no extra CSS. ### How themes work Every semantic token has a light value and a dark value. --bg-surface points to white in light mode and to a dark neutral in dark mode. Your components only use --bg-surface, so they work in both without a second set of styles. The hosted CSS and the CSS export are laid out like this (shortened): tokens.css :root { /* Semantic — Light */ --bg-surface: var(--color-base-white); --text-primary: var(--color-neutral-900); } [data-theme="dark"] { --bg-surface: var(--color-neutral-900); --text-primary: var(--color-neutral-50); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-surface: var(--color-neutral-900); --text-primary: var(--color-neutral-50); } } ### Switch with one attribute - shows the dark theme. - keeps the light theme, even on a device set to dark. - No data-theme at all follows the visitor’s device setting. To switch from a button, set the attribute in JavaScript: app.js document.documentElement.dataset.theme = 'dark'; ### Tailwind’s dark: variant The Tailwind v4 theme from UIX ties the dark: variant to the same attribute, or to a dark class: tailwind.css @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *, .dark, .dark *)); You rarely need dark: for colors, since bg-surface and text-fg-primary already switch. Use it for things that aren’t tokens, like swapping an image. ### Light, dark or both At /generate, the question “Light, dark or both?” sets where you start: light and dark, light only, or dark first. Every color gets a light and a dark value either way, and both are checked for contrast. ### Free and Pro - Hosted links, the CLI, the shadcn registry and the MCP server give light and dark on every plan. - In the Figma plugin, Free has the light theme. Pro adds dark, high contrast and multi-brand themes, plus the Material 3, shadcn and UIX Extended token presets. Plans and prices are on Pricing. --- # Contrast and accessibility checks | UIX docs URL: https://useuix.com/docs/contrast ## Contrast and accessibility UIX checks every text color against the background it sits on, in every theme, and fixes the pairs that fail before you see them. ### What gets checked Every text pair your system defines: body text on the page and on cards, secondary text, hints, links, error messages, and the labels on brand and danger buttons. Each pair is checked in every theme against WCAG 2.2 AA, which asks for at least 4.5:1 for text. ### How fixes work When a pair fails, UIX moves the token to the nearest shade on the same scale that passes. If no shade works with white or black text, it flips the label instead, so you get dark text on a light fill. Your brand color stays exact wherever it can. If white or near-black text passes on it, it is the button color itself. If not, the button uses the nearest step that passes. For example, teal #14B8A6 is too light for white text. UIX keeps the teal button and gives it near-black text. text/on-brand on bg/brand comes out at 7.9:1. ### The contrast receipt You don’t have to take this on trust. When your AI agent calls create_design_system or get_design_system on the MCP server, the answer includes a receipt: - standard: WCAG 2.2 AA, 4.5:1 for text - pairsChecked and passing: how many pairs, and how many pass - lowest: the weakest pair and its ratio - fixed: the tokens UIX changed, from which shade to which AGENTS.md has a table of safe pairs, so the agent knows which text goes on which background. From the teal system above, light theme: Foreground | Background | Ratio | Use | text/primary | bg/canvas | 16.8:1 | Body text on the page | text/primary | bg/surface | 17.6:1 | Body text on cards | text/secondary | bg/surface | 7.5:1 | Secondary text on cards | text/tertiary | bg/surface | 4.8:1 | Hints and placeholders | text/on-brand | bg/brand | 7.9:1 | Primary button label | text/on-danger | bg/danger | 8.6:1 | Destructive button label | text/brand | bg/surface | 5.9:1 | Links | text/danger | bg/surface | 8.6:1 | Error messages | ### AA or AAA /generate asks “How strict should contrast be?”. AA, the usual standard, means text at least 4.5:1. AAA means at least 7:1, for health, government or older readers. With AAA, some colors get darker. ### In Figma - Color work in the plugin shows WCAG contrast, APCA and a color-blind preview. All free. - Check my file runs an accessibility check. Free shows the results and gives 3 one-click fixes per scan; Pro has no limit. - The HTML accessibility report (WCAG 2.2 AA) is Pro. ### What contrast doesn’t cover Color is one part of accessibility. These rules from the AI Pack are worth following by hand too: - Never remove focus outlines. The focus ring uses border/focus. - Give every icon-only button an aria-label. - Make hit targets at least 40px, or 44px on touch screens. - Don’t use opacity for disabled or secondary text. Use text/disabled and text/secondary. --- # Components: 74 parts, 3 shapes, 10 styles | UIX docs URL: https://useuix.com/docs/components ## Components UIX builds components from your tokens, so they change when your colors, fonts or corners change. ### 74 components in 7 groups The Figma plugin builds these as real component sets, with variants and properties, bound to your tokens. Group | Components | Actions (4) | Button, Icon Button, Button Group, Link | Forms (19) | Input, Select, Textarea, Checkbox, Radio, Switch, Slider, Segmented Control, Chip, File Upload, Rating, Search Field, Number Input, OTP Input, Combobox, Tag Input, Toggle and toggle group, Selection Card, Date Picker | Navigation (10) | Tabs and tab bar, Breadcrumb, Pagination, Navbar, Sidebar Item and sidebar, Step and stepper, Menu Item and dropdown, Bottom Navigation, Tree Item and tree, Footer | Feedback (11) | Alert, Banner, Toast, Tooltip, Progress, Progress Circle, Spinner, Skeleton, Empty State, Notification, Cookie Banner | Data display (15) | Badge, Avatar, Avatar Group, Card, Stat, List Item, Table Row and table, Accordion, Divider, Kbd, Timeline and feed, Description List, Code Block, Quote, Chart | Overlays (5) | Modal, Popover, Drawer, Bottom Sheet, Command Palette | Marketing (10) | Hero, Feature, Pricing Card, Testimonial, CTA Section, Logo Cloud, Newsletter, Blog Card, Team Member, Contact Form | You choose which components to build, and which variants of each. Only those are made. ### Shapes Every component comes in Sharp, Rounded or Pill. Pick one and the whole library is drawn in it. Pick more than one and each set gets a Shape variant. Corners stay bound to your radius tokens, and nested components follow the shape: the buttons in a card match the card. ### Visual styles The same components can be built in 10 visual styles: Modern, Minimal, Glassmorphism, Neumorphism, Neo-brutalism, Gradient, Claymorphism, Skeuomorphic, Neon and Material tonal. Each style sits on top of the same token bindings, so a color change or dark mode still works. ### Variants - Buttons and icon buttons: Primary, Secondary, Soft, Outline, Ghost and Destructive, plus Link. - Fields: Outline, Filled and Underline. - Alerts: Subtle, Accent, Solid and Outline. - Toasts: Light and Dark. Components also have sizes and states, and right-to-left versions if you need them. ### Free and Pro - Free: 12 core components (Button, Icon Button, Input, Select, Checkbox, Radio, Switch, Badge, Avatar, Card, Alert, Tabs) in the Modern style, in all 3 shapes, with RTL. - Pro: all 74 components in all 10 styles, plus page templates made from them: sign in, sign up, dashboard, settings, pricing, landing, profile and 404, with mobile versions. ### Components in code - React export: shadcn-style React for all 74 components, from code export. This format is Pro. See Code export. - Your AI agent: the MCP tool get_component returns one component in your system’s tokens. Free accounts get the 12 core components; Pro gets all of them. See MCP server. - CLI and shadcn: npx uix-ui pull and the shadcn registry install the components of uix-ui, our open-source React library, in your colors. See shadcn registry. Terminal npx uix-ui@latest pull button card A tour with pictures is on the Generator page. --- # Hosted CSS link, Tailwind v4 theme and tokens JSON | UIX docs URL: https://useuix.com/docs/css-link ## CSS link and Tailwind Every saved design system has three files you can link to. They update when you save in Studio. ### The three files Each file is built from your saved system and served by its id. Put your id where you see . File | What it is | Use it for | /s/.css | CSS variables for light and dark | Any website: plain HTML, WordPress, Webflow | /s/.tailwind.css | A Tailwind v4 theme. It starts with @import "tailwindcss". | Tailwind v4 projects | /s/.json | W3C design tokens (DTCG), all files in one JSON object | Style Dictionary and other token tools | The full address is https://useuix.com/s/.css, and the same for the other two. ### Plain CSS #### Link the file Paste this into your page’s , before your own styles. index.html #### Use the variables Use the semantic names like --bg-surface and --text-primary, not the raw shades. They switch on their own in dark mode. styles.css body { background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-body); } .button { background: var(--bg-brand); color: var(--text-on-brand); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); } #### Dark mode The file has a light set on :root, a dark set for [data-theme="dark"], and follows the visitor’s device when data-theme isn’t set. See Themes and dark mode. ### Tailwind v4 The Tailwind file is a full theme. It starts with @import "tailwindcss" and puts every token in @theme, so download it and use it as your main CSS file (for example src/index.css). Then the utilities map to your tokens: Card.tsx
Cards, borders and text come from your system.
A downloaded copy doesn’t change when you edit the system. To stay in sync, use the CLI instead: npx uix-ui pull writes the theme to src/styles/uix.css, and npx uix-ui sync updates it. ### Design tokens JSON /s/.json holds your W3C DTCG token files as one object. Each key is a file name: .json { "tokens/primitives.tokens.json": { … }, "tokens/theme.light.tokens.json": { … }, "tokens/theme.dark.tokens.json": { … }, "tokens/$themes.json": { … } } Split it into files and feed them to Style Dictionary or any tool that reads DTCG tokens. The CLI does this for you: pull writes them to src/styles/tokens/. ### When changes show up The files update when you save in Studio. Saved changes reach the link within about a minute: browsers may keep a copy for 60 seconds and our servers for 30. Need the new version right away? Add ?v= and a new number to the address, like /s/.css?v=2. The file is the same; only the caches are skipped. ### What your plan changes The files follow the plan of the system’s owner. Free gets light and dark. UIX Pro adds any extra themes, such as high contrast, and the Pro items in the shadcn registry. If a Pro plan ends, the files fall back to the Free version within a day. ### Access and privacy - Any site can load these files. They are served with open CORS, so fetch() from your own app works too. - Anyone with the id can read them, like a shared link. Your list of systems stays private to your account. --- # uix-ui CLI: new, pull, sync and more | UIX docs URL: https://useuix.com/docs/cli ## CLI uix-ui puts your design system in a React and Tailwind v4 project. It has no dependencies and runs with npx. ### Requirements - Node 18 or newer - React 18 or 19 - Tailwind CSS v4. The CLI stops if it finds v3. You don’t install anything first. Run it with npx uix-ui@latest, and use npx uix-ui for later commands in the same project. pull and sync need no API key. ### Commands Command | What it does | new | Makes a Vite, React and Tailwind v4 app in a new folder that already uses your system. | new --theme | The same app, started from a free preset. No account or id needed. | pull [components…] | Writes your system’s theme, tokens and any components you name into this project. | sync | Pulls again after you change the system. Reads the id from uix.json. | init [--preset ] | Sets up a uix-ui theme, the cn() helper and components.json. | add | Copies components into your project, with what they depend on. | theme | Switches to another uix-ui theme. Components don’t change. Add --css to write just uix/theme.css, in any folder. | list | Lists every component and theme in the registry. | help | Prints the four ways to use your system and the commands. | ### new Makes a new app from your saved system. The folder must be new or empty. Terminal npx uix-ui@latest new my-app It creates a Vite app with the React and TypeScript template, installs packages, adds tailwindcss and @tailwindcss/vite, wires Tailwind into vite.config and src/index.css, pulls your system with the Button and Card components, and writes a sample src/App.tsx. Then: Terminal cd my-app npm run dev No saved system yet? Start from a free preset instead. Use --theme and the preset’s name, with no id: Terminal npx uix-ui@latest new my-app --theme terracotta-drafting Give it an id or --theme, not both. ### pull What happensyouterminal - $ npx uix-ui pull - src/styles/uix.css - components.json - uix.jsonSynced Run it in your project folder. Name components after the id to add them too. Terminal npx uix-ui@latest pull button card In an app (a folder with package.json), it sets up components.json with your system’s registry, writes the theme to src/styles/uix.css, writes your token files to src/styles/tokens/, adds the cn() helper and the components, and installs their packages. In a folder without package.json, it writes plain files instead: uix/uix.css, your token files in uix/, and any components you named. Link uix/uix.css from any page. Either way it saves uix.json, so sync knows what to update: uix.json { "system": "", "name": "Teal Design System", "version": 3 } ### sync Run it after you save changes in Studio. It checks the version first and only pulls when it moved. Terminal npx uix-ui sync When nothing changed it prints Up to date: "", version . and stops. ### init, add, theme and list These come from uix-ui, the open-source React library that shares the CLI. After pull, add reads your system’s registry, so new components come in your colors. Terminal # set up a uix-ui theme instead of a saved system npx uix-ui@latest init --preset lagoon-stretch # copy more components npx uix-ui@latest add input select # switch theme; components don't change npx uix-ui@latest theme # every component and theme npx uix-ui@latest list Leave out --preset to start with the UIX default theme. Browse all 42 themes at /ui/themes. ### Options Option | What it does | --overwrite | Replaces files you already have. Without it, existing files are kept and listed as skipped. | --no-install | Prints the install command instead of running it. | --preset | With init: the uix-ui theme to start from. | --theme | With new: start from a free preset instead of a saved system. | --css | With theme: write only uix/theme.css, in any folder. | ### Files it changes File | What happens | components.json | Created, or the @uix registry is added to yours | src/styles/uix.css | The theme: colors for light and dark, type scale, spacing, radius, shadows | Your main CSS file | @import "./styles/uix.css"; is added after @import "tailwindcss"; | src/styles/tokens/ | Your W3C token files (pull only) | src/lib/utils.ts | The cn() helper, if you don’t have one | src/components/ui/ | The components you add | index.html | Google Fonts links for the theme (Vite) | package.json | clsx, tailwind-merge and the components’ packages, if missing | uix.json | Your system’s id, name and version (pull only) | It finds your main CSS file at src/index.css, src/app/globals.css, app/globals.css, src/styles/global.css (Astro) or app/app.css (React Router), among others. Without a src folder, files go in the project root. - Packages: it uses pnpm, yarn or bun when it finds their lock file, and npm otherwise. - Fonts: in a Vite app it puts the font links in index.html, between markers, and replaces them on the next run. Next.js and others get the links printed to add yourself. ### UIX Pro items Marketing blocks such as hero and pricing-card, the visual styles and the Pro themes need your UIX Pro key. Set UIX_LICENSE in your environment, or in .env or .env.local in the project folder. Terminal export UIX_LICENSE= npx uix-ui@latest add hero pricing-card # visual styles, then npx uix-ui@latest add skins # list shows the Pro items too npx uix-ui@latest list ### Troubleshooting Message | What to do | UIX themes need Tailwind CSS v4 (found v3). | Upgrade Tailwind to v4 first. | run this in your app folder (no package.json here). | init needs a project. cd into it. | no components.json here. Run `npx uix-ui init` first. | add, theme and list need setup. Run pull or init. | No design system with id "…" | Check the id on your Use it page or in Account. | nothing to sync yet. | Run npx uix-ui pull once in this folder. | "my-app" is not empty. | Pick a new folder name for new, or run pull inside that folder. | skipped … (exists, use --overwrite) | Your file differs from the new one. Add --overwrite to replace it. | "…" is part of UIX Pro. Set UIX_LICENSE to your key | Set UIX_LICENSE, or leave that item out. | --- # shadcn registry for your design system | UIX docs URL: https://useuix.com/docs/shadcn ## shadcn registry Each saved design system has its own shadcn registry, so npx shadcn add installs components already in your colors. ### Your system’s registry Every saved design system has its own registry at https://useuix.com/r//. It holds the uix-ui components, linked to your system’s theme. Address | What it is | /r//registry.json | The full registry: your theme and every component you can add | /r//theme.json | Your theme. It writes styles/uix.css and adds its import to your CSS file. | /r//.json | One component, for example button.json | ### Add the theme and components #### Add the theme Run this in your project folder. It puts your colors, fonts, spacing, radius and shadows in src/styles/uix.css. Terminal npx shadcn@latest add https://useuix.com/r//theme.json #### Add components Every component depends on utils, and utils brings the theme along. So the first component you add also adds the theme, and step 1 is optional. Terminal npx shadcn@latest add https://useuix.com/r//button.json #### Use them Import them like any shadcn component. src/App.tsx import { Button } from "@/components/ui/button"; export default function App() { return ; } The shadcn CLI needs the @/* import alias in tsconfig.json. Next.js has it; in Vite, add it yourself. The uix-ui CLI doesn’t need it: it rewrites the imports as relative paths. ### Short names after uix-ui pull If you ran npx uix-ui pull , your components.json already lists your system as the @uix registry. Then shadcn takes short names: Terminal npx shadcn@latest add @uix/button ### uix-ui themes Not using a saved system? The open-source uix-ui library has its own registry at /ui/r, with the UIX default theme and its preset themes. It works without any setup: Terminal npx shadcn@latest add https://useuix.com/ui/r/button.json ### What your plan changes The registry follows the plan of the system’s owner. Free owners get the free components with light and dark colors. UIX Pro owners also get the Pro items, such as the marketing blocks. Check what you can add with npx uix-ui list. --- # Code export: 21 formats from CSS to SwiftUI | UIX docs URL: https://useuix.com/docs/code-export ## Code export Download your design system as code for the platform you build on. Four formats are free. ### Where to export - On the web: in Studio, open Use it → Code. - In Figma: in the plugin, open Export → Code. Pick a format and its files open in the code viewer. Your saved system also has hosted links for CSS, Tailwind v4 and tokens that update on their own. ### All 21 formats Format | Plan | CSS variables | Free | Tailwind v4 (@theme) | Free | W3C DTCG / Style Dictionary | Free | AI Pack (AGENTS.md, DESIGN.md, shadcn) | Free | React components (shadcn-style) | Pro | MCP server (Claude, Cursor) | Pro | SwiftUI | Pro | Jetpack Compose | Pro | Android XML | Pro | Flutter | Pro | WordPress (theme.json) | Pro | Elementor (site kit) | Pro | Webflow (variables) | Pro | Email (MJML + HTML) | Pro | SCSS | Pro | Tailwind v3 config | Pro | Tokens Studio (JSON) | Pro | UIX config (lossless) | Pro | Markdown docs | Pro | HTML style guide | Pro | Docs website (HTML) | Pro | ### What the free formats give you - CSS variables: every token as a variable, with light and dark sets. Works on any website. - Tailwind v4: a theme file that starts with @import "tailwindcss", so classes like bg-surface and text-fg-primary use your tokens. - W3C DTCG: token JSON files for Style Dictionary and other token tools. - AI Pack: AGENTS.md, DESIGN.md, a component catalog, llms.txt and a shadcn theme, so AI agents follow your system. See AGENTS.md and the AI Pack. ### More with UIX Pro Pro adds the other 17 formats. In the Figma plugin, Pro also adds: - Download all (.zip): every format in one download. - GitHub sync: push a pull request with your tokens, or pull changes back. See every plan detail on Pricing, and a tour of the formats on Generator page. --- # Figma plugin basics | UIX docs URL: https://useuix.com/docs/figma-plugin ## Figma plugin basics UIX Design System Generator turns your design system into Figma variables, styles, components and a docs page, in the file you have open. ### Install and run it #### Install Open the UIX Design System Generator on Figma Community and add it. #### Run it in any file Open a Figma file, then run UIX Design System Generator from the plugins menu. Everything it makes goes into that file. #### Follow the three steps Start, Edit and Export, across the top of the plugin. They are described below. ### Start, Edit, Export The plugin uses the same three steps as Studio on the web (there they are called Create, Tweak and Use it). #### Start - Ready-made: start from a ready design system, then make it yours. - From my brand: a brand color, a logo, a palette, or describe it to AI. - Bring my own: from this Figma file, Tokens Studio, Style Dictionary, CSS or Tailwind. - Saved: systems in your UIX account and on this computer. #### Edit - Colors: brand, neutral and status color scales. - Fonts: fonts, type scale and text styles. - Themes: light, dark and high-contrast colors for your screens. - Spacing & sizes: spacing, radius, borders, sizing, shadows, motion and grids. - Components: components that use your tokens. #### Export - Figma: variables, styles, components and the docs page in this file. - Code: CSS, Tailwind, DTCG, SwiftUI, Compose, Flutter and more. See Code export. - AI tools: files and a live connection so Claude, Cursor, Lovable and v0 use your system. - Brand kit: brand kit, brand book and social posts. - Check my file: find hard-coded values and see which tokens are used. Brand kit and Check my file work only on the Figma canvas, so Studio on the web doesn’t have them. ### What it adds to your file - Variable collections for primitives (your color scales), the theme (light and dark modes), typography and dimensions. - Text styles for Desktop. Tablet and Mobile styles are Pro. - Effect styles for shadows, glass and glow. - A docs page that documents your system. - Component sets on the Components page, bound to your variables. See Components. You don’t have to rebuild everything each time. Choose what to sync: Choice | What it updates | Everything | Every part of the system | Only colors | Color scales and theme colors | Only fonts | Typography and text styles | Only spacing & corners | Spacing and radius | Only components | The component sets | ### Open systems from your account Systems you made on the website or with your AI agent can open in Figma. #### Ask for a code In the plugin, go to Start → Saved and press Open from my UIX account. The plugin shows a short code. #### Enter the code Open useuix.com/device and sign in. Under Connect the Figma plugin, type the code and press Connect. #### Open a system Back in the plugin, your saved systems are listed. Press Open next to one. It replaces the system in this file. You can undo this. #### Save changes back Press Save to “name” to update the system you opened, Save as new to keep both, or Save to my account for a system that isn’t saved yet. On Free, which keeps one saved system, you can choose to Replace it. ### Check my file Check my file scans your file for hard-coded values, like colors typed in by hand, and shows which tokens are used. Free fixes 3 issues per scan in one click. Pro fixes everything at once and adds the accessibility report. ### UIX Pro in Figma - UIX Pro starts with a 7-day free trial. After checkout you get a license key to paste into the plugin. - One key works on 3 devices. The plugin checks it once a day and keeps working for 7 days without a connection. - Free keeps 1 saved system and its last 3 versions. Pro keeps as many systems as you like, with 25 versions per file. Plans and prices are on Pricing. For a full walkthrough, read How to create a design system in Figma. --- # MCP server for Claude Code, Cursor and other agents | UIX docs URL: https://useuix.com/docs/mcp ## MCP server The UIX MCP server lets an AI agent make a design system, read the ones in your account and fetch components in your colors. ### The server The server works over HTTP. Most agents only need its address and, for your own design systems, an API key. Server URL https://useuix.com/mcp Preset tools work without a key. Anything that saves to or reads from your account needs one. ### Set it up #### Create an API key Sign in at /account and create a key under API key. Keys are free. Copy it right away: you won’t see it again. Treat it like a password. #### Add the server to Claude Code Run this in your project folder, with your key in place of . Terminal claude mcp add --transport http uix https://useuix.com/mcp --header "Authorization: Bearer " #### Or add it to Cursor Put this in .cursor/mcp.json in your project. .cursor/mcp.json { "mcpServers": { "uix": { "url": "https://useuix.com/mcp", "headers": { "Authorization": "Bearer " } } } } #### Ask for what you need For example: “Make a design system for a calm telehealth app, teal, and use it on the settings page.” The agent picks the tools below on its own. Other agents use the same address and the same Authorization: Bearer header. Your account page shows ready-to-copy setups for Claude Code, Cursor and a plain JSON config. ### Tools Tool | What it does | Key | create_design_system | Makes a full design system from a short brief: color scales, light and dark themes, fonts, radius, spacing and shadcn-ready tokens, with a contrast receipt. With a key it is saved to your account. | Optional | list_my_design_systems | The systems in your account: id, name, version, last change and Studio link. | Yes | get_design_system | One saved system. By default a summary (colors per theme, fonts, radius, install links, contrast receipt) plus its CSS variables. | Yes, the owner’s | get_component | React code for one component in that system’s tokens, plus lib/utils.ts. | Yes, the owner’s | search_presets | Finds presets by keyword, mood or industry. | No | get_preset | One file of a preset, such as its DESIGN.md or theme CSS. | Pro presets only | #### create_design_system Argument | Meaning | brief | Required. What the app is and how it should feel, up to 2,000 characters. For example “a calm telehealth app for busy parents, teal”. | primary | The main brand color, as a hex like #0F766E or a word like “teal”. Left out, it comes from the brief. | style | One of modern, minimal, corporate, friendly, playful, bold, calm, editorial, luxury, tech. It sets fonts, corners and the color scheme. Left out, it comes from the brief, or modern. | name | A name for the system, up to 80 characters. | With a key, the answer has the new id, a Studio link and install commands: the CSS link, npx shadcn add and npx uix-ui pull. Without a key nothing is saved, and the agent gets the CSS variables to paste. A free account keeps one system; if it already has one, the tool says so and points to it. #### get_design_system Takes id and an optional file: file | Returns | summary | The default: a tokens summary and the CSS variables. | css | CSS variables for light and dark. | tailwind | The Tailwind v4 theme. | agents-md | AGENTS.md, the UI rules for agents. See AI Pack. | design-md | DESIGN.md, the full spec. | #### get_component Takes id, name (like button, icon-button or date picker) and an optional framework, which is react for now. The code is shadcn-style React with TypeScript, Tailwind and class-variance-authority. It needs your theme CSS, from get_design_system or your CSS link. Free accounts get the 12 core components; UIX Pro gets all of them. #### search_presets and get_preset search_presets takes an optional query, tier (free, pro or all), mood, industry and limit (1 to 50, 20 by default). get_preset takes an id and a format: design-md, theme-css, tokens, shadcn, figma-variables or preset-json. Free presets need no key. Pro presets need a key from an account with UIX Pro. ### A typical session What happensagentmcp · useuix.com - call list_my_design_systems - call get_design_system - call get_component200 OK - You ask for a settings page in your app’s style. - The agent calls list_my_design_systems and finds your system’s id. - It calls get_design_system with file: "agents-md" to read your rules, then get_component for the Switch and the Card. - It builds the page with your tokens and links your CSS, without making up new colors. ### Troubleshooting - “This needs a UIX API key.” The server got no key. Check the Authorization header in your agent’s config. - “This UIX API key is not valid.” The key was revoked or mistyped. Create a new one at /account. - “No design system with the id … in this account.” The id belongs to another account, or has a typo. Ask the agent to run list_my_design_systems. - The agent doesn’t list the tools. The server only answers POST requests and has no event stream. Use the HTTP transport in your agent’s settings. --- # AGENTS.md, DESIGN.md and the AI Pack | UIX docs URL: https://useuix.com/docs/ai-pack ## AGENTS.md and the AI Pack A set of files that tells an AI agent how your UI should look, so it uses your tokens instead of guessing. ### Why it helps Coding agents guess when they don’t know your design system. They pick a blue that is close but not yours, or a gray that fails contrast. The AI Pack writes your rules down in files agents already look for, so they reuse your tokens and components instead. The files are made from your system by the same engine as everything else. Nothing is sent to an AI service to make them. The AI Pack is one of the four free code formats. ### What’s in it File | What it holds | AGENTS.md | The rules: golden rules, a token map (token, CSS variable, Tailwind class), a type map, safe contrast pairs and a short “don’t” list. | CLAUDE.md | Two lines that point Claude Code to AGENTS.md. | DESIGN.md | The full spec: front matter with fonts and key colors, then color, type, spacing and component guidance. | design-system/components.json | A catalog of your components with the exact variant values. | llms.txt | A short index that tells an agent which file to read first. | registry.json, registry/…-theme.json | Your theme as a shadcn registry item. | tokens.css, styles/typography.css | CSS variables for light and dark, and plain HTML elements styled with your type. | tokens/*.tokens.json | W3C design tokens: primitives, the light theme and the dark theme. | ### Get the files #### Open your code export In Studio, go to Use it → Code. In the Figma plugin, go to Export → Code. #### Pick AI Pack Choose “AI Pack (AGENTS.md, DESIGN.md, shadcn)” and save the files. #### Put it in your repo Put them at the root of your project, next to package.json, keeping the folders. Commit it, so everyone’s agent reads the same rules. Using the MCP server? The agent can fetch the same AGENTS.md and DESIGN.md live with get_design_system, so they never go stale. ### A look at AGENTS.md Trimmed from a real one, made for a teal system. Yours has your own names and numbers. AGENTS.md ## Golden rules 1. Never hard-code colors, font sizes, spacing, radii, shadows or durations. Use the CSS variables / Tailwind utilities below. 2. Semantic over primitive: `bg-surface`, `text-fg-primary`, `border-line-default`, not `blue-500` or `#2563eb`. 3. Reuse before you build: check design-system/components.json first. 4. States are required: hover, active/pressed, focus-visible, disabled; inputs also error. 5. Accessibility: WCAG 2.2 AA. Use the safe pairs below; every icon-only button gets an aria-label; hit targets ≥ 40 px (44 on touch). 6. Dark mode: tokens switch with `data-theme` on . Never write separate dark colors. ## Safe contrast pairs (Light theme) | Foreground | Background | Ratio | |----------------|------------|---------| | text/primary | bg/surface | 17.6:1 | | text/secondary | bg/surface | 7.5:1 | | text/on-brand | bg/brand | 7.9:1 | ### Which agent reads what - Claude Code reads CLAUDE.md, which points it to AGENTS.md. - Cursor, Codex and many other agents look for AGENTS.md at the root of the repo. - Any agent can be told to “read DESIGN.md first”. It is plain Markdown. ### Lovable, Bolt and v0 These tools work from a chat, not a repo. In Studio, open Use it → AI tools and press Copy prompt. Paste it into the tool’s chat as your first message. It carries your tokens and rules in a form the tool can follow. --- # Account, API keys and plans | UIX docs URL: https://useuix.com/docs/account ## Account and plans Your UIX account holds your saved design systems, your API keys and your plan. ### Sign in Go to /account. Sign in with Google, or type your email and open the link we send you. There is no password to remember. The same account works on the website, in Studio, in the Figma plugin and with your AI agent. ### Your design systems Account → My design systems lists every system you saved, whether you made it in the generator, in Studio, in Figma or with your AI agent. Each one has its own id and its own Studio link, /s/. - Open takes you to Studio to change it. - Delete removes it for good. Its CSS link and registry stop working, and this can’t be undone. A free account keeps one design system. UIX Pro keeps as many as you like. At the limit, UIX asks whether to replace the one you have. ### API keys Your AI agent uses an API key to reach the systems in your account through the MCP server. #### Create a key On /account, under API key, give the key a name you’ll recognize, like “Work laptop”, and press Create key. #### Copy it now The key is shown once. Copy it into your agent’s config. If you lose it, make a new one. #### Revoke keys you don’t use Your keys are listed under the form. Revoke one and any agent using it loses access straight away. Keys are free, on every plan. Keep them private, like a password. The CLI doesn’t need a key to pull your system. ### Connect the Figma plugin The plugin signs in with a short code instead of a password. In the plugin, press Open from my UIX account. It shows a code like ABCD-2345 and opens /device. Type the code there and press Connect. The plugin can then open and save the systems in your account. Full steps are in Figma plugin basics. ### Free and Pro Free is enough to make a system and use it everywhere. UIX Pro is for bigger and more polished work. In short: | Free | UIX Pro | Saved design systems | 1 | As many as you like | Presets | 41 free presets | All 251 | Hosted CSS, CLI, shadcn, MCP | Light and dark, free components | Everything, including Pro components | Components in Figma | 12 core components, Modern style, all 3 shapes | All 74, all 10 styles, page templates | Themes in Figma | Light | Dark, high contrast, multi-brand | Code export | CSS, Tailwind v4, W3C tokens, AI Pack | All 21 formats, Download all, GitHub sync | Check my file | 3 fixes per scan | Unlimited fixes, accessibility report | Versions in Figma | Last 3 | Last 25 per file | The full list and prices are on Pricing. ### Trial, devices and refunds - UIX Pro starts with a 7-day free trial. You can cancel any time. - Payments go through Paddle, which handles checkout, tax and invoices. - One license works on 3 devices. - You can ask for a refund within 14 days. See Refunds. Your plan and license status are on /account. ### Delete your account At the bottom of /account you can delete your UIX account. It removes your saved systems and keys and can’t be undone. If you pay for UIX Pro, cancel the subscription first. --- # Frequently asked questions | UIX docs URL: https://useuix.com/docs/faq ## Frequently asked questions Short answers to the things people ask most. Still stuck? Email support. ### Basics Do I need Figma to use UIX? No. You can make, change and use a design system on the website alone: /generate to start, Studio to change it, and the CSS link, CLI, shadcn or MCP to use it. The Figma plugin is there if your designers work in Figma. Is it free? Yes, to start. A free account saves one design system and gets the 41 free presets, the core components and four code formats. UIX Pro adds the rest. See Free and Pro and Pricing. Where do I find my design system’s id? It is the last part of the Studio address, /s/: 10 letters and digits. It is also on the Use it page in Studio and in Account → My design systems. Is uix-ui the same thing as UIX? They are related. uix-ui is the free, open-source React library made by the same team, and its components are what the CLI and the shadcn registry install. UIX is the design system generator, Studio, your account and the Figma plugin. You can use either one without the other. ### Using it in code I saved in Studio, but my site still shows the old colors. The CSS link is cached for about a minute. Wait a moment and reload. To skip the cache, add ?v= and a new number to the link. In a repo, run npx uix-ui sync. See CSS link and Tailwind. The CLI says “UIX themes need Tailwind CSS v4 (found v3)”. The CLI and the shadcn registry need Tailwind v4. Upgrade the project, or use the CSS link, which works with any CSS. Can I use it without React or Tailwind? Yes. The CSS link gives you plain CSS variables. The tokens JSON works with token tools like Style Dictionary. UIX Pro can also export SwiftUI, Jetpack Compose, Flutter, Android XML, WordPress, Webflow and more. See Code export. Will pull overwrite my changes to a component? No. Files that already exist are kept, and the CLI tells you which ones it skipped. Add --overwrite when you do want them replaced. ### AI agents Does my AI agent need an API key? Only for your own design systems. Searching and reading free presets works without one. Keys are free on /account. See MCP server. My agent doesn’t support MCP. What can I do? Add the AI Pack files to your repo, or copy the prompt from Studio’s Use it → AI tools into the agent’s chat. ### Privacy and data Who can see my design system? The list of your systems is private to your account. The hosted files (the CSS link, Tailwind theme, tokens JSON and shadcn registry) are public to anyone who has the id, like a shared link. Don’t put anything secret in a system’s name. Where does the Figma plugin keep my system? In your Figma file. It is saved to your UIX account only when you choose Save to my account. What happens to my links if UIX Pro ends? They keep working. Within a day they switch to what the free plan includes: light and dark themes and the free components. ### Getting help Email support@useuix.com. Tell us your design system’s id and what you ran, and paste any error message. For bugs in the open-source components, open an issue on GitHub.