背景
最近因为工作原因，需要恶补金融领域相关知识，按照常识先找了一些入门书籍看，例如《极简央行课》，书籍本身并不复杂，但是文本描述太多了，直接阅读成本较高，因此想到了用 AI 来辅助阅读 最终效果可见网站：https://jjyhk.book.peifeng.me/
示意图如下：
初尝试-AI对话
工具选择
第一步想着最简化尝试，选择的工具是 cherrystudio，原因如下：
- 可以设置epub 文件为知识库
- 方便调整测试不同提示词的效果
- 如果需要输出html 或者 svg 也可以直接看到效果
提示词测试
v1：最简版
你是一个书籍阅读专家，精通各个领域的知识，尤其擅长将复杂知识用通俗易懂的语言进行提炼总结
评价
- 理解成本确实更低了
- 部分内容还是有些抽象，最好可以补充一些例子
v2：添加页面
你是一个教育学的专家，我会发送给你一本书的内容，请你用一个页面复述其中的知识，包含核心概念解释，各个概念之间的关系，其他需要补充的背景知识等等一系列你认为所需要的内容
复述的内容应该通俗易懂，要求没有专业知识的大学生也能明白，可以举一反三或者举例子等
页面可以用 html 输出，风格美观简洁，具有现代化审美
评价：
- 页面效果出乎意料的好，布局，颜色，文字样式都符合现代化审美，一眼看上去很有价值
- 内容还是有些复杂，很像是一句话重复说，理解门槛降低的还不够，分析主要原因是：
- 类比不恰当，影子银行比作集市，没太看懂里面的逻辑关系
- 各种解释工具还是太单一了，只有文本和表格，没有其他图形工具，例如思维导图，概念图等
- 修改也很麻烦，如果想要针对某个内容进行提问，再反馈到页面上，需要一个比较漫长的流程，并且 html 的前后一致性无法保证，纯抽卡
进一步-AI编程
到这一步突然想到一个新点子，如果要用 html 展示内容的话，为什么不直接做个前端项目呢？
好处有几个：
- 可以调用更多工具：例如思维导图，悬浮解释等等
- 方便部署公开
- html 样式一致性可以得到较好的保证，人也可以方便修改内容
工具选择
这里选择的是 windsurf，原因如下：
- 价格比 cursor 更便宜
- trae 总是排队，效率太低了
开发流程
产出文档，梳理原始需求
告诉 AI你的需求，让他梳理需求后产出 项目文档，md 格式，记录成文件，这样做的好处有几点
- 成熟的文档可以梳理信息，避免需求遗漏
- 记录成文件后，如果 AI 的工作不符合你预期，可以随时调整文件内容，然后重新开始，方便做调优测试
示例输入：
1. 我想要做一个前端项目，能把书籍里面复杂的内容转化为简单易懂的页面
2. 可以使用 ant design，保证样式一致性，降低开发成本
请你根据我的需求，输出一个完整的项目文档
示例输出
# 书籍可视化阅读系统项目文档
## 1. 项目概述
### 1.1 项目背景
当前大量专业书籍内容晦涩难懂，缺乏直观的可视化表达，使得没有专业背景的读者难以理解和吸收核心知识点。本项目旨在通过现代化前端技术，将书籍内容转化为直观、易理解的可视化网页。
### 1.2 项目目标
- 将复杂专业知识转化为通俗易懂的表达
- 通过多种可视化方式展示知识点及其关系
- 提供美观、直观的阅读体验
- 使非专业读者能够快速理解专业概念
## 2. 功能需求
### 2.1 核心功能
- **内容解析与重构**：解析书籍内容，提取核心概念和关系
- **知识可视化**：以多种形式可视化展示知识体系
- **内容通俗化**：将专业术语转化为易于理解的表达
- **知识关联**：展示各概念间的关系和层次结构
### 2.2 详细功能模块
1. **内容展示模块**
- 文本段落展示
- 关键概念突出显示
- 术语解释弹窗
2. **可视化模块**
- 思维导图展示知识结构
- 关系网状图展示概念关联
- 表格展示比较性内容
- 卡片式展示独立知识点
3. **交互模块**
- 点击概念查看详细解释
- 缩放/拖拽图表
- 切换不同可视化视图
## 3. 技术方案
### 3.1 技术栈选择
- **前端框架**：React.js
- **UI组件库**：Ant Design
- **可视化库**：
- Ant Design Charts (基础图表)
- react-flow (思维导图)
- G6 (关系网络图)
- **样式方案**：Styled Components + Ant Design主题定制
- **状态管理**：React Context API + Hooks
### 3.2 项目结构src/ ├── components/ # 通用组件 │ ├── Layout/ # 布局组件 │ ├── Visualization/ # 可视化组件 │ └── ContentDisplay/ # 内容展示组件 ├── pages/ # 页面组件 ├── services/ # 服务层 │ ├── parser/ # 内容解析服务 │ └── visualization/ # 数据可视化处理服务 ├── utils/ # 工具函数 ├── hooks/ # 自定义Hooks ├── contexts/ # 上下文管理 └── assets/ # 静态资源
### 3.3 数据流设计
1. 书籍内容输入 → 解析服务 → 结构化数据
2. 结构化数据 → 可视化处理 → 可视化视图
3. 用户交互 → 状态更新 → 视图更新
## 4. 界面设计
### 4.1 整体布局
- 左侧：导航和目录
- 中间：主要内容和可视化区域
- 右侧：相关概念和补充信息
### 4.2 配色方案
- 主色调：#1890ff (Ant Design 默认蓝)
- 辅助色：#52c41a (成功)、#faad14 (警告)、#f5222d (错误)
- 中性色：#262626 (文本)、#d9d9d9 (边框)、#f5f5f5 (背景)
### 4.3 交互设计
- 悬停效果：概念词汇悬停显示简要解释
- 点击效果：点击概念跳转至详细解释页面
- 拖拽效果：可视化图表支持拖拽调整
- 缩放效果：图表支持放大缩小
## 5. 开发计划
### 5.1 开发阶段
1. **准备阶段**（1周）
- 项目搭建
- 基础组件开发
- 数据结构设计
2. **核心功能开发**（2周）
- 内容解析模块
- 基础可视化组件
- 内容展示组件
3. **交互功能开发**（1周）
- 用户交互功能
- 状态管理实现
- 动画效果优化
4. **测试优化阶段**（1周）
- 功能测试
- 性能优化
- 浏览器兼容性测试
### 5.2 迭代计划
- **v1.0**：基础内容展示和简单可视化
- **v1.5**：添加思维导图和关系图
- **v2.0**：增强交互性和个性化功能
## 6. 项目风险评估
### 6.1 技术风险
- 复杂可视化组件性能问题
- 大型书籍内容解析效率
- 不同设备的兼容性问题
### 6.2 解决方案
- 采用懒加载和虚拟列表优化性能
- 分段处理大型内容
- 响应式设计和跨浏览器测试
## 7. 项目成果预期
### 7.1 预期效果
- 用户能够直观理解书籍的核心概念
- 通过可视化理解概念之间的关系
- 能够从多角度理解专业知识
### 7.2 评估指标
- 用户理解速度提升
- 概念关联记忆效果
- 用户满意度和使用频率
## 8. 后续扩展方向
### 8.1 功能扩展
- 添加个人笔记功能
- 集成搜索功能
- 支持多本书籍比较阅读
- 添加社区讨论功能
### 8.2 技术扩展
- 集成AI解析引擎
- 支持更多可视化类型
- 开发移动端应用
- 添加离线阅读功能正式开发
- 搭建基础环境，AI全程执行，扮演一个无情的命令行确认工具人
- 整理书籍内容，将 epub 格式的书籍按照章节复制文本内容，并保存为不同的文件，理由有几个：
- 上下文长度有限，无法一次性把一本书导入进去
- AI 总结的输出长度有限，一次性输入太多内容会导致很多知识点被遗漏，按照章节输入的长度刚刚好
- 方便不同章节进行调优
- 将书籍内容喂给 AI，要求他输出对应页面，并融合到前端项目中，示例效果如图所示：
经验总结
- 目前AI编程工具体验还是不太好，总是会出现联通异常的问题，不知道是个人梯子原因还是产品原因，如果真的想要做一个项目，最好三个应用（trae，windsurf，cursor ）都准备好
- 接 1，这也侧面证明了开发过程中积累文档是一个很重要的事情，包含不限于：
- 项目开始：需求文档，产品文档，readme
- 项目过程：开发计划，待办及实现情况，问题日志（出现的问题以及修复思路）
- 提交记录：git 提交内容，版本管理方便回溯到稳定版本
产品思考
从这个项目来看，如果把内容生成和页面布局都交给 AI 来处理还是有些勉强，页面或许能唬住人，但实际内容的逻辑性还是太差了
表达工具选择也很不好，例如表格和图片混杂使用，有些地方强行用思维导图来展示等等
最近 mcp 比较火，或者可以考虑做成类似 mcp 的形式，即
- 【我】先提前设定好有哪些表达工具，适合表达哪部分内容
- AI先思考好书籍内容如何使用工具进行表达
- 内容和工具选择好了之后，再构建网页进行展示