我用 AI Agent 自动生成了整个 App 的业务地图（开源）

痛点

做移动端开发，有个一直存在的老问题：不是自己写的代码，就是不够了解。 业务逻辑散落在几十个文件里，接手别人的模块只能一点点翻，翻完过段时间又忘了。

后来开始用 AI 编码，老问题没解决，新问题又来了：

AI 每次对话都在重复搜索同样的代码。 问一次下单逻辑，Claude 要从头扫一遍 VC/VM/Cell，Token 哗哗烧。问完这次下次又忘了。
AI 写的代码越来越多，人对代码的"记忆点"更少了。 不是自己一行行敲的，过两周连入口在哪都想不起来。
几百个页面的 App，始终缺一张全局地图。 测试想知道"这个按钮点了会跳哪"，产品想确认"这个流程走到哪一步"，都得去翻代码或者拉开发问。

方案：App Atlas

于是我做了 App Atlas ------ 一个把 App 每一屏的 UI 结构、交互热区、跳转关系和业务逻辑，以「可视化地图」形式呈现的工具框架。

核心思路：

AI Agent 自动采集：把项目丢给 Claude Code / Kiro，一句"收集下单页"，它就读源码、生成结构化数据
一次采集，永久复用：生成的数据是结构化 JSON + Markdown，AI 下次直接读，不用重新扫代码
纯本地、零依赖：不需要 npm install，不需要构建，不上传任何代码到云端

效果演示

这个工具已经在我手上的实际项目中跑了一段时间，收集了 50+ 模块、180+ 页面的业务逻辑。开源版本做了脱敏，去掉了所有业务数据，只保留了通用框架 + 一套 Demo 数据（模拟一个 IM 类 App 的 Chat / Contacts / Discover / Me 四个模块），方便大家体验和理解：

在线体验 ：innepeace.github.io/app-atlas/

可以点点看：

左侧导航切换页面
中间蓝色虚线框是可点击热区，点了会跳到目标页
橙色框是多分支热区，点了弹出选项
右侧是该页面的完整业务逻辑（Mermaid 流程图 + 触发链 + 业务规则）

它能解决什么

场景	之前	用了 App Atlas
AI 理解业务	每次从头搜代码，10000+ token	直接读 manifest，几百 token
新人上手	问同事 / 翻代码 / 看过时文档	打开地图，点哪看哪
测试覆盖	凭经验猜有哪些分支	每个热区的分支一目了然
产品确认逻辑	拉开发开会	自己看流程图
代码记忆	AI 写完就忘	逻辑留痕，随时可查

怎么用

bash 复制代码

git clone https://github.com/innepeace/app-atlas.git my-app-atlas
cd my-app-atlas

# 配置你的 iOS/Android 项目路径
cp atlas.config.example.json atlas.config.json
# 编辑 sourceProject 字段

# 启动
node tools/serve.mjs 37421
open http://127.0.0.1:37421/web/

然后让 AI Agent 开始收集：

scss 复制代码

你：收集 trade 模块的下单页
AI：(读源码 → 分析 VC/VM → 生成 manifest.json + logic.md → 完成)

也可以手动写 manifest.json + logic.md，格式见 README。

技术特点

零运行时依赖：纯 ES Modules，Node.js 原生跑，浏览器原生跑
零构建步骤：没有 webpack / vite / turbo，clone 了直接用
纯本地部署：数据不出内网，适合金融、医疗等对安全敏感的团队
AI Agent 友好：结构化 JSON 天然适配 LLM 读取，附带完整的 AGENTS.md 工作手册
支持截图 + 热区：拖入真机截图，自动关联可点击区域

目前的局限

诚实说，这个项目还在早期：

主要针对原生 iOS/Android App，Web/小程序等还没适配
采集质量取决于 AI 对源码的理解能力
对非页面级流程（后台任务、推送链路）的表达还不够好

所以非常欢迎大家 Fork / Issue / PR，一起完善。

链接

GitHub ：github.com/innepeace/a...
在线 Demo ：innepeace.github.io/app-atlas/

如果觉得有用，欢迎 ⭐ Star 支持一下，也欢迎提 Issue 交流想法。

非常欢迎大家 Fork / Issue / PR，一起完善