长文长视频知识卡片

作者 admin

2026年11月6日 4 分钟阅读

0 0

下载地址

代码

https://www.zhengdianxue.com/wp-content/uploads/skills/org-1sdzqs7z--long-content-knowledge-cards.zip

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

代码

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-1sdzqs7z/long-content-knowledge-cards。

将长文章、视频或课程内容完整提炼为可编辑、移动端友好的知识卡片 HTML，并自动分类、提取关键词和匹配配色主题。

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

概述

将长文章/视频/课程内容转化为可编辑的知识卡片HTML。

核心流程

代码

1. 抓取全文 → 2. 提取全文重点 → 3. 选配色主题 → 4. 生成卡片HTML → 5. 交付

第1步：抓取全文

通用方法：用AI工具自带的网页抓取功能读取URL
微信公众号：如果抓不到，让用户复制粘贴文章内容
学习强国/其他平台：同上
抓取失败时：告诉用户"这个链接需要登录，请把文章内容复制粘贴给我"

第2步：提取全文重点

提取原则：

提取文章中所有值得记住的重点，不遗漏
每条保留 原文精华，不要压缩成一句话
如果原文有编号（如52条），全部保留，每条做成一张卡片
如果原文无编号，按段落/主题拆分，每个独立观点做成一张卡片
合并同类项：同一段里重复表达同一观点的，合并为一张卡片

分类标签： 根据内容自动归类

成长 / 认知 / 选择 / 自律 / 关系 / 工作 / 时间 / 方法 / 原则 / 其他

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

卡片数量： 不设上限，有多少重点就做多少张卡片

第3步：选配色主题

先让用户选，不选则默认深海蓝。

主题	适合内容	封面渐变	强调色
🌊 深海蓝	职场/商业/通用	#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

第4步：生成卡片HTML

设计规范

手机优先：max-width 420px，单列布局
封面卡：渐变背景 + emoji + 标题 + 来源 + 卡片数量
内容卡：编号圆圈 + 分类标签 + 标题 + 正文 + 🔑关键词区
尾页：总结 + 提示可编辑
纯展示，无编辑按钮

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

CSS

:root {
  --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:#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:#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;

💎 薄荷青：

CSS

--cover-from:#004D40; --cover-via:#00796B; --cover-to:#26A69A;
--accent:#00796B; --accent-light:#e0f2f0;
--key-border:#00796B; --key-bg:#e0f2f0; --key-label:#00796B;

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: #1a1a2e;
  --cover-via: #16213e;
  --cover-to: #0f3460;
  --accent: #0f3460;
  --accent-light: #e8f0fe;
  --key-border: #0f3460;
  --key-bg: #e8f0fe;
  --key-label: #0f3460;
}

.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-quote { margin: 0 20px 16px; padding: 12px 16px; background: #f8f6f3; border-radius: 8px; font-size: 13px; line-height: 1.8; color: #666; font-style: italic; outline: none; }
.card-quote: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" >标题</div>
  <div class="card-body" >正文，保留原文精华</div>
  <!-- 可选：关键词区 -->
  <div class="card-key">
    <div class="label">🔑 关键词</div>
    <div class="items" >① xxx ② xxx</div>
  </div>
  <!-- 可选：引用/补充区 -->
  <div class="card-quote" >引用或补充内容</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 quote = card.querySelector('.card-quote');
  let text = `【${title}】n${body}`;
  if (key) text += `nn🔑 ${key.innerText}`;
  if (quote) text += `nn${quote.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 quote = card.querySelector('.card-quote');
  const data = { title, body, key: key ? key.innerText : '', quote: quote ? quote.innerText : '' };
  localStorage.setItem('kcard_' + num, JSON.stringify(data));
  btn.textContent = '✅ 已保存';
  setTimeout(() => btn.textContent = '💾 保存', 1500);
}
</script>
</body>
</html>

硬性规则

先问配色——让用户选主题，不选则默认深海蓝
提取全部重点——不遗漏，有多少做多少
保留原文——不要压缩成一句话，精华要完整
提炼关键词——每张卡片必须有🔑关键词区
手机友好——420px窄版，单列布局
可编辑——所有文字contenteditable
交付后告知——卡片数量 + 下载提示

长文长视频知识卡片

下载地址

概述

核心流程

第1步：抓取全文

第2步：提取全文重点

第3步：选配色主题

第4步：生成卡片HTML

设计规范

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

各主题完整变量值

HTML模板

硬性规则

标签：

admin

其他文章

课程学习助手

学习规划

暂无评论！成为第一个。

发表回复取消回复

您可能错过了

AI与安全并行 · AI 每日简讯 – 2026-11-06

竞品对比与价格趋势分析

电商内容产出与消费洞察工作台

客户之声经营诊断

电商与营销

用户评论情绪探针

VOC评论洞察与营销内容创作

跨境电商经营哨兵

诉讼文书起草技能

关于本站

热点推荐

最新文章

文章归档

订阅 AI 精选

订阅成功

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

长文长视频知识卡片

下载地址

概述

核心流程

第1步：抓取全文

第2步：提取全文重点

第3步：选配色主题

第4步：生成卡片HTML

设计规范

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

各主题完整变量值

HTML模板

硬性规则

标签：

其他文章

暂无评论！成为第一个。

发表回复 取消回复

您可能错过了

发表回复取消回复