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（主题用简短英文或拼音，避免空格和特殊字符）。

第 4 步：自检与交付

生成后对照检查：

• 列数 4-6，每列条目数量大致均衡。
• 没有占位文本残留（如示例里的 trend-research 等，除非主题恰好相关）。
• 标题、副标题、页脚金句都已替换为本主题内容。
• 可选区块要么有真实内容、要么已置空（不留半截示例）。

交付时告诉用户文件路径，并提示：双击用浏览器打开，整页截图即可得到长图/海报；如需换配色可改 DATA.theme（dark/midnight/ink）。

DATA 数据契约

模板的 DATA 对象字段如下（flow/columns/workflows/advice/tags 的元素数量均可变，框架自适应排版；强调色按列顺序自动循环，无需手填颜色）：

const DATA = {
  theme: "dark",                    // dark | midnight | ink
  title: "主标题",                   // 必填
  subtitle: "一句话定位语",          // 可选

  flow: [                           // 阶段流程条，建议 5-6 个；不需要可设为 []
    { icon: "🔍", index: "1", title: "阶段名", desc: "阶段小字说明" }
  ],

  columnsHeading: "主网格区块标题",   // 可选
  columnsHeadingSub: "（副标题/计数）",// 可选
  columns: [                        // 主网格，建议 4-6 列
    { index: "1", title: "维度名", sub: "维度副标题", items: [
      { name: "条目短名", desc: "一行小字说明" }
    ]}
  ],

  tagsHeading: "增强标签区标题",      // 可选区块
  tagsHeadingSub: "",
  tags: [ { title: "标签名", sub: "小字" } ],   // 不需要设为 []

  workflowsHeading: "工作流区标题",   // 可选区块
  workflowsHeadingSub: "",
  workflows: [
    { title: "工作流名", flow: "A → B → C → D", steps: ["步骤1", "步骤2"] }
  ],

  advice: [                         // 底部建议框，建议 3 个；不需要设为 []
    { icon: "✅", title: "框标题", items: ["要点1", "要点2"] }
  ],

  footer: "🚀 页脚金句"              // 可选
};

字段细节见 references/design-system.md（视觉令牌、各区块定义、排版规则、新增配色主题的方法）。

示例触发

示例 1 输入：「帮我做一张『独立开发者从 0 到上线』的知识地图」 动作：3-5 轮调研独立开发的阶段（验证→开发→上线→增长→变现）、各阶段工具/技能、常见打法 → 汇报规划 → 生成 knowledge-map-indie-dev.html。

示例 2 输入：「把『RAG 应用开发』做成全景图，用 midnight 配色」 动作：调研 RAG 的核心环节（数据→切分→嵌入→检索→重排→生成→评估）、每环节主流方案 → 生成 theme:"midnight" 的 HTML。