UIX docs

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

Start free Go to your account
Get started

Create, tweak, use it

  1. Create. Go to /generate and pick a main color. UIX suggests a second and third color. Keep them or pick your own, then choose fonts and corners and press Save.
  2. Tweak. Your system opens in Studio. Change colors, fonts, light and dark themes, spacing and components. Everything previews live.
  3. Use it. In Studio, open Use it. Copy the CSS link or a command, export code, or open the system in Figma.

Want a head start? Open one of the 251 presets (41 free) and press Use this preset. It opens in Studio, ready to change.

Account

Save and sign in

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 1 design system. UIX Pro keeps as many as you like.
  • Each saved system gets its own id and its own page at /s/<id>.
  • All your systems are in Account → My design systems. Your plan and API key are there too.
Use it in your app

One link, or a command

Find your id first. Open the system in Studio and look at the address bar: the id is the last part, /s/<id>. You can also copy it from Account → My design systems. Put it where you see <id> below.

Hosted CSS

CSS variables for light and dark. When you save in Studio, this file updates.

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

Tailwind v4 theme

https://uixdesign.pagestro.com/s/<id>.tailwind.css

Design tokens (W3C JSON)

https://uixdesign.pagestro.com/s/<id>.json

CLI

pull writes the theme, tokens and components into your repo. sync pulls your later changes. The CLI needs the API key from your account.

npx uix-ui pull <id>
npx uix-ui sync

shadcn

Installs a component in your colors. This one adds the Button.

npx shadcn@latest add https://uixdesign.pagestro.com/r/<id>/button.json

Code export

From Studio you can also export code: CSS, Tailwind, a shadcn theme, W3C tokens, React and more. There are 21 formats, and 4 are free (CSS, Tailwind v4, W3C DTCG and AI Pack). See Code export.

AI agents

Connect your AI agent (MCP)

The UIX MCP server lets an agent make your design systems and read them. Its address:

https://uixdesign.pagestro.com/mcp

1. Get an API key

Sign in at /account and create a key under API key. It’s free. Keep it private, like a password.

2. Add the server

Claude Code:

claude mcp add --transport http uix https://uixdesign.pagestro.com/mcp --header "Authorization: Bearer <your key>"

Cursor: put this in .cursor/mcp.json in your project.

{
  "mcpServers": {
    "uix": {
      "url": "https://uixdesign.pagestro.com/mcp",
      "headers": { "Authorization": "Bearer <your key>" }
    }
  }
}

3. Ask for what you need

  • create_design_system: makes a system from a short brief like “calm telehealth app, teal” and saves it to your account.
  • list_my_design_systems: lists the systems in your account.
  • get_design_system: reads one system, as tokens, CSS variables, the Tailwind theme, AGENTS.md or DESIGN.md.
  • get_component: React for one component in that system’s colors (12 core components free, all 74 with Pro).

Every system comes with a contrast check of its text colors.

No MCP? Copy a prompt

In Studio, open Use it → AI tools. It has a ready prompt to copy for Lovable, Bolt, v0, Cursor and Claude Code. Code exports also include DESIGN.md, AGENTS.md and llms.txt, files AI tools read to follow your system.

Figma

Figma plugin

The UIX plugin turns the same design system into Figma variables, styles, 74 components and a docs page, in 10 visual styles.

More

Features and help

Plans and limits are on Pricing. Stuck? Email support@uixdesign.pagestro.com.