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

innepeace
521 阅读3分钟

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

痛点

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

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

  1. AI 每次对话都在重复搜索同样的代码。 问一次下单逻辑，Claude 要从头扫一遍 VC/VM/Cell，Token 哗哗烧。问完这次下次又忘了。
  2. AI 写的代码越来越多，人对代码的"记忆点"更少了。 不是自己一行行敲的，过两周连入口在哪都想不起来。
  3. 几百个页面的 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 四个模块），方便大家体验和理解：

demo.gif

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

可以点点看：

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

它能解决什么

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

怎么用

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 开始收集：

你：收集 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，一起完善。

链接

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

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

avatar
文章
阅读
粉丝