# Wisdom To Course

> 将佛教、哲学、心理学、人际沟通等领域的智慧转化为交互式HTML学习课程。帮助用户通过互动体验提升内心觉察、情绪管理和行为有效性。当用户想要学习情绪管理、改善人际关系、提升自我认知、或理解某个哲学/心理学概念时触发此技能。

- Skill: `loongyowl/wisdom-to-course` (Agent Skill, multi-file: 24 files)
- Install (CLI): `npx skillmds@latest add loongyowl/wisdom-to-course`
- Raw SKILL.md: https://api.skillmd.com/api/skills/loongyowl/wisdom-to-course/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: loongyowl (https://skillmd.com/u/loongyowl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/loongyowl/wisdom-to-course

---


## wisdom-to-course

### First-Run Welcome

> **我可以将任何智慧文本、心理学概念或哲学思想转化为交互式学习课程——无需任何背景知识。**
>
> 只需提供：
> - **一个主题** — 如"情绪觉察"、"非暴力沟通"、"正念冥想"
> - **一篇文章或书籍** — 如《心经》、《被讨厌的勇气》、心理学论文
> - **一个具体情境** — 如"如何在冲突中保持冷静"、"如何更好地倾听"
>
> 我会分析内容，提取核心智慧，并生成一个美丽的单页HTML课程，包含互动场景、内心对话动画、情境测验和实践练习。整个课程在浏览器中运行——无需安装。

### Who This Is For

**目标学习者：追求内在成长的普通人**

- 想要更好地理解自己和他人
- 希望改善人际关系和沟通质量
- 对佛教、哲学、心理学感兴趣但不知从何入手
- 想要将抽象智慧应用到日常生活中
- 在情绪管理、压力应对、人际冲突中寻求更好的方式

**假设零专业背景。** 每个概念——从"我执"到"认知偏差"——都需要用平实的语言解释，就像学习者第一次接触。没有专业术语而不解释。没有"如你所知"。语气应该像一个聪明的朋友在分享，而不是教授在讲课。

**他们的目标是实用的，不是学术的：**
- **提升情绪觉察** —— 在情绪升级前及时识别
- **改善沟通效果** —— 学会倾听和表达，减少误解
- **减少内心冲突** —— 理解内心不同"声音"，找到平衡
- **培养健康思维** —— 识别并改变有害的思维模式
- **建立深层自我理解** —— 知道自己的反应模式从何而来
- **在压力中保持清明** —— 在困难情境中做出更明智的选择

**他们不是要变成心理学家或哲学家。** 他们想要智慧作为增强生活质量的工具。他们不需要记住所有术语——他们需要*体验*、*理解*并在生活中*应用*。

### Why This Approach Works

这个技能颠覆了传统的学习方式。旧模式是：先学理论 → 记住概念 → 可能某天应用（大多数人在第三步前放弃）。新模式是：**从生活场景出发 → 体验和理解 → 获得洞见 → 实践应用。**

学习者已经拥有传统学生没有的东西——他们*经历过*这些情境。课程从他们所在的地方开始："你记得那次和家人的争吵吗？让我们看看当时内心发生了什么。"

每个模块都先回答**"我为什么要在意？"**，然后才是"这如何运作？"。"为什么在意"的答案总是实用的：*因为这能帮助你在冲突中保持冷静、更好地理解他人、做出更明智的选择。*

### The Process

#### Phase 1: 内容分析

在编写课程HTML之前，深入理解输入的内容。阅读所有关键文本，识别核心概念、实践方法和应用场景。这里的彻底性会有回报——理解越深，课程越好。

**要提取的内容：**
- 核心概念和智慧（如"无常"、"同理心"、"认知重构"）
- 主要的"角色"（如内心的批评者、保护者、智慧的声音）
- 典型的应用场景（如冲突、压力、决策）
- 实践方法和技巧（如呼吸练习、倾听技巧）
- 常见的误区和挑战
- 背后的原理（心理学、神经科学、哲学基础）

**自己弄清楚内容在说什么**——阅读文本、识别核心信息、理解应用场景。不要要求用户解释内容——他们可能也在学习中。课程应该以平实的语言解释这是什么以及为什么有趣，然后深入探讨如何应用。

#### Phase 2: 课程设计

将课程结构化为**4-6个模块**。大多数课程需要4-6个。只有当内容真正有那么多值得教授的不同概念时才扩展到7-8个。更少、更好的模块胜过更多、更薄的模块。

弧线总是从学习者已经知道的（生活经验）开始，逐步走向他们不知道的（深层理解和实践）。将其视为向内探索：从外在情境开始，逐步深入到内心运作。

| 模块位置 | 目的 | 为什么对学习者重要 |
|---|---|---|
| 1 | 从熟悉的情境出发 | 从一个具体的生活场景开始，让学习者感到"这说的就是我" |
| 2 | 看见自己的模式 | 识别自动化的反应模式——这是改变的第一步 |
| 3 | 理解背后的原理 | 学习心理学/哲学原理，获得"原来如此"的洞见 |
| 4 | 探索其他可能性 | 了解不同的回应方式和视角 |
| 5 | 实践方法和技巧 | 具体的日常练习，将理解转化为能力 |
| 6 | 整合与应用 | 如何在日常生活中持续应用这些智慧 |

这是一个**菜单，不是清单**。根据内容选择合适的模块——一个简单的概念可能只需要4个模块，不是7个。根据内容的复杂性调整弧线。

**关键原则：** 每个模块都应该连接到实用技能——觉察、理解、选择、行动。如果一个模块不能帮助学习者在某方面做得更好，删减或重新设计直到它可以。

**每个模块应该包含：**
- 3-6个屏幕（模块内的子部分）
- 至少一个**概念 ↔ 生活场景**映射
- 至少一个互动元素（测验、可视化或动画）
- 一两个"aha!"提示框，包含普遍适用的洞察
- 一个隐喻，将抽象概念锚定在日常生活——但**永远不要跨模块重复使用相同的隐喻**，也**永远不要默认使用"餐厅"隐喻**（它被过度使用了）。选择与具体概念有机契合的隐喻。最好的隐喻感觉对这个概念来说是*必然的*，不是强制的。

**强制互动元素（每个课程必须包含所有这些）：**
- **内心对话动画** —— 至少一个贯穿课程。展示内心不同"声音"的对话（如理性的声音 vs 情绪的声音）。这些是最吸引人的元素之一，必须始终出现。
- **情绪/行为转变过程动画** —— 至少一个贯穿课程。从触发事件到反应/回应的逐步可视化。每个课程都有某种转变过程——找到它。
- **概念 ↔ 生活场景映射** —— 每个模块至少一个（已经要求，但重申：这是不可协商的）。
- **测验** —— 每个模块至少一个（情境选择、认知偏差识别、情绪-反应配对——任何测验类型都算）。
- **术语提示** —— 每个模块首次使用的每个专业术语。

这五种元素类型是每个课程的支柱。其他互动元素（架构图、模式卡片等）是可选的，应该在适合时添加。但上述五种必须始终存在——没有例外。

**不要提交课程设计供批准——直接构建。** 用户想要一个课程，不是一个规划文档。在内部设计课程，然后直接开始构建。如果他们想要改变，他们会在看到结果后告诉你。

#### Phase 3: 构建课程

课程输出是一个**目录**，不是单个文件。所有CSS和JS都是预构建的参考文件——永远不要重新生成它们。你的工作是只编写HTML内容。

**输出结构：**
```
course-name/
  styles.css       ← 从 references/styles.css 逐字复制
  main.js          ← 从 references/main.js 逐字复制
  _base.html       ← 自定义外壳（标题、强调色、导航点）
  _footer.html     ← 从 references/_footer.html 逐字复制
  build.sh         ← 从 references/build.sh 逐字复制
  modules/
    01-intro.html
    02-patterns.html
    ...
  index.html       ← 由 build.sh 组装（不要手动编写）
```

**步骤1：设置** —— 创建课程目录。使用 Read + Write 逐字复制这四个文件（不要重新生成它们的内容）：
- `references/styles.css` → `course-name/styles.css`
- `references/main.js` → `course-name/main.js`
- `references/_footer.html` → `course-name/_footer.html`
- `references/build.sh` → `course-name/build.sh`

**步骤2：自定义 `_base.html`** —— 读取 `references/_base.html`，然后将其写入 `course-name/_base.html`，并做以下替换：
- 两个 `COURSE_TITLE` 实例 → 实际课程标题
- 四个 `ACCENT_*` 占位符 → 选定的强调色值（从 `_base.html` 的注释中选择一个调色板）
- `NAV_DOTS` → 每个模块一个 `<button class="nav-dot" ...>`

**步骤3：编写模块** —— 对于每个模块，编写 `course-name/modules/0N-slug.html`，只包含 `<section class="module" id="module-N">` 块及其内容。不要包含 `<html>`、`<head>`、`<body>`、`<style>` 或 `<script>` 标签。

读取 `references/content-philosophy.md` 和 `references/interactive-elements.md` 了解HTML模式和内容指导。

**步骤4：组装** —— 从课程目录运行 `build.sh`：
```bash
cd course-name && bash build.sh
```
这会生成 `index.html`。在浏览器中打开它。

**关键规则：**
- **永远不要重新生成** `styles.css` 或 `main.js` —— 总是从 references 复制
- 模块文件只包含 `<section>` 内容 —— 没有样板
- 使用 CSS `scroll-snap-type: y proximity`（不是 `mandatory`）
- 在 `.module` 上使用 `min-height: 100dvh` 和 `100vh` 回退
- 互动元素JS在 `main.js` 中；通过 `data-*` 属性和CSS类名连接

### Design Identity

视觉设计应该感觉像一个**美丽的内心探索日记**——温暖、邀请、独特。阅读 `references/design-system.md` 了解完整的令牌系统，但这里是不可协商的原则：

- **温暖的调色板**：米白色背景（像陈年纸张），温暖的灰色，**没有冷白或蓝色**
- **大胆的强调色**：一个自信的强调色（深红、珊瑚、青绿——**不是紫色渐变**）
- **独特的字体**：标题使用有个性的展示字体（Bricolage Grotesque 或类似的大胆几何字体——**永远不要 Inter、Roboto、Arial 或 Space Grotesk**）。正文使用干净的sans-serif（DM Sans 或类似）。代码/术语使用 JetBrains Mono。
- **慷慨的留白**：模块有呼吸空间。每个屏幕最多3-4个短段落。
- **交替的背景**：偶数/奇数模块在两个温暖背景色调之间交替，创造视觉节奏
- **深色概念块**：类似日记的深靛蓝炭色（#1E1E2E）背景上的概念展示
- **没有刺眼的深度**：微妙的温暖阴影，永远不要黑色投影

### Reference Files

`references/` 目录包含详细的规范。**只在到达相关阶段时阅读它们**——不要提前。这保持上下文精简。

| 文件 | 何时阅读 | 包含 |
|------|----------|------|
| `references/content-philosophy.md` | 阶段3（编写模块） | 视觉密度规则、隐喻指导、测验设计、提示规则、概念映射指导 |
| `references/interactive-elements.md` | 阶段3，相关部分 | 每个互动元素的实现模式：情境选择测验、认知偏差识别、概念↔生活场景映射、内心对话动画、情绪转变可视化 |
| `references/design-system.md` | 阶段3编写模块HTML时 | 完整的CSS自定义属性、调色板、字体比例、间距系统、阴影、动画、滚动条样式 |

---

## 互动元素快速参考

### 1. 概念 ↔ 生活场景映射
展示抽象概念与日常生活的对应关系。

```html
<div class="concept-scenario-block">
  <div class="concept-side">
    <h4>概念：认知偏差</h4>
    <p class="concept-term">"读心术" —— 假设知道别人在想什么</p>
  </div>
  <div class="scenario-side">
    <h4>生活场景</h4>
    <p>"他没有回复我的消息，一定是对我生气了。"</p>
    <p class="scenario-insight">实际上可能有100个原因：手机没电、在开会、单纯忘了...</p>
  </div>
</div>
```

### 2. 情境选择测验
给出生活情境，让学习者选择最有助于觉察或成长的回应。

```html
<div class="scenario-quiz" data-correct="2">
  <p class="scenario-text">你和伴侣因为家务分工争吵。你感到愤怒和委屈。此刻，你可以...</p>
  <div class="scenario-options">
    <button class="scenario-option" data-value="1">立即反驳，说出你的不满</button>
    <button class="scenario-option" data-value="2">深呼吸，先觉察自己身体的感受</button>
    <button class="scenario-option" data-value="3">沉默离开，避免冲突升级</button>
  </div>
  <div class="scenario-feedback" data-for="1">
    <p><strong>反应模式：</strong>这是"战斗"反应。虽然表达重要，但在情绪高涨时容易说出伤人的话。</p>
  </div>
  <div class="scenario-feedback" data-for="2">
    <p><strong>觉察模式：</strong>很好！先回到身体感受，给情绪一个空间，然后再选择如何回应。</p>
  </div>
  <div class="scenario-feedback" data-for="3">
    <p><strong>逃避模式：</strong>这是"逃跑"反应。虽然避免了冲突，但问题没有解决，情绪也被压抑了。</p>
  </div>
</div>
```

### 3. 内心对话动画
展示内心不同"声音"的对话。

```html
<div class="inner-dialogue" id="dialogue-1">
  <div class="dialogue-messages">
    <div class="message message-critic" data-delay="0">
      <span class="message-sender">批评者</span>
      <p>你怎么又犯这种错误？太蠢了。</p>
    </div>
    <div class="message message-protector" data-delay="1500">
      <span class="message-sender">保护者</span>
      <p>等等，犯错是正常的，不要这么苛刻。</p>
    </div>
    <div class="message message-wise" data-delay="3000">
      <span class="message-sender">智慧的声音</span>
      <p>让我们看看从这次经历中可以学到什么...</p>
    </div>
  </div>
</div>
```

### 4. 情绪转变过程动画
展示从触发事件到反应/回应的完整链条。

```html
<div class="emotion-flow" data-steps='[
  {"actor": "触发事件", "action": "收到批评邮件"},
  {"actor": "身体感受", "action": "胸口发紧、心跳加速"},
  {"actor": "情绪", "action": "愤怒、羞耻"},
  {"actor": "思维", "action": ""他总是针对我""},
  {"actor": "反应", "action": "立即写反驳邮件"}
]'>
  <div class="flow-visualization"></div>
  <div class="flow-explanation"></div>
</div>
```

### 5. 认知偏差识别挑战
找出思维中的认知偏差。

```html
<div class="bias-spotting" data-bias="mind-reading">
  <p class="thought-text">"同事没有邀请我参加午餐，他们一定是不喜欢我。"</p>
  <div class="bias-options">
    <button class="bias-option" data-bias="catastrophizing">灾难化思维</button>
    <button class="bias-option" data-bias="mind-reading">读心术</button>
    <button class="bias-option" data-bias="all-or-nothing">全或无思维</button>
  </div>
  <div class="bias-explanation">
    <p><strong>读心术：</strong>假设知道别人的想法和动机，而没有证据。</p>
    <p><strong>替代思维：</strong>"我不知道原因，可能有多种解释。我可以选择直接询问。"</p>
  </div>
</div>
```

### 6. 情绪-反应配对
将情绪与对应的身体感受/思维模式配对。

```html
<div class="emotion-matching">
  <div class="emotion-column">
    <div class="emotion-item" data-emotion="anger" draggable="true">愤怒</div>
    <div class="emotion-item" data-emotion="anxiety" draggable="true">焦虑</div>
    <div class="emotion-item" data-emotion="sadness" draggable="true">悲伤</div>
  </div>
  <div class="reaction-column">
    <div class="reaction-slot" data-match="anxiety">未来导向的担忧思维</div>
    <div class="reaction-slot" data-match="sadness">能量低落、退缩</div>
    <div class="reaction-slot" data-match="anger">身体紧绷、想要行动</div>
  </div>
</div>
```

### 7. "Aha!" 提示框
重要的洞察时刻。

```html
<div class="callout callout-aha">
  <div class="callout-icon">💡</div>
  <div class="callout-content">
    <h4>Aha! 时刻</h4>
    <p>你不是你的情绪。你是那个能够观察情绪的人。</p>
  </div>
</div>
```

### 8. 实践练习卡片
具体的日常练习方法。

```html
<div class="practice-card">
  <h4>🧘 今日练习：STOP技巧</h4>
  <div class="practice-steps">
    <div class="step"><span class="step-letter">S</span> <strong>Stop</strong> —— 暂停</div>
    <div class="step"><span class="step-letter">T</span> <strong>Take a breath</strong> —— 深呼吸</div>
    <div class="step"><span class="step-letter">O</span> <strong>Observe</strong> —— 观察</div>
    <div class="step"><span class="step-letter">P</span> <strong>Proceed</strong> —— 继续</div>
  </div>
</div>
```

---

## 内容创作指南

### 隐喻选择
- **不要**使用餐厅/食物的隐喻（过度使用）
- **不要**跨模块重复使用相同的隐喻
- **要**选择与具体概念有机契合的隐喻
- 好的隐喻：将"情绪"比作"天气"——会来也会走
- 好的隐喻：将"认知偏差"比作"思维滤镜"——改变我们看到的现实

### 语言风格
- 使用"你"直接与学习者对话
- 避免"应该"，使用"可以"或"尝试"
- 承认困难："这不容易，但值得练习"
- 强调过程而非结果："觉察本身就是胜利"

### 测验设计原则
- 测试应用能力，不是记忆
- 没有"错误"答案，只有不同的反应模式
- 每个选项都提供有价值的反馈
- 帮助学习者理解自己的倾向

---

## 示例课程结构

### 情绪觉察课程示例

**模块1：当情绪来袭**
- 从一个具体的情绪爆发场景开始
- 识别情绪升级的信号
- 互动：情绪转变过程动画

**模块2：认识你的自动化反应**
- 战斗-逃跑-冻结模式
- 你的默认反应是什么？
- 互动：情境选择测验

**模块3：情绪背后的信息**
- 每种情绪都在试图告诉你什么
- 愤怒 = 边界被侵犯
- 悲伤 = 失去了重要的东西
- 焦虑 = 对未来不确定
- 互动：情绪-需求配对

**模块4：按下暂停键**
- STOP技巧介绍
- 从反应到回应
- 互动：内心对话动画（批评者 vs 智慧的声音）

**模块5：日常练习**
- 身体扫描练习
- 情绪日记
- 互动：实践练习卡片

**模块6：整合与应用**
- 回顾关键洞察
- 制定个人练习计划
- 互动：承诺卡片