快速学习知识卡片生成

作者 admin

2026年11月6日 4 分钟阅读

0 0

下载地址

代码

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

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

代码

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

快速学习知识卡片生成。将课程/知识点转化为可编辑的学习卡片HTML，适合家长给孩子做知识卡片、学生备考复习。场景：文科术语讲解、英语单词背诵、理科概念理解等。

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

概述

将课程内容/知识点转化为可编辑的学习卡片HTML，帮助快速掌握一门课的大纲和框架。

核心流程

代码

1. 提取知识点 → 2. 选择卡片类型 → 3. 选配色主题 → 4. 生成卡片HTML → 5. 交付

适用场景

家长场景

给孩子制作知识卡片，辅助学习
把复杂概念简化成易懂的卡片
制作英语单词卡片、古诗词卡片

学生场景

文科：专业术语讲解、历史事件梳理、政治概念理解
理科：公式定理卡片、概念对比卡片、实验步骤卡片
英语：单词背诵、语法规则、句型结构

第1步：提取知识点

提取原则

按逻辑拆分：一门课按章节/模块拆分，每个模块做成一组卡片
一卡一知识点：每张卡片只讲一个知识点，不要堆砌
保留核心要素：概念定义 + 关键特征 + 应用场景 + 易错提醒
儿童友好：给孩子的卡片，语言要简单、有趣、有例子

卡片内容结构

基础型卡片：

标题（知识点名称）
核心定义（一句话说清楚）
关键特征（2-5条）
应用场景（如何使用）
易错提醒（容易搞混的地方）

对比型卡片：

标题（对比主题）
对比维度表格
相同点
不同点
记忆技巧

流程型卡片：

标题（流程名称）
步骤列表（编号清晰）
每步要点
注意事项

记忆型卡片（英语单词、公式等）：

标题（单词/公式）
核心内容
记忆技巧（谐音、联想、口诀）
例句/例题
拓展（派生词、相关公式）

卡片数量

一门课：建议按章节拆分，每个章节5-10张卡片
一个知识点：如果内容复杂，可拆成多张卡片
总原则：宁多勿少，一卡一知识点

第2步：选择卡片类型

类型A：概念讲解卡片

适合：文科术语、理科概念、专业名词结构：

标题：概念名称
定义：一句话定义
关键特征：2-5条
应用场景：如何使用
易错提醒：常见误区

类型B：对比学习卡片

适合：相似概念对比、易混淆知识点结构：

标题：对比主题
对比表格：维度 | A | B
相同点
不同点
记忆技巧

类型C：流程步骤卡片

适合：实验步骤、解题流程、操作方法结构：

标题：流程名称
步骤：①②③④⑤
每步要点
注意事项

类型D：记忆背诵卡片

适合：英语单词、公式定理、古诗词结构：

标题：单词/公式
核心内容
记忆技巧
例句/例题
拓展内容

第3步：选配色主题

先让用户选，不选则根据学科推荐。

主题	适合学科	封面渐变	强调色
🌸 樱花粉	语文/英语/历史/政治	#8B2252→#C71585→#FF69B4	#C71585
🍵 抹茶绿	生物/地理/环境科学	#1B4332→#2D6A4F→#40916C	#2D6A4F
🌊 深海蓝	数学/物理/逻辑推理	#1a1a2e→#16213e→#0f3460	#0f3460
🌙 暮光紫	化学/心理学/哲学	#2E1A47→#5B2C6F→#8E44AD	#5B2C6F
💎 薄荷青	通用学习/教育/知识	#004D40→#00796B→#26A69A	#00796B
🍊 暖阳橙	体育/艺术/音乐	#7C3600→#CC5500→#E07C24	#CC5500

儿童友好推荐：

幼儿园-小学低年级：🌸 樱花粉、🍊 暖阳橙
小学高年级-初中：💎 薄荷青、🍵 抹茶绿
高中-大学：🌊 深海蓝、🌙 暮光紫

第4步：生成卡片HTML

设计规范

手机优先：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:#7C3600; --cover-via:#CC5500; --cover-to:#E07C24;
--accent:#CC5500; --accent-light:#fef0e2;
--key-border:#CC5500; --key-bg:#fef0e2; --key-label:#CC5500;

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>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; background: #f8f6f3; color: #2d2d2d; }
.page { max-width: 420px; margin: 0 auto; padding: 0; }

/* === 配色主题变量 - 替换这里即可换主题 === */
:root {
  --cover-from: #004D40;
  --cover-via: #00796B;
  --cover-to: #26A69A;
  --accent: #00796B;
  --accent-light: #e0f2f0;
  --key-border: #00796B;
  --key-bg: #e0f2f0;
  --key-label: #00796B;
}

.cover { background: linear-gradient(135deg, var(--cover-from) 0%, var(--cover-via) 50%, var(--cover-to) 100%); color: white; padding: 48px 28px 36px; text-align: center; }
.cover .emoji { font-size: 48px; margin-bottom: 16px; }
.cover h1 { font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; line-height: 1.4; }
.cover .sub { font-size: 13px; opacity: 0.7; margin-bottom: 20px; }
.cover .meta { display: flex; justify-content: center; gap: 20px; font-size: 12px; opacity: 0.8; }

.card { background: white; margin: 12px 16px; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.card-header { padding: 16px 20px 12px; display: flex; align-items: center; gap: 10px; }
.card-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: white; flex-shrink: 0; background: var(--accent); }
.card-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: var(--accent-light); color: var(--accent); }

.card-title { padding: 0 20px 8px; font-size: 17px; font-weight: 700; line-height: 1.5; outline: none; }
.card-body { padding: 0 20px 16px; font-size: 14px; line-height: 2; color: #444; outline: none; }
.card-body:focus, .card-title:focus { background: #fffbf0; }

.card-key { margin: 0 20px 16px; padding: 12px 16px; background: var(--key-bg); border-radius: 8px; border-left: 3px solid var(--key-border); }
.card-key .label { font-size: 11px; color: var(--key-label); font-weight: 600; margin-bottom: 6px; }
.card-key .items { font-size: 13px; line-height: 1.8; color: #555; outline: none; }

.card-example { margin: 0 20px 16px; padding: 12px 16px; background: #f8f6f3; border-radius: 8px; font-size: 13px; line-height: 1.8; color: #666; outline: none; }
.card-example:focus { background: #fffbf0; }

.card-footer { padding: 10px 20px; border-top: 1px solid #f0ece7; display: flex; justify-content: space-between; align-items: center; }
.card-footer .source { font-size: 10px; color: #bbb; }
.card-actions { display: flex; gap: 6px; }
.card-actions button { font-size: 11px; padding: 3px 10px; border: 1px solid #e0dcd7; border-radius: 12px; background: white; cursor: pointer; color: #999; }
.card-actions button:hover { color: var(--accent); border-color: var(--accent); }

.end-card { background: white; margin: 12px 16px 32px; border-radius: 16px; padding: 32px 24px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.end-card .emoji { font-size: 36px; margin-bottom: 12px; }
.end-card p { font-size: 14px; line-height: 1.8; color: #666; }
.end-card .highlight { color: var(--accent); font-weight: 600; }

.edit-hint { text-align: center; padding: 8px 16px; font-size: 11px; color: #bbb; }
.edit-hint span { background: #f0ece7; padding: 2px 8px; border-radius: 4px; }
</style>
</head>
<body>

<div class="page">

<!-- 封面 -->
<div class="cover">
  <div class="emoji">📚</div>
  <h1>{{TITLE}}</h1>
  <div class="sub">{{SUBTITLE}}</div>
  <div class="meta">
    <span>📅 {{DATE}}</span>
    <span>📝 {{COUNT}}张卡片</span>
    <span>✏️ 可编辑</span>
  </div>
</div>

<div class="edit-hint">💡 <span>点击文字</span> 即可编辑，修改后点保存</div>

<!-- 卡片模板 - 复制此块生成每张卡片 -->
<div class="card">
  <div class="card-header">
    <div class="card-num">1</div>
    <div class="card-tag">概念讲解</div>
  </div>
  <div class="card-title" contenteditable="true">知识点标题</div>
  <div class="card-body" contenteditable="true">知识点正文内容</div>
  <!-- 可选：记忆技巧区 -->
  <div class="card-key">
    <div class="label">💡 记忆技巧</div>
    <div class="items" contenteditable="true">记忆技巧、口诀、联想方法</div>
  </div>
  <!-- 可选：例句/例题区 -->
  <div class="card-example" contenteditable="true">例句或例题</div>
  <div class="card-footer">
    <div class="source">来源</div>
    <div class="card-actions">
      <button onclick="copy(this)">📋 复制</button>
      <button onclick="save(this)">💾 保存</button>
    </div>
  </div>
</div>
<!-- 卡片模板结束 -->

<!-- 尾页 -->
<div class="end-card">
  <div class="emoji">🦞</div>
  <p>课程精华 → 学习卡片<br>核心概念 + 记忆技巧<br><span class="highlight">点击文字即可编辑</span></p>
</div>

</div>

<script>
function copy(btn) {
  const card = btn.closest('.card');
  const title = card.querySelector('.card-title').innerText;
  const body = card.querySelector('.card-body').innerText;
  const key = card.querySelector('.card-key .items');
  const example = card.querySelector('.card-example');
  let text = `【${title}】n${body}`;
  if (key) text += `nn💡 ${key.innerText}`;
  if (example) text += `nn${example.innerText}`;
  navigator.clipboard.writeText(text).then(() => {
    btn.textContent = '✅ 已复制';
    setTimeout(() => btn.textContent = '📋 复制', 1500);
  });
}

function save(btn) {
  const card = btn.closest('.card');
  const num = card.querySelector('.card-num').innerText;
  const title = card.querySelector('.card-title').innerText;
  const body = card.querySelector('.card-body').innerText;
  const key = card.querySelector('.card-key .items');
  const example = card.querySelector('.card-example');
  const data = { title, body, key: key ? key.innerText : '', example: example ? example.innerText : '' };
  localStorage.setItem('lcard_' + num, JSON.stringify(data));
  btn.textContent = '✅ 已保存';
  setTimeout(() => btn.textContent = '💾 保存', 1500);
}
</script>
</body>
</html>

硬性规则

必须询问配色主题——不问不能继续，提供6种主题供选择，不能自己默认
先问使用场景——是家长给孩子做，还是学生自己备考？根据场景调整语言风格
再问科目——根据科目推荐配色主题
一卡一知识点——不要把多个知识点堆在一张卡片
儿童友好——给孩子做的卡片，语言要简单、有趣、有例子
记忆技巧——每张卡片必须有记忆技巧区（口诀、联想、谐音等）
手机友好——420px窄版，单列布局
可编辑——所有文字contenteditable
交付后告知——卡片数量 + 下载提示

⚠️ 常见错误案例

错误做法（2026-08-04实际发生）：

用户说"帮我做一组中国近代史重要事件的卡片"
AI直接用了樱花粉主题，没有询问用户偏好
违反了规则1：必须询问配色主题

正确做法：

代码

用户：帮我做一组中国近代史重要事件的卡片

AI应该问：
1. 请选择配色主题：🌸樱花粉 / 🍵抹茶绿 / 🌊深海蓝 / 🌙暮光紫 / 💎薄荷青 / 🍊暖阳橙
2. 是家长给孩子做，还是学生自己备考？

示例对话

用户：帮我给小学三年级的女儿做一组英语单词卡片，人教版三年级上册Unit 1

AI：好的！我帮你做一组小学三年级英语单词学习卡片。

使用场景：家长给孩子做科目：英语配色主题：🌸 樱花粉（适合小学）

卡片类型：记忆背诵卡片（每个单词一张）

单词列表（人教版三年级上册Unit 1）：

ruler 尺子
pencil 铅笔
eraser 橡皮
crayon 蜡笔
bag 书包
pen 钢笔
pencil box 铅笔盒
book 书

我将为每个单词生成一张卡片，包含：

单词 + 音标
中文意思
记忆技巧（谐音、联想、口诀）
例句
拓展（相关单词）

现在开始生成卡片…

用户：帮我做一组高二物理选修3-1的知识卡片

AI：好的！我帮你做一组高二物理知识卡片。

使用场景：高中生备考科目：物理配色主题：🌊 深海蓝（适合理科）

卡片类型：概念讲解卡片 + 公式记忆卡片

知识点列表（选修3-1核心内容）：

电荷及其守恒定律
库仑定律
电场强度
电势能、电势、电势差
电容器与电容
带电粒子在电场中的运动
欧姆定律
电阻定律
电功和电功率
闭合电路欧姆定律

我将为每个核心概念生成一张卡片，包含：

概念定义
关键特征
公式（如果有）
记忆技巧
易错提醒