Een ondernemer aan haar laptop bij het raam, een fietser passeert op straat.

Experiment

Negen design systems, één scherm, jouw kleuren

Tailwind, shadcn/ui, Material 3 en zes andere naast elkaar, met een werkend thema als export.

Product: UIcockpit
Route: Klanten online bedienen
Onderwerp: Gereedschap voor makersDesign systems
Platform: Web
Jaar: 2026

Welk design system bij je past, zie je niet aan de homepage. UIcockpit zet negen echte UI-kits naast elkaar op één scherm, in jouw kleuren en typografie. Je houdt de kit die past en exporteert een werkend thema.

Bekijk UIcockpit live Bekijk de code

Gebouwd met

Vanilla ES-modules
Nul dependencies
Eigen build-gates
Headless Chrome-checks
Cloudflare

Cijfers

In het kort

design systems op één scherm: 9
dependencies: 0
tests plus vier poorten: 109
commits in twaalf weken: 772
regels eigen zip-writer: 60

De opgave

Wat er lag

Welk design system bij je past, lees je niet af aan zijn homepage. Wie begint aan een product kiest dus op gevoel, en zit daarna jaren aan die keuze vast. De opgave: negen echte UI-kits op één scherm zetten, in jouw kleuren en typografie, zodat je ze naast elkaar kunt proberen. En de keuze meenemen als een thema dat in de code werkt.

Hoogtepunten

Drie details die het verschil maken

De componentenwand van UIcockpit met daisyUI gekozen: knoppen, iconknoppen, statuschips, keuzerondjes en vinkjes, en een formulier voor een nieuwe aanvraag. — Negen kits, dezelfde wandKies een kit bovenin en de hele wand rendert opnieuw: knoppen, keuzes, formulieren, tabellen. In jouw kleuren, in de woorden van die kit.

De tabel You turn one knob, nine systems answer: per design system waar het in draait, hoe het een waarde aanneemt (variabele, seed, keuze of token) en hoeveel van de vier lagen het vult. — Gelezen, nooit geradenPer kit staat hoe hij een waarde aanneemt, als variabele, seed, keuze of token, en hoeveel van de vier lagen hij vult. Gelezen uit het pakket zelf.

De lijst A folder that installs: theme.css, install.md, MANIFEST.md, DESIGN-SYSTEM.md en _custom.scss, elk met één regel uitleg. — Een map die installeertGeen screenshot en geen palet, maar de bestanden die elke kit verwacht, plus het manifest met wat er niet kon.

Schermen

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 foundations, rechts de export.
Zes kits naast elkaar met dezelfde kaart en dezelfde knoppen: kies op wat je ziet.
Eén knop, negen antwoorden: per kit staat hoe hij een waarde aanneemt en wat hij vult.
Wat het niet doet, en wat een kit niet kan: op het scherm, niet stilletjes weggelaten.
Een map die installeert: de bestanden die elke kit verwacht, met het manifest erbij.

Het verhaal

Hoe het is gemaakt

Welk design system bij je past, zie je niet aan zijn homepage

Je kunt aan de marketingsite van een design system niet aflezen of het bij je past. Dus laat UIcockpit je alle negen tegelijk proberen. Tailwind CSS, daisyUI, Bootstrap, shadcn/ui, Material 3, Radix Themes, Mantine, Ant Design en Open Props renderen dezelfde schermen naast elkaar. In jouw merkkleur, jouw twee lettertypes, jouw vorm en dichtheid. Gratis, zonder account, zonder installatie.

Eén wand met 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.

Het startscherm van het cockpit: acht design systems als kaart, elk met de kleuren, letter en hoeken waarmee dat systeem uit de doos komt. — Het startscherm: elk design system als kaart, met de kleuren, letter en hoeken waarmee het uit de doos komt.

Eén knop, negen antwoorden

Onder elke knop ligt een routeringstabel die nooit een eigen token verzint. Hij spreekt de tokens van elke kit aan in hun eigen woorden: het @theme van Tailwind, het plugin-blok van daisyUI, de variabelen van Bootstrap plús een Sass-regel, de token-generator van Material. Dat luistert nauw: bij de één is “border” een breedte, bij de ander een kleur. Precies daarom is de tabel het product.

Een strip met controles kijkt live mee: contrast tegen de WCAG-ondergrenzen, waardes die een stack niet kan aannemen, variabelen die nergens gelezen worden. En wat een kit níet heeft, staat op het scherm; een thema dat stilletjes een derde weglaat is erger dan een thema dat het zegt.

Componenten uit meerdere UI-kits naast elkaar in UIcockpit, gerenderd in dezelfde huisstijlwaarden. — Dezelfde componenten uit meerdere kits naast elkaar, in dezelfde huisstijlwaarden: één knop, en elke kit antwoordt in zijn eigen woorden.

De export is het product

De zip die je meeneemt bevat een theme.css in het vocabulaire van elke gekozen kit. Daarnaast een DESIGN.md volgens de design-system-opzet van Google, AGENTS.md en CLAUDE.md voor wie met agents bouwt, cursor-rules, tokens.json en een install.md die klopt. Kits kun je opslaan, forken en wisselen, met een diff die per regel telt wat je meeneemt of achterlaat. De hele staat van de tool leeft in een deelbare URL.

Geleerd

Wat we eruit hebben geleerd

01
Het moeilijke aan negen design systems naast elkaar zetten is niet het renderen. Het is dat hetzelfde woord in elk systeem iets anders betekent, en dat elke kit zijn thema in een andere vorm wil hebben. Eén gedeelde tokenwoordenlijst is dus een verzinsel dat je alleen overeind houdt door per kit te vertalen. Vandaar dat de routeringstabel het product is en de interface eromheen de verpakking.
02
Wat een kit niet kan, hoort op het scherm te staan. De verleiding is groot om een ontbrekende mogelijkheid stilletjes over te slaan, want dan ziet elk thema er compleet uit. Maar dan ontdekt iemand het gat pas in zijn eigen codebase, en dan is het onze fout geworden. Een thema dat een derde weglaat en dat zegt, is bruikbaar; een thema dat het weglaat en zwijgt is een valstrik.
03
Nul dependencies is een besluit dat je elke week opnieuw neemt. De zip-writer met de hand schrijven was het moment waarop dat besluit iets kostte, en daarom staat hij er nog. De opbrengst is dat het hele product één statisch HTML-bestand is: geen buildketen die veroudert, geen kwetsbaarheid die je moet bijwerken, en geen dag waarop het ding niet meer draait omdat er iets in een boom eronder is veranderd.

Ontwerp

Letters en kleuren

Letters

Koppen: Plus Jakarta SansVet (700) voor de koppen op de landing; breed en vriendelijk.
Lopende tekst: IBM Plex SansRegular voor alle tekst en de interface van de generator.

Kleuren

Warm wit
#efeeec
de grond waar alles op ligt, ook in de nachtstand de basis
Paneel
#ffffff
alles waar je iets in kunt zetten
Verzonken
#e7e6e3
een spoor waar een control in ligt: een segment, een slider
Inkt
#1c1b19
warm bijna-zwart voor tekst en de knop
Gedempt
#6b6862
tweede tekst
Blauw
#007aff
het accent van de landing, tot een kit het overneemt

De chroom van de tool is bewust kleurloos: elke kleur in de interface zou vechten met de kleur die de bezoeker net heeft ingesteld.
Een hairline is een lijn en geen rand; wat een kit niet kan staat op het scherm in plaats van stilletjes weg.
De letters zijn gemeten op uicockpit.com, de kleuren komen uit het design.md in de code, 7 september 2026.

Techniek

Waar het van gemaakt is

Bouw
- Vanilla ES-modules
- Nul dependencies
- Eén statisch HTML-bestand
Zo'n tienduizend regels die compileren naar één bestand met alle negen kits aan boord.
Negen kits
- Tailwind CSS
- daisyUI
- Bootstrap
- shadcn/ui
- Material 3
- Radix Themes
- Mantine
- Ant Design
- Open Props
Elke kit wordt in zijn eigen woorden aangesproken via de routeringstabel, die nooit een eigen token verzint.
Kwaliteit
- 109 tests
- Vier poorten
- Headless Chrome
Eén poort zet elke kit op een tweede merk en meet of elke kleur meebeweegt en elk onderdeel zichtbaar blijft.
Export
- theme.css
- DESIGN.md
- AGENTS.md
- tokens.json
- install.md
- Eigen zip-writer
Een map die installeert, in het vocabulaire van elke gekozen kit; de zip-writer is zestig regels met een eigen CRC32-tabel.
Uitrol
- Cloudflare
- MIT
Open source; 772 commits in twaalf weken.

Verdieping

Voor wie verder wil lezen

Onder de motorkap

Geen framework en núl dependencies: zo'n tienduizend regels vanilla ES-modules die compileren naar één statisch HTML-bestand met alle negen kits aan boord.

Geen framework en núl dependencies: zo'n tienduizend regels vanilla ES-modules die compileren naar één statisch HTML-bestand met alle negen kits aan boord. Zelfs de zip-writer is handgeschreven (zestig regels met een eigen CRC32-tabel) om de eerste dependency buiten de deur te houden.

Kwaliteit is een build-gate, geen belofte: 109 tests plus vier poorten. Eén daarvan zet elke kit automatisch op een tweede merk en meet of elke kleur meebeweegt en elk onderdeel zichtbaar blijft. 772 commits in twaalf weken. Open source onder MIT.

Wat er open staat

De poort die elke kit op een tweede merk zet, controleert dat elke kleur meebeweegt, niet dat het resultaat mooi is.

De poort die elke kit op een tweede merk zet, controleert dat elke kleur meebeweegt, niet dat het resultaat mooi is. Dat vraagt ogen, geen script, en het is de vraag waarmee dit experiment begon: past het bij je? Het gereedschap laat het je zien; oordelen doe je nog steeds zelf.

En de gaten die op het scherm staan. Wat een kit niet kan, zeggen we nu in plaats van het stilletjes weg te laten. Maar zeggen is niet oplossen. Voor elk van die negen ligt de vraag open of het gat een eigenschap van het systeem is, of gewoon werk dat nog niemand heeft gedaan.

Moet ik een account maken?

Nee. Gratis, zonder account en zonder installatie; de hele staat van de tool leeft in een deelbare URL.

Welke design systems zitten erin?

Tailwind CSS, daisyUI, Bootstrap, shadcn/ui, Material 3, Radix Themes, Mantine, Ant Design en Open Props: negen echte kits, geen nagebouwde.

Wat krijg ik mee?

Een zip met een theme.css in de taal van elke gekozen kit, plus DESIGN.md, AGENTS.md en CLAUDE.md voor wie met agents bouwt, cursor-rules, tokens.json en een install.md die klopt.

Wat als een kit iets niet kan?

Dan staat dat op het scherm. Een thema dat stilletjes een derde weglaat is erger dan een thema dat het zegt.

Waarom nul dependencies?

Het hele product is één statisch HTML-bestand: geen buildketen die veroudert, geen kwetsbaarheid om bij te werken, geen dag waarop het niet meer draait.