Het kantoor van een scale-up aan de gracht, de oprichter laat iets zien op zijn telefoon.

Experiment

Restyle je gebouwde app, live in de browser

Elke kleur, letter en radius wordt een draaiknop. Export als patch, tokens of DESIGN.md.

Product: UISandbox
Route: Klanten online bedienen
Onderwerp: Gereedschap voor makersDesign systemsAI
Platform: Web
Jaar: 2026

Zet je build erin, draai aan de knoppen, exporteer de code. UISandbox rendert je bestaande app 1:1 in het tabblad en maakt van elke kleur, letter en radius in de CSS een draaiknop. Zonder dat één bestand je browser verlaat.

Bekijk UISandbox live Bekijk de code

Gebouwd met

React 19
TypeScript
Vite
Service worker
Cloudflare Workers
MCP

Cijfers

In het kort

dagen van eerste commit tot livegang: 10
commits: 159
regels code: 22.000
echte builds in de testset: 165
exportvormen: 13

De opgave

Wat er lag

UIcockpit kon iemand een afgewerkte kit geven, maar niet laten zien hoe zijn eigen app erin zou staan. Dat gat wilden we dichten zonder dat er één bestand de browser uit gaat. De opgave: een gebouwde app één-op-één in het tabblad laden, elke design-waarde een draaiknop maken, en het resultaat als code teruggeven. En bewijzen dat er niets verandert zolang je niets draait.

Hoogtepunten

Drie details die het verschil maken

De kop van uisandbox.org: Play with your app's design. Right in the browser, met eronder de uitleg en het commando npx uisandbox-mcp open in een kopieerveld. — Eén commando, ook voor een agentZet je build erin via de browser, of laat een agent het doen met npx uisandbox-mcp open. Niets gaat naar een server.

De intake van UISandbox met drie tabs, Upload a zip, Upload a codebase en Connect a repo, en een sleepvlak voor de dist-, build- of out-map. — Drie wegen naar binnenEen zip, een map of een publieke repo. Een kopie wordt in dit tabblad gelezen; je bestanden worden nooit aangeraakt.

Elke waarde een draaiknopKleur, letter, vorm en dichtheid uit je eigen CSS, met het midden van elke knop op ×1: zoals het in je code staat.

Schermen

Het product in drie schermen

De landing: één belofte, één commando, en drie wegen naar binnen.
De editor met Tufte CSS geladen: links de knoppen, rechts de pagina die live meebeweegt, en rechtsboven wat er uit de code is gelezen.
De export: een patch voor je agent, je eigen bestanden, tokens of een DESIGN.md. Dertien vormen in totaal.

Het verhaal

Hoe het is gemaakt

Een designwijziging wil je zien op je echte product

Niet voorstellen bij een mockup, maar zien op het ding zelf. UISandbox neemt je gebouwde app (de dist/, build/ of out/ die er al is, als zip, map of publieke repo-URL) en rendert hem één-op-één in het tabblad. Elke kleur, elk lettertype, elke radius en spacing in de CSS wordt een draaiknop; het echte product volgt live.

Het experiment komt rechtstreeks voort uit UIcockpit: we konden iemand een afgewerkte kit geven, maar niet laten zien hoe zijn éigen app erin zou uitzien. UISandbox sluit dat gat. En omdat alles in het tabblad gebeurt, is opruimen gratis: tab dicht en alles is ongedaan.

1:1 is een constructie, geen gevoel

De kern is een herschrijver die elke design-waarde in de CSS vervangt door een variabele met exact diezelfde waarde. Met niets gedraaid rendert de pagina dus bewijsbaar identiek: 1:1 als eigenschap van de constructie, niet als belofte. De ingebouwde check laadt de onaangeraakte build ernaast en vergelijkt de berekende stijlen van elk element; nul verschillen, of hij benoemt wat afwijkt.

Elke knop rekent door op jóuw waarden: het midden van elke draaiknop is ×1, zoals het in je code staat. Je schaal houdt zijn vorm, de knop buigt hem. Een meter vertelt welk deel van het scherm de knoppen raken en wat erbuiten valt.

Ook voor agents

Dezelfde motor is beschikbaar als MCP-server: met één npx-commando kan een agent een build laden, knoppen zetten, verifiëren en exporteren, inclusief screenshots. De export kent dertien vormen, van een CSS-patch en design tokens tot Swift- en Android-constanten en een DESIGN.md die een agent direct kan volgen.

Geleerd

Wat we eruit hebben geleerd

01
“Identiek” moet iets zijn dat je kunt nameten, anders is het een belofte. Dat is de grootste les uit dit experiment: we hadden kunnen zeggen dat de herschrijver niets verandert, en het was waarschijnlijk waar geweest. Maar een gebruiker die zijn eigen product in een vreemde tool laadt gelooft dat pas als het bewijs erbij zit. Dus laadt de tool de onaangeraakte build ernaast en vergelijkt hij de berekende stijlen van elk element. Die controle is geen kwaliteitsmaatregel achteraf. Het is de functie waar de rest op leunt.
02
Een tool die doet alsof hij alles bestuurt is minder waard dan een tool die zegt waar hij ophoudt. Niet elke design-waarde in een build zit in een variabele die je kunt draaien; sommige zitten hardgecodeerd diep in een component. In plaats van dat te verbergen staat er een meter die vertelt welk deel van het scherm de knoppen raken en wat erbuiten valt. Zonder die meter is de eerste knop die niets doet meteen ook het einde van je geloofwaardigheid.
03
En het gat dat je vindt is het volgende product. UISandbox bestaat omdat UIcockpit iemand wel een afgewerkte kit kon geven maar niet kon laten zien hoe zijn éigen app erin zou staan. Dat is hoe het hier meestal gaat: je bouwt iets af, je ziet precies één ding dat het níet doet, en dat ene ding is scherper geformuleerd dan welk idee op een lijstje ook.

Ontwerp

Letters en kleuren

Letters

Interface: InterRegular voor de interface, vet (700) voor de koppen op de landing; één familie, geen display-letter.
Code en waarden: JetBrains MonoVoor het commando, de waarden op de knoppen en alles wat je kunt kopiëren.

Kleuren

Grafiet
#1a1a1d
tekst en de knop, in de nachtstand de achtergrond van de editor
Nevelwit
#f4f5f8
de achtergrond van de landing
Wit
#ffffff
het sleepvlak en de panelen
Groen
#1a7f4b
een controle die klopt: 1:1 bevestigd
Amber
#b45309
een waarschuwing: een waarde die de knoppen niet raken

Geen eigen accentkleur: de kleur in de editor is die van jouw app, en die mag niet met de tool concurreren.
Twee stemmen, licht en donker, met dezelfde vijf rollen; de knoppen tonen altijd de waarde uit jouw code als ×1.
De waarden zijn gemeten in de CSS van uisandbox.org en de tokens in de build, 7 september 2026.

Techniek

Waar het van gemaakt is

Frontend
- React 19
- TypeScript
- Vite
Alles draait in het tabblad: er is geen server-state, geen account en geen analytics.
In het tabblad
- Service worker
- MessageChannel
De bestanden worden vanuit het tabblad zelf geserveerd en verlaten je browser nooit.
Kwaliteit
- 165 echte builds
- Headless Chromium
- Vastgepinde uitkomsten
Bootstrap, MUI, Ant Design, Next, Astro: elke build in de testset is een meting, en de eerste die stukgaat is de interessantste.
Voor agents
- MCP-server
- npx uisandbox-mcp
- 13 exportvormen
Een agent kan een build laden, knoppen zetten, verifiëren en exporteren, inclusief screenshots.
Uitrol
- Cloudflare Workers
- MIT
Open source, gebouwd en gelanceerd in tien dagen.

Verdieping

Voor wie verder wil lezen

Onder de motorkap

React 19, TypeScript en Vite, met een service worker die bestanden via een MessageChannel rechtstreeks uit het tabblad serveert: er bestaat geen server-state, geen account en geen analytics.

React 19, TypeScript en Vite, met een service worker die bestanden via een MessageChannel rechtstreeks uit het tabblad serveert: er bestaat geen server-state, geen account en geen analytics. Je bestanden verlaten je browser letterlijk nooit. Een vaste testset van 165 echte builds (Bootstrap, MUI, Ant Design, Next, Astro…) gaat door headless Chromium, met de verwachte uitkomsten vastgepind.

Gebouwd en gelanceerd in een sprint van tien dagen, 159 commits, zo'n 22.000 regels code. Open source onder MIT.

Wat er open staat

De meter die zegt waar de knoppen ophouden, wijst ook naar het volgende werk: de waarden die hardgecodeerd diep in een component zitten en dus buiten elke variabele vallen.

De meter die zegt waar de knoppen ophouden, wijst ook naar het volgende werk: de waarden die hardgecodeerd diep in een component zitten en dus buiten elke variabele vallen. Die bereiken zonder de build te herschrijven is de vraag waar we nog geen antwoord op hebben, en het antwoord mag de 1:1-garantie niet kosten.

En de testset. Honderdvijfenzestig echte builds zeggen veel over de frameworks die erin zitten en niets over de frameworks die er niet in zitten. Elke nieuwe build die iemand erin laadt is dus ook een meting, en de eerste die stukgaat is de interessantste.

Verlaten mijn bestanden mijn browser?

Nee. Een service worker serveert ze vanuit het tabblad zelf; er is geen server, geen account en geen analytics. Tab dicht en alles is ongedaan.

Wat kan ik erin laden?

Een gebouwde app: de dist-, build- of out-map die er al is, als zip, als map of als publieke repo-URL.

Hoe weet ik dat het echt 1:1 is?

De tool laadt de onaangeraakte build ernaast en vergelijkt de berekende stijlen van elk element. Nul verschillen, of hij benoemt wat afwijkt.

Wat komt eruit?

Dertien vormen: een CSS-patch, design tokens, Swift- en Android-constanten en een DESIGN.md die een agent direct kan volgen.

Kan een agent het bedienen?

Ja. Dezelfde motor is een MCP-server; met één npx-commando laadt een agent een build, zet knoppen, verifieert en exporteert.