UIcockpit is a design system generator: dial in your design language — colour, type, shape and motion — preview it live, and export it as framework-neutral tokens + components you drop into any app and keep tweaking behind one link. Then hand it to your AI, and a checker keeps every new screen on it instead of drifting back to generic.
Your plan renews Jul 1. Update payment to avoid interruption.
Send a receipt after every payment.
Point your domain at our servers.
Download a copy of everything in your workspace. --well: a sunken, recessed panel.
Permanently remove your account and all data.
Choose what we can reach you about.
Who can access this repository?
| Name | Status | |
|---|---|---|
| API Gateway | Healthy | |
| Auth service | Degraded | |
| CDN | Maintenance | |
| Database | Healthy | |
| Queue worker | Healthy |
| Member | Role | Seats |
|---|---|---|
| Design | ||
| Mara Vidic | Lead | 3 |
| Tom Healy | Product | 2 |
| Engineering | ||
| Priya Rao | Staff | 5 |
| Jonas Ek | Senior | 4 |
| Lin Yu | Mid | 2 |
| Total seats | 16 | |
| Invoice | Amount | Method | Status |
|---|---|---|---|
| INV-2043 | $1,200.00 | Card | Paid |
| INV-2044 | $640.00 | Transfer | Due |
| INV-2045 | $2,980.00 | Card | Paid |
| File | Owner | Size |
|---|---|---|
| q4-financials-final-board-review.xlsx | Mara | 2.4 MB |
| brand-guidelines-2026.pdf | Tom | 8.1 MB |
| roadmap-export.csv | Priya | 142 KB |
| customer-interviews-transcript.docx | Sven | 512 KB |
| logo-pack-svg-and-png-assets.zip | Mara | 19 MB |
| release-notes-draft.md | Tom | 6 KB |
| Metric | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug |
|---|---|---|---|---|---|---|---|---|
| Revenue | $42k | $48k | $51k | $55k | $53k | $61k | $64k | $68k |
| New users | 1,204 | 1,388 | 1,510 | 1,622 | 1,580 | 1,790 | 1,844 | 1,920 |
| Churn | 2.1% | 1.9% | 2.4% | 2.0% | 2.2% | 1.7% | 1.8% | 1.6% |
| NPS | 41 | 44 | 43 | 47 | 46 | 52 | 54 | 55 |
A design system hands you someone else's taste, themed — a generator ships your own. Tailwind is how you style. shadcn is what you assemble. UIcockpit is the design language that makes it yours — the layer that owns how your app looks, and keeps it coherent as it (and your AI) grows.
UIcockpit isn't a one-time download — it's a layer in your build loop. Set the language once, let your AI apply it on every screen, and check that nothing drifts as the app grows.
Make your taste decisions once in the configurator — colour, type, shape, density — and export framework-neutral --k-* tokens, the component recipes, and a machine-readable contract. Your whole design language, in one artefact.
Hand the kit to your AI — over MCP, a skill, or your rules file. It builds on-brand UI in one shot, composing real recipes instead of reaching for the same grey default.
Run npx uicockpit check --strict. It fails on a hardcoded hex, off-grid spacing, or the wrong token — so what the agent ships stays coherent, screen after screen.
Define → Apply → Verify — every time the UI changes.
We had an AI agent build six UIs twice — once handed the kit, once on its own — and let uicockpit check --strict score the drift. No human grading; the verifier counts it.
Without the kit the agent drifts where the eye can’t catch it — 35 raw hex colours · 45 off-grid spacing · 26 off-scale type · 9 off-scale radii. With the kit, the few slips are all invented token names — which check flags on the spot, a one-line fix.
6 tasks · 12 agent builds · the harness + results are in the repo (bench/) — reproducible.
Component kits ship neutral primitives. UIcockpit ships the opinion on top — and an export your AI reads, so every generation stays on-brand.
Every decision — colour, type, radius, density, motion — resolves into one opinionated system. Pick a Style and a brand colour; the engine derives a kit that looks designed, not defaulted.
Every export ships with per-component CSS — buttons, inputs, dialogs, tabs, badges with full hover/focus/disabled state contracts. Not just tokens, the real recipe so AI tools generate components that actually match your system.
16 contrast pairs tested against WCAG AA before you download — text on surfaces, buttons on fills, status colors on their tints. Pass count visible in the topbar. No more guessing whether your blue is accessible.
A 6-color data-viz palette auto-derived from your primary, accent, and system colors. Drop into Recharts, Chart.js, Tremor — series colors that look like the rest of your app, not random rainbow defaults.
Paste one prompt into your AI tool's rules file (.cursorrules,CLAUDE.md, a system prompt) — and every generation respects your tokens, type, components, and motion automatically.
No accounts. Your whole setup lives in the link — share it, or reopen it later to tweak and re-export. The kit is a place you return to, not a one-time download.
Use it to make your own kit for your app — or to keep what your AI builds from drifting back to generic. Same design language, two jobs.
Where UIcockpit sits next to the tools you already reach for.
| UIcockpit | Tailwind | shadcn / Radix | MUI | Figma tokens | |
|---|---|---|---|---|---|
| Opinionated look out of the box | |||||
| One brand → a whole system, auto-derived | |||||
| Framework-neutral (React, Vue, Svelte, HTML) | |||||
| Component recipes with state + a11y contracts | |||||
| Machine-readable conformance contract | |||||
| A checker that fails the build on drift | |||||
| Agent-native (MCP + rules file) | |||||
| Re-theme everything from one config |
Yes Partial No
The same screen, built by a fresh-context model — with the kit, and without it.
| AI, on its own | AI + UIcockpit | |
|---|---|---|
| Brand colour | The model’s median indigo — not yours | Your exact brand, every screen |
| A second screen, same session | Quietly drifts — h1 at 26px here, 30px there; padding 32 vs 40 | Pixel-identical — zero raw values |
| A fresh chat next week | Starts over, re-guesses, drifts again | Reads the same contract, lands the same |
| Catches drift before you ship | Nothing does | check fails the build |
| After twenty screens | Recognisably similar, subtly inconsistent | Still one product |
Models have taste — what they don’t keep is your taste, across screens and sessions. That’s the part a contract and a checker hold.
Every component is built the same way — so a developer coming from shadcn or Tailwind can trust it on sight. Here's what's under the hood, and exactly what you can rely on.
<div>.aria-current — the contracts assistive tech actually relies on.Cockpit replaces the "pick 60 hex codes by hand" phase with one panel of decisions.
Choose a Style and a brand colour, or start from a single hex code and let the engine derive the rest of the system.
Radius, density, motion, typography, fonts, button shape — every change re-renders a full component gallery and a live dashboard preview.
Hand off to your engineers or any AI coding tool in eight framework-neutral formats. Come back any time to tweak the kit and re-export.
Host your kit behind one <link>. Come back, change a colour or bump the type, and every app on the live link restyles — no re-export, no redeploy.
<link rel="stylesheet"
href="https://kit.uicockpit.com/a7f3c2.css">Tokens and component styles behind a single URL. Drop it in your<head> and your buttons just work — no build step.
The Dev link auto-updates as you tweak. Pin a version for production so a later change can't surprise prod — you bump it deliberately.
Ownership is a private edit link, not a login. Don't want the CDN? Eject to static files in one click — same kit, byte for byte.
One kit, two tracks. Paste it into a web builder, or wire it into your coding agent with a CLI and an MCP server that keep it consistent.
One paste of the shadcn globals.css themes every component, plus a prompt that keeps new generations on-system.
A rules file, the kit, and the verifier. The agent builds — thenuicockpit check catches any drift back to generic.
npx uicockpit init <hash>
npx uicockpit check --strictPulls your kit (tokens + a machine-readable contract), then verifies the code conforms — the loop nobody else ships.
{ "mcpServers": {
"uicockpit": {
"command": "npx",
"args": ["-y", "uicockpit-mcp"]
}
}}install_kit · get_design_context ·check_conformance — your agent reads the system and verifies its own work, no copy-paste.
Build a coherent, opinion-rich design system in under a minute — 100% free, no account.