现在用 AI 写代码的人是真多，写出来的东西也是真能跑。这时候就会产生一个新问题：你找一个用 AI 开发出一款 App 的人问问，支付这块到底走了哪几个文件，改一张表会牵连哪些接口，十有八九答不上来。

代码反正跑起来了，细节没人关心，时间一长，这个项目连作者自己看着都像个黑盒。如果有人说，用 AI 写完应用后，会把代码全部自己走一遍熟悉起来，那他一定是吹牛逼，找借口摸鱼呢。

代码细节我们可以不知道，AI时代嘛。但应用的流程是怎么走的，模块功能怎么划的，改动这个库影响了哪些库，这些大的方向我们还是要掌握的。今天给大家分享的这个开源项目，就是帮我们把 AI 开发的应用，大方向给我们捋清。

先简单介绍

这是个新开源的项目，叫 floorplan，干的事就是拆应用黑盒。仓库 10 月 27 日才建，到目前，在GitHub 上的Star 已经三千多了。作者 Hayden Smith 在介绍里说得挺直接，装上它，Claude Code 或者 Codex 会把你的代码库读一遍，然后给你画出一张地图，可以点来点去的那种。

这张地图上，每个部分、每个文件、每个接口都有名字，而且是大白话的名字。举个例子，它不会给你标个「Stripe API wrapper」，它会写「在结账时收信用卡付款」。哪块和哪块连着，前端发出去的请求最后是后端哪个接口接的，图上都画着呢。

从整个应用钻到单个文件

官方做了个演示应用叫 Brewline，代码分在四个仓库里放着。它的地图打开以后，最先看到的是整个应用的样子，网店、员工端、主服务器、数据库，还有 Stripe、SendGrid 这些外部服务，一张卡片代表一个，中间拿线连着。

想细看的话，双击卡片就能往里钻。整个应用钻进去是各个部分，部分钻进去是一组一组的文件，再往下是单个文件，文件里还有接口。不管钻到哪一层，这一层被谁用过、它自己又用了谁，都标着呢。

还有个叫 Screens 的视图，我觉得挺顺手的。它不从代码结构那边走，你就挑一个自己认识的页面，比如说礼品页，它把这个页面背后的东西全给你摆出来，页面上有哪些组件，发了哪些请求，服务端是哪段代码在接，读写的是什么数据，调了哪些外部服务，都在一张图上。

这个视图对不读代码的人来说也能上手，你认得页面长什么样就行，背后那些东西它负责串。

可以直接问地图问题

地图底下有个输入框，叫 Ask。想问什么直接打字就行，不用什么格式，比如问一句「退款是怎么退到用户卡里的」，它回你一段答案，同时给你画出一张小地图，只留跟这个问题有关的部分，还能一步一步带着你走一遍。

官方演示里有个真跑过的例子我印象挺深。

有人问「礼品订阅从填表单到进收件箱，中间经历了什么」，Claude Code 那边跑了 31 秒，跨着两个仓库把整条链路追了一遍，完事还揪出来两个 bug。其中一个挺要命的，扣款排在写库和发邮件前面，中间也没做回滚，万一发邮件那步挂了，用户钱已经扣了，东西却收不到。

除了 Ask 还有个 Flows。你可以让它把一个请求在应用里走的过程放出来看，跟放电影似的，比如「用户下单之后发生了什么」，它一步一步来，走到哪一步，地图上就把对应的那张卡片亮出来。

它还能给应用做个体检

AI 写的应用有几类错误特别常见，密钥直接写在代码里，数据库表不设权限谁都能读，支付回调不做验签，接口不登录就能调。floorplan 里带了个 Health check，就盯着这几类问题扫，像 Supabase、Firebase、Stripe 这些常用服务的情况它也看。

扫出来的问题会按要紧程度排个序，每个问题下面都有一段解释，还有一条现成的修复提示，点一下就能丢回给 Claude 或者 Codex 去改。官方文档里也专门写了，这个是检查，不是审计，别指望它给你出安全评估报告。

AI 刚改了什么，一眼能看到

用 AI 写代码还有个烦人的地方，它一次改一堆文件，你想知道动了哪，只能自己去翻 diff。floorplan 有个 Recent work 面板管这个事，AI 刚改过的卡片会亮成绿色，每张卡片上还带一句话，说这次改动是为了实现你之前提的哪个需求。

地图更新这块也省心。代码改完了说一句「update the floorplan」，它只重新读有变化的部分，你开着的地图会自己刷新。之前你自己动手改过的名字，更新的时候会保留，不会被冲掉。

它是怎么跑起来的

我好奇翻了下它的文档，里面是脚本和 AI 搭着干的。脚本负责那些不用动脑子的活，找仓库、解析代码、把前端请求和后端接口对上号、排地图的位置。支持的语言不少，TypeScript、JavaScript、Python、Go、Rust、Java、Kotlin、Scala 都有，前端这块 Next.js、Vue、SvelteKit、Nuxt 这些主流的也都支持。需要看懂代码的部分交给 AI，比如判断这个应用是哪几块拼起来的，再给每个文件写句大白话的描述。

跑完以后你的项目目录里会多一个 floorplan 文件夹，里面就一个 index.html，拿浏览器打开就能看。这个文件夹在 git 里是自动忽略的，你的代码、.gitignore、CLAUDE.md 这些它都不动。整个生成过程在你自己机器上跑，不用装别的依赖，生成的地图离线也能开。

隐私这块也可以放心些，扫描在你机器上，地图在你机器上，本地起的那个小服务器也只接受本机的连接，没有统计也没有追踪。Health check 扫到密钥的时候只标在哪个文件哪一行，密钥本身不显示也不存。

如何安装

想试的话，机器上得有 Node.js 18 以上的版本，然后 Claude Code 和 Codex 里头有一个就行。走的是你已有的订阅，不用再去申请什么 API key。

Claude Code 里敲两条命令：

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

Codex的话，已使用 ChatGPT 登录。无需终端：

• • 在 Codex 应用中，打开插件并选择添加市场 。
• • 在来源中输入 haydenschmitty/floorplan，然后点击添加市场。
• • 找到 Floorplan，点击 + 进行安装。

或者，从终端运行：

codex plugin marketplace add haydenschmitty/floorplancodex plugin add floorplan@floorplan

安装完成后，在插件处会多了 floorplan 标识，就是正常可用了。

装好以后我们说一句话就行，「给这个应用画个 floorplan」，等个几分钟，地图自己会弹出来。如果你的项目前后端分两个仓库放，那就打开装着这俩仓库的那个文件夹再发指令，跨仓库的请求它也能对上。

还有个用法，代码一行没写也能用。你把 PRD 或者需求文档丢给它，它照着画一张蓝图出来，要建哪些部分、哪些文件、哪些接口，都先标上。这种卡片是虚线的，意思就是这还只是计划，代码还不存在。等哪天真把代码写出来了，这张蓝图就直接变成真地图。

哪些地方要留意

有些地方得提前说清楚。

这个仓库 10 月 27 日才建，到现在也就半个多月，更新特别勤，修东西快，但界面变得也快，你今天看到的样子，过一个月可能就不一样了。另外装第三方插件这种事，装之前最好自己把源码过一遍。它文档里有一页专门讲这个工具会在你电脑上做什么，写得还算清楚，可以先看那页。

还有一点，第一次生成地图要把整个代码库读一遍，小项目几分钟的事，大项目就久了，跑的都是你自己订阅的额度，项目大的话心里有个数，别一次把你订阅的额度都干没了。

另外，这个刚开源不久，完善度不是很高，我在运行时候，遇到好几处问题，第一次运行 Kotlin 文件之间的大多数链接都未出现在映射图中，遇到一些问题别急，用手头的 AI 告他解决一下，基本都能完成，最终是可以跑出预期效果的。

最后

我把它文档和演示都翻了一遍，大概明白这东西为什么刚开源就接近 4000 Star了。AI 现在写代码是快，但写的人经常说不清楚自己这个应用到底是怎么运转的。以前画架构图，多半是画给别人看的，现在画架构图，那是给自己看的。

对了，地图还能导出成一个 HTML 文件发给别人，团队里来新人的时候丢一份过去，比口头讲半天省事多了。

开源仓库：haydenschmitty/floorplan

这个公众号长期分享实用开源项目。如果你不想逐篇翻阅历史文章，可以直接关注微信公众号“极客之家”，通过后台留言与我们互动交流。