knowledge-map

knowledge-map · 知识地图生成

把一个主题做成像「一人公司最强 skills 组合」那样的高信息密度全景图：深色背景、彩色卡片网格、阶段流程条、实战工作流、底部建议框。输出是一个自包含单文件 HTML，双击即可在浏览器打开，可直接截图导出为长图/海报。

框架源文件：skill 内置 assets/template.html，随 skill 分发、自包含、零外部依赖。模板内置渲染引擎，你只需填一个 DATA 配置对象，视觉风格（配色、排版、列数自适应）由框架统一保证。

---

输入收集

• 必填：主题（如「AI 副业」「前端工程师学习路线」「大模型应用开发全景」）。
• 可选：副标题/定位语、想覆盖的维度清单、配色主题（dark / midnight / ink，默认 dark）。

只给主题就够了——不要反问用户"你想分哪几个维度"。本 skill 的职责就是替用户把结构规划好。只有当用户主动给了维度清单时才采用其结构。

---

生成流程

第 1 步：3-5 轮知识调研（核心，不可跳过）

知识地图的价值在于信息密度和准确性，凭空编造的条目会让地图沦为空架子。所以动手画图前，必须用 WebSearch（必要时配合 WebFetch 读取关键页面）对主题做 3-5 轮递进式调研。每轮聚焦一个目的，前一轮的发现指导后一轮的检索词：

1. 第 1 轮 — 框架/链路：这个主题的核心是什么？业内通常分成哪几个阶段/维度?有没有公认的流程或框架？目的是定出主网格的 4-6 个列（维度）和顶部阶段流程条。
2. 第 2 轮 — 维度填充：针对第 1 轮定出的每个维度，搜索该维度下具体有哪些工具/技能/步骤/概念/资源。目的是填满每列的条目（每列建议 3-5 条）。
3. 第 3 轮 — 实战组合：这个领域有哪些公认的"打法/工作流/学习路径/最佳实践组合"？目的是填底部的实战工作流面板。
4. 第 4-5 轮 — 校验与补强（按需）：核对术语是否准确、是否有遗漏的重要维度或过时信息、有没有更权威的提法；补充"使用建议 / 适用场景 / 核心优势"等底部建议框内容。

调研约束：

• 用 WebSearch 实打实地查，不要凭记忆编。优先权威来源（官方文档、领域头部博客、知名从业者），对过时信息保持警惕，使用用户环境当前日期判断时效。
• 三轮的递进关系就是 框架 → 维度 → 打法：先定骨架，再填血肉，最后补实战组合，缺一不可。

第 1.5 步：汇报维度清单，等用户确认（硬性检查点，不可跳过）

调研完成后先停下来，不要直接画图。用简洁的列表向用户汇报规划结果，让用户有机会增删调整：

主题定位：<一句话>
配色主题：<dark / midnight / ...>
计划维度（主网格 N 列）：
  1. <维度名> —— <该列将放哪些条目，列出条目短名>
  2. ...
阶段流程条：<N 个阶段>
实战工作流：<有/无，若有列出工作流名>
增强标签 / 建议框：<有/无>

然后明确问一句「这个维度规划 OK 吗？需要调整哪里？」收到用户确认（或调整意见处理完）后，才进入第 2 步生成。 只有当用户在最初就明说「不用确认/直接出图/一步到位」时，才跳过本检查点。

第 2 步：组织内容到 DATA 结构

把调研结果映射到模板的 DATA 对象（字段见下方「DATA 数据契约」）。要点：

• 维度列数 4-6 列最佳，过多会拥挤、过少显单薄。
• 条目用「短名 + 一行小字说明」：短名是关键词/工具名/概念名，说明是 4-12 字的白话注解。
• 命名规则：英文工具名、产品名、技术术语、API/函数名一律保留英文原文（如 Next.js、LangChain、pgvector、seo-audit），不要硬译成中文；说明小字一律用中文。标题、副标题、维度名、流程文案、建议框等叙述性文字也用中文。这样既专业可检索，又对中文读者友好。
• 阶段流程条与主网格的列通常一一对应，但流程强调"先后顺序"，网格强调"内容清单"。
• 工作流、标签区、建议框是可选模块，内容不足时可设为 []，框架会自动跳过该区块。
• 文案去 AI 腔：说人话、具体、有信息量，避免"综上所述""值得注意"等套话。

第 3 步：生成 HTML 文件

1. 读取 assets/template.html。
2. 用组织好的内容整体替换模板中 const DATA = {...}; 这一段（保留前后的注释和渲染引擎不动）。
3. 设置 DATA.theme 为用户选的主题（默认 dark）。
4. 保存到当前工作目录，命名 knowledge-map-<主题简写>.html（主题用简短英文或拼音，避免空格和特殊字符）。