Kitchen Designer

AI-powered kitchen design—from room dimensions to precise 2D plans, interactive 3D layouts, and professional renders.

Comment

Inspiration

Designing a kitchen is much harder than simply choosing cabinet colors. A usable design must account for exact wall dimensions, doors, windows, cabinet depths, corner geometry, appliances, worktop continuity, lighting, movement space, and installation constraints.

Most lightweight design tools are visually simple but lack dimensional accuracy. Professional CAD and interior-design applications are powerful, but they often require specialized training and a long workflow before a client can understand the result.

We built Kitchen Designer to bridge that gap: a practical browser-based design system that gives designers precise planning tools while allowing clients to understand the kitchen through an interactive 3D experience.

What it does

Kitchen Designer turns room measurements into a complete kitchen-planning workflow.

Users can:

  • Create straight, L-shaped, U-shaped, or enclosed room layouts.
  • Define wall dimensions, heights, thicknesses, and connected corners.
  • Add and edit doors, windows, and architectural openings.
  • Place base, wall, tall, corner, appliance, decorative, and custom cabinets.
  • Design cabinet fronts using doors, drawers, lift-up sections, glass panels, open shelves, and custom vertical segments.
  • Automatically detect collisions and prevent invalid cabinet placement.
  • Inspect the project in top-plan, front-elevation, split, and interactive 3D views.
  • Configure cabinet materials, colors, handles, countertops, backsplashes, moldings, floors, walls, and lighting.
  • Import external appliance and furniture models.
  • Save, restore, undo, redo, import, and export complete projects as structured JSON.
  • Export high-resolution images and GLB scenes for professional rendering workflows such as Blender Cycles.

The project is designed to keep dimensional accuracy and visual output synchronized. A cabinet edited in the plan should remain consistent in the elevation view, 3D scene, exported project, and professional render.

How we built it

Kitchen Designer is built as a browser-based application using JavaScript, HTML, and CSS without a heavy frontend framework.

The application uses a shared project-state architecture so walls, openings, cabinets, materials, lighting, and settings have a single source of truth.

The main rendering systems are:

  • Konva.js for the interactive top-plan editor.
  • Dynamically generated SVG for cabinet elevations and front views.
  • Three.js and WebGL for the interactive 3D environment.
  • Custom geometry and collision logic for wall alignment, cabinet placement, corners, openings, and vertical-overlap validation.
  • JSON and LocalStorage for project persistence, history, import, and restore.
  • GLTF/GLB export for transferring scenes into external rendering software.
  • Blender Cycles as the professional photorealistic rendering path.
  • Optional PHP and MySQL services for server-side project storage and catalog management.

We also created an administration workflow for organizing cabinet templates, appliance models, GLB/GLTF/OBJ assets, thumbnails, materials, and custom cabinet configurations.

Challenges we ran into

One of the largest challenges was keeping multiple views synchronized. The top plan, elevation renderer, interactive 3D scene, saved JSON, and exported GLB all represent the same kitchen, but each renderer uses a different coordinate system and drawing method.

Cabinet placement also required more than basic rectangle collision. The system must consider:

  • Cabinet width, depth, rotation, and wall direction.
  • Vertical ranges for base, wall, and tall cabinets.
  • Doors and windows that block only overlapping height ranges.
  • Diagonal and 90-degree corner cabinets.
  • Connected walls with acute, right, or obtuse angles.
  • Countertops, cornices, plinths, fillers, and molding continuity.
  • Free-standing objects that must not accidentally snap to walls.

External 3D models introduced additional challenges. OBJ, GLTF, and GLB assets may use different axes, scales, materials, texture paths, and front directions. We had to normalize model orientation and dimensions while preserving the configured cabinet width, height, and depth.

Another major challenge was preventing regressions. Fixing one interaction could unintentionally affect dragging, selection, collision detection, rendering, or project restoration. We therefore documented core invariants and added regression checks around critical workflows.

Accomplishments that we're proud of

We are proud that Kitchen Designer has grown beyond a visual prototype into a functional, constraint-aware design system.

Key accomplishments include:

  • A complete workflow from room construction to professional rendering.
  • Four synchronized design views.
  • Accurate cabinet, opening, and corner placement.
  • Collision-aware drag-and-drop with placement previews.
  • Configurable cabinet doors, drawers, handles, glass, and open shelving.
  • Custom cabinet templates and external appliance-model support.
  • Detailed material, countertop, lighting, ceiling, and molding controls.
  • Reliable JSON project persistence and restoration.
  • A fail-safe GLB export pipeline.
  • A Blender Cycles workflow for higher-quality final images.
  • A modular architecture that can continue expanding without replacing the entire application.

What we learned

We learned that a kitchen-design application is not only a 3D graphics project. It is also a geometry engine, state-management system, interaction-design problem, product catalog, and export pipeline.

We learned the importance of maintaining one normalized project state instead of storing separate truths in the user interface and individual renderers.

We also learned that professional design tools need predictable behavior more than decorative effects. Accurate snapping, collision handling, undo, selection, dimensional consistency, and safe project restoration are essential to earning user trust.

Finally, we learned that external 3D assets require a clear coordinate and material contract. Without consistent width, height, depth, orientation, and front-direction rules, even high-quality models become difficult to use reliably.

What's next for Kitchen Designer

Our next step is to make Kitchen Designer more intelligent and collaborative.

Planned improvements include:

  • An OpenAI-powered design assistant that understands natural-language requests and converts them into validated design actions.
  • Constraint-aware layout suggestions based on room dimensions, openings, appliances, and cabinet rules.
  • Explanations showing why a proposed cabinet placement is valid or invalid.
  • Automatic gap filling and arrangement recommendations.
  • Design comparison and revision suggestions.
  • Bill-of-materials and quotation generation.
  • Cloud project storage, sharing, and team collaboration.
  • Expanded multilingual support.
  • A larger library of realistic appliances, furniture, materials, and cabinet systems.
  • Faster photorealistic rendering and additional export integrations.

Our long-term goal is to make professional kitchen planning more accessible without sacrificing the precision required by designers, manufacturers, installers, and clients.

Built With

Share this project:

Updates