Impeccable `onboard` 命令实战指南：从零设计首次体验、激活流程与空状态
Impeccableonboard命令实战指南从零设计首次体验、激活流程与空状态【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable本文导读Impeccable 是一套让 AI 前端/UX 协作更懂设计的开源技能Skill其中/impeccable onboard专用于设计首次体验first-run flows与空状态empty states。这篇指南以 Impeccable 的 onboard 参考文档 为骨架展开先讲清楚该命令在技能体系中的定位与触发条件再逐步拆解需求评估 → 设计原则 → 分场景体验设计 → 空状态设计 → 实现模式 → 质量验证的完整工作流最后说明如何把收尾交给/impeccable polish。读完你既能照做一次标准的 onboarding 设计评审也能理解它在 Impeccable 技能 的 Refine/Harden 管线里所处的确切位置。1.onboard命令定位做什么、何时触发、如何路由onboard是 Impeccable 技能提供的一组可调用命令之一。在技能主文档 SKILL.md 的命令总表 中它的条目是onboard [target]| Refine | Design first-run flows, empty states, activation | reference/onboard.md其正式描述见 command-metadata.json为Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.这段元数据同时给出了触发词清单——当用户提到以下任一概念时命令路由会判定为onboardonboarding / 首次体验first-time users / 新用户empty states / 空状态activation / 激活getting started / 快速上手new user flows / 新用户流程the aha moment / 顿悟时刻在命令分类上Impeccable 将命令划分为 create / evaluate / refine / simplify / harden / system 六类见 scripts/lib/skill-categories.jsonboard与polish、optimize、harden同属HARDEN生产就绪类别// scripts/lib/skill-categories.js polish: harden, optimize: harden, harden: harden, onboard: harden,也就是说onboard不是从零造界面而是让已有产品在新用户第一次进入这条路径上变得可用、可理解、能导向价值——它与polish最终质量收尾、harden错误/边界状态、optimize性能站在同一质量维度的不同侧面。调用形式为/impeccable onboard [target]target可以是具体的页面、功能或组件。运行时还需要额外上下文Additional context needed你希望用户到达的aha 时刻是什么以及目标用户的经验水平——这两点贯穿整个 onboard 流程的取舍。2. 核心信条Onboarding 不是产品教学而是通往首个价值onboard 参考文档开篇就划出了一条最重要的边界Onboardings job is not to teach the product. Its job is to get people to the moment that proves the product is worth their time.Onboarding 的职责不是教学产品而是把人带到证明产品值得他们投入时间的那一刻。Aha 时刻aha moment是全篇的北极星。设计 onboarding 时一切步骤、文案、空状态、弹层都在为这一个目标服务。随之而来的判断标准非常直接CRITICAL: Onboarding should get users to value as quickly as possible, not teach everything possible.这条信条在仓库的设计语境里同样成立。Impeccable 在 SKILL.md 的 Modes 一节 区分了 Persuade说服访客决策并行动、Operate操作访客完成任务、Read阅读访客理解信息、Experience体验访客身在其中四种模式——onboarding 最典型地出现在Operate完成任务产品中应用 UI、Dashboard、编辑器、管理后台、设置页其质量底线是可扫描性、一致性、原生预期、真实使用场景高于表现力。3. 第一步评估 Onboarding 需求Assess Onboarding Needs动手设计前先搞清楚用户需要学什么、为什么学从三个角度提问3.1 识别挑战Identify the challenge用户试图达成什么当前体验里什么让他们困惑或不清晰用户在哪些环节卡住、流失我们想让用户到达的 aha 时刻 是什么3.2 理解用户Understand the users他们的经验水平如何新手、重度用户、混合人群他们的动机是什么兴奋探索型还是工作需要、被逼使用他们愿意投入多长时间5 分钟还是 30 分钟他们已知的替代方案是什么从竞品迁移过来还是对这个品类一无所知3.3 定义成功Define success用户要成功最少必须学会什么我们希望他们完成的关键动作是什么创建第一个项目发出第一个邀请我们怎么判断 onboarding 生效了完成率到达价值的时间这三个提问组与 shape.md 中关于状态与转换的发现清单哪些状态和转换重要first-run、empty、loading、error、success、permissions、overflow、expert use互相印证——在更早的 UX/UI 规划阶段shape就会要求把 first-run 与 empty 纳入设计范围而onboard是这条思路在成品界面上的落地执行者。4. 五大设计原则Onboarding PrinciplesShow, Dont Tell展示而非说教用可工作的示例演示而非只靠描述在 onboarding 里提供真实功能而不是搞一个独立的教程模式渐进式披露progressive disclosure一次只教一件事。Make It Optional尽量可跳过让有经验的用户能跳过 onboarding不要阻断用户进入产品提供 Skip跳过或 Ill explore on my own我自己探索选项。Time to Value时间到价值尽快让用户到达 aha 时刻优先前置最重要的概念教能带来 80% 价值的 20% 内容把高级特性留到情境化探索中去发现。Context Over Ceremony情境优先于仪式在用户真正需要某个功能时再教它而不是一上来全塞空状态empty states本身就是 onboarding 机会在使用点提供 tooltip 与提示。Respect User Intelligence尊重用户智商不要居高临下、不要过度解释简洁清晰相信用户能理解标准交互模式。5. 设计各类 Onboarding 体验Design Onboarding Experiences文档把 onboarding 体验按场景拆成五类每类都给出了适用场景与具体做法。5.1 初次产品 OnboardingInitial Product Onboarding由四个环节构成每个都有明确要求欢迎屏Welcome Screen清晰的价值主张这是什么产品用户将学会/完成什么时间预估诚实地说明投入提供跳过选项给有经验的用户。账户设置Account Setup只收集最少必要信息更多信息以后再问解释你为何索取每一条信息尽量给出智能默认值合适时提供社交登录。核心概念导入Core Concept Introduction只引入 13 个核心概念不是全部使用简单的语言和示例尽可能可交互动手做而不是只读有进度指示第 1 步共 3 步。首个成功First Success引导用户完成一件真实的事提供预填充的示例或模板庆祝完成但别过度给出清晰的下一步。5.2 功能发现与采用Feature Discovery Adoption空状态Empty States——不要只留空白而要展示这里将来会出现什么描述 截图/插画它为什么有价值一个清晰的 CTA 去创建第一个条目示例或模板选项。文档给出可直接套用的文案模式No projects yet Projects help you organize your work and collaborate with your team. [Create your first project] or [Start from template]情境化 TooltipContextual Tooltips在相关时刻出现用户第一次看到该功能时直接指向相关的 UI 元素简短解释 收益说明可关闭提供 Dont show again 选项可选 Learn more 链接。功能公告Feature Announcements新功能发布时高亮展示说明什么是新的、为什么重要让用户能立即尝试可关闭。渐进式 OnboardingProgressive Onboarding在用户遇到功能时再教用徽标/指示标记新功能或未用功能逐步解锁复杂度不要一开始就展示所有选项。5.3 引导式导览与走查Guided Tours Walkthroughs何时使用功能很多的复杂界面现有产品发生重大改版需要领域知识的行业专用工具。如何设计聚光spotlight特定 UI 元素压暗页面其余部分步骤要短每次导览最多 37 步允许用户自由点击穿行导览包含 Skip tour 选项可回放放在帮助菜单里。最佳实践交互优于被动让用户去点真实按钮聚焦工作流而非孤立功能创建项目而不是这是项目按钮提供样例数据让操作真的能成功。5.4 交互式教程Interactive Tutorials何时使用用户需要动手练习概念复杂或不熟悉高风险场景先在安全环境练习更好。如何设计带样例数据的沙盒环境明确目标创建一张按地区展示销售额的图表逐步引导校验确认用户做对了毕业时刻你准备好了。5.5 文档与帮助Documentation Help产品内帮助贯穿界面的情境帮助链接键盘快捷键速查可搜索的帮助中心复杂工作流的视频教程。帮助模式复杂功能旁放?图标Tooltip 里的 Learn more 链接键盘快捷键提示如在搜索框上显示⌘K。6. 空状态专项设计Empty State Design空状态是 onboarding 最常见也最常被做成白板的地方因此文档给它单列一节。每一个合格的空状态都需具备五要素这里将出现什么What Will Be HereYour recent projects will appear here为什么重要Why It MattersProjects help you organize your work and collaborate with your team如何开始How to Get Started[Create project] 或 [Import from template]视觉趣味Visual Interest插画或图标而不是白页上一行字情境帮助Contextual HelpNeed help getting started? [Watch 2-min tutorial]。文档进一步区分了五种空状态类型每种的处理手法各不相同类型触发场景设计手法First use首次使用从未用过该功能强调价值提供模板User cleared用户清空用户有意删除了全部内容轻触处理易于重建No results无结果搜索/筛选无返回建议不同关键词、提供清除筛选No permissions无权限无法访问解释原因与获取权限的途径Error state错误状态加载失败说明发生了什么提供重试同样的状态驱动思路在 Impeccable 的harden命令错误处理、边界状态与polish命令把 missing loading/empty/error/success/disabled/permission states 列为收尾必查项中反复出现详见 harden 参考 与 polish 参考。onboard 的视角更偏新用户第一次看到空状态时的引导而非单纯的状态完备性。7. 实现模式Implementation Patterns7.1 技术选型建议文档直接给出常见工程选型参考Tooltip 库Tippy.js、Popper.js导览Tour库Intro.js、Shepherd.js、React JoyrideModal 模式焦点陷阱focus trap、backdrop 遮罩、ESC 关闭进度追踪用 LocalStorage 记录 seen已看过状态数据分析追踪完成率与流失点drop-off points。7.2 存储模式示例追踪用户看过哪些 onboarding 步骤文档给出的最小可行实现// Track which onboarding steps user has seen localStorage.setItem(onboarding-completed, true); localStorage.setItem(feature-tooltip-seen-reports, true);7.3 铁律NEVERIMPORTANT: Dont show same onboarding twice (annoying). Track completion and respect dismissals.无论用什么库绝不NEVER允许以下行为文档将其作为硬性禁止项列出在用户使用产品前强迫他们走完冗长的 onboarding用显而易见的解释羞辱用户的智商反复展示同一个 tooltip尊重用户的关闭操作导览期间封锁全部 UI让用户能够探索创建与真实产品脱节的独立教程模式一次性灌输过量信息要用渐进式披露隐藏 Skip或让它难以被发现忘了回归用户不要再次展示初次 onboarding。8. 验证 Onboarding 质量Verify Onboarding Quality设计完成后用真实用户检验围绕六个指标收集证据Time to completion完成耗时用户能快速完成 onboarding 吗Comprehension理解度完成后用户真的理解了吗Action行动用户会去执行期望的下一步吗Skip rate跳过率太多人跳过——那可能说明它太长或没价值Completion rate完成率用户完成吗偏低就简化Time to value到达价值时间用户多久获得第一个价值这组指标对应了 assess 阶段 里定义的成功标准——评估时预设完成率/到达价值时间作为成功度量验证阶段就用同款口径实测。9. 收尾交接把最终打磨交给/impeccable polishonboard 参考文档的最后一句定义了明确的交接边界When users hit the aha moment fast and dont drop off, hand off to/impeccable polishfor the final pass.也就是说onboarding 流程的生效性由onboard负责而这条路径的细节完成度交给polish收尾。两者的分工在 polish 参考文档 中写得很清楚——polish是 refinement精修而非 covert redesign偷偷重设计它在收尾时会把状态路径loading / empty / error / success / disabled / permission作为与流程与层级、布局与字体、色彩与图标、交互与状态、内容与代码并列的五大检查面之一见该文档的 Triage 顺序第 2 项。因此一条高质量的 onboarding 路径通常是shape如果是从零规划 UX/UI会在 discovery 阶段就标记 first-run/empty 为关键状态见 shape 参考onboard设计欢迎屏、激活流程、空状态、tooltip 等引导资产polish对整条新用户路径做逐状态、逐视口、逐输入方式的最终质量收尾与源码差异清理。整个流程始终对齐 Impeccable 在 SKILL.md 中声明的原则——全部做完、一次批量检查、修复、最多再确认一轮就停onboard 帮助用户快速到达价值polish 保证这条路径不残留半成品状态两者相加才是对首次体验即代表产品品质的完整交付。参考文件速查本文骨架.opencode/skills/impeccable/reference/onboard.md技能仓库内同名副本见 skill/reference/onboard.md 与 plugin/skills/impeccable/reference/onboard.md命令与路由定义.opencode/skills/impeccable/SKILL.md命令元数据触发词与描述.opencode/skills/impeccable/scripts/command-metadata.json命令分类Refine/Hardenscripts/lib/skill-categories.js收尾交接对象.opencode/skills/impeccable/reference/polish.md上游规划first-run/empty 状态识别.opencode/skills/impeccable/reference/shape.md相邻质量面错误与边界状态.opencode/skills/impeccable/reference/harden.md。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考