UI Builder
Design a UI kit from one set of tokens — buttons, forms, tables, nav and more — then export it as an AI prompt, an image, CSS or JSON.
Open UI Builder →What is the UI builder?
A design-system builder for people making SaaS products and apps. You do not write content here: every element renders with fixed, generic placeholder data, and that data is not editable. What you design is the interface itself. The canvas shows one element at a time so you can work on it without distraction — step through the kit with the arrows above the canvas, or open the catalogue in the Element tab and pick one. One set of design tokens — colour roles, corner radius, border width, elevation, typeface, base size, spacing and focus ring — drives the whole kit, so changing the primary colour restyles buttons, badges, tabs, links, progress bars and the selected navigation row all at once. On top of that, each element has its own appearance options: button size and shape, input style, table density, tab style, sidebar width and so on. Any interactive element can be shown in all four of its states side by side. The downloads always cover the whole kit, not just the element on screen: an AI prompt that specifies the system precisely enough to rebuild it in any stack, a PNG kit sheet, a standalone HTML style guide with the CSS included, and a JSON token file. It runs entirely in your browser, works offline, and autosaves on your device.
How to use UI Builder
- Pick a starting theme — Choose one of six presets — Indigo, Slate, Midnight, Ocean, Forest or Sunset — as a starting point for the whole kit.
- Choose an element to work on — The Element tab opens on the catalogue, grouped by kind. Pick one and it goes on the canvas on its own. The arrows above the canvas step through the kit, and “All elements” takes you back to the catalogue at any time.
- Tune the tokens — The Theme tab holds the values every element shares: brand, success, warning and danger colours, page and surface colours, text and muted text, radius, border width, shadow, typeface, base size, density and focus ring.
- Tweak the element itself — With an element on the canvas, the Element tab shows the options that belong to it alone — button size and pill shape, input style, table zebra rows, tab style, avatar size and so on.
- Check the states — Turn on States to render the element in its default, hover, focus and disabled forms at once — the part of a design system that is easiest to forget.
- Choose what ships, then take it away — The Kit tab decides which elements go into the downloads and in what order. Then download the AI prompt to rebuild the system in your own stack, the PNG as a kit sheet, the HTML style guide, or the JSON tokens.
Frequently asked questions
Can I change the text inside the elements?
No, and that is deliberate. This is a builder for the interface, not for content: the sample names, figures and labels are fixed so that what you are judging is the design. If you want to author a real form with your own fields and copy, use the Form Builder instead.
Why does the canvas only show one element?
So you can actually see what you are changing. A wall of twenty-three components makes it hard to judge a radius or a border width, and it pushed the element you cared about off the screen. The canvas is a workbench for one element; the downloads still contain the whole kit.
How do I get back to the list of elements?
“All elements” at the top of the Element tab returns to the catalogue, and the element on the canvas stays put while you browse. The arrows above the canvas also step to the previous or next element in the kit.
What is in the AI prompt download?
A full design-system specification: the token block as CSS custom properties, the global rules for typography, spacing, radius, elevation and focus, then every element in the kit with its markup, its class names and its complete stylesheet, followed by an acceptance checklist and the tokens again as JSON. It is written so an assistant can build the components in whatever framework you use without inventing values.
Is the exported CSS actually usable?
Yes. It is a real token-driven stylesheet: the custom properties are defined once and every component rule reads them, so changing one token restyles everything. Every variant is included, not only the one on screen, so you get the whole component library rather than a snapshot.
Will more elements be added?
Yes. The elements live in a registry, and the panel, the canvas, the kit list and all four exports are generated from it, so new UI elements can be added without changing anything else.
Does the JSON work with other tools?
The file leads with a flat token map — colours, radius scale, border width, shadow, font, size and spacing — which is straightforward to feed into a Tailwind config, Style Dictionary or a plain :root block. It also imports straight back into this tool.
Does it work offline?
Yes. The builder runs entirely in your browser and keeps working with no connection after the first load. Nothing is uploaded and there is no account.
Tips
- Change the primary colour first — it carries buttons, links, badges, tabs, progress and the selected nav row, so it sets the tone of the whole kit in one move.
- Use the arrows above the canvas to flip through the kit after a token change, to check nothing looks wrong somewhere you were not looking.
- Turn States on before you export: a design system without a documented focus state is the one that fails an accessibility review.
- Use the Kit tab to cut the downloads to the elements you are actually building, so the style guide and AI prompt stay focused.
- Border width 0 with a filled input style gives a soft, modern look; border width 1 with radius 4 gives a denser, more traditional one.
- Download the JSON before you experiment — it restores the exact kit later, on any device.