如何用 /impeccable onboard首次体验流、空状态与激活路径设计完整指南【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable如果你用 AI 写前端产品一定遇到过这种尴尬功能都实现了但新用户第一次打开页面一脸懵页面空空如也却没有任何引导。Impeccable是一个给 AI 编码代理用的设计技能其中的onboard 命令专门帮你设计首次体验流onboarding、空状态empty states和激活路径activation paths让新用户最快抵达啊哈时刻。 一句话理解 onboard新用户引导的使命不是教会用户一切而是让用户尽快体验到产品的核心价值。1. onboard 命令是什么Impeccable 通过统一的/impeccable命令入口提供 23 个设计命令onboard属于Refine精化类别官方定义如下Design onboarding flows, first-run experiences, and empty states that guide new users to value.设计引导新用户获得价值的引导流程、首次体验与空状态它的完整设计手册就在仓库里值得精读设计手册skill/reference/onboard.md命令路由表plugin/skills/impeccable/SKILL.md命令元数据触发词onboarding、first-time users、empty states、activation、aha momentskill/scripts/command-metadata.json项目总览与安装方式README.md2. 上手前先回答三个问题onboard 手册要求在设计任何引导之前先做需求评估Assess Onboarding Needs维度你要问自己的问题识别挑战用户想完成什么现在哪里让人困惑用户卡在哪一步理解用户经验水平如何动机是什么愿意花几分钟定义成功用户最少要学会什么关键动作是什么创建第一个项目发出第一份邀请⚠️ 手册里标红的CRITICAL原则引导要尽快把用户带到价值而不是把产品讲完。教20% 能带来 80% 价值的内容高级功能留给用户遇到时再教。3. 首次体验流四步设计法onboard 手册把初始产品引导拆成四个递进环节可以直接当检查清单用3.1 欢迎屏Welcome Screen说清楚产品是什么、能带来什么价值主张诚实给出时间预估只需 2 分钟比不说是更好的承诺一定要有Skip 选项——隐藏或难找的跳过是新手流失的头号杀手3.2 账户设置Account Setup只收集当前必需的信息其余以后再问每一项都要解释为什么问能用智能默认值就别让用户填3.3 核心概念引入Core Concepts一次只介绍1-3 个核心概念绝不要全讲能让用户动手就绝不让用户只读显示进度第 1 步 / 共 3 步降低未知焦虑3.4 第一次成功First Success这是激活路径的关键一步引导用户真实地完成一件事创建项目、发送请求……提供预填示例或模板降低起步门槛完成后适度庆祝但不要过度给出清晰的下一步4. 空状态设计最容易被忽视的引导机会手册的核心观点空状态不是没数据而是一次免费的引导机会。每个空状态都应包含五要素┌─────────────────────────────────┐ │ ① 这里会出现什么图示/插画 │ │ ② 为什么它有价值 │ │ ③ 如何开始[创建] 或 [用模板] │ │ ④ 视觉兴趣点别只剩一行干巴巴文字│ │ ⑤ 上下文帮助需要帮助看2分钟教程│ └─────────────────────────────────┘手册还细分了5 类空状态处理方式各不相同空状态类型场景设计要点首次使用功能从未用过强调价值提供模板用户清空主动删光了轻触一下方便重建无结果搜索/筛选落空建议换个查询、清空筛选无权限看不到数据解释为什么 如何获取权限错误状态加载失败说明发生了什么 重试入口4.1 渐进式引导与上下文提示功能公告新功能上线时高亮展示让用户立刻能试且可关闭上下文 Tooltip在用户第一次看到功能的当下出现指向具体 UI 元素可关闭并支持不再显示渐进解锁新/未用功能加标记复杂性逐步放出而不是一次展示全部选项 手册的NEVER清单里特别点名同一个 tooltip 反复弹不尊重用户的关闭、引导期间锁死整个界面、搞一个和真实产品脱节的教程模式。5. 激活路径设计让用户更快抵达 aha moment激活路径activation path是 onboard 的终极目标——把用户从注册送到感知到价值。三个可直接套用的手法前置最重要概念用户前 60 秒接触到的功能应该是最能体现产品价值的那个提供样本数据引导流程里用示例数据让每个按钮点下去都有反应庆祝但不浮夸用户完成关键动作时给一个明确的你成功了反馈然后立刻指向下一步对于复杂界面才考虑引导式 Tour聚焦 3-7 步、可自由跳过、可重放讲工作流创建一个项目而不是讲按钮这是项目按钮。6. 质量验证6 个指标衡量引导效果onboard 手册最后给了一个上线前的验收清单✅完成时长用户能多快走完引导✅理解度走完后真的会用了吗✅行动转化用户执行了期望的关键动作吗✅跳过率太多人跳过 太长或没价值✅完成率太低 需要简化✅时间到价值多久才获得第一次价值当用户快速抵达 aha moment 且不再流失时手册建议把最后的打磨交给polish命令对应 skill/reference/polish.md做收尾。7. 使用路径小结1. 安装 Impeccable → 在项目根目录运行 npx impeccable install 2. 首次初始化 → /impeccable init生成 PRODUCT.md / DESIGN.md 上下文 3. 设计新手引导 → /impeccable onboard 你的页面或功能 4. 收尾打磨 → /impeccable polish 同一目标init会在初始化时询问你的产品是品牌型营销/落地页还是产品型应用 UI/仪表盘这些上下文会被后续所有命令读取——这正是 onboard 命令能给出贴合你产品的引导建议的原因。更多命令细节可查阅 skill/reference/init.md。8. 写在最后onboard 命令的价值是把新手引导从一句模糊的加点提示变成一套可执行、可验收的设计流程先问清用户要到哪aha moment再按四步搭首次体验流把每个空状态都变成引导入口最后用 6 个指标验收。配合 skill/reference/ 目录下的其他命令手册你可以让 AI 代理产出的前端从能用进阶到好用。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何用 /impeccable onboard：首次体验流、空状态与激活路径设计完整指南
如何用 /impeccable onboard首次体验流、空状态与激活路径设计完整指南【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable如果你用 AI 写前端产品一定遇到过这种尴尬功能都实现了但新用户第一次打开页面一脸懵页面空空如也却没有任何引导。Impeccable是一个给 AI 编码代理用的设计技能其中的onboard 命令专门帮你设计首次体验流onboarding、空状态empty states和激活路径activation paths让新用户最快抵达啊哈时刻。 一句话理解 onboard新用户引导的使命不是教会用户一切而是让用户尽快体验到产品的核心价值。1. onboard 命令是什么Impeccable 通过统一的/impeccable命令入口提供 23 个设计命令onboard属于Refine精化类别官方定义如下Design onboarding flows, first-run experiences, and empty states that guide new users to value.设计引导新用户获得价值的引导流程、首次体验与空状态它的完整设计手册就在仓库里值得精读设计手册skill/reference/onboard.md命令路由表plugin/skills/impeccable/SKILL.md命令元数据触发词onboarding、first-time users、empty states、activation、aha momentskill/scripts/command-metadata.json项目总览与安装方式README.md2. 上手前先回答三个问题onboard 手册要求在设计任何引导之前先做需求评估Assess Onboarding Needs维度你要问自己的问题识别挑战用户想完成什么现在哪里让人困惑用户卡在哪一步理解用户经验水平如何动机是什么愿意花几分钟定义成功用户最少要学会什么关键动作是什么创建第一个项目发出第一份邀请⚠️ 手册里标红的CRITICAL原则引导要尽快把用户带到价值而不是把产品讲完。教20% 能带来 80% 价值的内容高级功能留给用户遇到时再教。3. 首次体验流四步设计法onboard 手册把初始产品引导拆成四个递进环节可以直接当检查清单用3.1 欢迎屏Welcome Screen说清楚产品是什么、能带来什么价值主张诚实给出时间预估只需 2 分钟比不说是更好的承诺一定要有Skip 选项——隐藏或难找的跳过是新手流失的头号杀手3.2 账户设置Account Setup只收集当前必需的信息其余以后再问每一项都要解释为什么问能用智能默认值就别让用户填3.3 核心概念引入Core Concepts一次只介绍1-3 个核心概念绝不要全讲能让用户动手就绝不让用户只读显示进度第 1 步 / 共 3 步降低未知焦虑3.4 第一次成功First Success这是激活路径的关键一步引导用户真实地完成一件事创建项目、发送请求……提供预填示例或模板降低起步门槛完成后适度庆祝但不要过度给出清晰的下一步4. 空状态设计最容易被忽视的引导机会手册的核心观点空状态不是没数据而是一次免费的引导机会。每个空状态都应包含五要素┌─────────────────────────────────┐ │ ① 这里会出现什么图示/插画 │ │ ② 为什么它有价值 │ │ ③ 如何开始[创建] 或 [用模板] │ │ ④ 视觉兴趣点别只剩一行干巴巴文字│ │ ⑤ 上下文帮助需要帮助看2分钟教程│ └─────────────────────────────────┘手册还细分了5 类空状态处理方式各不相同空状态类型场景设计要点首次使用功能从未用过强调价值提供模板用户清空主动删光了轻触一下方便重建无结果搜索/筛选落空建议换个查询、清空筛选无权限看不到数据解释为什么 如何获取权限错误状态加载失败说明发生了什么 重试入口4.1 渐进式引导与上下文提示功能公告新功能上线时高亮展示让用户立刻能试且可关闭上下文 Tooltip在用户第一次看到功能的当下出现指向具体 UI 元素可关闭并支持不再显示渐进解锁新/未用功能加标记复杂性逐步放出而不是一次展示全部选项 手册的NEVER清单里特别点名同一个 tooltip 反复弹不尊重用户的关闭、引导期间锁死整个界面、搞一个和真实产品脱节的教程模式。5. 激活路径设计让用户更快抵达 aha moment激活路径activation path是 onboard 的终极目标——把用户从注册送到感知到价值。三个可直接套用的手法前置最重要概念用户前 60 秒接触到的功能应该是最能体现产品价值的那个提供样本数据引导流程里用示例数据让每个按钮点下去都有反应庆祝但不浮夸用户完成关键动作时给一个明确的你成功了反馈然后立刻指向下一步对于复杂界面才考虑引导式 Tour聚焦 3-7 步、可自由跳过、可重放讲工作流创建一个项目而不是讲按钮这是项目按钮。6. 质量验证6 个指标衡量引导效果onboard 手册最后给了一个上线前的验收清单✅完成时长用户能多快走完引导✅理解度走完后真的会用了吗✅行动转化用户执行了期望的关键动作吗✅跳过率太多人跳过 太长或没价值✅完成率太低 需要简化✅时间到价值多久才获得第一次价值当用户快速抵达 aha moment 且不再流失时手册建议把最后的打磨交给polish命令对应 skill/reference/polish.md做收尾。7. 使用路径小结1. 安装 Impeccable → 在项目根目录运行 npx impeccable install 2. 首次初始化 → /impeccable init生成 PRODUCT.md / DESIGN.md 上下文 3. 设计新手引导 → /impeccable onboard 你的页面或功能 4. 收尾打磨 → /impeccable polish 同一目标init会在初始化时询问你的产品是品牌型营销/落地页还是产品型应用 UI/仪表盘这些上下文会被后续所有命令读取——这正是 onboard 命令能给出贴合你产品的引导建议的原因。更多命令细节可查阅 skill/reference/init.md。8. 写在最后onboard 命令的价值是把新手引导从一句模糊的加点提示变成一套可执行、可验收的设计流程先问清用户要到哪aha moment再按四步搭首次体验流把每个空状态都变成引导入口最后用 6 个指标验收。配合 skill/reference/ 目录下的其他命令手册你可以让 AI 代理产出的前端从能用进阶到好用。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考