New: your AI agent can read it over MCP

One design system. Your team and your AI agent follow the same rules.

One color in. 11 shades, type, 74 components and code out, all checked for contrast. Designers use it in Figma, developers in code, and your AI agent reads it through MCP.

Start free Get the Figma plugin

Free to start. No card needed.

11: shades per color, from one hex
74: components, in Figma and React
10: visual styles for every part
251: presets to start from
21: code formats, 4 of them free

The problem

Everyone builds from different rules.

Designers have one file, developers another, and AI agents guess. So the app drifts: nine blues, three button sizes, text nobody can read.

Without one system

Designers work from a Figma file
Developers copy values into code by hand
AI agents guess your colors and sizes

With UIX: one system everyone follows

Designers get real Figma variables
Developers get the same tokens and components
Your AI agent reads them over MCP

How it works

Three steps from one color to a working system.

Pick a color or answer a few questions, tweak the result in Studio, then use it in Figma, code and your AI tools.

01
Pick a color, or answer a few questions

Paste your brand hex or describe your app in plain words. The preview follows every answer.
- Start from a hex, a logo or one of 251 presets
- Or answer one question at a time
- No sign-up to try it
Open the Generator
useuix.com/generate

Tell me about your app in your own words, or answer one question at a time.

QuestionsSkip to the end
1. What are you building? ASaaS or web appSign-in, settings, forms BDashboard or internal toolTables, charts, lots of data COnline storeProducts, cart, checkout DWebsite or landing pageStory, features, sign-up

OverviewOrdersCustomersProductsReports Revenue$48,210↗ 12.4% Orders1,284↗ 8.1% Customers3,902↗ 3.2% Sales this yearUp 18%
Primary #6C2BD9
CreateAnswer a question, and the preview follows.
1. Pick an answer
2. The preview changes
3. Your colors, everywhere
02
Tweak it in Studio

Change a shade, a font or a corner radius, and every part that uses it follows.
- An 11-step OKLCH scale for every color
- 74 components in 10 visual styles
- Light and dark, checked for contrast
Open Studio
Studio · Colors

Your palette6 colors · 50 to 950 · click any shade to edit it

Primary#6C2BD9#2F6BEB

Secondary

Neutral

Error

Warning

Success

Primary 500Drag to change the hue #824BF6#3E7BF7
11 shades updatedEvery pair still passes AA

ColorsEdit one shade, and the whole scale follows.

Studio · Components

StyleModernShape SharpRoundedPill

ButtonSaveCancel Inputana@studio.co Badge and switchNewPro CardBrand kitTokens syncedOpen TabsDayWeekMonth Avatar and chipDesignCode

ComponentsSwitch the shape, and every part morphs.
03
Use it everywhere

Copy one command, add it to Figma, or hand it to your AI agent. They all get the same tokens.
- 21 code formats, 4 of them free
- Real Figma variables and components
- AGENTS.md and an MCP server for agents
See the formats
Start a new appYour system, your colors, one command. $ npx uix-ui@latest new my-app <id>CopyCopied

Terminal $ npx uix-ui@latest new my-app <id> ✓ tokens: colors, type, spacing ✓ 12 components ✓ AGENTS.md for your AI agent Done. cd my-app && npm run dev

localhost:5173 Sign up Fresh bread, every morning. Order nowSee menu
Use itCopy one line, and your app starts in your brand.
1. Copy
2. Run
3. Your app, on brand

Where it goes

One source, three places, kept in sync.

Change a color once, and your Figma file, your code and your AI agent all read the new value.

Figma

The plugin adds real variables and components, not pictures of them.

Brand kit LayersButtonsCardsInputs Button / PrimaryGet started

UIX Design System Generator#6C2BD9StyleModernGenerateGeneratingDone Local variablesPrimitivesLightDark primary/50#F5F3FF primary/100#DBD5FF primary/300#AB95FF primary/500#824BF6 primary/600#6D2DDA primary/800#41008E primary/900#2B0063

FigmaClick Generate, and real variables appear.

Code

The same values as tokens, in the format your stack reads.

:root {
  --uix-primary-50:  #F5F3FF;
  --uix-primary-100: #DBD5FF;
  --uix-primary-300: #AB95FF;
  --uix-primary-500: #824BF6;
  --uix-primary-600: #6D2DDA;
  --uix-primary-800: #41008E;
  --uix-radius-md: 12px;
  --uix-font-sans: "Plus Jakarta Sans";
}

@import "tailwindcss";
@theme {
  --color-primary-50:  #F5F3FF;
  --color-primary-500: #824BF6;
  --color-primary-600: #6D2DDA;
  --color-primary-800: #41008E;
  --radius-md: 12px;
}
/* class="bg-primary-600 rounded-md" */

{
  "primary": {
    "500": { "$type": "color", "$value": "#824BF6" },
    "600": { "$type": "color", "$value": "#6D2DDA" }
  },
  "radius": { "md": { "$type": "dimension", "$value": "12px" } }
}

AI agents

Your agent reads the real tokens over MCP, so it stops guessing.

Agent chatMCP: uix

You: make a dashboard for my bakery

The agent calls the tool create_design_systembrief: “bakery dashboard”, primary: #6C2BD9done

Agent: Done. These tokens drive the first card:

primary-600 #6D2DDA
primary-100 #DBD5FF
radius 12px

Today’s orders12812% more than last weekView orders

Real parts

From the fan to real parts.

Every part below is drawn live from your shades. Try another color and they all follow.

Buttonprimary-600

Inputprimary-500 focus

Selectprimary-50 hover

Switch and checkboxprimary-600 on

Tabsprimary-700 text

Badgeprimary-100

Cardprimary-50

Chartprimary-200 to 800

Toastsurface + primary-600

Avatar groupprimary-100 to 700

Progressprimary-500

Table rowprimary-50 selected

For AI agents

The design system your AI agent won’t guess.

Give your agent one address. It can make a design system, read the ones in your account and fetch components in your colors.

MCP server: https://useuix.com/mcpTools: create_design_system, get_design_system, get_component, search_presets.
llms.txt: useuix.com/llms.txtA plain-text map of UIX and its docs.
CLI: npx uix-ui@latest new my-app --theme lagoon-stretchStarts a React app with the full system. No API key needed.

More for AI agents

Products

Four products, one studio.

Start with the UIX Design System Generator, on the web or in Figma. UIX UI reads the same tokens. UIX Icons and UIXport have their own sites.

Web

UIX Design System Generator

In your browser

Your brand, as a system. One color in, a complete system out.

Open the Generator

Figma

Figma plugin

The Generator, inside Figma

Real variables and components in your file, not pictures of them.

See the plugin

React

UIX UI: React Component Library

Copy, paste, and it’s already your brand. Free core components, Pro when you need more.

Browse UIX UI

Own site

UIX Icons

uixicons.com

Original icons, made by our studio. Every icon on this page is one of them.

Visit UIX Icons

Own site

UIXport

Exports for Figma

Export from Figma to PDF, WebP, AVIF and SVG, in batches.

Visit UIXport

How it compares

UIX, building it by hand, or a UI kit.

UIX starts from your color and keeps Figma, code and AI agents on the same rules. By hand or with a kit, keeping them in step is your job.

UIX compared with building a design system by hand and with a ready-made UI kit
What you need	UIX	By hand	A UI kit
Starts from your brand color	Yes, 11 shades per color	You mix every shade	You recolor the kit
Contrast checked	Every text color, AA	Only if you test each pair	Only the kit’s own colors
Figma variables and components	74 components	You build them	Yes, in the kit’s colors
Code	21 formats, 4 free	You write it	Usually one framework
AI agents	MCP server and AGENTS.md	Not included	Rarely included
Stays in sync	One source for all three	You update each place	You update each place
Time to a first system	Minutes	Days to weeks	Hours, then restyling
Price	Free to start	Your time	Often a one-time fee
In short	One system everyone follows	Full control, all the upkeep	A fast start in someone else’s look

Questions

Questions people ask.

Short answers about Figma, contrast, AI agents, code formats and plans.

Ask us anything

What is UIX?

UIX gives your product one design system that everyone follows: designers in Figma, developers in code and AI agents through MCP. Pick one color and it builds 11-shade color scales, type, spacing, light and dark themes, 74 components and the code for them. It is made by Sigma Studio.

Is UIX free?

Yes. A free account never expires and needs no card. It keeps 1 saved design system and gives you the 41 free presets, the free components and 4 code formats. UIX Pro adds every preset, style and format, with a 7-day free trial. The plans are on the pricing page.

Do I need Figma?

No. The Generator and Studio run in your browser, and the CLI and the MCP server don't need Figma either. If you do use Figma, the plugin adds the same system as real variables, styles and components.

How does UIX check contrast?

It measures every text and background pair with the WCAG 2.2 formula, in light and dark. Normal text needs 4.5:1. When a pair falls short, UIX moves the text to a darker or lighter shade before it reaches your files.

Can my AI agent use UIX?

Yes. Add the MCP server at https://useuix.com/mcp to Claude Code, Cursor or another agent. It can make a design system from a short brief, read the ones in your account and fetch components in your colors. Exports also include AGENTS.md, DESIGN.md and llms.txt.

Which code formats do I get?

21 formats in all. Four are free: CSS variables, Tailwind v4, W3C design tokens and the AI Pack. Pro adds React, SwiftUI, Jetpack Compose, Flutter, WordPress, Webflow and more.

Can I cancel or get a refund?

Yes. Cancel any time from the link in your Paddle receipt, and Pro stays on until the end of the period you paid for. Ask within 14 days of your first payment for a full refund. One license works on up to 3 devices.

Start with one color.

Free to start. Your designers, your developers and your AI agent get one system to follow.

Start free Get the Figma plugin

Figma tokens.css Agent

One design system. Your team and your AI agent follow the same rules.

Without one system

With UIX: one system everyone follows

Pick a color, or answer a few questions

Tweak it in Studio

Use it everywhere

Figma

Code

AI agents

The design system your AI agent won’t guess.

UIX Design System Generator

Figma plugin

UIX UI: React Component Library

UIX Icons

UIXport

Start with one color.