开发者用Claude Code原生功能实现逻辑树生成功能

なん…だと…。我让 Claude Code 整理论点，结果侧边栏弹出了一份咨询风格的逻辑树。只用标准功能就能做到这一点，看似不起眼实际非常厉害。

NotebookLM 也能做树状图，但它可以给假设/事实配上依据做颜色区分，还能用框选标注给出修改指示。能按自己喜好添加功能，这一点是它的优势。实现原理和可复现提示词如下↓

实现原理很简单，本质就是「一个 JSON 文件」。整体结构只有这三部分：
・写了逻辑树内容的 JSON
・给它提供服务的小型本地服务器
・用原生 HTML/CSS 做的展示页面

没有用到任何额外库，也没有调用外部服务。它只是把这个页面放到 Claude Code 原生自带的预览展示里而已。

核心要点是 JSON 的定义方式。每个节点的结构如下：
{ "nodeId": "node-new-customers", "parentId": "node-customers", "label": “新規購入者 ▲24%”, "claimType": "fact", "decompositionAxis": “購買顧客数の構成”, "validationMetric": “四半期新規購入者数”, "evidenceRefs": [“顧客コホート｜新規 4.8万人／計画 6.3万人”] }

如果只有标签和父子关系，那就是普通层级图。它能像专业逻辑树一样的原因，全在剩下的几个字段里：
・claimType：区分是已确认事实还是未验证假设，对应空心和实心两种颜色区分
・decompositionAxis：该层级是按什么维度拆分的，同一父节点下的子节点维度统一，粒度不会混乱
・validationMetric：需要验证什么才能确认结论对错
・evidenceRefs：对依据数据的引用，鼠标悬停在事实节点上就会显示

我给 AI 定好了规则：「同一层级统一拆分维度」「没有依据的主张不能标记为事实」，让 AI 在填充这些字段的同时生成逻辑树。

修改的时候也不需要让它重新生成整棵树，只需要让它返回「修改这个节点」「在这里添加子节点」的增量修改，检查它有没有改动指定范围外的内容、有没有把无依据的假设擅自升级成事实之后，再应用修改。如果违规就不会做任何改动。

示例视频里是营收分析，但它本质只是一个「拆解问题的树」。整理论点、深挖问题原因，都可以直接用这个框架。只要开头写一行「你想要明确什么问题」，AI 就能始终不偏离主题完成拆解。

顺便说，这套框架本身也是让 Claude Code 写出来的。为了方便大家测试，我把生成单文件 HTML 简化版的提示词贴在下面。

它更像是一个供你打磨的初稿，而不是一步到位出最终成品，你可以给生成结果提要求慢慢迭代。

仅供参考。

---------以下是提示词---------
请你把以下内容做成一个单独的 HTML 文件，不要使用外部库，完成后用浏览器预览打开。

## 要做的东西
将「XXXXXXXXXX」（←这里替换成你自己的主题）拆解成逻辑树，并渲染结果的 HTML 文件。

## 数据格式
逻辑树以嵌入 HTML 的 JSON 保存，每个节点需要包含以下字段：
- `nodeId` / `parentId`：维护父子关系
- `label`：简短的主张内容
- `claimType`：已确认事实填 `fact`，未验证假设填 `hypothesis`
- `decompositionAxis`：该层级按什么维度拆分
- `validationMetric`：需要验证什么才能确认结论对错
- `evidenceRefs`：对依据的引用，没有留空即可

## 拆解规则
- 同一父节点下的子节点维度统一，数量为 2~4 个，避免重复和遗漏
- 无法确认依据的主张必须标记为 `hypothesis`
- 最多到 4~5 层，末端停留在可以写出「验证方法」的粒度

## 视觉要求
- 黑色背景，层级从左向右展开，用曲线连接节点卡片
- `fact` 是黑底白框，`hypothesis` 按层级区分填色，附带图例
- 支持拖动平移画布，Ctrl+滚轮缩放画布