SaaS starter
Marketing page, pricing, auth screens and app shell wired to one token file.
Open-source UI engine · MIT · 54 live previews
Stop your coding agent from producing generic UI/UX interfaces.
Give it the design system, reusable components and complete templates it needs to build professional websites and applications — and stop paying tokens to reinvent a table for the ninth time.
- 33 components
- 15 worked examples
- 6 templates
- 31 copy-ready CSS units
- 0 required frameworks
- 3 optional framework ports
This is a real page from the repository, running in your browser right now — not a screenshot of one.
01 — The problem
Agents ship code that works and interfaces that look alike.
A model asked for “a dashboard” produces the dashboard it has seen most often: the same cards, the same spacing, the same blue. It is functional. It is not designed.
Without the engine
- Repetitive layouts on every screen
- Generic cards and dashboards
- Inconsistent typography, spacing and colour
- Responsive behaviour invented per page, usually badly
- Common patterns regenerated from scratch each session
- Interfaces that work but do not feel designed
With MASTER-UI-ENGINE
- 54 previews that already render, theme and reflow
- One token layer: colour, type, spacing, motion, borders
- 404 component classes with documented names
- Real mobile audit notes per preview, not promises
- Retrieve a tested starting point and adapt it
- Consistent output across agents, models and projects
02 — Try the components
Pick a category. The preview is the implementation.
Each panel loads the actual repository file. Copy the markup, open the source, or send your agent to the same path. The full lab — command palette, viewport and theme controls, and the token studio — is the same page this site iframes.
03 — Same design, other houses
All 33 of those components also exist as React, Vue and Web Components.
A port is not a second design system. design-tokens/engine.css and styles/components.css stay the only place colour, spacing, radius and motion are decided; a framework folder contributes markup, focus handling and state for that framework. No binding ships its own stylesheet, its own theme or a CDN request — the React and Vue galleries below run on bundles built inside this repository and committed with it. Each of the three stacks is labelled stable on the evidence in frameworks/registry.json: a build, a live gallery, and behaviour plus axe-core runs in headless Chrome and Edge at 1280px and 390px in light and dark.
Three real galleries, one per stack, running the same shared stylesheet. Svelte and Angular have architecture documents and zero source files, so they are absent from this frame and labelled planned in the support matrix instead of faked.
01
React stable
Thirty-four modules in frameworks/react/ covering all 33 catalogued components — some entries share a module, none has a placeholder — covering buttons, inputs, textareas, selects, checkboxes, radios, switches, cards, badges, avatars, dialogs, dropdowns, tabs, accordions, data tables, navigation, date pickers, uploads, charts, ratings and notifications. The gallery bundle is built with esbuild and committed, so the preview makes zero remote requests. Driven in headless Chrome and Edge on 2026-11-01: 46 behaviour probes at 1280px and 390px in light and dark, axe-core clean of serious and critical findings, no console errors. Not published to npm — you copy the folder.
02
Vue stable
The same 33 as <script setup> single-file components in frameworks/vue/ (37 SFCs). node build.mjs transforms 46 modules into the committed 163 KB preview bundle, and rebuilding reproduces it byte for byte. Checked in Chrome and Edge the same way, with no console errors; emits are declared and native attributes fall through.
03
Web Components stable
Forty modules registering 43 <mue-*> elements in frameworks/web-components/, deliberately light DOM so the document’s classes and theme tokens reach them — 0 shadow roots, no duplicated CSS. Every tag is defined, every one of the 46 probes passes in Chrome and Edge, and each element carries its own MUE:META contract with the command that verified it.
04
Svelte and Angular planned
No source. frameworks/svelte/ARCHITECTURE.md and frameworks/angular/ARCHITECTURE.md set out how each would bind to the same classes, and the parity audit refuses to let a planned entry claim a file. The site renders those tabs as absent rather than showing an empty shell.
05
Retrieval by stack agent surface
An agent asks for a stack and gets the implementation, not a guess: node tools/mue.js stack prints what each framework actually covers; mue show ui-cards --framework vue prints that binding’s source, package, verified note and the contract harvested from the file’s MUE:META block; mue search "switch" --framework react filters by port. node tools/audit/framework-parity.mjs fails the build if a status claims more than its note can prove — it rejects a verification note that names an adjective instead of a command.
04 — Templates
Complete starting points, not hero images of them.
Six templates and fifteen worked examples ship with the repository. These frames are the running pages, scaled down.
Admin dashboard
Sidebar, table, filters and detail panel — the pattern agents get wrong most often.
Analytics application
Chart surfaces, ranges and metric cards with real empty and loading states.
E-commerce
Catalogue, product detail and cart surfaces that keep spacing consistent.
Marketplace
Listing grid, trust elements and search — dense without losing the rhythm.
AI web application
Chat surface, streaming states and tool panels for agent products.
05 — Why developers keep it in the repo
Less reinventing. More building.
01
Better output from affordable models
A small open-weight model does not have to invent a design system. It retrieves a preview that already resolves contrast, spacing and states, then edits it. That raises the floor — it does not turn a 7B model into a frontier model, and we will not pretend otherwise.
02
Fewer tokens spent on structure
Generation is the expensive part of UI work. When the table, the sidebar and the form already exist as one file path, the prompt becomes “adapt this” instead of “produce 400 lines of markup and CSS”. No fixed saving percentage is published because there is no benchmark behind it.
03
Deterministic starting points
Every resource has an id, a category, a variant list and a path an agent can name in a prompt. mue search "admin sidebar" returns candidates; mue show ui-cards returns the markup. Same input, same retrieval, on every run.
04
One place, licensing already checked no hidden dependencies
Every stack in this repository is the engine’s own work — nothing is vendored from shadcn/ui, Ant Design, Nuxt UI, daisyUI, Flowbite or Creative Tim, and RESOURCES.md records each of them with its license, framework and whether its source is legally incorporable. The only third-party code anywhere on the site is the React and Vue runtimes inside the two committed framework bundles; frameworks/ ships no node_modules.
05
Design systems that travel
Colour, type scale, spacing, radii, shadows and motion are custom properties in one file. Change nine values and every preview follows, in light and dark. Themes are separate files, not find-and-replace.
06
Motion you can turn off with one switch
Hover lift, press depth and reveal distance are composite tokens, and a single reduced-motion block zeroes them. Authors are told not to write their own media queries, so accessibility does not depend on whoever generated the page.
07
Agent-oriented by default
AGENTS.md sets the rule, SKILL.md packages it for skill-aware agents, and mue registry --json exposes the whole library as one machine document. Works with any agent that can read files or run a command — OpenCode, Codex, Claude Code, Cursor, or a plain terminal.
08
Audited, not asserted
Each catalog entry carries its own verification note: WCAG AA contrast in light and dark, no overflow at 375, 768 and 1280. mue check fails a page that references a class the sheet does not define — so drift is caught, not discovered in production.
06 — How it works
Six steps from “make it look good” to a page that does.
- STEP 01
Explore the library
Filter 54 previews by kind, category or what the screen looks like.
- STEP 02
Find the resource
Every entry has an id, variants, the tokens it uses and its audit note.
- STEP 03
Inspect the running page
Open the live preview, switch device width and theme, read the source.
- STEP 04
Hand it to your agent
Point the agent at the path, or let it call mue show itself.
- STEP 05
Install what you need
mue add ui-cards --into ../app copies the component plus the layers it needs.
- STEP 06
Build and test
Adapt the content, then run mue check in your own project. Reuse is a starting point, not a substitute for testing.
THE AGENT SURFACE — REAL COMMANDS
$ node tools/mue.js search "admin dashboard sidebar"
nav-sidebar Sidebar components/sidebars/sidebar.html 1 variant
tpl-admin Admin dashboard templates/dashboards/admin-starter.html
$ node tools/mue.js show ui-cards
# Cards — components/cards/cards.html
link: design-tokens/engine.css, styles/components.css#cards
markup: copy-ready (3 variants)
$ node tools/mue.js region cards
/* the exact CSS of that copy unit, from styles/components.css */
$ node tools/mue.js add ui-cards btn-buttons --into ../app
installed components + the layers they need
$ node tools/mue.js show ui-cards --framework vue
Cards — vue (stable)
package mue-vue
file frameworks/vue/components/MueCard.vue
verified node frameworks/vue/build.mjs, then preview/gallery.html driven by puppeteer-core in
headless Chrome and Edge 2026-11-01: 46/46 probes at 1280px and 390px in light and dark,
0 console errors, axe-core 0 serious/critical in 8 runs. Not run: Safari, Firefox, a
screen reader, a touch device, SSR, npm publish.
CONTRACT variants · a11y · keyboard · dependencies · license MIT
$ node tools/mue.js stack
vanilla: 54/54 entries live
react: 33/54 vue: 33/54 web-components: 33/54
svelte: 0/54 entries live, 33 documented as planned
angular: 0/54 entries live, 33 documented as planned
$ node tools/mue.js registry --json > mue-registry.json
54 items: ids, paths, variants, tokens, audit notes
$ node tools/mue.js check all
unresolved classes: none · headers: okCommand list and flags taken from node tools/mue.js help in this repository. Output lines are illustrative of the shape, not a transcript.
0previews shipped
0copy-ready CSS units
0token file
0npm installs required
07 — Documentation
Read it in the repository, not in a marketing page.
Four files carry the contract. They are versioned with the code, so they cannot disagree with it.
- MIT licensed. Original source on the vanilla, React, Vue and Web Components stacks; the only third-party code is the React and Vue runtimes bundled into two preview pages. Attribution obligations are recorded per resource and checked by node tools/audit/framework-parity.mjs.
- What ships: 33 component previews, 15 worked examples, 6 templates, the token layer, one 120 KB component stylesheet, all 33 components as React, Vue and Web Components source, the mue CLI and the visual lab.
- Compatibility: anything that reads files or runs a command. The engine needs no framework; if your app is React, Vue or custom elements, the port is already in the repo, labelled stable with the check that produced that label — and the checks that were never run named alongside it.
- No invented proof: there are no testimonials, no star counts, no download figures on this page. Check the repository instead.
- Contribute: CONTRIBUTING.md states how a new preview is registered and audited.
08 — Questions
Answered plainly.
No. Every preview is plain HTML, CSS and JavaScript wired to design-tokens/engine.css and styles/components.css. Drop the two files in and copy the unit you need. The framework ports are optional, and even their galleries load nothing from a CDN — the React and Vue bundles are built and committed in the repository.
It is built for the person doing the typing: an agent. The unit of reuse is a whole preview plus its token dependencies plus a CLI that names them, rather than a component API you import.
It produces consistent UI, which is most of the complaint. The model stops inventing structure and starts adapting something audited. Layout judgement, content and brand work are still yours.
For all 33 components, in three stacks — React, Vue and Web Components each carry real source in frameworks/, sharing the engine stylesheet rather than carrying their own. They are labelled stable, which here means exactly what was proved: the pack builds, renders in its own gallery, and was driven in headless Chrome and Edge with behaviour probes and axe-core clean of serious and critical findings at 1280px and 390px in light and dark. What was not run is written next to it: Safari, Firefox, a screen reader, a touch device, server-side rendering, and no npm publish — you copy the folder. Svelte and Angular are documented plans with no source files.
No code is vendored from them. The engine borrows the token naming convention from shadcn/ui and RESOURCES.md indexes those libraries with licenses and redistribution status so future imports stay legal. The framework ports are the repository’s own components; the React and Vue runtimes appear only inside the two committed preview bundles.
The library is MIT and free. Premium template packs, install support and agency work are under consideration and are not for sale here — nothing on this page takes money.
Page paths, a coarse country from the host, the referrer hostname and an anonymous id in your browser's storage — enough to see reach and which previews get opened. No IP addresses, no user-agent strings, no page contents. Read the notice.
Give your agent better design knowledge.
Clone the repository, run the lab, and put the previews in front of the model that builds your UI. Join the list to hear when template packs and paid options exist.
No pricing is announced here. No payment is collected anywhere on this site.