Work/Casa Jade
Case 02 / 03 · 2026
Fig 013D designer — generated kitchen · live
Fig 02Collections — 9 boards · 3 families
Fig 03Wardrobe line — same engine, second product01Designer · generated quiet-luxury kitchen.
02Collections · nine curated boards, three families.
03Wardrobe line · display closet + vanity island.
Role
Strategy, Product, Engineering, 3D
Stack
Next.js · React Three Fiber · Three.js · Zustand · TypeScript · Vitest · Vercel
A furniture brand's customers design their own kitchens in 3D — guided quiz to a complete room in a minute, nine curated collections, a spec-sheet PDF at the end.
Challenge
Custom cabinetry is sold the same way everywhere: the buyer visits a showroom, waits for a measurement, then waits again while a designer turns the conversation into a 3D mockup. Every serious quote costs a designer's afternoon — and most of those afternoons go to people who never sign. Casa Jade, a furniture and interiors brand in Ulaanbaatar, wanted the order reversed: let the customer design first, and let the sales conversation start from a finished room.
Approach
We built a 3D designer that runs in the browser, on a phone, with no install and no login. A five-tap quiz — shape, size, style, finish, the practical questions — drafts a complete kitchen in about a minute: cabinets tiled symmetrically to the walls, corners resolved, worktops conforming to every base run, cornice drawn at the ceiling line. From there the customer owns the room. Every unit drags, resizes, recolours; every door and drawer opens; a walk-through mode puts them inside at eye level.
The finish system is the brand. Nine curated collections across three families — Japandi, Modern, Quiet Luxury — each a complete scheme of door fronts, carcass tones, worktops, backsplashes and hardware, applied as one decision rather than thirty.
The second product line
The same engine carries a wardrobe and walk-in designer — open columns, lit glass display closets, fitted walk-ins, island dressers with vanity mirrors and jewelry trays. One scene store, one render pipeline, one catalog with product-scoped entries. Building the second line cost a fraction of the first, which is the point: the engine is the asset.
Outcome
- A complete kitchen from a guided quiz in about a minute, on a phone.
- Two product lines — kitchens and wardrobes — on one engine.
- A spec-sheet PDF the customer takes to the showroom: elevations, floor plan, and every unit listed with dimensions and finish.
- 590 automated tests over the generator's geometry — corners, clearances, symmetry — so a layout never ships physically wrong.
- Live as the proof-of-category for the studio's configurator offer to furniture makers.
Stack reasoning
React Three Fiber because the catalog is parametric geometry that needs to live inside the React tree — one state store drives the quiz, the panels, and the scene. Zustand with versioned, sanitised persistence so a half-finished design survives a closed tab and a hand-edited blob can't crash the scene. Demand-mode rendering keeps phones cool: the canvas only draws when something changes. No backend by design — the designer is a static surface that scales on a CDN, and the lead path is the next milestone, not a prerequisite.
What we would do differently
The catalog and finish collections live in TypeScript today, which made the first brand fast and the second brand a fork. The productised version moves both into data — a tenant config a furniture maker can own — and adds the design-to-inbox lead path as a first-class feature rather than an export.


