Negen design systems naast elkaar, in jouw merk
Tailwind, shadcn/ui, Material 3 en zes andere op één scherm, en je neemt een werkend thema mee.
- Gereedschap voor makers
- Design systems
- Website
- Platform
- Jaar
UIcockpit in twee minuten
UIcockpit is een tool voor wie aan een nieuw product begint en een design system moet kiezen. Het zet negen echte UI-kits op één scherm, van Tailwind tot Material 3, met dezelfde knoppen, formulieren en tabellen. Alle negen staan in jouw merkkleur, letters en vorm. De kit die past, neem je mee als een map die installeert. Wij bouwden het als open-source experiment. Je gebruikt het gratis en zonder account.
- Vanilla ES-modules
- Nul dependencies
- Eigen build-gates
- Headless Chrome-checks
- Cloudflare
In het kort
- 9
- 0
- 109
- 772
- 60
Wat er lag
Je begint aan een nieuw product en opent de sites van Tailwind, Material en shadcn. Of een ervan bij je past, zie je daar niet. Dus kies je op gevoel, en daar zit je jaren aan vast. We wilden negen echte kits op één scherm zetten, in jouw kleuren en letters. Dan moest één knop alle negen aansturen, terwijl elke kit een waarde in zijn eigen woorden wil horen. En de kit die je kiest, moest mee als een thema dat in de code werkt.
Drie details die het verschil maken
Het product in zes schermen
De landing: negen kits als tabs, en eronder dezelfde componenten in jouw kleuren. 
De generator: links de kit en je merk, in het midden de kleurstalen en het ritme, rechts de export. 
Zes kits naast elkaar met dezelfde kaart en dezelfde knoppen: kies op wat je ziet. 
De tabel voluit: per kit waar hij in draait, hoe hij een waarde aanneemt en wat hij vult. 
Wat de tool zelf niet doet, en per kit wat die niet kan. 
Een map die installeert: de bestanden die elke kit verwacht, met het manifest erbij.
Van negen websites naar één scherm
Negen kits in jouw merk, naast elkaar
Begin je nu op uicockpit.com, dan zie je eerst negen kaarten. Elk design system staat erop zoals het uit de doos komt, met zijn eigen kleuren, letter en hoeken.
Zet je je merkkleur, je twee lettertypes, je vorm en je dichtheid, dan renderen alle negen dezelfde schermen in jouw merk. Op één wand staan zes borden, van de basis tot een complete pagina. Je zet er tot zes kits naast elkaar op, of bekijkt één component in alle versies tegelijk.
Eén knop, negen antwoorden
Draai je aan één knop, dan antwoorden negen kits. Elk wil die waarde in zijn eigen woorden horen, en dat luistert nauw. Bij de één is border een breedte, bij de ander een kleur. Die vertaling is het eigenlijke product.
Onder elke knop ligt daarom een routeringstabel. Die spreekt de tokens van elke kit aan, de benoemde kleuren en maten, zoals die kit ze kent. Bij Tailwind is dat het @theme en bij daisyUI het plugin-blok. Bootstrap krijgt zijn variabelen met een Sass-regel erbij, en Material zijn token-generator.
Een eigen token verzint de tabel nooit. Dat geldt voor de hele tool: componenten en standaardwaarden komen altijd van de kit zelf.
Wat een kit niet kan, staat in beeld
Een strip met controles kijkt live mee. Hij meet het contrast tegen de ondergrenzen van WCAG, de norm voor toegankelijkheid. Ook waarden die een stack niet kan aannemen en variabelen die nergens gelezen worden, komen in de strip.
Mist een kit iets, dan staat dat op het scherm, en in de export in MANIFEST.md. Een thema dat stilletjes een derde weglaat, is erger dan een thema dat het zegt.
Een thema in de taal van je kit
Kies je de kit die past, dan download je een zip met een theme.css in de woorden van die kit. Ook tokens.json zit erin, en een install.md die klopt. Wie met AI-agents bouwt, krijgt AGENTS.md, CLAUDE.md, cursor-rules en een DESIGN.md volgens de opzet van Google voor design systems.
Wissel je van kit, dan telt een diff, een vergelijking per regel, wat je meeneemt en wat je achterlaat. De hele stand van de tool staat in de URL, dus een link is genoeg om hem te delen.
Eén HTML-bestand, nul dependencies
Het hele product is één statisch HTML-bestand met alle negen kits erin. Er zit geen framework in en geen enkele dependency (een pakket van een ander waar de code op leunt). Zelfs de zip-writer, die je map inpakt, schreven we zelf in zestig regels.
Bij elke build draaien 109 tests en vier poorten, controles die de build tegenhouden als er iets niet klopt. Eén poort zet elke kit op een tweede merk. Hij meet of elke kleur meebeweegt en elk onderdeel zichtbaar blijft.
Wat UIcockpit nog niet kon, was laten zien hoe jouw eigen app in zo'n kit staat. Dat werd ons volgende experiment: UISandbox.
Wat we eruit hebben geleerd
- 01
Het moeilijkste aan negen design systems naast elkaar zetten was de taal. Hetzelfde woord betekent in elk systeem iets anders, en elke kit wil zijn thema in een andere vorm. Een gedeelde woordenlijst voor tokens houd je alleen overeind door per kit te vertalen. Daarom is de routeringstabel het product en de interface eromheen de verpakking.
- 02
Zet op het scherm wat een kit niet kan. Het is verleidelijk om een gat stilletjes over te slaan, want dan ziet elk thema er compleet uit. Alleen vindt iemand dat gat dan pas in zijn eigen codebase, en dan is het onze fout.
- 03
Nul dependencies is een besluit dat je elke week opnieuw neemt. Bij de zip-writer kostte dat besluit iets, want die schreven we met de hand. Wat je ervoor terugkrijgt: er is geen buildketen die veroudert en geen kwetsbaarheid om bij te werken. En er komt geen dag dat het ding stopt omdat er in een pakket eronder iets veranderde.
Letters en kleuren
- Koppen
- Plus Jakarta Sans
- Lopende tekst
- IBM Plex Sans
- #efeeecde grond waar alles op ligt, ook in de nachtstand de basis
- #ffffffalles waar je iets in kunt zetten
- #e7e6e3een spoor waar een control in ligt: een segment, een slider
- #1c1b19warm bijna-zwart voor tekst en de knop
- #6b6862tweede tekst
- #007affhet accent van de landing, tot een kit het overneemt
- De interface van de tool zelf is bewust kleurloos. Elke eigen kleur zou vechten met de kleur die je net hebt ingesteld.
- Een hairline is een lijn en geen rand.
- De letters zijn gemeten op uicockpit.com, de kleuren komen uit het design.md in de code, 7 september 2026.
Onder de motorkap
- Bouw
- Vanilla ES-modules
- Nul dependencies
- Eén statisch HTML-bestand
- Negen kits
- Tailwind CSS
- daisyUI
- Bootstrap
- shadcn/ui
- Material 3
- Radix Themes
- Mantine
- Ant Design
- Open Props
- Kwaliteit
- 109 tests
- Vier poorten
- Headless Chrome
- Export
- theme.css
- DESIGN.md
- AGENTS.md
- tokens.json
- install.md
- Eigen zip-writer
- Uitrol
- Cloudflare
- MIT
Voor wie verder wil lezen
Hoe het precies werkt
Zo'n tienduizend regels vanilla ES-modules compileren naar dat ene HTML-bestand.
Zo'n tienduizend regels vanilla ES-modules compileren naar dat ene HTML-bestand. De zip-writer heeft een eigen CRC32-tabel, zodat ook het inpakken zonder dependency gaat.
In twaalf weken kwamen er 772 commits, en UIcockpit is open source onder MIT.
Wat er open staat
De poort met het tweede merk controleert of elke kleur meebeweegt.
De poort met het tweede merk controleert of elke kleur meebeweegt. Of het resultaat ook mooi is, ziet een script niet. Dat is de vraag waarmee dit experiment begon: past het bij je? UIcockpit laat het je zien, en oordelen doe je zelf.
Dan de gaten op het scherm. Wat een kit niet kan, staat er nu bij, en daarmee is het nog niet opgelost. Bij elk van de negen ligt een vraag open. Hoort zo'n gat bij het systeem, of is het werk dat nog niemand deed?
Welke design systems zitten in UIcockpit?
Tailwind CSS, daisyUI, Bootstrap, shadcn/ui, Material 3, Radix Themes, Mantine, Ant Design en Open Props. Het zijn de echte kits, in jouw kleuren op één scherm.
Moet ik een account maken voor UIcockpit?
Nee. UIcockpit is gratis en werkt zonder account of installatie. De hele stand van de tool staat in een URL die je kunt delen.
Wat als een kit in UIcockpit iets niet kan?
Dan staat dat op het scherm, en in de export in MANIFEST.md. Je vindt zo'n gat dus niet pas in je eigen codebase.
Wat download ik uit UIcockpit?
Een zip met een theme.css in de taal van elke gekozen kit, met tokens.json en een install.md die klopt. Wie met agents bouwt, krijgt er DESIGN.md, AGENTS.md, CLAUDE.md en cursor-rules bij.
Waarom heeft UIcockpit nul dependencies?
Zo blijft het hele product één statisch HTML-bestand met alle negen kits erin. Er hoeft niets bijgewerkt te worden omdat een pakket eronder verandert.
