注册不是终点：vibe 项目新用户上手引导设计实战

先说一个很多 vibe 项目作者不愿承认的事实：你的产品大概率不是死在功能不够多，而是死在用户注册后的第一分钟。

想想你自己的行为。你在 Product Hunt 或推特上刷到一个很酷的新工具，点进去，注册——然后呢？邮箱验证、填公司名、选团队规模、看一段三分钟的欢迎视频、再被要求"完善资料以获得更好体验"。到第三屏的时候，你已经忘了自己是来干嘛的，关掉标签页，回去刷推特了。这个工具的功能你一个都没用过，但它在你心里已经"不好用"了。

这就是 vibe coding 时代最残酷的漏斗。以前做产品，上线慢，获客贵，所以大家好歹会认真打磨第一印象。现在一个人一个周末就能 vibe 出一个 SaaS，Launch 变得极其容易，于是所有人都把精力花在"多做几个功能"上，却没人管"用户进来的第一分钟发生了什么"。结果是：流量来了，注册有了，留存是零。你去看后台，注册曲线很好看，DAU 曲线像心电图停跳——问题不在产品价值，在上手引导。

本文要讲的，就是这第一分钟的设计实战。先把核心观点摆出来，一共三句：

第一，引导的目标不是"教会用户用产品"，而是"让用户尽快体验到你承诺的价值"。这两者的差别，决定了你写出来的引导是教程还是广告。教程关心"这个按钮是干嘛的"，广告关心"你现在就能得到什么"。用户不关心你的功能地图，他只关心一件事：我花这一分钟，值不值。

第二，vibe 项目的上手引导必须按"分钟"而不是"天"来设计。大公司的 onboarding 可以做成邮件序列、七天养成计划，因为他们有品牌、有沉没成本、有销售跟进。你没有。独立项目的用户是"路过"的，给你的耐心预算就是 60 到 180 秒。超时，对方就走了，而且大概率永远不回来。

第三，好引导都是减法，不是加法。绝大多数引导的问题不是缺了哪一步，而是多了十步。本文后面会给你一套"砍字段清单"和"上线前自查表"，核心思想就一个：每删掉一个不必要的步骤，转化率就涨一截。

这篇指南是写给正在 vibe 做产品的独立开发者和小团队的：8 节内容，从找 Aha moment 的画布模板，到三种引导模式的选型决策表，到可直接粘贴的 React 引导组件代码，到埋点事件命名规范。读完你应该能在一周内把自己产品的第一分钟重做一遍。

一、为什么 vibe 项目死在上手：三个结构性原因

先诊断病因。vibe 项目在上手环节翻车，不是作者不用心，而是这个品类有三个结构性短板。

短板一：功能是 vibe 出来的，路径是没人走过的。用 AI 写代码的一大特点是"加功能极其便宜"：prompt 一句话，多出三个页面。于是产品越做越"全"，但没有人（包括作者自己）完整地以"第一次打开"的视角走过一遍主路径。你作为作者，打开自己产品的第一反应是"我知道点哪里"；而新用户的第一反应是"这都是什么"。这种视角差，是绝大多数上手问题的根源。治法很简单，后面第八节的检查清单里有一条：找一个没用过你产品的朋友，开屏幕共享，看他第一分钟卡在哪里——你会想把一半的引导重写。

短板二：把"注册"当成了终点。很多独立开发者的心理终点是"用户注册了"，好像注册就等于获客成功。但注册只是用户给了你一个联系方式，真正的获客发生在用户第一次说出"哦，这东西有用"的那一刻——也就是 Aha moment。注册到 Aha 之间的每一步，都是流失漏斗。Duolingo 为什么注册流程只有 15 秒、选完语言立刻开始做第一道题？因为它赌的是：让你先爽了，你自然会回来填资料。顺序不能反。

短板三：抄了大公司的引导，配不上自己的体量。Notion 的新手引导做得很漂亮：模板库、入门文档、示例页面。但 Notion 有几百人的团队和成熟的用户分层，你抄它的形式，只会抄来复杂度。一个三人小团队做的待办工具，上来就学 Notion 做"工作区模板中心"，结果用户在模板选择页就流失了——因为用户要的只是一个能记事的地方。小产品的引导，越像"路边摊老板直接递给你一串尝尝"，越有效。

总结成一句话：vibe 项目的上手问题，本质是"第一分钟的价值密度"太低。用户在这一分钟里付出的操作成本（填表、看教程、理解概念）超过了他感知到的价值回报，他就走了。后面所有的设计，都是围绕"提高第一分钟的价值密度"展开的。

二、Aha moment 先行：先画出你的"价值承诺画布"

动手设计引导之前，先回答一个问题：如果只能让用户做一件事，哪件事会让他觉得"这产品值了"？

这就是 Aha moment——用户第一次真实体验到你承诺价值的那个瞬间。注意三个关键词：第一次（越早越好）、真实（不是看宣传片，是亲手做出来）、你承诺的价值（必须和你 landing 页上吹的牛对得上）。

举几个教科书例子，感受一下什么叫"对得上"：Loom 承诺"一键录屏分享"，它的 Aha moment 是用户录完第一条视频、拿到分享链接的那一刻；Canva 承诺"不会设计也能做图"，Aha moment 是用户套完第一个模板、导出一张能发朋友圈的图；Todoist 承诺"把脑子里的事倒出来"，Aha moment 是用户建完第一个项目、勾掉第一个任务，看到那声清脆的"完成"音效。这些产品的引导设计千差万别，但第一分钟都在干同一件事：把用户往 Aha moment 的方向推，越快越好。

反例也好找：很多 AI 写作工具的 landing 页写着"10 秒生成爆款文案"，用户注册进来，先看到的是"选择你的行业（12 个选项）→ 选择写作风格（8 个选项）→ 绑定知识库（可选但推荐）→ 观看 2 分钟教程"。四步走完，用户离"生成第一段文案"还有三步。承诺和体验之间隔了一道填表墙，Aha moment 被埋在了第五分钟——而大多数用户在第三分钟就走了。

怎么找到自己产品的 Aha moment？三条路，按靠谱程度排序：

1. 看数据（如果有的话）。把用户按"注册后 7 天是否留存"分成两组，回头看这两组在第一天行为上的最大差异。那个"留存组做了、流失组没做"的动作，八成就是你的 Aha moment。这是 Facebook 当年找到"7 天内加 10 个好友"这个神奇数字用的方法，土，但是有效。

2. 问用户（没数据就用这个）。别问"你觉得我们产品怎么样"，要问"你第一次觉得'这东西有用'是什么时候，你当时在干什么"。用户描述的那个场景，就是 Aha moment 的素描。问 5 到 10 个真实用户，答案会高度趋同。

3. 盯着你的 landing 页看。把你首页上最大的那句价值主张抄下来，然后问自己：用户要做几步才能亲手验证这句话？如果超过 3 步，你的引导就有问题；如果超过 5 步，你的整个产品架构可能都有问题。

找到之后，把它画进下面这张"价值承诺画布"。建议你现在就拿张纸（或开个文档）填一遍——写不出来的话，先别往下看，因为后面的所有设计都挂在这张表上：

画布项	填写说明	示例（虚构：AI 会议纪要工具"会记"）
一句话价值承诺	抄你 landing 页上最大的那句，不许超过 20 个字	开完会，纪要自动写好
Aha moment	用户亲手做哪个动作会"哇"一下？必须是动作，不是页面	上传第一段会议录音，看到结构化纪要生成出来
距离 Aha 还有几步	从"打开网站"数到 Aha，列出每一步	注册→验证邮箱→上传录音→等待生成→查看纪要（5 步）
哪几步能砍	对着每一步问：不做这步，Aha 还成立吗？	邮箱验证可后置；上传录音可用"试听一段示例录音"代替，砍到 3 步
Aha 的"哇"够不够哇	诚实打分：1-5 分，3 分以下先回去改产品	4 分：第一次看到 AI 把 40 分钟会议浓缩成一页纸，冲击力够

这张表的最后一行是最狠的：如果 Aha moment 本身不够"哇"，引导做得再漂亮也没用。引导是放大器，不是魔术师。它能把一个 4 分的体验在第一分钟里交付出去，但变不出一个不存在的 4 分体验。很多人在引导上反复打磨却不见起色，根子在这里——先确认你的产品真有一个值得被快速交付的"哇"，再谈引导设计。

三、三种引导模式选型：别上来就做 tour

市面上的引导设计翻来覆去就是三种模式。选错模式比不做引导更糟——一个工具型产品硬套社交产品的 tour，就像给螺丝刀配说明书视频：用户只想拧螺丝。

模式一：渐进式披露（Progressive Disclosure）——"先给你看 20%，剩下的等你问我要。"

这是最适合大多数 vibe 项目的模式。核心做法：首屏只暴露通往 Aha moment 的那一条路，其他功能全部收起来，等用户产生需求时再出现。Linear 是这方面的高手：新工作区打开，界面干净得不像话，视觉中心只有一个"创建你的第一个 issue"的空状态；等你建了十几个 issue，开始觉得乱了，标签、筛选、自动化规则才慢慢浮现。Figma 也一样：第一次打开，你面前的就是一块画布和几个基础形状，组件库、自动布局这些"高级货"藏在二级菜单里。

渐进式披露的精髓是一个判断：用户现在不需要的功能，对他来说就是噪音。你引以为傲的 40 个功能，在新用户眼里是 40 个"我要学的东西"。先藏起来，不丢人；等用户主动找，你再给，他会觉得你"懂他"。

模式二：空状态引导（Empty-State Onboarding）——"空着的地方，每一句文案都是广告位。"

新用户的产品里到处都是空的：没有任务、没有文档、没有数据、没有好友。绝大多数产品在这里放一句灰色的"暂无数据"，等于把全站最好的广告位空着。空状态引导就是把每个"空"都变成一次微型引导。

正面教材：Todoist 的新用户打开，任务列表不是空的——里面躺着几条预置的示例任务，第一条就是"点击这个任务，把它勾掉试试 👇"。用户勾掉的瞬间，听到了完成音效、看到了庆祝动画，Aha moment 就这么交付了，全程零教程。Notion 吃过亏：早期新用户面对的就是一张白纸，流失惨重，后来才补上模板库（Template Gallery），让用户"从一个现成的样子开始改"，而不是"从一张白纸开始想"。这个教训值得所有 vibe 项目刻在墙上：永远不要让用户面对一张真正的白纸。

模式三：交互式 tour（Product Tour）——兴奋剂，慎用。

就是那些"点击这里创建项目 → 很好！现在点击这里邀请队友 → 太棒了！"的气泡小 tour。Arc 浏览器的 onboarding tour 是这类设计的巅峰：它把 tour 做成了一场有剧情的"新手任务"，每一步都有即时反馈。但注意，Arc 的团队为这个 tour 投入了专门的设计师和数月打磨。对只有一两个人的 vibe 项目来说，tour 有三个致命伤：做起来贵（每改一次 UI 就要重录一遍 tour 步骤）、用户烦（90% 的人点"跳过"，剩下 10% 点"下一步"时也没在看）、还脆弱（响应式一错位，气泡就指错地方）。

我的观点很直接：tour 应该是你最后考虑的模式，而不是第一个。只有当你的产品确实有"不跟着走就一定会迷路"的复杂流程（比如多步骤的配置向导），才值得做 tour。其他情况，先用空状态引导和渐进式披露把 80% 的问题解决掉。

下面是选型决策表。对照你的产品类型，选一行：

产品类型	推荐模式	第一屏应该是什么	Aha 目标（第几分钟）	千万别干的事
工具型（待办、笔记、记账）	空状态引导为主	预置一条可交互的示例内容，用户一点就有反馈	1 分钟内	别做功能 tour；别让用户先建"工作区"
内容创作型（设计、写作、视频）	空状态引导 + 模板	模板库 / 示例作品，点一下就能改	2 分钟内（改完第一个模板）	别让用户从空白画布开始；别先讲图层概念
AI 对话/生成型	渐进式披露	一个预填好的 prompt 示例，点发送就出结果	1 分钟内（看到第一次生成）	别先让用户选模型、调参数；别搞"提示词教程"
社交/协作型	渐进式披露 + 空状态	先让用户单人玩起来（个人任务/草稿），协作功能后置	3 分钟内（先个人爽，再拉人）	别强制"邀请 3 位队友才能继续"；这是流失加速器
数据/分析型（看板、统计）	空状态引导	用示例数据集渲染出一张"已经很好看"的看板	1 分钟内（看到"我的数据也会长这样"）	别先让用户接数据源、配 API key

看最后一列：所有"千万别干的事"都有一个共同点——它们都在 Aha moment 之前设置了关卡。选型的终极检验标准就一条：从你选的模式出发，用户到 Aha moment 的步数有没有变少？没有的话，模式选错了，重选。

四、别让用户填表：注册页要砍掉的 7 类字段

注册表单是 Aha moment 之前最大的一道墙。行业里做过 A/B 测试的人都知道一个粗糙但管用的经验：表单每多一个字段，转化率就往下掉一截——具体掉多少因产品而异，但方向永远是向下的。所以这一节不讲"怎么设计表单"，讲"怎么砍表单"。

下面 7 类字段，是 vibe 项目注册页上最常见的"赘肉"，按"该砍的优先级"排序：

1. "你是怎么知道我们的？"（来源调查）——砍掉，毫不犹豫。这是市场部的需求，不是用户的需求。想做渠道归因，用 URL 参数（utm_source）自动采集，别让用户替你填问卷。用户在注册页看到这道题，心里想的是："我只是想试用一下，你查户口呢？"

2. 公司名 / 团队规模 / 职位。——除非你的产品按团队规模定价且必须在注册时确定，否则一律后置。这些字段的唯一作用是让销售好做画像，但你的 vibe 项目大概率没有销售。真想分层，去看用户行为：建了 5 个项目的人自然就是重度用户，不用他自己勾选"我是重度用户"。

3. 头像上传。——注册时让用户传头像，等于在用户和你之间立了一块"去找一张好看的照片再回来"的牌子。用第三方登录（GitHub/Google）就直接拿现成的头像；邮箱注册就先给一个根据名字生成的默认头像（彩色首字母那种），等用户爱上产品了，他自己会去换。

4. 手机号 + 短信验证（前置）。——除非你是金融、社交这类强监管或强反作弊场景，否则把短信验证往后放。短信验证码的到达率、等待时间、输错重发，每一步都在赶人。邮箱验证也一样：能"先体验、后验证"的，就别拦在前面。Loom 当年就是这么干的——先让你录，导出分享链接的时候再让你注册。

5. 密码复杂度 + 确认密码框。——2026 年了，还在要求"8-20 位含大小写和特殊字符"并让人输两遍密码的产品，活该流失。用 magic link（邮箱一键登录）或第三方 OAuth，一步到位。密码这个东西，能不要就不要；实在要，"确认密码"框先砍，改成"显示密码"的小眼睛。

6. 生日 / 性别 / 所在地。——除非你的产品功能真的依赖这些信息（比如生日提醒应用要生日），否则它们出现在注册页的唯一理由是"以后也许有用"。"以后也许有用"是最贵的产品需求，因为它在用今天的转化率做抵押。

7. 服务条款的全文阅读确认。——法律要求保留"我已阅读并同意"的勾选，但别设计成"请滚动读完 8000 字条款才能点下一步"。一个勾选框 + 链接，够了。把法务的焦虑转嫁给用户，是最低级的成本转移。

砍完之后，注册页应该长什么样？理想状态是：一个邮箱输入框（或两个第三方登录按钮）+ 一个"开始"按钮，没了。Duolingo、Loom、Arc 都是这个路数。

但画像数据总还是要的，怎么办？答案是渐进式画像采集：把问题拆开，放到用户最愿意回答的时刻去问。时机有个铁律——在用户刚刚获得价值的那一刻提问，通过率最高。刚勾掉第一个任务的 Todoist 用户，你问他"是做什么工作的"，他大概率愿意答；刚注册完、还没爽到的用户，你问什么他都烦。

下面是一张可以直接抄的采集清单：

时机	问什么（最多 1-2 个）	为什么这时问
注册时	只留邮箱 / 第三方登录，什么都不问	摩擦为零，先让用户进来
第一次 Aha moment 之后	昵称（用于个性化称呼）	用户刚爽完，戒备心最低；昵称能立刻用在界面上，有即时回报
第 2-3 次访问	使用场景单选（工作/学习/个人，3 个选项以内）	用户已经决定留下来，愿意花 5 秒帮你"做得更好"
第 7 天左右（或完成 N 个核心动作后）	行业/团队规模（如果真需要）	这时问的是"老用户"，回答率和准确率都完全不同
永远不要在注册时问	手机号、公司名、"怎么知道我们的"	见上文 7 类字段

记住这个顺序的本质：先给价值，再要信息。每一次提问，都应该是用户"欠"你一次人情之后。这不是心机，这是尊重——尊重用户的时间，也尊重自己的转化率。

五、预置"哇"的初始状态：空状态是你最好的广告位

用户注册完、进了产品，看到的第一个界面，大概率是空的：没有任务、没有笔记、没有数据。这是最危险的一分钟，也是机会最大的一分钟——因为此时用户注意力 100% 在屏幕上，没有任何干扰。你在空状态上写的每一句文案，阅读率都高得吓人。

但大多数产品的空状态长这样：一个灰色的大图标 + "暂无数据" + 一个"去创建"按钮。这三件套的问题在于：它只告诉用户"这里什么都没有"，没告诉用户"这里可以有什么"。用户看着"暂无数据"，心里想的是"哦，还得我自己从头弄"，然后关掉了。

好的空状态有三要素，缺一不可：① 解释"为什么空"（消除用户的自我怀疑——"是不是我操作错了？"）；② 给一个立刻能点的动作（按钮文案要是动词，不是名词）；③ 给一个"别人已经做成的样子"（示例/模板，让用户看到终点）。

下面是三个高频场景的文案模板，中英双语，直接改关键词就能用。注意按钮文案的写法：永远用动词开头，让用户感觉"点一下就有东西发生"。

场景 A：待办/任务类产品

	反例（别这么写）	模板（抄这个）
标题	暂无任务	你的第一份清单，已经帮你列好了 👇
说明	（无）	下面是 3 条示例任务，试着勾掉第一条，看看会发生什么。
按钮	新建任务	＋ 添加我的第一条任务
英文版	No tasks yet	Your first list is ready 👇 / Try checking off the first sample task below and see what happens. / ＋ Add my first task

场景 B：内容创作类（笔记/设计/文档）

	反例（别这么写）	模板（抄这个）
标题	还没有作品，快去创作吧	别从白纸开始——从这 3 个模板里挑一个改
说明	（无）	每个模板都是可以直接用的成品，改几个字就是你的了。
按钮	新建	看看模板 →
英文版	No works yet	Don't start from blank — pick one of these 3 templates / Each one is a finished piece. Change a few words and it's yours. / Browse templates →

场景 C：数据看板类

	反例（别这么写）	模板（抄这个）
标题	暂无数据	先睹为快：你的数据长这样 📊
说明	接入数据源后即可查看	下面是示例数据渲染的效果，接入你的数据源后，这里会变成你的真实数据。
按钮	接入数据	用示例数据逛逛 / 接入我的数据
英文版	No data	Sneak peek: this is what your data will look like 📊 / Below is a live preview with sample data. Connect your source and it becomes yours. / Explore with sample data / Connect my data

注意场景 C 的按钮给了两个选项："用示例数据逛逛"在前，"接入我的数据"在后。这个顺序是故意的——先让用户零成本爽一次（看到好看的看板），再谈接入的正事。把"逛逛"放在前面，点"接入"的人反而会变多，因为用户已经亲眼看到了终点长什么样。这就是第五节开头说的：空状态不是缺数据的可怜样，是你唯一一次可以独白的机会，别浪费在"暂无数据"四个字上。

还有一个细节：示例内容一定要可交互、可删除。Todoist 的示例任务能勾掉、Notion 的模板页能直接改、看板的示例数据能点进去看明细——"能动手"和"只能看"，Aha 强度差一个量级。以及，示例内容被用户清空后，空状态要能优雅地退回"真正的空"（这时再放一句"干得漂亮，这里是你的地盘了"之类的文案），别让示例阴魂不散。

六、代码实战：一个基于 localStorage 的 3 步引导组件

理论讲完了，上代码。很多 vibe 项目的引导之所以烂，不是因为不想做，而是"做一个引导组件"听起来像个大工程。其实核心逻辑就 50 行：记录用户看到第几步、存到 localStorage、下次不再打扰。下面是一个可以直接粘贴进 Next.js 项目的完整组件，TypeScript + Tailwind，零依赖。

设计决策先说清楚，免得你直接抄了却不知道为什么：① 只做 3 步。超过 3 步的引导，完成率会断崖下跌——这不是理论，是无数产品的埋点数据反复验证过的结论。你的 Aha moment 如果 3 步讲不完，说明前面几节的功课没做完，回去砍步骤，而不是加第 4 步。② 用 localStorage 而不是后端字段。引导状态是纯前端的事，别为了"用户看没看过引导"去改数据库表结构、发 API 请求——vibe 项目的后端 schema 已经够乱了。③ 跳过按钮必须一眼可见。强迫看完的引导，用户记住的不是你的产品，是"这个产品很烦"。④ 每一步都有一个明确的动作，而不是纯文字介绍。记住第一句核心观点：引导是广告，不是教程。

"use client";

import { useEffect, useState } from "react";

const STORAGE_KEY = "myapp-onboarding-done-v1";
// 注意：key 里带版本号 v1。以后你改版引导流程时，
// 只需要把 v1 改成 v2，老用户就会重新看到新版引导，
// 而不用去清理任何人的 localStorage。

type Step = {
  title: string;
  desc: string;
  actionLabel: string;
  // 每一步绑定的真实动作：点下去，用户就离 Aha 更近一步
  onAction: () => void;
};

const STEPS: Step[] = [
  {
    title: "先尝一口，不用注册",
    desc: "点下面的按钮，我们用示例数据给你变一张看板出来，看看你的数据以后长什么样。",
    actionLabel: "用示例数据逛逛",
    onAction: () => {
      // TODO: 换成你自己的逻辑，比如 router.push("/demo")
      window.dispatchEvent(new CustomEvent("onboarding:preview"));
    },
  },
  {
    title: "现在，换成你自己的",
    desc: "示例看板看明白了吧？接入你的数据源，同样的图表就会变成你的真实数据，全程不到 1 分钟。",
    actionLabel: "接入我的数据",
    onAction: () => {
      window.dispatchEvent(new CustomEvent("onboarding:connect"));
    },
  },
  {
    title: "搞定，去看你的第一张看板",
    desc: "数据正在同步。去看板页逛逛吧——以后每天早上打开，就是这个样子。",
    actionLabel: "去看我的看板",
    onAction: () => {
      window.dispatchEvent(new CustomEvent("onboarding:finish"));
    },
  },
];

export default function OnboardingTour({
  onEvent,
}: {
  // 埋点钩子：把事件透出去，第七节会讲怎么用
  onEvent?: (name: string, props?: Record<string, unknown>) => void;
}) {
  const [step, setStep] = useState<number | null>(null);

  useEffect(() => {
    // 关键：只在客户端读 localStorage，避免 SSR 水合报错
    try {
      if (!localStorage.getItem(STORAGE_KEY)) {
        setStep(0);
        onEvent?.("onboarding_started");
      }
    } catch {
      setStep(0);
    }
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") dismiss("esc");
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (step === null) return null;
  const current = STEPS[step];
  const isLast = step === STEPS.length - 1;

  const dismiss = (reason: "skip" | "esc" | "done") => {
    try {
      localStorage.setItem(STORAGE_KEY, "1");
    } catch {
      /* 隐私模式写失败也不阻塞 */
    }
    onEvent?.(
      reason === "done" ? "onboarding_completed" : "onboarding_skipped",
      { at_step: step, reason }
    );
    setStep(null);
  };

  const next = () => {
    onEvent?.("onboarding_step_viewed", { step });
    current.onAction();
    if (isLast) dismiss("done");
    else setStep(step + 1);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
        {/* 进度点：让用户知道"还有几步"，3 步的进度条本身就是减压阀 */}
        <div className="mb-4 flex gap-1.5">
          {STEPS.map((_, i) => (
            <div
              key={i}
              className={`h-1.5 flex-1 rounded-full ${
                i <= step ? "bg-blue-600" : "bg-gray-200"
              }`}
            />
          ))}
        </div>
        <h3 className="text-lg font-bold">{current.title}</h3>
        <p className="mt-2 text-sm text-gray-600">{current.desc}</p>
        <div className="mt-6 flex items-center justify-between">
          {/* 跳过按钮：灰色、小字，但永远在那儿 */}
          <button
            onClick={() => dismiss("skip")}
            className="text-sm text-gray-400 hover:text-gray-600"
          >
            跳过引导
          </button>
          <button
            onClick={next}
            className="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
          >
            {current.actionLabel} {isLast ? "→" : "→"}
          </button>
        </div>
      </div>
    </div>
  );
}

用法：在首页或 dashboard 里 <OnboardingTour onEvent={track} /> 放一行就行，track 是你的埋点函数。STEPS 数组里的文案和 onAction 换成你自己的——记住，每一步的 onAction 必须是一个真实动作（跳转、打开弹窗、触发示例），而不是"下一页"。用户点三下，每一下都离 Aha 更近，这才是引导；点三下只看了三段文字，那叫幻灯片。

还有两个生产环境细节：第一，STORAGE_KEY 带版本号，改版引导时 bump 版本号即可让老用户重看；第二，try/catch 包住 localStorage 读写——Safari 隐私模式、无痕窗口下 localStorage 可能抛异常，别让一个引导组件把整页搞崩。

七、度量：先看漏斗，再谈优化

引导上线后，第一件事不是庆祝，是看数据。很多独立开发者（包括早期的我）有个坏习惯：凭感觉调引导——"我觉得第二步文案不好，改一下吧"。感觉是最贵的优化方式，因为每一次"感觉"都是一次没有对照组的发布。正确姿势是：先定义 4 个核心指标，让漏斗告诉你哪一步在漏水，再动手。

指标 1：注册 → Aha 完成率（核心中的核心）。定义：注册用户中，在首次会话内完成 Aha moment 动作的比例。这是整个引导设计的北极星——前面六节所有的减法、文案、模式选型，最终都是为了推高这个数字。如果只能看一个数，看这个。

指标 2：引导完成率 vs 跳过率（按步骤拆）。定义：开始引导的用户中，走完所有步骤的比例；以及每一步的跳过/流失分布。看这个指标不是为了追求"100% 看完"——恰恰相反，健康的引导允许 30%-50% 的跳过率，因为老用户、回访用户本来就不需要引导。真正要盯的是某一步的跳过率突然陡增：比如第 2 步的跳过率是第 1 步的三倍，说明第 2 步有问题（文案吓人？要填东西？加载太慢？），修那一步就行。

指标 3：首访时长中位数（Time to First Value）。定义：从用户首次打开产品到完成 Aha 动作的中位时长。这个指标逼着你回答一个残酷的问题：用户到底花了多久才爽到？如果中位数是 47 秒，干得漂亮；如果是 6 分钟，回去看第二节的画布——你的 Aha 离入口太远了。

指标 4：完成引导 vs 未完成引导的首日留存对比。定义：两组用户次日/7 日留存率的差值。这是证明"引导值得做"的证据，也是你决定"要不要继续投入做引导"的依据。如果两组留存没差别，说明你的引导只是在"走流程"，没有真正交付价值——问题不在引导形式，在 Aha 本身（回第二节最后一行）。

四个指标，够了。别一上来就搞 20 个指标的 dashboard——指标一多，你就不知道先看哪个，最后等于没看。等这四个跑顺了，再按需加。

埋点事件命名规范（配合第六节代码里的 onEvent，直接能用）：

事件名	触发时机	必带参数
onboarding_started	引导首次展示	source（新用户/版本更新触发）
onboarding_step_viewed	每一步展示时	step（第几步，从 0 开始）
onboarding_step_action	用户点了某一步的动作按钮	step，action（按钮标识）
onboarding_skipped	用户点跳过 / 按 Esc / 关弹窗	at_step（在哪一步跳的），reason
onboarding_completed	走完最后一步	duration_sec（总耗时）
aha_moment_reached	用户完成 Aha 动作（核心！）	minutes_since_signup（注册后几分钟）

命名规则三条，团队（哪怕只有你一个人）必须遵守：① 全小写 snake_case，别一会儿驼峰一会儿中划线；② 动词用过去式（started/completed/reached），表示"已经发生的事"；③ aha_moment_reached 单独埋，不要和引导完成混在一起——因为用户完全可能跳过引导却自己摸到了 Aha（这是好事！），也可能走完引导却没爽到（这是事故）。把这两个事件分开，你才能看清真相。

最后，一个反直觉的建议：上线第一周，每天只看指标 1。注册→Aha 完成率涨了，说明方向对了；没涨，别去调按钮颜色、文案措辞这些细枝末节，回去重画第二节的价值承诺画布。漏斗数据最大的价值，不是告诉你"哪颗按钮该换颜色"，而是告诉你"方向错没错"。

八、上线前自查：10 项检查清单

引导重做完、发布之前，逐项打勾。这一节没有理论，就是清单——建议打印出来贴在显示器旁边。

1. 注册字段 ≤ 3 个。理想是 1 个（邮箱）或 0 个（第三方登录按钮）。超过 3 个，回去看第四节，每多一个都要有"不填会死"的理由。

2. 第一屏有一个一眼能看懂的价值动作。打开产品 5 秒内，用户能说出"我点哪里能得到什么"。说不出来，首屏重做。

3. 没有强制看完的教程。所有引导步骤都可以跳过，跳过按钮不需要找。记住：用户跳过你的引导去自己探索，是胜利，不是失败。

4. 每个空状态都有示例内容或模板。全站扫一遍，只要是新用户会看到的"空"，都要有第 ③ 要素（"别人做成的样子"）。参见第五节。

5. 注册到 Aha ≤ 3 步。拿出第二节的画布，数一遍。如果超过 3 步，每一步都要回答"为什么不能砍"。

6. 找一个没用过产品的朋友做 5 分钟测试。开屏幕共享，你不许说话，看他第一分钟卡在哪里。他卡住的地方，就是你的引导在"自以为讲清楚了"的地方。这是最便宜、回报最高的用户研究。

7. 移动端走一遍。vibe 项目的作者 90% 时间在桌面端开发，但用户可能一半在手机上。引导弹窗在小屏幕上会不会盖住关键按钮？步骤条会不会错位？亲自在手机上点三遍。

8. 断网和报错状态测一遍。引导流程里如果有"接入数据源""邀请队友"这种依赖外部的步骤，失败时显示什么？一句"出错了请重试"等于把用户推下悬崖——告诉他刚才哪一步成功了、现在卡在哪、点哪里能绕过去。

9. 未登录也能看到"成品的样子"。如果条件允许，做一个免登录的 demo/preview 模式（参考第六节第 1 步的"用示例数据逛逛"）。这是转化率最高的单一改动：用户先爽，后注册。Loom、Canva 都是这么干的。

10. 埋点已验证。第七节的 6 个事件，在测试环境里完整走一遍，确认每个事件都带着正确的参数进了你的分析工具。没有数据的引导优化，等于闭眼开车——而绝大多数人上线的引导，埋点都是"下次再加"。

全部打勾，就可以发布了。然后每天看一次"注册→Aha 完成率"，连续看两周。你会发现，之前为"多做两个功能"熬的那些夜，换来的增长，可能不如这第一分钟的重做。vibe coding 让"做出产品"变得便宜，但"让人用起来"依然贵——贵在你愿不愿意把第一分钟当成产品本身来设计。

注册不是终点，是起点。而好的起点，值得你用做核心功能一半的认真程度去打磨。