Elke app restylen, live in de browser
Kleur, letter en afronding worden draaiknoppen, en je neemt het resultaat mee als patch, tokens of DESIGN.md.
- Gereedschap voor makers
- Design systems
- AI
- Website
- Platform
- Jaar
UISandbox in twee minuten
UISandbox is een tool voor wie een webapp bouwde en nog sleutelt aan hoe hij eruitziet. Je zet de gebouwde app in je browser, en elke kleur, letter en afronding wordt een draaiknop. Ben je tevreden, dan neem je het resultaat mee als code. Wij bouwden het als open-source experiment, en je hebt er geen account voor nodig.
- React 19
- TypeScript
- Vite
- Service worker
- Cloudflare Workers
- MCP
In het kort
- 10
- 159
- 22.000
- 165
- 13
Wat er lag
Je app werkt, alleen de knoppen zijn te blauw en de hoeken te scherp. Je past een waarde aan, bouwt opnieuw en kijkt, en dan nog een keer met een andere letter. Bij UIcockpit, ons vorige experiment, liepen we er zelf tegenaan. We gaven mensen een complete designkit, maar konden niet laten zien hoe hun eigen app erin zou staan. Een gebouwde app moest dus precies zo in het tabblad komen, met elke design-waarde als draaiknop. Er mocht geen bestand de browser uit. En we moesten bewijzen dat er niets verandert zolang je niets draait.
Drie details die het verschil maken
Probeer het zelf
Draai aan de knoppen. Elke knop staat in het midden op ×1, precies zoals het in de code staat, en de export laat alleen zien wat je veranderde.
Het product in drie schermen
De landing met het commando voor een agent, en daaronder het sleepvlak met drie tabs. 
De editor met Tufte CSS: links de knoppen, rechts de pagina die live meebeweegt en 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.
Van opnieuw bouwen naar draaien aan een knop
Je app in het tabblad, en je bestanden blijven bij jou
Zet je nu de map van je build in UISandbox, dan staat je app precies zo in je tabblad. Daarvoor speelt je eigen browser de server.
Een service worker serveert de bestanden uit het tabblad zelf, en bij ons wordt niets bewaard. Tab dicht, en alles is weg.
Nul verschillen zolang je niets draait
Een waarde die je wilt draaien, moet eerst een variabele zijn. Een herschrijver vervangt daarom elke design-waarde in je CSS door een variabele met precies dezelfde waarde. Zolang je nergens aan draait, rendert de pagina dus identiek.
Toch meet de tool het ook zelf na. Hij laadt je onaangeraakte build ernaast en vergelijkt de berekende stijlen van elk element. Nul verschillen, of hij noemt wat afwijkt.
UISandbox is getest op een vaste set van 165 echte builds, van Bootstrap, MUI en Ant Design tot Next en Astro. Ze gaan allemaal door headless Chromium, en van elke build ligt de verwachte uitkomst vast.
Knoppen op jouw schaal, met een meter erbij
Aan die variabelen hangen de knoppen, voor kleur, letter, vorm en dichtheid. In het midden staat een knop op ×1, precies wat er nu in je code staat. Draai je eraan, dan beweegt je echte app live mee. De knop buigt je schaal zonder dat die zijn vorm verliest.
Niet elke waarde laat zich zo vangen, want wat hardgecodeerd diep in een component staat, kan geen knop bereiken. Een meter laat daarom zien welk deel van het scherm de knoppen raken en wat erbuiten valt.
Dertien vormen, ook voor je agent
Tevreden? Dan neem je het mee in dertien vormen, van een CSS-patch en design tokens tot Swift- en Android-constanten. Er is ook een DESIGN.md, een bestand dat een AI-agent direct kan volgen.
Zo'n agent kan UISandbox ook zelf bedienen, want dezelfde motor draait als MCP-server, een aansluiting voor agents. Met npx uisandbox-mcp open laadt de agent een build. Daarna zet hij knoppen, verifieert hij en exporteert hij, met screenshots erbij.
En die te blauwe knoppen uit het begin? Daar draai je nu aan in het tabblad, zonder opnieuw te bouwen.
Wat we eruit hebben geleerd
- 01
Maak van identiek iets wat je kunt nameten. We hadden kunnen zeggen dat de herschrijver niets verandert, en dat was waarschijnlijk waar geweest. Alleen gelooft iemand die zijn eigen product in een vreemde tool laadt dat pas met het bewijs erbij. Op dat bewijs leunt de rest.
- 02
Zeg waar je tool ophoudt. Sommige waarden kan geen knop bereiken, en de meter zegt dat hardop. Zonder die meter kost de eerste knop die niets doet je meteen je geloofwaardigheid.
- 03
Het gat in je vorige product is vaak het volgende. UIcockpit gaf iemand een afgewerkte kit, en UISandbox laat zien hoe zijn eigen app erin staat. Zo gaat het hier meestal: je maakt iets af en ziet precies één ding dat het nog niet doet. Dat ene ding is scherper geformuleerd dan elk idee op een lijstje.
Letters en kleuren
- Interface
- Inter
- Code en waarden
- JetBrains Mono
- #1a1a1dtekst en de knop, in de nachtstand de achtergrond van de editor
- #f4f5f8de achtergrond van de landing
- #ffffffhet sleepvlak en de panelen
- #1a7f4been controle die klopt: 1:1 bevestigd
- #b45309een waarschuwing: een waarde die de knoppen niet raken
- UISandbox heeft geen eigen accentkleur. De kleur in de editor is die van jouw app, en daar mag de tool niet mee concurreren.
- Een lichte en een donkere stand, met dezelfde vijf rollen. Een knop toont de waarde uit jouw code altijd als ×1.
- De waarden zijn gemeten in de CSS van uisandbox.org en de tokens in de build, 7 september 2026.
Onder de motorkap
- Frontend
- React 19
- TypeScript
- Vite
- In het tabblad
- Service worker
- MessageChannel
- Kwaliteit
- 165 echte builds
- Headless Chromium
- Vastgepinde uitkomsten
- Voor agents
- MCP-server
- npx uisandbox-mcp
- 13 exportvormen
- Uitrol
- Cloudflare Workers
- MIT
Voor wie verder wil lezen
Hoe het precies werkt
UISandbox is gebouwd met React 19, TypeScript en Vite.
UISandbox is gebouwd met React 19, TypeScript en Vite. De service worker krijgt je bestanden via een MessageChannel uit het tabblad zelf. Er is geen server-state en er draaien geen analytics.
Tussen de eerste commit en de livegang zaten tien dagen, met 159 commits en zo'n 22.000 regels code. UISandbox is open source onder MIT.
Wat er open staat
De meter die zegt waar de knoppen ophouden, wijst ook naar het volgende werk.
De meter die zegt waar de knoppen ophouden, wijst ook naar het volgende werk. Hoe je een waarde diep in een component bereikt, buiten elke variabele en zonder de build te herschrijven, weten we nog niet. Het antwoord mag de 1:1-garantie in elk geval niet kosten.
Dan de testset. De 165 builds zeggen veel over de frameworks die erin zitten, en niets over de rest. Elke build die iemand inlaadt is dus ook een meting. De eerste die stukgaat is de interessantste.
Wat kan ik in UISandbox laden?
Een gebouwde app: de dist-, build- of out-map die er al is. Je zet hem erin als zip, als map of als publieke repo.
Hoe weet ik dat UISandbox mijn app echt 1:1 toont?
UISandbox meet het zelf na. De tool zet je onaangeraakte build ernaast en vergelijkt elk element. Wijkt er iets af, dan zegt hij wat.
Verlaten mijn bestanden mijn browser als ik UISandbox gebruik?
Nee. Een service worker serveert ze uit het tabblad zelf, zonder account en zonder analytics. Alleen een publieke repo halen we op via onze eigen route, en daar bewaren we niets. Tab dicht, en alles is ongedaan.
Wat exporteert UISandbox?
Dertien vormen, waaronder een CSS-patch, design tokens, Swift- en Android-constanten en een DESIGN.md die een AI-agent direct kan volgen.
Kan een AI-agent UISandbox bedienen?
Ja. UISandbox draait ook als MCP-server. Een agent start hem met het commando npx uisandbox-mcp open. Daarna zet hij zelf knoppen, verifieert en exporteert hij.
