UIX docs

How to make a design system, save it, and use it in your app, in Figma or with your AI agent.

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

1. 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.

2. Tweak

   Your system opens in Studio. Change colors, fonts, themes, spacing and components and watch the preview update. Saving needs a free account.

3. 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 <id>.

Start a new app

Run this in a terminal. It makes a React and Tailwind app that already uses your system. Full steps.

npx uix-ui@latest new my-app <id>

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.

npx uix-ui@latest pull <id> button card

Any website (HTML, WordPress, Webflow)

Paste this into your page’s <head>, then use the variables in your CSS. More on the CSS link.

<link rel="stylesheet" href="https://useuix.com/s/<id>.css">

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/<id>.
• 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.