【More than Coding】用 AI Agent 从零制作杂志风交互式电子书

SOLO挑战赛专区
,
1

用 AI Agent 从零制作杂志风交互式电子书

本文记录了我使用 SOLO AI Agent（下文简称"SOLO"）将课程 PPT 和文档转化为杂志风交互式电子书的完整过程。从原始材料到最终成品，全程通过自然语言对话完成，无需手写任何 HTML/CSS/JS 代码。

一、项目背景与目标

我有一门课程有很多教研资料，包含 7 个 PPT 文件（共 346 张幻灯片） 和 10 个 Markdown 教学文档，涵盖 Arduino 嵌入式开发、传感器技术、物联网应用等内容，一直想整理成更适合学生的资料。另外，有很多科普资料也想给整理出来供学生学习。

痛点：

  • PPT 文件体积大、不易分享，学生查看需要安装 Office

  • 内容分散在多个文件中，知识点之间缺乏关联

  • 传统 PDF 电子书是线性阅读，无法快速定位某个具体知识点

目标：

  • 将所有内容整合为 可部署到网站的交互式电子书

  • 每个知识点独立成页，支持快速跳转

  • 包含知识点字典（A-Z 索引）和可展开的知识脑图

  • 杂志风排版，阅读体验好，手机也能看

二、SOLO 是什么？

SOLO 是一个 AI Agent 平台，它不仅能聊天回答问题，还能直接操作文件系统、运行代码、浏览网页。简单来说，你可以把它理解为一个"能干活的 AI 助手"。

与传统 AI 聊天的核心区别：

| 对比项 | 传统 AI 聊天 | SOLO Agent |

|--------|-------------|------------|

| 代码执行 | 只能给你代码片段，你自己运行 | 直接在沙箱中运行，返回结果 |

| 文件操作 | 无法操作你的文件 | 可以读取、创建、编辑文件 |

| 迭代修改 | 你复制代码→修改→运行→反馈 | 它自己修改→运行→验证→继续 |

| 多步骤任务 | 每步都需要你手动介入 | 自动规划、自动执行、自动验证 |

三、完整工作流程

整个项目分为 5 个阶段，全程通过自然语言对话驱动：

阶段 1：资料整理 → 生成大纲（1 轮对话）

我的指令：

“这个文件夹是《电子信息系统认知与实践》课程的教学PPT、文档和示例代码，准备把这些资料转换为网站的资料，形成一个电子书，请先帮我撰写详细的大纲，markdown格式。”

SOLO 做了什么：

  1. 自动扫描文件夹，发现了 7 个 PPT 和 10+ 个 Markdown 文件

  2. 启动多个子 Agent 并行读取所有文件内容（346 张幻灯片 + 10 个文档）

  3. 分析内容结构，规划出 6 大篇、18 章、5 个附录 的完整大纲

  4. 生成 电子书大纲.md 文件

输出：一份结构化的 Markdown 大纲文件

阶段 2：补充内容 → 详细大纲（1 轮对话）

我的指令：

“根据总大纲，给出第一篇-第六篇的详细大纲，除PPT内容外，搜索相关博客、特别是电子设计竞赛的相关内容，补充必要的内容。大纲中详细给出文字是来自哪个PPT或者哪个网页链接。”

SOLO 做了什么：

  1. 为每篇生成详细大纲，标注每个知识点的来源（PPT 文件名/页码）

  2. 自动联网搜索补充内容（如 ESP8266 模组对比、状态机设计模式等）

  3. 用【补充】标签标记新增内容

  4. 生成 6 个独立的 Markdown 文件

输出：6 个详细大纲文件，每个知识点都有来源追溯

阶段 3：初版电子书 → 工业风网页（2 轮对话）

我的指令：

“帮我先完成目录网页和第三-第六篇的电子书网页的设计和实现，要求工业风格、知识点之间有链接、语句有示例代码，风格统一，纯HTML格式便于部署网站。”

SOLO 做了什么：

  1. 设计了一套工业风 CSS 设计系统（暗色主题 + 橙色强调色）

  2. 为每个知识点生成独立的 HTML section，包含代码块、表格、来源标签

  3. 实现知识点之间的交叉链接

  4. 生成 style.css + 6 个 HTML 页面 + 1 个目录页

遇到的问题：第一次尝试用 Python 脚本生成时，因 f-string 嵌套三引号导致语法错误。SOLO 自动切换方案，改为直接创建 HTML 文件，成功解决。

输出：7 个 HTML 文件（1 目录 + 6 篇内容），工业风设计

阶段 4：杂志风重构 → 单页电子书（3 轮对话）

我的反馈：

“当前页面太长，每一页面的内容太多，能否使用杂志风 PPT 的 skill，新建另一个版本的电子书，最好是一个 HTML 包括所有内容，但是要求每一页面集中讲解一个问题，除常规目录外，完成一个知识点字典（知识点和链接）、还有一个多层的脑图（可以动态展开，知识点有链接）。”

SOLO 做了什么：

  1. 先做了一篇（第三篇）作为示范

  2. 设计了杂志风 CSS 样式系统（暖色调 + 衬线字体 + 卡片式布局）

  3. 将 96 个知识点拆分为 96 个独立"页面"（HTML section）

  4. 实现了三个核心功能：

  • 知识脑图：纯 CSS+JS 可展开/折叠树形结构，叶子节点链接到知识点

  • 知识点字典：按章节分组索引 + 实时搜索过滤

  • 页内导航：每个知识点页面底部有"上一页/下一页"按钮

  1. 自动验证 HTML 结构（发现并修复了 ID 重复、悬空链接等问题）

输出：part3-magazine.html（206 KB，96 个知识点页面）

阶段 5：批量生成 → 全书完成（1 轮对话）

我的指令：

“修改脚本完成其他篇的电子书，并建立知识点字典（知识点和链接）、以及一个多层的脑图（可以动态展开，知识点有链接）。”

SOLO 做了什么：

  1. 分析了所有 6 篇大纲的结构差异（如部分篇有"本章实验"无编号标题）

  2. 修改 Python 脚本，增加自动跳过非知识点 section 的逻辑

  3. 批量生成 6 个篇 HTML 文件

  4. 生成总索引页 index.html，包含：

  • 各篇导航卡片（6 张卡片，点击跳转）

  • 全书知识脑图（6 篇根节点，317 个叶子节点，链接到各篇页面）

  • 全书知识点字典（317 条，带 P1-P6 彩色标签，支持跨篇搜索）

输出：7 个文件，总计 317 个知识点，总大小约 1 MB

四、最终成果一览

文件结构


ebook-magazine/

├── index.html # 总索引页（243 KB）

├── part1-magazine.html # 第1篇 电子系统基础（110 KB，47 个知识点）

├── part2-magazine.html # 第2篇 电路设计与PCB（128 KB，48 个知识点）

├── part3-magazine.html # 第3篇 嵌入式开发基础（180 KB，87 个知识点）

├── part4-magazine.html # 第4篇 传感器与数据采集（138 KB，44 个知识点）

├── part5-magazine.html # 第5篇 输出控制与显示（124 KB，46 个知识点）

└── part6-magazine.html # 第6篇 物联网应用（118 KB，45 个知识点）

核心功能

| 功能 | 说明 |

|------|------|

| :open_book: 杂志风排版 | 暖色调配色、衬线字体标题、卡片式布局、渐变封面 |

| :brain: 知识脑图 | 多层可展开/折叠树形结构，点击:link:跳转到知识点 |

| :closed_book: 知识点字典 | 按篇分组索引，实时搜索过滤，P1-P6 彩色标签 |

| :magnifying_glass_tilted_left: 三层搜索 | 顶部导航 + 侧边栏搜索 + 字典搜索 |

| :mobile_phone: 响应式设计 | 手机/平板/桌面自适应，汉堡菜单 |

| :keyboard: 键盘导航 | 方向键翻页 |

| :printer: 打印支持 | 自动分页，隐藏导航 |

| :link: 跨篇链接 | 总索引页脑图和字典链接到各篇具体知识点 |

技术特点

  • 纯 HTML/CSS/JS：零依赖，无需构建工具、无需服务器

  • 单文件部署：每个 HTML 文件完全独立，直接打开即可使用

  • 317 个独立页面：每个知识点一个 section，通过锚点导航

  • 内联样式：CSS 和 JS 全部内联，一个文件就是完整应用

五、使用 SOLO 的关键技巧

1. 分阶段推进，先做示范再批量

不要一开始就要求"做完所有内容"。正确的做法是：


❌ "帮我做6篇电子书" → 范围太大，容易质量不一致

✅ "先做第三篇做示范" → 确认风格和质量

✅ "按这个模板做其他5篇" → 批量复用，效率高

2. 给明确的结构化指令

SOLO 对结构化指令的理解能力远强于模糊描述：


❌ "帮我做个好看的电子书"

✅ "杂志风排版，每个知识点独立成页，包含知识脑图（可展开）和知识点字典（可搜索）"

3. 利用"反馈循环"持续优化


第一版 → "页面太长" → 第二版（每页一个知识点）

第二版 → "还需要脑图和字典" → 第三版（完整功能）

第三版 → "做其他5篇" → 最终版（全书完成）

4. 让 AI 自动验证

SOLO 会自动检查生成的代码：

  • 发现 HTML ID 重复 → 自动修复

  • 发现悬空链接 → 自动移除

  • Python 语法错误 → 自动切换方案

5. 善用子 Agent 并行处理

当需要读取大量文件时，SOLO 会自动启动多个子 Agent 并行处理。例如读取 7 个 PPT 文件时，同时启动多个 Agent 分别处理，大幅缩短等待时间。

六、这种方式的优势

对比传统开发方式

| 对比维度 | 传统开发（人工） | SOLO Agent 辅助 |

|----------|----------------|----------------|

| 开发周期 | 1-2 周 | 2-3 小时（对话时间） |

| 代码量 | 需手写 2000+ 行 HTML/CSS/JS | 零手写代码 |

| 设计能力 | 需要前端设计经验 | AI 自动生成专业级设计 |

| 迭代速度 | 修改→预览→反馈，每轮数分钟 | 对话即修改，秒级反馈 |

| 内容整理 | 手动从 PPT 复制粘贴 | AI 自动解析、结构化 |

| 跨文件链接 | 手动维护，容易出错 | AI 自动生成和验证 |

核心价值

  1. 降低技术门槛：不需要会 HTML/CSS/JS，不需要会 Python，只要能描述需求

  2. 极致效率：从 346 张 PPT 到 317 个知识点的交互式电子书，实际对话时间约 2-3 小时

  3. 质量保证：AI 自动进行代码验证、链接检查、结构一致性检查

  4. 可迭代：随时可以要求修改风格、增加功能、调整内容

  5. 可复用：生成脚本 gen_magazine.py 可以复用于其他课程，只需替换大纲文件

七、适用场景

这种方式特别适合以下场景：

  • :books: 教材数字化：将 PPT 课件转化为可交互的在线教材

  • :memo: 知识库建设：将分散的文档整合为结构化的知识体系

  • :graduation_cap: 课程网站：快速搭建课程内容展示网站

  • :open_book: 技术文档：将 API 文档、使用手册等转化为易读的网页

  • :trophy: 竞赛资料：整理电子设计竞赛等的技术资料

八、总结

通过 SOLO AI Agent，我用 5 轮对话、零手写代码，完成了从 346 张 PPT 到 317 个知识点交互式电子书的完整转换。整个过程的核心不是"让 AI 写代码"，而是"用自然语言描述需求，让 AI 理解并执行"。

关键 takeaway：

不要把 AI 当搜索引擎用（“帮我查一下 XXX”），而是当协作伙伴用（“帮我做 XXX”）。给它足够清晰的上下文和分阶段的目标，它能完成远超你想象的工作量。

本文使用 SOLO AI Agent 辅助撰写。