UIcockpit

Generate a design system from a brief, then verify your AI stays on it.

AI & MLJavaScriptv0.5.1

UIcockpit

The open-source design system generator. Nine real UI kits on one screen, in your colours, before you commit to one.

License: MIT


Pick a starting point, turn the knobs, and watch Tailwind CSS, daisyUI, Bootstrap, shadcn/ui, Material 3, Radix Themes, Mantine, Ant Design and Open Props render the same screens side by side. One set of values is routed into each kit's own vocabulary: its variables, its Sass, its tokens, its theme object. Keep the kit that fits, export the theme, and go build.

Everything runs in the browser. No account, no server, no telemetry. The export is a zip: theme.css, DESIGN.md (to Google's design-system spec), AGENTS.md, CLAUDE.md, .cursor/rules, install.md and a MANIFEST.md that lists versions, licences, and what could not be done.

Nothing here is invented

The claim is not "it looks like Bootstrap". The claim is that it is Bootstrap: their compiled stylesheet, their class names, their components, read from the package they publish. That claim is enforced, not promised:

  • Fidelity, counted. Every class the wall emits is looked up in the kit that should define it. The meter reads 100 per cent for all eight rendering kits, and a class their CSS does not define fails the build by name.
  • Anatomy, verified. A real class in the wrong nest matches nothing and styles nothing, so a rendered sweep asserts that every class on every element is reached by at least one rule of its own kit's stylesheet in that exact DOM.
  • Behaviour, exercised. The same sweep re-themes every kit at a second brand and asserts that every colour in the brand's hue family follows, that nothing painted is invisible against its backdrop, and that every checked control renders differently from its unchecked sibling.
  • Gaps, declared. What a kit has no component for is named on the screen and in the manifest, never quietly substituted. Ant Design and Material are rendered by their own code; what cannot re-theme live says so.
  • Their icons too. Tailwind draws Heroicons, Bootstrap draws Bootstrap Icons, Material draws Material Symbols, Radix draws Radix Icons, Mantine draws Tabler, Ant draws its own set, each read from the package that set publishes.

Run it

Plain Node, zero dependencies of our own:

cd dsg
npm run kits     # fetch the nine kits from their own published packages
npm run page     # build generator.html, the tool
npm run home     # build home.html, the front page
npm run serve    # serve both locally

The gates, if you change anything:

npm test         # 109 static tests
npm run fidelity # every class, looked up in its kit
npm run sweep    # the rendered sweep: eight kits, two brands, four invariants
npm run exports  # consumer builds: each export compiled by its own kit's tooling

What this deliberately is not

There is no npm package, no CLI and no MCP server for this version. The zip you export carries the agent-facing files itself, so nothing needs installing to use what you made. The uicockpit and uicockpit-mcp packages on npm belong to a retired earlier version of this project and are deprecated; that product lives on in this repository at the tag archive/cockpit-2026-08-17, and the A2UI catalog experiment that briefly lived beside this one is at archive/a2ui-2026-08-24.

License

MIT

Setup from the maintainer

This listing does not have a supported local package template. Use the maintainer’s documentation for its hosted endpoint, authentication, and client-specific setup. No install command has been inferred.

Learn More