课程学习助手

作者 admin

2026年11月6日 3 分钟阅读

0 0

下载地址

代码

https://www.zhengdianxue.com/wp-content/uploads/skills/org-1sdzqs7z--course-learning-assistant.zip

将提示词发送给你的 AI 安装该 skills

代码

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-1sdzqs7z/course-learning-assistant。

课程学习助手。将长文章/视频/课程等各种学习内容转化为精美的HTML知识卡片，帮助快速建立知识框架。适合家长辅导孩子、学生备考复习、职场人快速学习新知识。

阅读全文（展开查看完整说明）

概述

将长文章/视频/课程等各种学习内容转化为精美的HTML知识卡片，帮助快速建立知识框架。

核心定位

输入：长文章、视频、课程、教材等各种学习内容

输出：HTML格式的知识卡片（精美排版、可编辑、可保存为图片）

价值：

家长：帮孩子梳理学习内容，制作知识卡片
学生：快速建立知识框架，备考复习
职场人：快速掌握新知识，提升学习效率

核心流程

代码

1. 获取学习内容 → 2. 分析内容结构 → 3. 询问两个问题 → 4. 提取核心要点 → 5. 生成HTML卡片 → 6. 交付

第1步：获取学习内容

输入方式

方式A：提供链接

用户发送文章/视频链接
AI抓取内容（B站、公众号、学习平台等）

方式B：提供文件

用户上传PDF、Word、Markdown等文件
AI解析文件内容

方式C：直接提供内容

用户直接粘贴文本内容

抓取失败处理

如果链接需要登录，告诉用户"这个链接需要登录，请把内容复制粘贴给我"
如果是付费内容，引导用户自己提供内容

第2步：分析内容结构

识别内容类型

课程类（有章节结构）

特点：有明确的章节、模块、知识点划分
处理：提取章节结构，建立知识框架

文章类（长文章/教程）

特点：有观点、论证、案例
处理：提取核心观点、关键论据、重要案例

视频类（B站/YouTube等）

特点：有分P、时间轴、字幕
处理：提取核心内容、关键时间点

书籍类（PDF/电子书）

提取核心要素

课程/书籍类：

整体概览：这门课/这本书讲什么？
章节结构：有几章？每章讲什么？
核心概念：最重要的概念是什么？
学习路径：按什么顺序学最有效？

文章/视频类：

核心观点：作者想表达什么？
关键论据：为什么这么说？
重要案例：有哪些例子？
行动建议：读者该怎么做？

第3步：询问两个问题（必问！）

问题1：配色主题选择

必须询问用户选择哪种配色主题，不问不能继续！

提供以下8种主题供选择：

主题	适合内容	封面渐变	强调色
🌊 深海蓝	职场/商业/通用	#1a1a2e→#16213e→#0f3460	#0f3460
🌸 樱花粉	生活/情感/女性	#8B2252→#C71585→#FF69B4	#C71585
🍵 抹茶绿	自然/健康/读书	#1B4332→#2D6A4F→#40916C	#2D6A4F
🌙 暮光紫	科技/创新/设计	#2E1A47→#5B2C6F→#8E44AD	#5B2C6F
🔥 烈焰红	时政/军事	#7B0000→#B22222→#DC143C	#B22222
🍊 暖阳橙	美食/旅行/亲子	#7C3600→#CC5500→#E07C24	#CC5500
🖤 极简黑	极简/高端/商务	#0D0D0D→#1A1A1A→#2D2D2D	#1A1A1A
💎 薄荷青	学习/教育/知识	#004D40→#00796B→#26A69A	#00796B

示例对话：

AI：请选择配色主题：

🌊 深海蓝（职场/商业/通用）

🌸 樱花粉（生活/情感/女性）

🍵 抹茶绿（自然/健康/读书）

🌙 暮光紫（科技/创新/设计）

🔥 烈焰红（时政/军事）

🍊 暖阳橙（美食/旅行/亲子）

🖤 极简黑（极简/高端/商务）

💎 薄荷青（学习/教育/知识）

您选哪个？

问题2：是否需要备考路径

必须询问用户是否需要备考，不问不能继续！

示例对话：

AI：您是否需要备考？

如果是，我会生成"备考突击路径"卡片

如果否，我会跳过这张卡片，只保留"快速入门路径"和"深度学习路径"

需要备考吗？

第4步：提取核心要点

提取原则

全面性：提取所有值得记住的重点，不遗漏
精炼性：每张卡片只讲一个要点，不堆砌
可操作性：提供学习路径和方法建议

卡片类型

课程类卡片：

卡片1：课程概览
卡片2：课程结构
卡片3：核心概念
卡片4：学习方法
卡片5：快速入门路径
卡片6：备考突击路径（可选）
卡片7：深度学习路径
卡片8：避坑指南

文章类卡片：

卡片1：文章概览
卡片2：核心观点
卡片3：关键论据
卡片4：重要案例
卡片5：行动建议
卡片6：延伸思考

关键词提炼

每张卡片提炼2-5个🔑关键词，方便记忆

第5步：生成HTML卡片

排版要求（重要！）

正文区域的排版规则：

序号必须分行
- 所有带①②③序号的内容，每个序号单独一行
- 序号用主题色加粗显示
详细内容分行
- 序号后面的详细内容也要单独一行
- 用——开头（破折号）
关键词区域分行
- 每个关键词单独一行
- 用①②③标注

正确排版示例：

HTML

<div class="card-body">
  <span class="line"><span class="line-num">① 模块一：</span>占卜基础认知（3课）</span>
  <span class="line">——占卜的层次、正确的占卜观、占卜原理</span>
  <span class="line"><span class="line-num">② 模块二：</span>牌意理解方法论（5课）</span>
  <span class="line">——图案原型拆解、牌意把握角度、正逆位理解</span>
</div>

<div class="card-key">
  <div class="label">🔑 关键词</div>
  <div class="items">
    <span class="item">① 掌握实用技能</span>
    <span class="item">② 理解底层逻辑</span>
    <span class="item">③ 学会独立分析</span>
  </div>
</div>

CSS样式

CSS

.card-body .line { display: block; margin: 6px 0; }
.card-body .line-num { color: var(--accent); font-weight: 600; }
.card-key .item { display: block; margin: 4px 0; padding-left: 8px; }

保存为图片功能（重要！）

按钮功能：

按钮文字：💾 保存为图片
点击后：将卡片转换为PNG图片，自动下载

技术实现：

引入html2canvas库：<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
保存时临时隐藏底部按钮栏
使用html2canvas将卡片转换为高清图片（2倍缩放）
自动下载，文件名格式：标题_序号.png

JavaScript代码：

JAVASCRIPT

function saveAsImage(btn) {
  const card = btn.closest('.card');
  const cardNum = card.querySelector('.card-num').innerText;
  
  // 临时隐藏按钮
  const footer = card.querySelector('.card-footer');
  const originalDisplay = footer.style.display;
  footer.style.display = 'none';
  
  // 使用html2canvas生成图片
  html2canvas(card, {
    scale: 2,
    backgroundColor: null,
    useCORS: true
  }).then(canvas => {
    footer.style.display = originalDisplay;
    
    const link = document.createElement('a');
    link.download = `知识卡片_${cardNum}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
    
    btn.textContent = '✅ 已保存';
    setTimeout(() => btn.textContent = '💾 保存为图片', 2000);
  }).catch(err => {
    footer.style.display = originalDisplay;
    btn.textContent = '❌ 保存失败';
    setTimeout(() => btn.textContent = '💾 保存为图片', 2000);
  });
}

设计规范

手机优先：max-width 420px，单列布局
封面卡：渐变背景 + emoji + 标题 + 来源 + 卡片数量
内容卡：编号圆圈 + 分类标签 + 标题 + 正文 + 🔑关键词区
尾页：总结 + 提示可编辑
每张卡片可编辑（contenteditable）
每张卡片有📋复制和💾保存为图片按钮

CSS变量（换主题只改这里）

CSS

:root {
  --cover-from: #004D40;  /* 封面渐变起始 */
  --cover-via: #00796B;   /* 封面渐变中间 */
  --cover-to: #26A69A;    /* 封面渐变结束 */
  --accent: #00796B;      /* 编号圆/强调色 */
  --accent-light: #e0f2f0;/* 标签背景/浅色 */
  --key-border: #00796B;  /* 关键词区左边框 */
  --key-bg: #e0f2f0;      /* 关键词区背景 */
  --key-label: #00796B;   /* 关键词标签色 */
}

各主题完整变量值

🌸 樱花粉：

CSS

--cover-from:#8B2252; --cover-via:#C71585; --cover-to:#FF69B4;
--accent:#C71585; --accent-light:#fde8f0;
--key-border:#C71585; --key-bg:#fde8f0; --key-label:#C71585;

🍵 抹茶绿：

CSS

--cover-from:#1B4332; --cover-via:#2D6A4F; --cover-to:#40916C;
--accent:#2D6A4F; --accent-light:#e2f5e8;
--key-border:#2D6A4F; --key-bg:#e2f5e8; --key-label:#2D6A4F;

🌊 深海蓝：

CSS

--cover-from:#1a1a2e; --cover-via:#16213e; --cover-to:#0f3460;
--accent:#0f3460; --accent-light:#e8f0fe;
--key-border:#0f3460; --key-bg:#e8f0fe; --key-label:#0f3460;

🌙 暮光紫：

CSS

--cover-from:#2E1A47; --cover-via:#5B2C6F; --cover-to:#8E44AD;
--accent:#5B2C6F; --accent-light:#f0e8fe;
--key-border:#5B2C6F; --key-bg:#f0e8fe; --key-label:#5B2C6F;

🔥 烈焰红：

CSS

--cover-from:#7B0000; --cover-via:#B22222; --cover-to:#DC143C;
--accent:#B22222; --accent-light:#fde8e8;
--key-border:#B22222; --key-bg:#fde8e8; --key-label:#B22222;

🍊 暖阳橙：

CSS

--cover-from:#7C3600; --cover-via:#CC5500; --cover-to:#E07C24;
--accent:#CC5500; --accent-light:#fef0e2;
--key-border:#CC5500; --key-bg:#fef0e2; --key-label:#CC5500;

🖤 极简黑：

CSS

--cover-from:#0D0D0D; --cover-via:#1A1A1A; --cover-to:#2D2D2D;
--accent:#1A1A1A; --accent-light:#e8e8e8;
--key-border:#1A1A1A; --key-bg:#f0f0f0; --key-label:#1A1A1A;

HTML模板结构

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识卡片 - {{TITLE}}</title>
  <style>
    /* CSS样式（包含.line、.line-num、.item样式） */
  </style>
</head>
<body>
  <div class="page">
    <!-- 封面 -->
    <div class="cover">...</div>
    
    <!-- 卡片 -->
    <div class="card">
      <div class="card-body">
        <!-- 每个序号单独一行 -->
        <span class="line"><span class="line-num">①</span> 内容</span>
      </div>
      <div class="card-key">
        <!-- 每个关键词单独一行 -->
        <span class="item">① 关键词</span>
      </div>
      <div class="card-footer">
        <button onclick="copy(this)">📋 复制</button>
        <button onclick="saveAsImage(this)">💾 保存为图片</button>
      </div>
    </div>
    
    <!-- 尾页 -->
    <div class="end-card">...</div>
  </div>
  
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <script>
    function copy(btn) { /* 复制功能 */ }
    function saveAsImage(btn) { /* 保存为图片功能 */ }
  </script>
</body>
</html>

第6步：交付

交付内容：

发送HTML文件给用户
告知卡片数量
提示下载后用浏览器打开

可选：将HTML文件保存到用户指定的飞书云盘文件夹

硬性规则

必须询问配色主题——不问不能继续，提供8种主题供选择
必须询问是否备考——不问不能继续，决定是否生成"备考突击路径"卡片
只输出HTML格式——不输出Markdown格式的框架分析
排版必须分行——所有序号、关键词都必须单独一行
按钮功能完整——必须有"💾 保存为图片"按钮
手机友好——420px窄版，单列布局
可编辑——所有文字contenteditable
交付后告知——卡片数量 + 使用提示

示例对话

用户：帮我学习这个塔罗课程：https://b23.tv/L5W9uPI

AI：好的！我已经分析了这个塔罗课程的内容。现在需要确认两个问题：

问题1：请选择配色主题

🌊 深海蓝（职场/商业/通用）
🌸 樱花粉（生活/情感/女性）
🍵 抹茶绿（自然/健康/读书）
🌙 暮光紫（科技/创新/设计）
🔥 烈焰红（时政/军事）
🍊 暖阳橙（美食/旅行/亲子）
🖤 极简黑（极简/高端/商务）
💎 薄荷青（学习/教育/知识）

您选哪个？

问题2：您是否需要备考？

如果是，我会生成"备考突击路径"卡片
如果否，我会跳过这张卡片

需要备考吗？

用户：薄荷青，需要备考

AI：好的！使用薄荷青主题，会包含备考路径。现在开始生成HTML卡片…

用户：烈焰红，不需要备考

AI：好的！使用烈焰红主题，会跳过"备考突击路径"卡片。现在开始生成HTML卡片…

[生成HTML文件并发送]

AI：✅ 知识卡片已生成！

📊 卡片信息：

主题：🔥 烈焰红
卡片数量：7张（无备考路径）

下载HTML文件后，用浏览器打开即可查看精美卡片！🦞

2026 年 11 月
一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30