Floorplan教程:让Claude画出你App的楼层图

📌 项目日期:2026年11月 | 数据来源:GitHub官方仓库 | 星数:559+

📋 项目简介

AI帮忙建的应用普遍有个后遗症:能用,但没人说得清它怎么运作的。问"用户结账时发生了什么"或"我改这里会破坏什么",诚实答案是"不知道"。Floorplan 生成那张没人画过的图:对 Claude Code 或 Codex 说画个 floorplan,几分钟后得到一张可探索、可提问、随开发保持更新的架构地图。

它在代码理解工具谱系里的位置:应用内部运作 vs stack-diagram(技术栈连接图) vs Craft Anything(314工具深度检查) vs REA(二进制层)——由浅入深各管一层。

🔧 三类使用者

使用者得到什么
Builder 建造者用自己的话搞懂自己建的应用,不用啃代码
Team 团队新人几分钟完成onboarding:从大局到具体文件
AI协作Claude/Codex每次改动后,精确看到触碰了哪些部分、为什么

📦 使用

# 对Claude Code或Codex说:
"Give my app a floorplan."
# 几分钟后得到可探索地图 + 持续更新机制

# 同类对比(README自带诚实表格):
# Floorplan → "我建的应用怎么运作,该担心什么"
# Archify → 侧重生成交付物
# Understand Anything → 侧重通用理解

✅ 使用建议

📚 常见问题

Floorplan是什么?

给"AI帮忙堆出来的应用"用的架构地图:对Claude Code/Codex说画个floorplan,几分钟后得到一张可探索、可提问、随开发持续更新的地图——回答"结账流程发生了什么""我改这里会破坏什么"。

和stack-diagram什么区别?

stack-diagram画技术栈连接(一句话输入);Floorplan画单个应用内部的运作与风险点(分析整个代码库),且持续随代码演进更新。

三类使用者各得到什么?

Builder:用自己的话搞懂自己建的应用,不读代码;团队:新人几分钟从全局到具体文件完成onboarding;AI协作:每次Claude/Codex改动后,精确看到动了哪些部分、为什么。