Use case

A design system generator, not another design system

A design system ships someone else’s taste, themed. A generator ships yours — dialed in live, exported anywhere, and enforced as you and your AI build.

Read the docs

Design systems — shadcn, Material, Meta’s Astryx — hand you their components with theming on top: pick a preset, or hand-write a theme file. UIcockpit sits one level above: it GENERATES the system itself. Nineteen live controls (colour, type, shape, density, motion, elevation) re-render 100+ real components as you decide, so what you export is a system of your own, not a preset from a shelf.

And because a generated system is machine-made, it stays machine-checkable: every kit ships a contract and a verifier, so the system you generated is the system your app keeps wearing — even when an AI writes the screens.

$0
Forever free
100+
UI components
16
WCAG checks
7
Export formats

Generated, not picked

No fixed theme list. Every control combination is a valid, coherent system — guardrails keep the combinations from going ugly, a live WCAG audit (16 pairs) keeps them accessible.

A check that fails the build

Every kit ships a machine-readable contract and a verifier — uicockpit check, over a CLI and an MCP server. Wire it as a pre-commit or CI gate (--strict) and any drift — a raw hex, an off-scale radius, the wrong token — fails the build, so what your AI generates stays on-system across every screen and session.

Framework-neutral by design

The output is plain CSS custom properties (--k-*). They drop into React, Vue, Svelte, plain HTML — anything. You are never tied to one framework to wear your own brand.

One source, many transports

Tokens (CSS + JSON), a Tailwind @theme block, a shadcn globals.css, an AI prompt and a machine-readable contract — all derive from one config, so they can never disagree. Plus a hosted live <link> you return to, and a CLI + MCP so your agent reads the system and checks its own work against it.

Frequently asked

How is a generator different from a design system?
A design system is a fixed set of styled components you adopt (and theme). A generator produces the system itself from your decisions — the tokens, the component recipes, the docs and the contract all derive from your configuration.
Is this a competitor to shadcn or Astryx?
No — it feeds them. The output is framework-neutral tokens plus per-tool transports (Tailwind @theme, shadcn globals.css, plain CSS), so you can wear your generated system on top of the primitives you already use.
What keeps the generated system from drifting?
uicockpit check — a verifier that reads the kit’s machine-readable contract and fails the build (--strict) on raw hex, off-grid spacing or wrong tokens. It runs as a CLI and inside agents via MCP.

Design a UI kit in 60 seconds.

100% free, framework-neutral tokens — no account, no lock-in, your design language, your file.