delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sanbuphy
2026-02-12 22:35:33 +08:00
parent 68cd389545
commit 36d7919da6
3 changed files with 349 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/SummaryCard.vue
+279
View File
@@ -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
+3 -1
View File
@@ -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
+67 -119
View File
@@ -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 个目标用户，问他们"你现在怎么解决这个问题？"
2. **替代方案分析** —— 用户现在用什么方法解决这个问题？
3. **付费意愿测试** —— 让用户真金白银投票（预售或定金）
4. **市场规模估算** —— 算清账：目标用户数量 × 付费意愿 × 客单价
5. **竞争壁垒思考** —— 你能守住吗？
找到 10 个目标用户，问他们"你现在怎么解决这个问题？"
:::
#### 第二步：替代方案分析
用户现在用什么方法解决这个问题？你的产品比现有方案好在哪里？
#### 第三步：付费意愿测试
预售或定金。愿意付定金的用户比例：
- **> 10%**：需求真实，值得投入
- **5-10%**：需求存在，但需要打磨
- **< 5%**：需求不成立，或产品概念有问题
#### 第四步：市场规模估算
目标用户数量 × 付费意愿 × 客单价
#### 第五步：竞争壁垒思考
技术壁垒？网络效应？品牌？成本优势？
::: tip 关键指标
@@ -268,31 +261,41 @@ const duration = '约 <strong>3 小时</strong>'
:::
---
### 本幕小结：小明的收获
通过第一幕，小明明白了：
**1. 真需求的标准**
- 用户愿意为之付费（最重要的标准）
- 用户愿意为之改变行为
- 没有解决方案时用户会损失很大
**2. 避开假需求**
- 解决伪痛点（痒点而非痛点）
- 市场规模太小，无法支撑商业模式
- 解决方案比问题还复杂
**3. 优先级排序**
- 痛点 > 爽点 > 痒点
---
📦 **本幕输出：**
- 理解了什么是真需求
- 掌握了需求的三层分类（痛点、爽点、痒点）
- 学会了5步判断法验证需求真伪
<SummaryCard
title="本幕小结：小明的收获"
:sections="[
{
number: '1',
title: '真需求的标准',
items: [
'用户愿意为之付费（最重要的标准）',
'用户愿意为之改变行为',
'没有解决方案时用户会损失很大'
]
},
{
number: '2',
title: '避开假需求',
items: [
'解决伪痛点（痒点而非痛点）',
'市场规模太小，无法支撑商业模式',
'解决方案比问题还复杂'
]
},
{
number: '3',
title: '优先级排序',
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 把它变成可交互的产品原型。