loongyowl 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.cssreferences/main.js→course-name/main.jsreferences/_footer.html→course-name/_footer.htmlreferences/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：
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. 概念 ↔ 生活场景映射
展示抽象概念与日常生活的对应关系。
<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. 情境选择测验
给出生活情境，让学习者选择最有助于觉察或成长的回应。
<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. 内心对话动画
展示内心不同"声音"的对话。
<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. 情绪转变过程动画
展示从触发事件到反应/回应的完整链条。
<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. 认知偏差识别挑战
找出思维中的认知偏差。
<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. 情绪-反应配对
将情绪与对应的身体感受/思维模式配对。
<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!" 提示框
重要的洞察时刻。
<div class="callout callout-aha">
<div class="callout-icon">💡</div>
<div class="callout-content">
<h4>Aha! 时刻</h4>
<p>你不是你的情绪。你是那个能够观察情绪的人。</p>
</div>
</div>
8. 实践练习卡片
具体的日常练习方法。
<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：整合与应用
- 回顾关键洞察
- 制定个人练习计划
- 互动：承诺卡片