feat: 添加 SummaryCard 组件并优化内容格式

docs/.vitepress/theme/components/SummaryCard.vue

@@ -0,0 +1,279 @@
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '本幕小结'
+  },
+  sections: {
+    type: Array,
+    default: () => []
+  },
+  outputs: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<template>
+  <div class="summary-card">
+    <div class="summary-header">
+      <div class="header-icon">📚</div>
+      <div class="header-content">
+        <div class="summary-title">{{ title }}</div>
+      </div>
+    </div>
+
+    <div class="summary-body">
+      <!-- Sections -->
+      <div v-if="sections.length > 0" class="sections-container">
+        <div v-for="(section, index) in sections" :key="index" class="section-item">
+          <div class="section-header">
+            <span class="section-number">{{ section.number }}</span>
+            <span class="section-title">{{ section.title }}</span>
+          </div>
+          <ul class="section-list">
+            <li v-for="(item, itemIndex) in section.items" :key="itemIndex" class="list-item">
+              <span class="item-marker">•</span>
+              <span class="item-content" v-html="item"></span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Outputs -->
+      <div v-if="outputs.length > 0" class="outputs-section">
+        <div class="outputs-header">
+          <span class="outputs-icon">📦</span>
+          <span class="outputs-title">本幕输出：</span>
+        </div>
+        <ul class="outputs-list">
+          <li v-for="(output, index) in outputs" :key="index" class="output-item">
+            <span class="output-marker">✓</span>
+            <span class="output-content" v-html="output"></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.summary-card {
+  margin: 16px 0;
+  border-radius: 10px;
+  background: linear-gradient(
+    135deg,
+    rgba(var(--vp-c-brand-rgb), 0.015) 0%,
+    rgba(var(--vp-c-brand-rgb), 0.04) 100%
+  );
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
+}
+
+.summary-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: linear-gradient(
+    to right,
+    rgba(var(--vp-c-brand-rgb), 0.04),
+    transparent
+  );
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.header-icon {
+  font-size: 1.2em;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
+}
+
+.header-content {
+  flex: 1;
+}
+
+.summary-title {
+  font-size: 0.9em;
+  font-weight: 700;
+  color: var(--vp-c-brand);
+  letter-spacing: 0.2px;
+}
+
+.summary-body {
+  padding: 12px 14px;
+}
+
+/* Sections */
+.sections-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.section-item {
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--vp-c-divider);
+  transition: all 0.15s ease;
+}
+
+.section-item:hover {
+  border-color: var(--vp-c-brand-light);
+  box-shadow: 0 1px 4px rgba(var(--vp-c-brand-rgb), 0.04);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.section-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  background: linear-gradient(135deg, var(--vp-c-brand), var(--vp-c-brand-dark));
+  color: white;
+  border-radius: 4px;
+  font-size: 0.75em;
+  font-weight: 700;
+  box-shadow: 0 1px 3px rgba(var(--vp-c-brand-rgb), 0.2);
+}
+
+.section-title {
+  font-size: 0.85em;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.section-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.list-item {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  padding: 2px 0;
+  line-height: 1.4;
+}
+
+.item-marker {
+  color: var(--vp-c-brand);
+  font-weight: 700;
+  font-size: 0.9em;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.item-content {
+  color: var(--vp-c-text-1);
+  font-size: 0.85em;
+  line-height: 1.4;
+}
+
+.item-content :deep(strong) {
+  color: var(--vp-c-brand-dark);
+  font-weight: 700;
+}
+
+/* Outputs */
+.outputs-section {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--vp-c-divider);
+}
+
+.outputs-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 6px;
+}
+
+.outputs-icon {
+  font-size: 1em;
+}
+
+.outputs-title {
+  font-size: 0.85em;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.outputs-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.output-item {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  padding: 2px 0;
+  line-height: 1.4;
+}
+
+.output-marker {
+  color: #42d392;
+  font-weight: 700;
+  font-size: 0.9em;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.output-content {
+  color: var(--vp-c-text-1);
+  font-size: 0.85em;
+  line-height: 1.4;
+}
+
+.output-content :deep(strong) {
+  color: var(--vp-c-brand-dark);
+  font-weight: 700;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .summary-card {
+    margin: 14px 0;
+  }
+
+  .summary-header {
+    padding: 8px 12px;
+  }
+
+  .summary-body {
+    padding: 10px 12px;
+  }
+
+  .section-item {
+    padding: 8px 10px;
+  }
+
+  .section-title {
+    font-size: 0.8em;
+  }
+
+  .item-content,
+  .output-content {
+    font-size: 0.8em;
+  }
+}
+</style>

docs/.vitepress/theme/index.js

@@ -16,6 +16,7 @@ import ArticleGrid from './components/ArticleGrid.vue'
 import StepBar from './components/StepBar.vue'
 import ChapterIntroduction from './components/ChapterIntroduction.vue'
 import ReadingProgress from './components/ReadingProgress.vue'
+import SummaryCard from './components/SummaryCard.vue'
 import WebTerminal from './components/appendix/terminal-intro/WebTerminal.vue'
 import TerminalGrid from './components/appendix/terminal-intro/TerminalGrid.vue'
 import CellInspector from './components/appendix/terminal-intro/CellInspector.vue'
@@ -455,7 +456,8 @@ export default {
     app.component('ArticleGrid', ArticleGrid)
     app.component('StepBar', StepBar)
     app.component('ChapterIntroduction', ChapterIntroduction)
-    app.component('ReadingProgress', ReadingProgress)    
+    app.component('ReadingProgress', ReadingProgress)
+    app.component('SummaryCard', SummaryCard)
     app.component('WebTerminal', WebTerminal)
     app.component('TerminalGrid', TerminalGrid)
     app.component('CellInspector', CellInspector)

docs/zh-cn/stage-1/1.0-finding-great-idea/index.md

@@ -25,9 +25,6 @@ const duration = '约 <strong>3 小时</strong>'
 
 </ChapterIntroduction>
 
-::: info 说明
-本章内容基于真实的产品案例分析，所有方法论均可直接应用于产品设计和创业实践。
-:::
 
 <div style="margin: 50px 0;">
   <ClientOnly>
@@ -73,15 +70,10 @@ const duration = '约 <strong>3 小时</strong>'
 
 :::
 
----
-
-::: info 记忆口诀
-**一人一事一切入，横切纵挖找痛点，AI对话磨概念，五步验证再动手**
-:::
 
 ---
 
-## 开篇：小明的故事
+## 开篇：独立开发程序员小明的故事
 
 小明是一名程序员，工作三年了。有一天他突然想到：要不做一个健身 APP 吧，帮用户制定健身计划、记录训练数据。这个想法让他很兴奋，觉得自己终于找到了一个可以做的项目。
 
@@ -95,9 +87,7 @@ const duration = '约 <strong>3 小时</strong>'
 
 他坐在电脑前，看着后台惨淡的数据，心里只有一个问题：我的 APP 做得挺好的啊，为什么没人用？更没人愿意买单？
 
----
 
-::: warning 核心问题
 
 小明的失败，不是因为技术不行，也不是因为产品做得不好。说实话，他的 APP 功能挺全的，界面也挺好看的。
 
@@ -109,7 +99,6 @@ const duration = '约 <strong>3 小时</strong>'
 
 **方向错了，越深入错得越多。** 他花了一年时间，把一个错误的方向做得越来越完善，结果只是离成功越来越远。
 
----
 
 ::: tip 这一章我们做什么
 
@@ -123,6 +112,8 @@ const duration = '约 <strong>3 小时</strong>'
 
 **第三幕：AI对话打磨** —— 用 AI 把想法变成可落地的产品方案
 
+:::
+
 ---
 
 ## 第一幕：找到真需求
@@ -153,8 +144,6 @@ const duration = '约 <strong>3 小时</strong>'
 
 换句话说，**真需求是用户用脚投票投出来的，不是产品经理拍脑袋想出来的。**
 
----
-
 ### 案例：让用户买单的产品
 
 小明研究了几个成功案例，想搞清楚它们到底抓住了什么痛点。
@@ -177,16 +166,12 @@ const duration = '约 <strong>3 小时</strong>'
 
 ---
 
-::: info 小明的感悟
-
 看完这些案例，小明有了一个重要发现。
 
 用户买单的从来不是"功能"，而是"解决恐惧"和"消除焦虑"。美菜网解决的是小餐馆老板对凌晨采购艰辛的恐惧，小红书解决的是用户对买错东西的恐惧。
 
 **恐惧驱动付费，焦虑驱动行动。**
 
----
-
 ### 需求的三层：痛点、爽点、痒点
 
 小明进一步研究，发现用户的需求可以分为三种类型：
@@ -212,7 +197,6 @@ const duration = '约 <strong>3 小时</strong>'
 - 一键生成精美 PPT（省时省力的爽感）
 
 **关键：** 让用户"爽"是留存的关键，但单独作为付费点较弱。
-
 :::
 
 ::: tip 痒点（Itch Point）—— 虚拟自我
@@ -227,9 +211,7 @@ const duration = '约 <strong>3 小时</strong>'
 
 :::
 
-::: warning 产品经理的选择逻辑
+怎么看待正确的优先级排序？一个好的建议是：痛点 > 爽点 > 痒点
-
-**优先级排序：痛点 > 爽点 > 痒点**
 
 为什么？
 
@@ -241,23 +223,34 @@ const duration = '约 <strong>3 小时</strong>'
 
 比如："记录喝水能让你更健康"——喝水确实健康，但不记录也不会不健康。这是把痒点包装成痛点，用户不会买账。
 
-:::
-
 ### 验证真需求的5步法
 
 小明想：**那我有一个想法时，怎么快速判断它是否值得投入？**
 
 他学习了产品经理常用的 5 步判断法（详细内容见附录A）：
 
-::: info 快速判断框架
+#### 第一步：用户验证
 
-1. **用户验证** —— 找到 10 个目标用户，问他们"你现在怎么解决这个问题？"
+找到 10 个目标用户，问他们"你现在怎么解决这个问题？"
-2. **替代方案分析** —— 用户现在用什么方法解决这个问题？
-3. **付费意愿测试** —— 让用户真金白银投票（预售或定金）
-4. **市场规模估算** —— 算清账：目标用户数量 × 付费意愿 × 客单价
-5. **竞争壁垒思考** —— 你能守住吗？
 
-:::
+#### 第二步：替代方案分析
+
+用户现在用什么方法解决这个问题？你的产品比现有方案好在哪里？
+
+#### 第三步：付费意愿测试
+
+预售或定金。愿意付定金的用户比例：
+- **> 10%**：需求真实，值得投入
+- **5-10%**：需求存在，但需要打磨
+- **< 5%**：需求不成立，或产品概念有问题
+
+#### 第四步：市场规模估算
+
+目标用户数量 × 付费意愿 × 客单价
+
+#### 第五步：竞争壁垒思考
+
+技术壁垒？网络效应？品牌？成本优势？
 
 ::: tip 关键指标
 
@@ -268,31 +261,41 @@ const duration = '约 <strong>3 小时</strong>'
 
 :::
 
----
+<SummaryCard
-
+  title="本幕小结：小明的收获"
-### 本幕小结：小明的收获
+  :sections="[
-
+    {
-通过第一幕，小明明白了：
+      number: '1',
-
+      title: '真需求的标准',
-**1. 真需求的标准**
+      items: [
-- 用户愿意为之付费（最重要的标准）
+        '用户愿意为之付费（最重要的标准）',
-- 用户愿意为之改变行为
+        '用户愿意为之改变行为',
-- 没有解决方案时用户会损失很大
+        '没有解决方案时用户会损失很大'
-
+      ]
-**2. 避开假需求**
+    },
-- 解决伪痛点（痒点而非痛点）
+    {
-- 市场规模太小，无法支撑商业模式
+      number: '2',
-- 解决方案比问题还复杂
+      title: '避开假需求',
-
+      items: [
-**3. 优先级排序**
+        '解决伪痛点（痒点而非痛点）',
-- 痛点 > 爽点 > 痒点
+        '市场规模太小，无法支撑商业模式',
-
+        '解决方案比问题还复杂'
----
+      ]
-
+    },
-📦 **本幕输出：**
+    {
-- 理解了什么是真需求
+      number: '3',
-- 掌握了需求的三层分类（痛点、爽点、痒点）
+      title: '优先级排序',
-- 学会了5步判断法验证需求真伪
+      items: [
+        '痛点 > 爽点 > 痒点'
+      ]
+    }
+  ]"
+  :outputs="[
+    '理解了什么是真需求',
+    '掌握了需求的三层分类（痛点、爽点、痒点）',
+    '学会了5步判断法验证需求真伪'
+  ]"
+/>
 
 ---
 
@@ -423,8 +426,6 @@ const duration = '约 <strong>3 小时</strong>'
 
 :::
 
-::: info 产品经理的价值判断
-
 对比原始 idea 和重构后的概念：
 
 | 维度 | 原始想法 | 重构后 |
@@ -437,8 +438,6 @@ const duration = '约 <strong>3 小时</strong>'
 
 **这就是从"一个功能"到"有人买单的产品"的进化。**
 
-:::
-
 ---
 
 ### 更多例子：从普通idea到好点子
@@ -563,7 +562,8 @@ AI 建议先用方案一。具体操作是：找到 2-3 位产后康复教练，
 **前期成本：**
 - 课程制作：0 元（用分成模式）
 - 你只需要投入开发时间和推广成本
-```
+
+:::
 
 ---
 
@@ -605,8 +605,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 通过这个案例，小明总结出了一个与 AI 对话的标准流程（详细内容见附录E）。
 
-::: info AI 对话打磨产品概念的 5 步法
-
 **第一步：抛出原始想法。** 描述你的初步想法，哪怕很粗糙也没关系。告诉 AI 你的担忧，比如竞争激烈、不知道怎么差异化等。
 
 **第二步：让 AI 帮你规划 MVP。** 最小可行产品应该包含什么功能？分几个阶段？每个阶段的目标是什么？技术实现难度大吗？
@@ -628,8 +626,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 4. 设定验证指标
 ```
 
-:::
-
 ---
 
 ### 本幕小结：小明的收获
@@ -688,10 +684,10 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 **5. 用验证清单评估你的想法**（见附录F）
 
-:::
-
 **把你的分析分享到社区，和其他学员讨论！**
 
+:::
+
 ---
 
 ## 附录：SOP 方法论
@@ -700,7 +696,7 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 当你有一个想法时，如何快速判断它是否值得投入？
 
-::: info 第一步：用户验证——找到10个目标用户
+**第一步：用户验证——找到10个目标用户**
 
 **不要问：**"你会用我的产品吗？"（假阳性率90%）
 
@@ -715,10 +711,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 - 如果用户说"挺有意思，但我不着急"——大概率是痒点
 - 如果用户说"我现在用XX解决，但不太满意"——有机会
 
-:::
-
-::: info 第二步：替代方案分析——用户现在怎么解决
-
 **关键问题：**用户现在用什么方法解决这个问题？
 
 | 替代方案类型 | 说明 | 机会判断 |
@@ -727,7 +719,7 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 | **用很笨的方法** | Excel、手工、多人协作 | 好机会，用户渴望更好的方案 |
 | **用多个工具拼凑** | A工具+B工具+C工具 | 好机会，整合有价值 |
 | **用成熟产品** | 但用户不满意 | 有机会，但需要差异化 |
-| **用成熟产品** | 用户很满意 | 机会很小，除非有颠覆性创新 |
+| **用成熟产品** | 用户很满意 | 机会很小，除非有颠覆式创新 |
 
 ::: tip 什么是"颠覆式创新"？
 
@@ -747,10 +739,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 - 普通减肥者用薄荷健康（成熟产品，满意度中等）——有机会做细分
 - 学生用微信群做二手交易（多个工具拼凑）——有机会做整合
 
-:::
-
-::: info 第三步：付费意愿测试——让用户真金白银投票
-
 **最有效的方法：预售或定金**
 
 **操作步骤：**
@@ -765,10 +753,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 **注意：**说"我会买"的人很多，真正掏钱的人才是你的目标用户。
 
-:::
-
-::: info 第四步：市场规模估算——算清账
-
 **简单公式：**
 ```
 潜在市场规模 = 目标用户数量 × 付费意愿 × 客单价
@@ -788,10 +772,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 - 市场规模 1-10亿：中小赛道，可以做但天花板明显
 - 市场规模 < 1亿：小众市场，适合副业或小而美
 
-:::
-
-::: info 第五步：竞争壁垒思考——你能守住吗
-
 **关键问题：**如果产品做起来了，别人抄袭怎么办？
 
 **常见的护城河类型：**
@@ -810,16 +790,12 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 - 但不要紧，关键是<strong>跑得快</strong>
 - 先占领市场，再建立壁垒
 
-:::
-
 ---
 
 ### 附录B：横向切分人群方法
 
 不要试图服务"所有XX用户"，而是找到<strong>一个特定的人群</strong>，他们的需求更痛、更具体。
 
-::: info 切分方法
-
 **第一步：列出所有可能的细分人群**
 
 针对你的产品概念，列出所有可能的人群。
@@ -844,8 +820,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 的人群。
 
-:::
-
 ::: tip 切分示例
 
 **产品概念：** 记账 APP
@@ -867,7 +841,7 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 找到人群后，不要停留在单一功能，而是要理解用户的<strong>完整场景</strong>。
 
-::: info 深挖方法
+找到人群后，不要停留在单一功能，而是要理解用户的<strong>完整场景</strong>。
 
 **第一步：描述用户的一天**
 
@@ -885,8 +859,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 基于场景和情绪，重构产品价值。
 
-:::
-
 ::: tip 深挖示例
 
 **人群：** 产后妈妈
@@ -980,8 +952,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 通过多轮 AI 对话，把普通的 idea 逐步打磨成可落地的精准产品概念。
 
-::: info 第一步：抛出原始想法
-
 **操作：**
 - 描述你的初步想法（哪怕很粗糙）
 - 告诉 AI 你的担忧（竞争激烈、不知道怎么差异化等）
@@ -992,10 +962,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 但我发现 [问题/担忧]。
 ```
 
-:::
-
-::: info 第二步：让 AI 帮你规划 MVP
-
 **操作：**
 - 让 AI 帮你制定最小可行产品计划
 - 讨论技术实现难度和成本
@@ -1010,10 +976,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 4. 设定验证指标
 ```
 
-:::
-
-::: info 第三步：提出你的担忧
-
 **操作：**
 - 技术实现难度？
 - 内容制作成本？
@@ -1028,10 +990,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 3. [担忧3]
 ```
 
-:::
-
-::: info 第四步：让 AI 提供解决方案
-
 **操作：**
 - 针对你的担忧，给出具体建议
 - 多个方案对比，选择最优
@@ -1042,10 +1000,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 针对我的担忧，请给出具体的解决方案。
 ```
 
-:::
-
-::: info 第五步：最终确认计划
-
 **操作：**
 - 整理一个清晰的行动计划
 - 设定验证指标
@@ -1056,8 +1010,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 请帮我整理一个清晰的行动计划。
 ```
 
-:::
-
 ::: tip 关键技巧
 
 - **多轮对话：** 不要期待一次对话就得到完美答案，多轮迭代
@@ -1107,8 +1059,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 :::
 
-::: info 产品经理的快速验证法
-
 <strong>不要问"你会用这个产品吗？"</strong> 这种问题得到的都是假阳性回答。
 
 <strong>要问：</strong>
@@ -1124,8 +1074,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 - 愿意付定金的用户比例 5-10%：需求存在，但需要打磨
 - 愿意付定金的用户比例 < 5%：需求不成立，或产品概念有问题
 
-:::
-
 ---
 
 ## 本章小结
@@ -1161,6 +1109,6 @@ AI 回复说："产后妈妈这个群体其实很好找，推广成本可以很
 
 :::
 
-<strong>记住：</strong> 好的产品经理不是凭空创造需求，而是发现那些<strong>被忽视、被低估、被错误满足</strong>的真实需求，并找到让用户愿意为之买单的方式。
+**记住：** 好的产品经理不是凭空创造需求，而是发现那些<strong>被忽视、被低估、被错误满足</strong>的真实需求，并找到让用户愿意为之买单的方式。
 
 在下一章，我们将带着经过验证的想法，开始学习如何用 AI IDE 把它变成可交互的产品原型。