You built an app with AI. Now draw its map — and ask it what will break

You built an app together with an AI. It works. Now, honestly: what happens when someone presses "Pay"? What breaks if you rename the users table?

If the answer is "no idea," you're not alone. That's the flip side of vibe coding: the code got written faster than you could understand it.

On 27 October 2026 Floorplan landed on GitHub — an open plugin for Claude Code and Codex. You say one line: "make me a floorplan of this app." A few minutes later a plan of your project opens in the browser. Not a diagram for engineers, but a map where every part is labelled in human words: not "Stripe API wrapper" but "takes card payments."

Why this only just got easy

Code diagrams have existed for ages. But they drew files and arrows — and a beginner gets no more out of them than out of the code itself. What's new is the split of work:

• Scripts do the mechanics. They find files, parse imports, and match every request from the frontend to the server code that answers it. Plain Node with no dependencies, and it spends no tokens.
• The AI does what only a reader can. It decides which parts your app is made of and names them plainly. Every file and every endpoint gets its own "what this does" line.
• The map answers questions. At the bottom there's an Ask bar: type "how does a refund reach the customer's card?" and you get a short answer plus a mini-map of just the pieces involved, with a step-by-step route.
• You can see what the AI just changed. After every edit the touched cards light up green, each with a note on how the change serves what you asked for.

It runs on the plan you already have: no API keys. The map lives on your computer and never gets committed.

What we're building

A map of your own app — the one you've already vibe-coded: a bot, a landing page, a tracker, a game. And then a habit: every new feature goes through the map.

No project of your own? First ask the AI to build a small app with a sign-in and a form — the map will already be interesting on that. Or poke at the live demo: a map of a coffee-subscription app spread across four repos.

What you'll learn

• Seeing an app as parts, not files. "Sign-in," "Checkout," "Profile" — that's how people who design software think about it. The map shows how your code falls into those parts.
• Asking the right questions. "What breaks if…" is the main question before any edit. Now it has a place to be asked.
• Checking the AI's work. The green "what changed" highlight is code review for people who don't read diffs.
• Spotting holes. The Health button finds keys and passwords written into the code, endpoints that let anyone read or change data without signing in, forgotten files, and files over ~1,000 lines that AI edits badly. Each finding comes with a ready-made fix prompt.

Ready-to-use starter prompt

First install the plugin — two lines in the terminal (you need Node.js 18+):

claude plugin marketplace add haydenschmitty/floorplan
claude plugin install floorplan@floorplan

In Codex you can do the same without a terminal: Plugins → Add a marketplace → haydenschmitty/floorplan.

Start a new session in your project folder. A weak request works too — you'll get a map. But a strong one turns it from a picture into a textbook on your own code.

The key is the last line. The map itself never touches your code, but if you add "and fix what you find" to the same request, the agent will start editing before you've understood anything. Map first, decisions second.

What you'll get

The file floorplan/index.html opens by itself. At the top is the whole project in big blocks: "Website," "Server," "Database," "Outside services." Double-click and you drop inside: into a part, a group of files, a file, its endpoints. Beside it you always see what uses it and what it depends on.

Then come questions in the Ask bar:

• "What happens if I change the users table?" — and every place that touches it lights up.
• "Which files handle sign-in?"
• "Where do we talk to Stripe?"

The Screens tab lists every page of your app and everything behind it: components, requests, server code, data. Pick a screen you know and walk inward from there, instead of from a cryptic src folder.

The honest limits:

• A map costs usage. The first build spends your Claude or ChatGPT plan like any task: a few minutes for a small app, longer for a big one. Updates re-read only what changed and cost less.
• The agent reads your code. Through your own account — the way Claude Code and Codex always work. The map and its small server live only on your computer.
• Health is a quick check, not a security audit. It catches the obvious, not everything.
• Popular languages and frameworks. JS/TS, Python, Go, Rust, Java, Kotlin; Next.js, React Router, Vue, SvelteKit, Expo and more. Exotic stacks get lighter support.
• The plugin is two days old, version 0.2.2. Expect rough edges. The map may also ask once whether you want to join the waitlist for a paid cloud version — it's optional, and nothing is sent unless you sign up.

Weekend plan

1. Friday evening. Install the plugin and build your first map with the strong prompt. Take the one-minute "Start here" tour. Compare the map with how you pictured the project — where were you wrong?
2. Saturday. Ask the map five questions you don't know the answer to. Open Health and go through each finding: why is it risky? Only then press "Fix with Claude" on the most important one.
3. Sunday. Ask the AI to add a small feature, then say "Update the floorplan." Look at the green cards: did it change only what you asked for? If not — you've just caught the AI red-handed.

Make the map a habit: new feature → update the map → look at the green. In a couple of weeks you'll know your app better than the AI that wrote it.

Source: Floorplan on GitHub