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

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

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

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

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

   npx uix-ui@latest pull <id> 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 <preset> 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.