九天-知识卡片3.0

概述

知识卡片

概述

将用户提供的主题、概念或内容，检索、整合并生成一张精美的 HTML 知识卡片。支持 6 种版面模板（经典卡片/列表清单/左右双栏/信息图/时间线/对比表），自动适配内容类型与版面风格，支持浏览器打开或截图分享。

触发方式：不限于说"知识卡片"，以下表达均能触发——

• 直接说："知识卡片"、"做成卡片"、"知识卡"
• 口语化："做张卡"、"来张图"、"帮我浓缩"、"来个速览"、"一页纸总结"、"概念图卡"、"做张小卡片"、"浓缩一下"
• 意图触发：你想把某个概念"总结/整理/浓缩/提炼"+"做成图/卡片/一页纸/可视化"——只要表达了这个意图，就能触发

版面模板选择指南

生成卡片前，先根据内容类型选择最合适的一个版面：

选择规则：未指定→推荐最合适的一个并告知用户；4+ 并列项→列表清单或双栏；A vs B→对比表；含时间节点→时间线；其余→经典卡片。

效果速览

生成前先看效果。以下是 6 种模板的视觉特征和参考示例：

卡片统一视觉特征：暖白底（#f5f3ed），白底卡片 + SVG 噪点纹理（纸张质感），渐变配色顶栏/编号色块，悬浮微动效，适配手机屏宽（375px）。

如何查看示例：用浏览器打开 assets/examples/ 下对应的 HTML 文件，即可看到实际渲染效果。如果示例文件不存在，用 preview_url 工具直接预览工作流中生成的任意卡片。

Phase 1：内容理解

收到触发后，判断用户意图:

• 明确主题（如"知识卡片：第一性原理"）→ 直接进入 Phase 2
• 大段内容（如粘贴文章/笔记）→ 提取核心概念，确认主题和版面
• 没给内容（如只说"知识卡片"）→ 询问主题；同时根据主题自动推荐版面
• 多元素/并列项（如"5大原则""7种手法"）→ 自动选列表清单或双栏版面

确认门: 如果主题不够明确（如过于宽泛或模糊），用一句话向用户确认：

"我理解你想制作关于 [X] 的知识卡片，重点是 [Y]，对吗？"

失败模式:

🔴 CHECKPOINT · 🛑 STOP：主题和版面确认后，必须等用户说"对"或"就这样"才能进入 Phase 2。

Phase 2：信息增强

根据主题内容，主动补充深度信息:

1. 优先搜索 — 使用 WebSearch(query="第一性原理", topic="general") 获取该主题的最新解释、权威定义（最多3个结果）
2. 知识库检索 — 如果用户有相关知识库，使用 mcp__tencent-docs__smartcanvas.read 或对应的知识库MCP工具查找已有笔记
3. 交叉验证 — 至少从 2 个来源获取信息，确保卡片内容准确
4. 内部知识兜底 — 如果搜索工具不可用，直接使用内部知识生成，并在文末标注"基于通用知识，未经实时验证"

失败模式:

🔴 CHECKPOINT · 🛑 STOP：Phase 2 信息增强完成，核心定义和要点整理完毕后，向用户展示并确认再进入 Phase 3。

信息提取原则：

• 核心定义：一句话本质解释（第一性原理视角）
• 关键要点：3-5 条最具洞察力的要点
• 底层逻辑：为什么重要、底层机制是什么
• 应用场景：1-2 个具体可落地的场景
• 关联概念：2-3 个相关/对立概念
• 清单类：每项编号+别名+一句话概括+3个关键词标签

Phase 3：结构编排

模板 1（经典卡片）：核心概念标题 → 关键要点 3-5条 → 底层原理段落 → 应用场景 1-3个 → 关联概念标签

模板 2（列表清单）：标题+一句话定义 → ① 名+别名+一句话概括+说明+标签 → ② ③ … → 关联概念+记忆口诀

模板 3（左右双栏）：结构同列表清单，.content { display:grid; grid-template-columns:1fr 1fr; gap:8px; }；奇数项最后一个 grid-column:1/-1 跨行居中

模板 6（对比表）：标题+副标题 → 对比维度列表（3-8行，每行：维度+A方+B方） → 结论段 → 关联标签

失败模式:

🔴 CHECKPOINT · 🛑 STOP：卡片 HTML 生成完毕，展示摘要后必须等用户确认再进入交付阶段。

内容质量标准：

• 每条要点必须独立、具体、有信息量
• 避免空泛描述（如"很重要"、"值得关注"）
• 优先使用类比、隐喻帮助理解
• 标注结论可信度（当前最佳解释 / 有争议 / 待验证）
• 清单类每项包含：编号+名称+别名+一句话概括+详细说明+3个关键词标签

Phase 4：HTML 生成

生成步骤

1. 判断是否使用模板文件：检查 assets/card-template.html 是否存在
2. 如果存在 → 注入占位符
3. 如果不存在 → 回退：内联生成完整 HTML（自行构建样式和结构，不依赖外部模板）
4. 按内容类型选配色主题
5. 按版面选择指南选布局结构
6. 写入文件并检测命名

占位符（模板注入）：{{TITLE}} / {{SUBTITLE}} / {{KEY_POINTS}} / {{PRINCIPLE}} / {{APPLICATIONS}} / {{RELATED}} / {{THEME_COLOR}} / {{DATE}} / {{SOURCE}}

内联生成要点（模板不存在时回退，必须包含以下完整结构）：

经典卡片 HTML 骨架：

<!-- body: 背景 #f5f3ed 暖白底，卡片用 SVG 噪点纹理增强纸张质感 -->
<div class="card-container" style="position:relative">
  <!-- ::before 噪点纹理（必须） -->
  <div class="top-bar" style="background:linear-gradient(135deg,{{THEME_COLOR}},...)"></div>
  <div class="header"><span class="tag">{{TAG}}</span><h1>{{TITLE}}</h1><p class="subtitle">{{SUBTITLE}}</p></div>
  <div class="content">
    <section class="section"><h2>关键要点</h2><ul>{{KEY_POINTS}}</ul></section>
    <section class="section"><h2>底层原理</h2><p>{{PRINCIPLE}}</p></section>
    <section class="section"><h2>应用场景</h2><p>{{APPLICATIONS}}</p></section>
    <section class="section"><h2>关联概念</h2><p>{{RELATED}}</p></section>
  </div>
  <div class="footer-bar"><span>{{DATE}}</span><span>{{SOURCE}}</span></div>
</div>

左右双栏（列表清单基础 + Grid）：

.content { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.method-card:last-child { grid-column:1/-1; } /* 奇数项居中 */

列表清单（每项结构）：

<div class="method-card">
  <div class="num-badge" style="background:#C17817">①</div>
  <div class="method-name">要点名称 <span class="alias">别名</span></div>
  <div class="method-summary">一句话概括</div>
  <div class="method-detail">详细说明</div>
  <div class="tags"><span class="tag">标签1</span><span class="tag">标签2</span></div>
</div>

全局 CSS：body{background:#f5f3ed} → 暖白底，去掉花哨渐变。.card-container{width:375px;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.06);position:relative}.card-container::before → SVG 噪点纹理（opacity:0.03），纸张质感。.card-container>*{position:relative;z-index:1} .top-bar{height:6px;background:linear-gradient(90deg,{{THEME_COLOR}},...);}浅灰底、边框统一用 rgba(0,0,0,0.02) / #e8e5df（暖灰），不用 #f7fafc / #e2e8f0（冷灰）。

编号色盘（模板 2、3）：1=#C17817橙, 2=#EA5452红, 3=#2B8A3E绿, 4=#0F6CBD蓝, 5=#722ED1紫, 6=#08979C青, 7=#E6A817金黄, 8+循环

文件命名: knowledge-card-{主题关键词}.html，主题词用英文或拼音，空格换 -。

失败模式:

Phase 5：交付确认

生成完成后:

1. 强制预览：立即调用 preview_url 工具在浏览器中展示卡片渲染效果——用户必须先看到实际效果
2. 向用户展示卡片内容摘要（文本形式辅助预览）
3. 提供 HTML 文件下载链接
4. 询问是否需要调整

调整规则:

• 小修改（改文字/换颜色）→ 直接编辑 HTML 文件
• 大修改（换结构/加模块/换版面）→ 重新生成

调整失败兜底:

HTML生成失败兜底:

工作流示例

示例 1（经典卡片）：用户说"知识卡片：第一性原理"→ Phase 1：确认主题→ Phase 2：WebSearch 获取权威定义+交叉验证→ Phase 3：选经典卡片模板→ Phase 4：深蓝主题内联生成HTML→ Phase 5：preview_url 展示→ 用户满意交付

示例 2（左右双栏）：用户说"知识卡片：QC七大手法"→ Phase 1：识别7项并列元素→ Phase 2：WebSearch补充每项说明→ Phase 3：选左右双栏（品质蓝）→ Phase 4：Grid 布局+编号色盘+奇数末项居中→ 生成 knowledge-card-qc.html → Phase 5：preview_url 展示

示例 3（降级场景）：用户说"知识卡片：量子计算"→ Phase 2：WebSearch 超时→ 回退内部知识，标注"基于通用知识，未经实时验证"→ Phase 4：模板文件不存在→ 内联生成→ Phase 5：preview_url 成功→ 交付

反例黑名单

以下行为会导致质量下降，严格禁止：

质量自查

生成卡片后快速检查:

• [ ] 核心定义是否一句话能说清本质
• [ ] 关键要点是否 3-5 条且各有信息量
• [ ] 底层原理是否解释了"为什么"
• [ ] 应用场景是否具体可落地
• [ ] HTML 文件是否能正常打开
• [ ] 是否已用 preview_url 展示渲染效果
• [ ] 下载链接是否有效
• [ ] 是否有反例黑名单中的行为
• [ ] 版面模板是否与内容类型匹配

资源文件

重要：Phase 4 模板不存在时走回退流程（内联生成），不能假设模板一定存在。