Devalley
DownloadSign in

AI column

Coding@donghyeok99Staff

Floorplan: a plain-English map of the app you built with AI

Ask Claude Code or Codex for a floorplan, and a few minutes later a map of your whole app opens in the browser

As in the README's demo app: the code is scanned, its parts connect as cards, a request flows to SendGrid, and Health flags the server.
As in the README's demo app: the code is scanned, its parts connect as cards, a request flows to SendGrid, and Health flags the server.
Who
A Claude Code and Codex plugin by Hayden Smith (haydenschmitty), for people who build with AI and don't read the code.
When
Released on 27 October 2026; v0.6.1 came out on 1 November.
Where
Runs in Claude Code and Codex. The scan, the map and its small server all run on your computer.

What was hard

You built an app with a lot of help from AI, and it works. But ask what happens when someone checks out, or what breaks if you change a table, and the honest answer is no idea. Short of reading the code line by line, there was no way to see its shape.

What it does about it

Floorplan draws the diagram nobody drew. Scripts do the mechanical part: following files and imports, and matching each request in the frontend to the server endpoint that answers it. Claude or Codex only does what a reader must: deciding what the parts are and saying so plainly. On the map you can start from a screen and see everything behind it, ask a question, or let the Health check find keys left in the code.

An answer from the map: a gift subscription traced from the form to the inbox
An answer from the map: a gift subscription traced from the form to the inbox
Everything behind the Gift page, down to the database, Stripe and SendGrid
Everything behind the Gift page, down to the database, Stripe and SendGrid
The Health panel: a secret key in the code and an endpoint anyone can call
The Health panel: a secret key in the code and an endpoint anyone can call
Recent work: each card the AI just changed, with why
Recent work: each card the AI just changed, with why

What people made with it

GitHub@CplSyx2026-10-30

Ran the Health check on their own site: the 'important' secret key it flagged was a Cloudflare Web Analytics token that must be public, so they asked for such tokens to be left out.

Upon investigation, the access token identified is my beacon token for Cloudflare Web Analytics
likes 0 · comments 1 (2026-11-02 as of)GitHub ↗

How it runs inside

  1. 1

    You → Claude Code / Codex

    "Make me a floorplan of this app."The Floorplan skill checks whether a map exists and, if not, starts from scratch.skills/floorplan/SKILL.md
  2. 2

    Claude Code / Codex → scan.mjs

    Repos, files, imports, endpoints, requestsFiles are listed with git, imports resolved to real files, and endpoints and outgoing requests found.skills/floorplan/scripts/scan.mjs
  3. 3

    Claude Code / Codex → architecture.json

    The app's parts, outside services, flows, tourThe AI reads the scan summary and READMEs and writes down the parts of the app in plain words.skills/floorplan/references/schema.md
  4. 4

    architecture.json → build.mjs

    Files assigned, requests matched to endpointsWhat the AI wrote is validated, files go into parts, and cards connect by imports and matched requests.skills/floorplan/scripts/build.mjs
  5. 5

    Claude Code / Codex → build.mjs

    A name and description for every file and endpointThe AI fills in a worksheet per part; on big projects parallel helpers share the work.skills/floorplan/scripts/describe.mjs
  6. 6

    build.mjs → floorplan/index.html

    Health: keys in code, endpoints with no sign-inClassic mistakes go on the map with a fix prompt; secret values are never stored or shown.skills/floorplan/scripts/lib/health.mjs
  7. 7

    Claude Code / Codex → floorplan/index.html

    The map opened through a local serverA small server that only accepts your own machine opens the map, and an open tab reloads in place.skills/floorplan/scripts/open.mjs

What goes in, what comes out

"Make me a floorplan of this app"A map in a floorplan/ folder that opens with a short tour
Asking the map "What happens when someone places an order?"An answer plus a mini-map of just the pieces involved, step by step
"Update the floorplan"Only what changed is re-read; what you just worked on lights up green under Recent work
A PRD and "Make me a floorplan of what we'd need to build"A blueprint in dashed cards, with a review of the decisions still open

Is it for you

Good for

  • Understanding an app you built with AI without reading the code
  • Onboarding someone from the big picture down to the exact file
  • Seeing which parts your AI just changed, and why
  • Checking for classic mistakes like keys in code or Supabase tables anyone can read before you ship
  • Planning the parts of an app from a PRD before any code exists

Not for

  • A first map takes a few minutes for a small app and longer for a big one, on your Claude or ChatGPT plan.
  • Matching requests to endpoints is pattern matching, not a compiler, so it catches most connections but not all.
  • The README calls Health a check, not an audit; an issue reports a public analytics token flagged as a secret.
  • It runs only in Claude Code and Codex.

Reviewed by Devalley’s editor before publishing. How the column is made

Sign in to post, comment and like.Sign in

Topics of this piece

#Floorplan#ai-coding#architecture diagram#claude#Claude Code#claude-code-plugin#codebase map#codebase-visualization#Codex#ELK#security check#browser#diagram#frontend#git#HTML#Node#plugin#STEP#Supabase

Community posts using it

Pinned Devalley — 내 컴퓨터에 AI 에이전트 마을을 만들어 보세요General · · 0 comments AIndergarten — AI 크리에이터들의 놀이터General · · 0 comments

Related pieces

Report

Reason

Read the community rules