Floor Plan to Interior Design Studio Webpage (House Plan Designer)

The user gives you a floor plan or CAD drawing, and you rebuild it as a single-file HTML interior design studio that opens offline with a double click. It includes a 2D plan, a 3D bird's-eye view and walkthrough, furniture layout, a plumbing, electrical, ceiling and flooring layer with demolition and renovation layers, and export of quotes and construction drawings. It is built on the open-source house-plan-designer (MIT license, by ZWD11). The studio template is already packaged in the repository. Do not modify the template. Your job is to write an accurate floor plan description (HouseSpec, a JSON file) and then generate the webpage.

For a matching case study, see One floor plan plus one sentence generates a 2D/3D design studio.

Triggers

The user says things like "turn this floor plan into a design studio / webpage", "floor plan to 3D", "CAD drawing to design studio", "restore a DXF or PDF floor plan", "plumbing and electrical routing", or "make a interior design webpage", or attaches a floor plan image, CAD screenshot, vector PDF or DXF.

Hard Rules

1. Dimensions follow the annotations on the drawing. Position each segment by its annotation. Do not scale the whole drawing by one ratio. If the drawing has no dimensions at all, ask the user for one known dimension. If you use an estimate, state it and mark openings and floor-to-floor height as "pending confirmation".
2. List the items to confirm first. Before starting, clarify: whether to reproduce all furniture on the drawing at 1:1 or only main pieces; whether to reproduce common areas (elevator lobby, stairwell, shafts); floor-to-floor height, slab thickness, and windows whose sill height cannot be seen; which drawing takes precedence if there are two. List any symbols you do not recognize and ask about them. Do not silently skip them.
3. Do not treat inferences as facts. Load-bearing walls are inferred from color or thickness. Mark them "pending confirmation" and have the user verify against the property structural drawing.
4. Do not invent things that are not there. Do not add walls, doors or windows that are not on the drawing. List every part you completed in the delivery notes.
5. Do not deliver until the self-check is clear. Address all errors and warnings. For any that cannot be fixed because the original drawing is drawn that way, explain each one.
6. Do not change the template or the user's original files. Put output in a new file next to the image. If a file with the same name already exists, use a different name.
7. Do not treat saying "done" as finished. When you deliver, include the pending-confirmation list, the reconciliation results, and any places that may differ from the original drawing.

Installation

Check first:

ls ~/.claude/skills/house-plan-designer 2>/dev/null && echo "installed" || echo "not installed"

If it is not installed, tell the user before installing that this will put a third-party skill and its dependencies on their computer:

git clone https://github.com/ZWD11/house-plan-designer ~/.claude/skills/house-plan-designer
pip install numpy pillow opencv-python pymupdf ezdxf pypdf
cd ~/.claude/skills/house-plan-designer/scripts && npm install

npm install only installs puppeteer-core and does not download a browser. The script finds Chrome, Edge or Chromium on the system itself, and falls back to Playwright's browser if none is found. If the network is slow, you may temporarily switch to an npm mirror. Other agents can place the repository in their own skills directory.

Choose a Recognition Route First

What the user gives	Route to take
Color floor plan, screenshot, scan, or a PDF that is only bitmap	Image route: use OpenCV to find walls, convert to millimeters using dimension annotations
Black-background CAD screenshot (screenshot of model space)	Split into layers by line color, automatically find the axis grid and set the scale
Vector PDF or DXF exported from CAD	Read geometry coordinates directly, highest precision
Cannot recognize walls, walls are only outlines, numbers broken into lines	CAD fallback route: layer by line color and line weight, pair parallel lines into walls, must be combined with whole-building reconciliation
One page with several floors side by side, or export from a measuring app	Whole-building route: automatically split floors, align each floor
Full layout drawing DXF from a renovation company	Layout drawing route: expand blocks, fix garbled text, pick out one sheet, then reconcile item by item
Two images: original plan plus renovation layout drawing	Dual-image route: walls from the original, furniture from the design drawing, automatic alignment
DWG	Ask the user to save as DXF or export SVG or PDF, then use one of the routes above

For exact commands and parameters, read SKILL.md and the route descriptions under reference/ in the repository. Do not write commands from memory.

Workflow

1. Read the drawing. Zoom in on each block. First compile a "symbols on the drawing → modeling" list: overall dimensions and each segment dimension, room names, door swing directions, window types, load-bearing walls, columns, flues, shafts, risers, floor drains, electrical panels, air conditioner positions.
2. Write the floor plan description. Generate it with a script, not by hand writing JSON. Read in the draft that the recognition script produces and then supplement it. Do not rewrite the walls. Write the dimension chains into the description so automatic reconciliation can run.
3. Generate and self-check, loop until clear. After building the webpage, check it with a headless browser: whether rooms are closed, whether any walls are floating, whether doors and windows are missing, whether dimension chains add up. Then overlay the results on the original drawing to see whether the walls coincide.
4. Three reconciliations. Wall reconciliation (whether glass, openings and columns were misidentified), dimension chain reconciliation (and separately list any annotations on the drawing that contradict each other), and furniture placement self-check (in front of curtains, in front of sliding doors, tall cabinets blocking windows, stair treads).
5. Arrange furniture and plumbing and electrical. Reproduce at 1:1 what is drawn on the plan. For what is not drawn, complete it according to the room's function. Turn on automatic plumbing and electrical, then audit room by room.
6. Acceptance before delivery. Actually operate every feature of the studio, and check whether the exported files can be opened. Review the screenshots yourself.

Common Requests

Make this floor plan into an interior design studio webpage

Lay 800×800 gray large-format tiles in the living room, herringbone engineered wood in the master bedroom; the style should be cream style; the city is Hangzhou

Make an L-shaped kitchen cabinet with the sink under the window; master bedroom wardrobe goes to the ceiling

What the Studio Can Do

• 2D layout, 3D bird's-eye view, first-person walkthrough. Doors, windows, curtains and lights can be clicked to switch on and off.
• A furniture library of over three hundred pieces in nine styles. One click can swap an entire room to a different style. Kitchen and custom cabinet dimensions are adjustable. There is also a free-form shaping workbench.
• Ceilings, light strips, flooring, demolition and renovation. Plumbing and electrical routing is placed automatically, with five pipe types viewable and exportable separately.
• Automatic quantity takeoff and quotes. Export construction drawing PDF, national-standard CAD drawing DXF, color plan PNG, and sharing files.

Things to Note

• Works best with drawings that have dimension annotations. Pure line drawings, scans, and crooked photos give very poor recognition drafts, and you will mostly need to infer from the annotations yourself.
• Recognition of dimension numbers in bitmaps is a fallback. Segments that cannot be read or do not match are flagged and need manual completion.
• The author notes: to achieve the full effect, a weaker model is not recommended.
• Plans are saved automatically in local browser storage. When changing computers or sending to someone else, use "Export → sharing file" in the studio.
• Can export DXF, but does not include custom entities from architectural CAD plugins. Does not read DWG directly.
• Full acceptance and reconciliation is time-consuming (a large plan may take more than ten minutes), so mention this before running it.

Output Format

1. Path to the generated HTML (and the packaged zip, if any).
2. 2D and 3D screenshots.
3. Pending-confirmation list: estimated floor-to-floor height, inferred load-bearing walls, uncertain openings, unrecognized symbols.
4. Results of the three reconciliations, and annotations on the drawing that contradict each other.
5. Places that may differ from the original drawing, and whether the scale is an estimate.