)
LobeHub UX 增长篇渐进式披露、向导进度与可发现性设计规范详解grow.md 实战解读【免费下载链接】lobehub LobeHub is your Chief Agent Operator, organizing your agents into 7×24 operations by hiring, scheduling, and reporting on your entire AI team.项目地址: https://gitcode.com/GitHub_Trending/lo/lobehub本文解读 LobeHub 仓库中.agents/skills/ux技能包的Grow可发现性与渐进式披露模块清单文档 —— grow.md。它定义了 LobeHub 产品界面应当如何随用户需求加深而加深新手路径保持干净、高级能力在需要时出现、配置与使用形成闭环、借用的键盘隐喻必须真实可用。本文会以仓库内真实源码Onboarding 引导流程、共享的选项卡片、AskUserQuestion 面板、Memory 设置等佐证每一条规范帮助前端工程师、UX 评审者与 Agent 在实现或审计用户界面时直接照单核对。文档定位它是一份可执行的设计审查清单在深入四条规则之前先明确 grow.md 在整个仓库设计体系里的位置。LobeHub 用两层文档管理产品体验外观与文案由根目录 DESIGN.md 负责主题令牌、组件清单、语气用词交互行为则由.agents/skills/ux技能包负责。技能包入口 SKILL.md 声明了四个产品设计值 ——Natural・Meaningful・Certainty・Growth而执行级检查清单按交互类型拆分到多个 reference 文件Read / Edit / Act / Feedback /Grow。grow.md 就是增长与可发现性这一模块的细则每条清单项都被打上其服务的设计值标签例如(Growth・Natural)、(Certainty・Natural)。这份清单的特殊之处在于它不是泛泛的设计原则而是面向可 grep、可验证的工程规范。文档反复强调两类盲区surface-class 规范如多步流程必须有进度提示是全界面等级的期望能力缺失时没有file:line可查必须把它当作预期存在的能力逐项核对cross-surface 规范如配置页应链接到管理区跨越多个页面单看一个组件源码天然发现不了需要把目标入口前置为期望能力来检查。这与技能包中 ux-audit基于《Designing Interfaces》基准的可重复审计配合使用清单负责标准audit 负责落地与回填。5.1 渐进式披露深度随需求增长而浮现Growth・Natural第一条规范定义了产品成长的基本形态产品应当随着用户一起成长——更强大的能力在用户需求加深时浮现。新手路径保持干净高级能力等到用户走到那一步再揭示不要一次性全部倒出。同时让下一步动作出现在当下语境里例如第一个条目创建成功后立刻给出接下来能拿它做什么的入口而不是埋在遥远的菜单里。它对应两个检查点高级能力被渐进式披露新手路径保持干净。(Growth・Natural)下一步动作在需要时刻于上下文内浮现。(Growth・Meaningful)在 LobeHub 中这一原则最典型地体现在引导流程Onboarding的分支设计上新手只看到完整名、兴趣等基础步骤而 Agent 选择、Pro 设置这类更深的能力被安排到流程后段。从 Classic/index.tsx 的步骤映射可以看到经典流程是 1 fullname → 2 interests → 3 prosprosettings→ 4 agentpicker 的线性递增复杂度逐级加深而不是一屏全抛其中 Pro 设置步骤还会依据服务端是否启用 Composio 而被自动跳过shouldSkipProSettingsStep见 Classic/index.tsx进一步保持普通用户路径的干净。检验渐进式披露是否合格的实用问法把第一个时间点的界面截下来看看它是否对新手友好把用户用到第 N 周时的界面截图看看高级能力是否在合适的地方出现而不是始终藏在同一个菜单里理想状态是每一个新增能力都出现在它第一次有用的那一刻旁边。5.2 多步流程每一步都要我在哪 还剩多少 有出口Certainty・Natural第二条规范针对超过两步的向导/引导/任意步骤序列。它的核心论点是一个多步序列欠用户两样东西而单个表单不需要欠进度信号Sequence Map 模式位置 总数——每一步都要展示Step 2 of 5或等价进度条。缺少进度信号时流程看起来开放无尽头用户会流失出口skip——非必要步骤身份信息、可选资料、连接器必须可跳过并且出口始终可见不能被藏在某个模式/分支开关后面。可选步骤一旦不可跳过就变成阻塞首次使用的硬门槛。文档给出的反例直接指向 LobeHub 自身的引导流程✅ 理想状态引导向导在每个界面显示第 2/5 步或进度条并允许跳过姓名/兴趣/连接器步骤。 ❌ 现状LobeHub 的引导最多可达 6 个经典画面 / 4 个桌面画面却没有任何进度指示界面上唯一的Steps是current{null}的装饰性功能列表经典流程还在必填姓名上硬性卡关直到最后一步才允许跳过。对照源码验证这条结论的准确性步骤分发确实是一次只渲染一步在 Classic/index.tsx 中renderStep()用switch (renderableStep)在 FullNameStep、InterestsStep、ProSettingsStep、AgentPickerStep 之间切换OnboardingContainer里没有渲染步骤进度条该容器文件为 Layout/index.tsx。FullNameStep 是硬门槛在 FullNameStep.tsx 中发送按钮SendButton的disabled{!value?.trim() || isNavigating}——名字为空时无法继续界面上没有跳过此步按钮唯一的出口是左下角返回handleBack它会把用户带回共享前缀的 ResponseLanguageStep见 Classic/index.tsx。从工程检查角度本规则建议把这三样东西列为每一步的期望能力进度指示位置总数、可选步骤的 Skip、以及一个始终可见的出口不能被 branch flag 遮蔽。文档特意强调这是 Notion / Linear / Slack / Vercel 等产品都具备的 surface-class 常态因此缺进度条或强制必填个人资料步骤应当被当作缺陷显式记录而不是各说各话的风格分歧。5.3 闭合配置 → 管理回路配置面必须给出就近入口Growth・Meaningful第三条规范解决一种非常常见的断层一个设置/配置界面所管辖的功能其实拥有自己的数据区或管理区。例如一个记忆Memory开关背后对应整个/memory浏览页一个集成的开关而其连接管理在另一个页面一个已开启同步对应着同步历史视图。规范要求配置界面必须提供就近的、上下文内的管理区入口Manage memories →、View connections、Open history。理由是配置一个东西和使用/检视它是同一条回路的两端——只翻开关不提供去向的设置面板对刚想看看效果的用户是死胡同而在帮助文案里描述目的地却不给链接你随时可以查看和编辑比沉默更糟——那是一个没有门的承诺。文档给出的反例与建议❌ Settings 的 Memory/settings/memory只是一个开关 强度滑杆文案承诺随时可查看/编辑/清除记忆memory.enabled.desc却不渲染任何通向内容丰富的/memoryidentities / contexts / preferences / experiences / activities的链接——用户配置完记忆却无处可去管理它。 ✅ 应在/memory上加一个Manage memories →动作header extra 或 footer 行让文案承诺的目的地一键可达。这条规则同时是跨界面规范因此它还有两个二阶要求目的地要被前置声明为期望能力因为缺失的链接没有file:line可查即便管理区在其他地方可达如全局导航也不免除义务——回路必须从配置上下文闭合在用户正想着该功能的那一刻给出入口。需要补充的仓库现状从当前源码看仓库已出现一个专门组件 ManageMemoryButton.tsx它渲染一个带BrainCircuit图标的按钮点击后navigate(/memory, { escape: true })——这正是文档建议的就近入口。不过它有两个限定条件值得注意其一组件开头的if (!isDesktop) return null;表明该按钮只在桌面端desktop router 注册了/memory路由渲染Web 端并没有这条入口其二文案memory.manageEntry走 i18n见组件useTranslation(setting)。因此用这条清单去核对时结论应当是部分闭环而非完全闭环——这种细节差异正是此类检查清单真正发挥价值的地方。5.4 借用的键盘/CLI 隐喻必须是真实的而不是装饰Certainty・Natural第四条规范讨论一种反向的可发现性5.1 讲的是揭示真实存在的能力5.4 讲的是不要宣传一个不存在的能力。当一个控件长得像某种众所周知的键盘隐喻时——带数字1/2/3的选择卡片、⌘K徽章、方向键列表导航、键帽样式的快捷键提示——熟悉该隐喻的用户真的会去按那个键。长相即承诺。因此要么真正绑定按键数字选择选项、⌘K打开面板、↑/↓移动高亮要么重新造型让它读起来只是普通的序号/标签而不是键帽。最糟的情况是控件模仿 CLI 键帽却没有任何处理器假性功能暗示 / false affordance尤其当该界面是CLI 流程的移植品时Claude Code / Codex——因为用户带着对这些键的既有训练而来静默的无效操作会被解读为 bug。文档还给出执行级建议按键是否生效是运行时事实必须在 L3 层真正按下按键确认而不是看卡片的样式。文档以 AskUserQuestion 选项卡片为例❌ CC AskUserQuestion 的选项卡片在OptionCard.tsx中渲染一个等宽字体的1/2/3芯片optionIndex读起来像键帽镜像了 Claude Code CLI在那里数字本身就是选择键——但面板里根本不存在 keydown 处理器builtin-tool-claude-code/.../AskUserQuestion/*Enter/1/2 快捷键只存在于毫不相干的ApprovalActions.tsx。按 1/2/3 或 Enter 什么都不会发生。修复方案为数字键绑定切换选项、Enter 绑定提交在自由文本输入框内做守卫或者去掉键帽样式。用源码验证这一结论键帽样式的确存在在共享组件 OptionCard.tsx 中optionIndex是一个 22×22 的圆角方块font-family: ${cssVar.fontFamilyCode}、font-weight: 600、带背景色colorFillTertiary——视觉上与 CLI 键帽一致组件注释也坦承中性色 1/2/3/4 芯片是为了让选中信号落在填充背景与对勾上见文件头部styles注释。交互只有鼠标点击OptionCard的完整事件处理就是onClick{() { if (!disabled) onToggle(); }}OptionCard.tsx属性表里只有onToggle没有任何键盘事件回调。AskUserQuestion 的最终渲染器是只读的在 Render/AskUserQuestion/index.tsx 中Claude Code host 直接复用AskUserQuestionResult呈现问题/答案结果不承载任何按键输入逻辑文件头注释说明交互式表单属于 Intervention结果确认后统一走只读层级。键盘快捷键存在于别处文档指出的ApprovalActions.tsx位于 src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Intervention/ApprovalActions.tsx属于审批approval动作与选择卡片并非同一事件域——这正是快捷方式有但不在被隐喻的那张卡片上的典型错位。由此可以提炼出可复用的审计步骤适用于任何看起来像快捷键的控件识别隐喻该控件是否用了键帽边框、等宽数字、⌘符号或方向键视觉查 handler在组件树内而非全仓库搜索onKeyDown/keydown/addEventListener确认键处理器与视觉同属一个事件域L3 运行时验证真正聚焦控件并按1/2/3/Enter观察是否触发这是文档反复强调的最后一步样式分析不能替代运行验证两个修复方向择一绑定按键注意在自由文本输入框内做守卫避免打字时误触或去掉键帽造型让它只表达序号/标签语义。如何把 Grow 清单落地到日常工程实践grow.md 的价值不在于读过而在于重复执行。结合 SKILL.md 给出的用法可以形成一套工作流写代码前凡涉及用户首次使用、新能力揭示、向导/引导、设置与管理分离的功能先读 grow.md 四条规则并勾选相关检查项。例如新增一个设置开关时就应同时问它的数据/管理区在哪入口给了吗5.3而不是只写一行 helper 文案。评审时把每条 checklist 当作期望能力核对而不是当风格建议。对无file:line可查的跨界面缺口如缺失的Manage memories链接、缺失的步骤进度条直接在评审里命名目标能力并标为 present / missing避免被全局导航里有或组件里没代码可指这类理由带偏。运行时验证凡涉及键盘隐喻5.4一律到真实界面按下按键以 L3 结果为准。审计回填配合 ux-audit 流程把审计发现的新缺口回填到清单里让规范文件与产品一起成长——这本身就是 5.1 精神对文档体系的自指规范也应当随需求加深而加深。总结四条规则背后的同一个产品观grow.md 的四条规则渐进式披露、多步流程的进度与出口、配置→管理闭环、真实的键盘隐喻表面上处理不同界面问题内核却一致产品的深度与用户当前的位置对齐能力既不被提前倾倒也不被虚假承诺。Growth 不是堆功能而是精确地决定每个能力在何时、以何种入口、以何种视觉承诺出现在用户面前——而 Certainty / Natural / Meaningful 三个设计值负责约束这一呈现过程确定按键真实、进度可见、自然入口出现在语境里、新手路径干净、有意义配置完真的能去用它。对 LobeHub 的开发者与评审者来说这篇文档提供了一套可以 grep、可以打勾、可以回填的工程化设计规范对想研究优秀开源产品如何管理 UX 质量的读者来说grow.md连同 act.md、read.md 等模块展示了一种把设计价值观编译成二进制检查项的仓库级实践——让好体验不再依赖评审者当天的状态而是沉淀为任何人包括 Agent都能照单执行的代码库资产。【免费下载链接】lobehub LobeHub is your Chief Agent Operator, organizing your agents into 7×24 operations by hiring, scheduling, and reporting on your entire AI team.项目地址: https://gitcode.com/GitHub_Trending/lo/lobehub创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考