# UIcockpit **Category:** πŸ’» Developer Tools **Repository:** https://github.com/AlexanderKaan/uicockpit **Views:** 0 **Installs:** 0 **Upvotes:** 0 **Directory Page:** https://allmcps.com/mcp/uicockpit ## Description Generate a design system from a brief, then verify your AI stays on it. ## Claude Desktop Quick Installation Heuristic fallback β€” verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low): ```json "mcpServers": { "uicockpit": { "command": "npx", "args": ["-y","uicockpit"] } } ``` ## Documentation & README
# UIcockpit ### The open-source design system generator β€” AI fluent, drift-proof. **Not another design system β€” the machine that makes yours.** Dial in your design language visually, export it framework-neutral, and keep it up to date behind one link β€” then hand it to your coding agent and `uicockpit check` makes sure it *stays* on it. `--k-*` tokens + 100+ accessible components (real recipes with state contracts) with a built-in WCAG audit of *your* kit, delivered as a hosted ``, a download, or natively inside your agent (CLI + MCP). **Free Β· no account Β· paste it anywhere.** [**Try it β†’** uicockpit.com](https://uicockpit.com) Β· [**Use a kit β†’** kit.uicockpit.com](https://kit.uicockpit.com) Β· [Docs](https://uicockpit.com/docs) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE) [![npm: uicockpit](https://img.shields.io/badge/npm-uicockpit-cb3837?logo=npm&logoColor=white)](https://www.npmjs.com/package/uicockpit) [![npm: uicockpit-mcp](https://img.shields.io/badge/MCP-uicockpit--mcp-111?logo=npm&logoColor=white)](https://www.npmjs.com/package/uicockpit-mcp) [![Live kit CDN](https://img.shields.io/badge/CDN-kit.uicockpit.com-f38020?logo=cloudflare&logoColor=white)](https://kit.uicockpit.com) ![Price](https://img.shields.io/badge/price-%240%20forever-1ca85a) ![UIcockpit β€” ship AI apps that look designed, not generated: one design language, real components](docs/preview.png)
--- ## Why I made this πŸ‘‹ If you've ever vibe-coded an app, you know the feeling. You're moving fast, the AI is reaching for the same components for the twentieth time, and somewhere along the way you lose the thread. The radii drift. The greys don't quite agree. There's always *one* button that's just… a little off. It all works β€” but none of it feels like *yours*. I built UIcockpit to get out of that: a calm place to make the design decisions **once**, hand them to your agent as a real contract, and have a one-command **check** that catches the drift before it ships. No spreadsheet of tokens, no hand-tuning forty little things β€” a coherent system that survives contact with an AI that builds faster than you can review. Framework-neutral (plain HTML, Vue, Svelte, React β€” whatever you're in), free, no account, no lock-in. β€” **Alexander** --- ## Where it sits in the stack 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** β€” and the only layer that *keeps* it coherent as your app (and your AI) grow. It sits above them, framework-neutral. | You already have… | which is… | so UIcockpit is… | |---|---|---| | **Tailwind / CSS** | *how* you write styles | the **decisions** those styles encode β€” the layer above | | **shadcn / Radix** | the **components** (+ behaviour) | the **design language** that makes any components look like one product | | **Figma / design tokens** | the design **source** (authoring) | the same language, but **executable**, framework-neutral, and **self-enforcing** | The loop it lives in: **Define** your language β†’ your AI **applies** it β†’ `uicockpit check` **verifies** it. Not a one-off asset β€” a layer in the build loop. β†’ The thinking behind this: [`VISION.md`](./VISION.md). --- ## 1. Pick a starting point, make it yours Open [uicockpit.com](https://uicockpit.com), pick one of **7 named styles** grounded in the best modern apps, then tweak with 19 clear controls: | Style | Grounded in | Feel | |---|---|---| | **Clean** | shadcn / Linear | the balanced default | | **Precision** | Linear / Figma | crisp, flat, cool | | **Minimal** | Vercel | mono headings, stark | | **Refined** | Stripe | ultralight headlines | | **Calm** | Notion | system font, seamless | | **Soft** | β€” | rounded and warm | | **Editorial** | β€” | serif headings | Your brand colour rides through every style. And the engine **keeps it coherent**: pick any combination of the controls and it straightens the corners that would otherwise look wrong β€” a dense layout never gets giant headings, a card always stays visible against the page, the selected tab is always legible. *Make whatever you want; we straighten it.* --- ## 2. Ship it β€” two tracks ### πŸ€– Agent-native β€” the check loop (best for AI builds) Give your coding agent the system **and** the guardrail, no copy-paste: ```bash npx uicockpit init # writes tokens.css + contract.json + AGENTS.md # β†’ your agent builds with the --k-* tokens and the house rules npx uicockpit check --strict # fails on any drift from the contract β€” the moat ``` Or run it as an **MCP server** (Claude Code, Cursor, Windsurf, Claude Desktop): ```json { "mcpServers": { "uicockpit": { "command": "npx", "args": ["-y", "uicockpit-mcp"] } } } ``` Four tools: **`create_kit`** (generate a kit from a brief β€” brand, radius, density) Β· **`install_kit`** (pull it into the project) Β· **`get_design_context`** (the kit's *grammar* β€” tokens + component anatomy + composition rules + intent routing) Β· **`check_conformance`** (verify the output). The agent can spin up your language, build on it, and check itself. β†’ [`uicockpit` CLI](./cli/README.md) Β· [`uicockpit-mcp`](./mcp/README.md) ### 🎨 Web / paste - **One hosted ``** β€” the whole kit (tokens + component recipes with real hover/focus/disabled states) served from the edge: ```html ``` - **Own the files** β€” download `tokens.css`, `tokens.json`, a Tailwind v4 `@theme` block, or shadcn/ui `globals.css`. No runtime, no dependency. - **Quick-paste** into v0, Lovable, bolt, … via the in-app **"Use in [your tool]"** router. --- ## What's in the box - **250+ design tokens** β€” OKLCH colour ramps (contrast-clamped to WCAG), a type scale with weight + label-case control, spacing grid, radii, shadows, a 3-tier motion system, a brand-harmonised multi-hue chart/avatar palette. - **100+ components** β€” real per-component recipes, all token-driven, all with full hover/focus/disabled state contracts, shipped in `tokens.css` and over the CDN. - **Coherence guarantees** β€” the foundation self-corrects incoherent control combinations (height harmony, surface separation, type-density contrast) and a WCAG contrast check is baked in, so the kit you configure is always shippable. - **Many outputs from one config** β€” `tokens.css`, `tokens.json`, a Tailwind v4 `@theme` block, shadcn/ui `globals.css`, plus the machine-readable `contract.json`, agent rules, and a full `design.md` β€” with a live preview on a real app and a full component gallery: change one control, watch the whole thing move. --- ## How it works One configuration β†’ **one single source** β†’ every surface: ``` 19 visual controls ──▢ --k-* tokens ──▢ β”Œβ”€ live preview (gallery + a real app that dogfoods the export) (Style Β· Brand Β· Type Β· β”œβ”€ tokens.css / json / Tailwind / shadcn / design.md / AGENTS.md / contract.json Shape Β· Surface Β· Motion) β”œβ”€ hosted kit: kit.uicockpit.com/k/.css └─ npx uicockpit init/check Β· the MCP server ``` The CDN runs the exact same function the download uses, so the hosted link is byte-identical to the file you'd export, and the contract `check` reads always agrees with the CSS. The demo app renders from the kit alone β€” if the kit ever breaks, the app breaks too, and we catch it. --- ## Not a component library β€” a coherence compiler A catalog of components is always finite; the agent building your app isn't. Sooner or later it needs a component you never drew β€” and it guesses, and the guess drifts off your language. So the real product isn't 100 components, or 200. It's the **grammar** underneath them β€” the parts and composition rules every component is quietly made of β€” handed to the agent through `get_design_context`, with `uicockpit check` making sure that whatever it assembles, even a screen nobody drew, is built only from *your* language. A finite kit can, at best, be "complete." A grammar plus a verifier is *generative* β€” it covers the screens nobody drew. That's the north star, and the spine is already live: **configure β†’ CDN β†’ CLI/MCP β†’ check.** The mechanism has a name: the **Role Canvas**. A small, closed set of roles β€” *control Β· selectable Β· surface Β· tone-bearer Β· text-slot Β· overlay* β€” each guarantees one perceptual treatment (a height, a selected edge, a legible tint, a truncation…). Any element that tags a role β€” through a thin `data-role`, or simply the ARIA state that already names it (`aria-selected`, `role="menu"`) β€” **inherits that treatment for free**, so even a component we never built comes out coherent. It's a set of zero-specificity CSS floors, enforced in the build, and you can flip it on and off live in the app's loupe. β†’ The full thinking lives in [`VISION.md`](./VISION.md). --- ## Run it locally ```bash git clone https://github.com/AlexanderKaan/uicockpit.git cd uicockpit/cockpit npm install npm run dev # configurator at http://localhost:5173 npm run build # the build gate (icon-verify β†’ audits β†’ tsc β†’ vite build) npx vitest run # tests ``` Vite + React 19 + TypeScript (strict). The CLI (`cli/`) and MCP server (`mcp/`) are separate zero-dependency packages. --- ## Contributing Come on in. A new named style, a missing component recipe, an export adapter (Style Dictionary, Figma variables), a framework adapter, an accessibility fix β€” all welcome. Start with [`CONTRIBUTING.md`](./CONTRIBUTING.md) and the [`Code of Conduct`](./CODE_OF_CONDUCT.md), then open an issue or a discussion. See [`docs/roadmap.md`](./docs/roadmap.md) for what's shipped, in progress, and next β€” the gaps you hit while using it are the best input we get. --- ## Thanks πŸ™ If UIcockpit is useful to you, a ⭐ genuinely makes my day and helps other makers find it.
Made with care by **[Alexander Kaan](https://github.com/alexanderkaan)** at **[Pageminds](https://pageminds.com)** Β· [MIT](./LICENSE), free forever.