Case study · Independent

A kitchen layout that already follows the rules

I'm designing and building a planner that turns a room's dimensions into a cabinet layout that respects the NKBA kitchen planning guidelines, then exports a plan you can shop from.

Role: Designer and builder, solo, with AI
Organization: Independent
When: Jun 2026 to now, in development
Platform: Web app: Three.js 3D, 2D plan and PDF export

The planner after generating an L-shaped kitchen: room dimensions and a small floor plan at the top, and a line-art 3D view of the cabinets, fridge and range below, with the work triangle drawn on the floor.

In short

01Laying out a kitchen means juggling cabinet sizes, corners, appliance clearances and the NKBA planning guidelines all at once.
02I designed a five-step wizard: pick a shape, enter the room, place windows and appliances, preview, generate. The engine lays out the cabinets.
03The guidelines are built into the layout as it's made, and the result exports as a floor plan, wall elevations and a shopping list.

problem framing
interaction design
rules engine · NKBA guidelines
3D and 2D visualisation
test-driven development
building with AI · Claude Code

01Problem

Too many rules to hold in your head

A kitchen layout has to fit standard cabinet widths, turn corners without dead space, keep appliances clear of each other, and leave counter space where you actually set things down. The NKBA planning guidelines spell most of that out, but nobody keeps them all in mind while sketching.

I wanted to type in a room and get a layout that already respects them, then adjust it rather than start from a blank page.

02Wizard

Five steps from an empty room to cabinets

The wizard asks for the kitchen's shape (one wall, galley, L, U or peninsula), the room's dimensions, then the windows, doorways and appliances, placed together on one plan. Appliances drag along the walls, and conflicts are flagged as you go.

Before anything is generated, the preview shows the layout's footprint with the NKBA landing zones highlighted and the counter space compared with the guideline. Nothing is saved until you choose to generate.

Three wizard steps: choosing a kitchen shape from five options; placing windows, doorways and appliances on a plan with a work triangle; and a layout preview with NKBA landing zones highlighted and counter space measured. — Three of the five steps: shape, features and preview.

03Rules

The guidelines shape the layout as it's made

The engine places appliances to give a good work triangle between sink, range and fridge, and keeps NKBA landing space beside each one: 15 inches by the fridge, 12 on each side of the range, 18 on each side of the sink. Layouts that break those rules are never offered, rather than offered and marked down.

Other rules came from layouts going wrong in testing: no cabinets across windows or doorways, no narrow cabinets in corner pockets beside the fridge where nobody can reach, and blind corners modelled the way the frames are actually built.

The 2D floor plan of the generated kitchen: base and wall cabinets with their widths, the fridge, range, sink and dishwasher, and a green dashed work triangle marked good. — The 2D plan, with cabinet widths and the work triangle check.

04Directions

From a control panel to a guided setup

The first modular build put everything in a sidebar: window forms, cabinet buttons, configuration menus. It worked, but you had to know what to do with it.

Over the following weeks the setup moved into the wizard, the sidebar shrank to a single button to restart it, and the 3D camera started framing the kitchen instead of floating far above it.

Two versions of the app: on June 20, a small 3D kitchen beside a sidebar full of window and cabinet controls; now, a large line-art 3D view with the sidebar reduced to one Restart Setup Wizard button. — June 20 and now, rendered from the code at each step.

053D style

Realistic for a day, then line art

I tried a realistic pass first: wood doors, steel handles, a quartz counter, lighting and soft shadows.

The next day I switched to line art: flat colours and dark edges, with no lighting, so the drawing looks the same from every angle and every cabinet edge is clear. The PDF elevations moved to the same style.

The same kitchen in two 3D styles: June 28 with wood doors, black appliances and a speckled floor; June 29 in flat off-white line art with dark edges. — The same kitchen on June 28 and June 29.

06Plan

A plan you can take shopping

Export PDF turns the layout into a multi-page plan: a summary, the floor plan, an elevation of each wall, a shopping list built from IKEA's SEKTION cabinet range with article numbers and an estimated total, and notes with an installation order and the work triangle check.

The plan says plainly that prices and article numbers are estimates to confirm with IKEA before ordering.

The pages of an exported kitchen plan: a summary page, a floor plan, north and west wall elevations, two shopping list pages with cabinet frames, fronts, hardware and fillers, and a notes page. — Every page of the exported plan for the sample kitchen.

07Build

Untangling a prototype into something testable

It started as one very large HTML file. I split it into modules without changing behaviour, so the layout logic could be tested on its own: packing, corners, exclusions, countertop runs and the work triangle all have automated tests.

The 3D and 2D views can't be tested that way, so they have a written checklist I run in the browser after any change to how things are drawn.

08Where it stands

In development

The wizard, the layout engine, the 3D and 2D views and the PDF all work on real room shapes. Known gaps are written down, the biggest being that windows on east and south walls may be placed at the wrong end of the wall.

Next, I want it to compare cabinets across more than one vendor.