Claude 进阶用法：把复杂业务流程拆解成可看可用的结构化数据

山中八月

【Claude 进阶用法：把复杂业务流程拆解成可看可用的结构化数据】


快速阅读：通过 Prompt 让 Claude 将复杂的应用流程提取为 HTML 可视化页面与 JSON 数据文件。这不仅能帮人类理清逻辑，更重要的是为后续的 AI 开发提供了一份结构化的“上下文地图”，防止模型在长对话中迷失。

要把一个复杂的系统交给 AI 处理，最忌讳的是把成千上万行代码一股脑塞给它，然后指望它能自己理清逻辑。这就像是给一个初学者一堆零件，却没给说明书，最后大概率会得到一堆乱码。

有个很有意思的做法：让 Claude 把应用里的各个组件、包之间的交互流程，直接输出成一个单页 HTML 页面，并配上一份 JSON 数据。HTML 用来给人看，点点按钮就能看到数据是怎么流转的；JSON 则留给 AI 看。

这本质上是在为 AI 构建一个“内存映射”。有网友提到，这种结构化的 JSON 能像约束器一样，防止 LLM 开始胡编乱造。当你在开发新功能或修 Bug 时，把这份 JSON 喂给它，它就拥有了全局视角，不再需要去翻阅那些冗长的上下文。

这种做法让软件开发进入了一个“分形”阶段：Claude 写的代码，由 Claude 整理成文档，这份文档又成了下一个 Claude 工作的基石。

不过也有声音在质疑，如果设计本身就很烂，这种做法是不是在给“垃圾代码”打补丁？

更有意思的思考在于，如何保证这份“地图”不失效。代码每天都在变，如果 JSON 没跟上，它就会变成一张过时的旧地图，误导 AI 走向歧途。

也许未来的开发流程不再是“写代码”，而是“维护状态”。就像有网友说的，保持一个实时的 agent-state.json，记录当前步骤和工具输出，这比单纯的聊天记录更能让 AI 保持清醒。

如果把这个流程自动化，配合 React Flow 变成一个实时运行的执行体，会发生什么？

x.com/DaveJ/status/2053867258653339746