LobeHub UX Audit 实战以 Pages 模块审计为例拆解「三层验证 模式回灌」的界面体验审查方法【免费下载链接】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/lobehubLobeHub 仓库内置了一个可复用的 UX 审计技能ux-audit其基准是 Jennifer Tidwell《Designing Interfaces》的模式语言加上项目自有的ux执行检查清单。本文以该技能自带的真实工作样本——Pages 模块/page文档列表 /page/[id]全屏富文本编辑器的 L1 静态审计为例完整拆解一次审计如何从「模式识别 → 亮点固化 → 缺陷排序 → 规则回灌」闭环推进读者读完后可以掌握一套可重复执行、证据可溯源的单页面 UX 审查方法论。一、ux-audit 技能一次只审一个表面三层各自能看见什么page.md是 ux-audit 技能 的references/example/目录下的一组工作样本之一同目录还有channel.md、home.md、task-detail.md等 20 余篇。技能定义的核心原则有两条一次只审一个表面surface——整站扫描对单次运行负担太重每个页面在产品演进中反复重审这才是持续的含义。结论必须来自能看见该问题的层。审计分三层每层有独立的操作文件层操作文件做什么能抓到什么成本L1 静态layer-1-static.md读代码缺失的状态/分支空态/错误/重试、无草稿持久化、模式缺席、结构性问题便宜、离线每次审计必跑L2 视觉layer-2-visual.md对渲染后的表面截图真实视觉层级与主控件、间距/对比/对齐、截断溢出、空态/加载/错误态的真实观感、响应式断点、暗色模式中等需要渲染环境L3 动态layer-3-dynamic.md通过 acceptance 框架驱动真实用户旅程 埋点进行中/锁定态、强制触发的错误/空态、步骤衔接、焦点/键盘可达性、量化的 CLS/LCP/INP/长任务高需要运行环境 认证技能的覆盖矩阵规定例如空态是否是一个真正的页面是 L2 结论不能由 L1 对着variant属性打勾两个 A/B 变体谁更好更是 L3/分析层结论L1/L2 只能比较机制差异无权宣布胜者。page.md的头部就如实标注了自己的审计状态这是全文最值得学习的方法论姿态已运行层L1静态/代码✅——以下全部。L2视觉/ L3动态 CLS⏳ 尚未运行——见 §5。本文所有关于渲染的结论都是 L1 推断等待 L2 确认。同时它也声明了自己是模板而非现状真理Use it as a template for the output shape, not as current-state truth (the code moves; re-verify before citing)——代码在动引用前必须重新验证。本文在复述各结论时已按当前仓库代码重新核对了关键证据位置。审计对象是文档编辑器类表面对标 Notion / Google Docs / Craft。技能要求先给表面命名类别class写出该类别的领域惯例清单再对照找差距——因为只读自家代码只能暴露已经建出来的东西的缺陷对根本没建的能力在结构上是盲的。被审计表面的核心文件load-bearing files路由src/routes/(main)/page/{index,_layout,[id]}入口 index.tsx/page/index.tsx) 用SuspenseSurfaceSkeleton包裹PageExplorerPlaceholder侧边栏列表src/features/Pages/PageLayout/*空态占位PageExplorerPlaceholder编辑器 Copilot History 编辑锁src/features/PageEditor/*状态src/store/page/*、src/store/document/slices/editor/*分享视图/share/page/[id]OSS 仓库中其错误/空态外壳是云构建的业务桩见下文盲区说明二、§1 — 模式识别这个表面用了哪些模式、用得好不好L1 审计的第一步是把表面用到的界面模式对照 pattern-catalog.md 逐条列表评级。page.md的模式表完整如下表格中的文件位置已按当前仓库结构给出模式族所在位置评级备注Overview Detail导航/数据侧边栏列表 →/page/[id]编辑器✅保持上下文位置Deep-linking导航/page/:id、/share/page/:id✅URL 可还原文档Empty-state as onboarding增长主舞台PageExplorerPlaceholder新建/上传/Notion 卡片✅富 CTA——亮点空态——侧边栏数据PageEmpty.tsx⚠️裸Empty无 CTA差距 ⑦Loading Skeleton反馈BodyList的SkeletonList⚠️存在但无法进入失败态差距 ①Failure Retry反馈列表 / 历史 / 保存— 缺席该模块最大的系统性缺口①②③④Autosave / Smart Defaults输入performSave/performMetaSave、AutoSaveHint⚠️saving→saved无 failed差距 ②③Draft safety编辑usePageDraft.tssessionStorage⚠️只在锁降级时做快照差距 ②Entity lifecycle操作删除/重命名/复制/导出/历史恢复✅⚠️Header 操作扎实侧边栏操作静默差距 ⑤Command History操作History/*——列表 Compare Restore✅有确认 进行中 错误 toastCancelability / lock反馈EditingIndicator/LockedAlert/LockStatusBanner✅三向、成熟——亮点Lists at scale数据AllPagesDrawerVListloadMoreDocuments⚠️搜索只过滤已加载子集差距 ⑥Modal Panel导航Copilot / History 右侧面板RightPanel✅Copilot 复用共享 Conversation一句话读法原文结论编辑器的实体生命周期与协同锁是成熟的弱点高度聚集在Feedback失败态缺席、保存被吞成idle与Read加载失败伪装成空态对部分列表做搜索——与历次审计命中的软肋相同。三、§2 — 亮点/优秀案例重构时不许回退的清单技能明确规定只列缺陷的审计已经退化成 bug report。亮点是回灌循环的 ✅ 半区是下一次重构的不许回退清单。Pages 审计认定了四个亮点✅ 亮点 — 三向协同编辑锁。EditingIndicator/LockedAlert/LockStatusBanner构成一个成熟、可读的 presence/lock 模型把别人正在编辑在三个高度上可视化而不是一个不透明的标志位这是模块里唯一把可取消性/并发端到端暴露出来的地方重构必须保持三者同步。✅ 亮点 — Command History 端到端暴露失败。History/*History/index.tsx的列表 Compare Restore 带确认 进行中 错误 toast是模块里唯一把失败态一路带到用户面前的流程与差距 ②③④ 中被吞掉的保存/元数据/历史失败形成 ✅ 对照这正是它承重的原因。✅ 亮点 — Header 实体生命周期做对了→ 已落地为 ux Act §3.1 的 ✅ 案例。编辑器 Header 的删除/重命名/复制/导出/恢复中复制操作做了 try/catch 成功/错误messageHeader/useMenu.tsx——与差距 ⑤ 里静默的侧边栏操作形成对照同样的意图这里变更能暴露自己的失败。✅ 亮点 — 主舞台空态即引导。PageExplorerPlaceholderPageExplorerPlaceholder.tsx的新建/上传/Notion 卡片把无文档状态变成了富 CTA而不是死空间——增长侧空态是起点模式的规范实现差距 ⑦ 的侧边栏空态是它的 ⚠️ 反例。四、§3 — 体验差距按严重度排序技能的严重度标尺破坏信任数据/输入丢失、永久卡死、误导性空态掩盖失败、静默发送失败死路或误导无前进路径、状态含糊、缺进行中反馈摩擦/不一致/错失惊喜。以下 8 项差距 1 个盲区全部继承原文档并对关键证据在当前仓库中重新定位。① 侧边栏列表拉取失败 → 永久骨架屏 — Feedback §4.2 useFetchDocuments只在成功回调onData中写入documentsaction.ts 中onData: (documents) { ... internal_dispatchDocuments({ documents, type: setDocuments }) }而isDocumentsLoading documents undefinedselectors.ts 第 9 行。Body在 loading 期间渲染SkeletonList。拉取出错时documents保持undefined→ 骨架屏永远转没有错误、没有重试——这是典型的初始化标志被成功回调门控陷阱。② 正文自动保存静默失败 草稿缺口 — Feedback §4.4 / Edit §2.1 performSave的 catch 分支中非锁错误只把状态复位为saveStatus: idleaction.ts 的catch块仅CONFLICT置saveBlockedByLockFORBIDDEN弹 toast其余只console.error后回到idle。状态枚举是idle | saving | saved根本没有failedinitialState.ts 第 65 行。只有CONFLICT锁会被表面化网络错误/500 在用户看来与成功无法区分。同时isDirty保持 true但 usePageDraft 只在锁不健康时才做快照——健康锁下的持续性保存失败既没有 failed 态、也没有草稿备份刷新即静默丢失工作成果。③ 元数据标题/emoji保存失败静默 — Feedback §4.4 PageEditor/store/action.ts 中performMetaSave的 catch 同样把metaSaveStatus复位为idle——再次没有failed。一次没持久化成功的标题/emoji 编辑界面上看不出任何异常。④ 历史加载失败伪装成没有历史 — Read §1.1 History 的 SWR 解构只取了{ data, isLoading }丢掉了errorHistory/index.tsx渲染逻辑是items.length 0 ? Empty no history/。拉取失败 → 直接落到空态、无重试 → 用户会读到这篇文档没有版本这样的错误事实。⑤ 侧边栏新建/重命名/复制静默失败 — Act §3.1 createNewPage出错时 rethrowcrud/action.ts但调用方AddButton、PageExplorerPlaceholder的新建入口是 fire-and-forget——无 catch、无 toast乐观插入的页面闪现一下就消失还附带一个 unhandled rejection。侧边栏重命名Editing与复制Item/useDropdownMenu只有console.error。不一致之处编辑器 Header 的复制做对了try/catch 成功/错误messageHeader/useMenu.tsx——同一意图两套反馈行为。⑥ 全部页面搜索只过滤已加载子集 — Read §1.2 AllPagesDrawer 的Content用title/content.includes对allFilteredDocuments做客户端过滤且滚动加载在搜索中会中止。500 篇页面只加载了 40 篇时搜索一个未加载的页面会返回无结果——但它是存在的一个假空态分页排序必须走服务端规则的读侧孪生问题。⑦ 侧边栏空态没有 CTA — Read §1.1 PageEmpty.tsx只渲染一段描述它确实区分了没有页面与搜索无匹配——这点做得好但缺少创建你的第一页动作富 CTA 只存在于主舞台占位符中侧边栏空态因此是一个安静的死胡同。⑧ 硬编码英文字符串 — i18n PageExplorerPlaceholder中直接渲染了字面量Uploading...而不是走t()国际化 key——多语言用户会看到英文残留。⏳ 盲区分享视图的错误/空态是云构建桩 — 无法在 OSS 仓库审计分享视图把数据与错误交给业务外壳渲染而 OSS 仓库里的 PublishedShell.tsx 忽略data/error直接返回{children}所以一个失败/不存在的分享链接会渲染空白。真实行为在业务包cloud build里——只能留待 L2/L3 在云构建上确认。原文档明确把这一点列为盲点而不是缺陷正是证据边界规则的体现L1 在 OSS 仓库里看不见它的真实状态。五、§4 — 技能反馈审计如何回灌ux检查清单page.md的第四节记录了一次审计如何反哺技能体系回灌循环——这是整个方法论持续的关键新增/强化落地的ux条目Feedback§4.4— 新增检查清单行 PageEditor ❌ 案例保存状态枚举必须能够表示失败catch里复位到idle是把静默写入烧进类型的陷阱差距 ②③。Act§3.1— 新增乐观变更必须暴露失败规则 ❌侧边栏新建/重命名/复制vs ✅Header 复制对照案例差距 ⑤。Read§1.2— 新增对分页列表的搜索必须查询服务端全量规则AllPagesDrawer作为 ❌ 案例差距 ⑥。每条同步镜像进 SKILL.md 的 Quick review。验证了既有规则提供了好的 ❌ 引用案例§4.2 永久骨架屏差距 ①、Read §1.1 空态 vs 失败差距 ④、Read §1.1 空态需要 CTA差距 ⑦。技能文档强调ux是审计的度量基准审计是让ux保持诚实的机制——每次运行结束前必须完成落地三步修掉最严重的 或建单、把可泛化差距回灌成检查清单条目含 ✅/❌ 案例 Quick review 镜像行、把审计本身存为references/example/page.md供下次复用。如果一次运行真的没有可泛化的差距也要在报告里明确写出来——沉默不是合法的收尾。六、§5 — 待办L2 视觉 L3 动态page.md明确声明本次是 L1-only并在文末列出了后续必须执行的确认项——这示范了结论只声明自己证据层能支撑的部分L2视觉——确认侧边栏空态PageEmpty的真实观感死空间还是页面感Copilot / History 右侧面板布局编辑器单一主操作是否清晰占位符卡片在窄屏与暗色模式下的表现。L3动态——逐项强制故障来证实差距列表拉取离线 →实时确认差距 ①永久骨架屏、无重试健康锁下强制保存 500 →确认差距 ②静默看起来成功态、无草稿 → 刷新丢工作成果强制历史拉取报错 →确认差距 ④显示没有历史驱动新建/重命名/复制失败 →确认差距 ⑤条目消失、无 toast在全部页面抽屉中搜索一个未加载的页面 →确认差距 ⑥假空态测量骨架屏→内容切换与 Copilot 挂载过程中的编辑器 CLS/LCP。七、从这篇工作样本能学到什么page.md的价值不在Pages 模块有 8 个缺陷这个结论本身而在于它展示了可复制的审计形状先声明审计层与盲区L1 已跑 / L2、L3 未跑 / 云构建桩不可见每个结论都挂在它能被看见的层上模式表 亮点 差距三件套亮点与差距对等成文file:line级证据亮点直接变成检查清单的 ✅ 案例与重构回退保护线差距按严重度排序并标注违反的具体清单条目Feedback §4.2、Read §1.1 等使每个发现可独立检索、可验证回灌闭环可泛化的差距成为新的规则 ❌ 案例优秀实现反过来 sharpen 规则文本——审计跑完检查清单比跑之前更锋利待办即承诺L2/L3 的强制故障脚本写清楚下一轮审计可以从这份清单直接续跑。在 LobeHub 仓库中这套样本与 ux-audit 技能定义、三层操作文件L1 / L2 / L3以及references/example/下的其他模块样本共同构成了一套以证据而非感觉的界面体验治理流程而本文所引的全部代码证据src/store/page、src/store/document/slices/editor、src/features/PageEditor、src/features/Pages/PageLayout都可以按文中路径直接在当前仓库中复核——这正是该技能反复要求的引用之前重新验证。【免费下载链接】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），仅供参考 LobeHub UX Audit 实战：以 Pages 模块审计为例，拆解「三层验证 + 模式回灌」的界面体验审查方法
LobeHub UX Audit 实战以 Pages 模块审计为例拆解「三层验证 模式回灌」的界面体验审查方法【免费下载链接】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/lobehubLobeHub 仓库内置了一个可复用的 UX 审计技能ux-audit其基准是 Jennifer Tidwell《Designing Interfaces》的模式语言加上项目自有的ux执行检查清单。本文以该技能自带的真实工作样本——Pages 模块/page文档列表 /page/[id]全屏富文本编辑器的 L1 静态审计为例完整拆解一次审计如何从「模式识别 → 亮点固化 → 缺陷排序 → 规则回灌」闭环推进读者读完后可以掌握一套可重复执行、证据可溯源的单页面 UX 审查方法论。一、ux-audit 技能一次只审一个表面三层各自能看见什么page.md是 ux-audit 技能 的references/example/目录下的一组工作样本之一同目录还有channel.md、home.md、task-detail.md等 20 余篇。技能定义的核心原则有两条一次只审一个表面surface——整站扫描对单次运行负担太重每个页面在产品演进中反复重审这才是持续的含义。结论必须来自能看见该问题的层。审计分三层每层有独立的操作文件层操作文件做什么能抓到什么成本L1 静态layer-1-static.md读代码缺失的状态/分支空态/错误/重试、无草稿持久化、模式缺席、结构性问题便宜、离线每次审计必跑L2 视觉layer-2-visual.md对渲染后的表面截图真实视觉层级与主控件、间距/对比/对齐、截断溢出、空态/加载/错误态的真实观感、响应式断点、暗色模式中等需要渲染环境L3 动态layer-3-dynamic.md通过 acceptance 框架驱动真实用户旅程 埋点进行中/锁定态、强制触发的错误/空态、步骤衔接、焦点/键盘可达性、量化的 CLS/LCP/INP/长任务高需要运行环境 认证技能的覆盖矩阵规定例如空态是否是一个真正的页面是 L2 结论不能由 L1 对着variant属性打勾两个 A/B 变体谁更好更是 L3/分析层结论L1/L2 只能比较机制差异无权宣布胜者。page.md的头部就如实标注了自己的审计状态这是全文最值得学习的方法论姿态已运行层L1静态/代码✅——以下全部。L2视觉/ L3动态 CLS⏳ 尚未运行——见 §5。本文所有关于渲染的结论都是 L1 推断等待 L2 确认。同时它也声明了自己是模板而非现状真理Use it as a template for the output shape, not as current-state truth (the code moves; re-verify before citing)——代码在动引用前必须重新验证。本文在复述各结论时已按当前仓库代码重新核对了关键证据位置。审计对象是文档编辑器类表面对标 Notion / Google Docs / Craft。技能要求先给表面命名类别class写出该类别的领域惯例清单再对照找差距——因为只读自家代码只能暴露已经建出来的东西的缺陷对根本没建的能力在结构上是盲的。被审计表面的核心文件load-bearing files路由src/routes/(main)/page/{index,_layout,[id]}入口 index.tsx/page/index.tsx) 用SuspenseSurfaceSkeleton包裹PageExplorerPlaceholder侧边栏列表src/features/Pages/PageLayout/*空态占位PageExplorerPlaceholder编辑器 Copilot History 编辑锁src/features/PageEditor/*状态src/store/page/*、src/store/document/slices/editor/*分享视图/share/page/[id]OSS 仓库中其错误/空态外壳是云构建的业务桩见下文盲区说明二、§1 — 模式识别这个表面用了哪些模式、用得好不好L1 审计的第一步是把表面用到的界面模式对照 pattern-catalog.md 逐条列表评级。page.md的模式表完整如下表格中的文件位置已按当前仓库结构给出模式族所在位置评级备注Overview Detail导航/数据侧边栏列表 →/page/[id]编辑器✅保持上下文位置Deep-linking导航/page/:id、/share/page/:id✅URL 可还原文档Empty-state as onboarding增长主舞台PageExplorerPlaceholder新建/上传/Notion 卡片✅富 CTA——亮点空态——侧边栏数据PageEmpty.tsx⚠️裸Empty无 CTA差距 ⑦Loading Skeleton反馈BodyList的SkeletonList⚠️存在但无法进入失败态差距 ①Failure Retry反馈列表 / 历史 / 保存— 缺席该模块最大的系统性缺口①②③④Autosave / Smart Defaults输入performSave/performMetaSave、AutoSaveHint⚠️saving→saved无 failed差距 ②③Draft safety编辑usePageDraft.tssessionStorage⚠️只在锁降级时做快照差距 ②Entity lifecycle操作删除/重命名/复制/导出/历史恢复✅⚠️Header 操作扎实侧边栏操作静默差距 ⑤Command History操作History/*——列表 Compare Restore✅有确认 进行中 错误 toastCancelability / lock反馈EditingIndicator/LockedAlert/LockStatusBanner✅三向、成熟——亮点Lists at scale数据AllPagesDrawerVListloadMoreDocuments⚠️搜索只过滤已加载子集差距 ⑥Modal Panel导航Copilot / History 右侧面板RightPanel✅Copilot 复用共享 Conversation一句话读法原文结论编辑器的实体生命周期与协同锁是成熟的弱点高度聚集在Feedback失败态缺席、保存被吞成idle与Read加载失败伪装成空态对部分列表做搜索——与历次审计命中的软肋相同。三、§2 — 亮点/优秀案例重构时不许回退的清单技能明确规定只列缺陷的审计已经退化成 bug report。亮点是回灌循环的 ✅ 半区是下一次重构的不许回退清单。Pages 审计认定了四个亮点✅ 亮点 — 三向协同编辑锁。EditingIndicator/LockedAlert/LockStatusBanner构成一个成熟、可读的 presence/lock 模型把别人正在编辑在三个高度上可视化而不是一个不透明的标志位这是模块里唯一把可取消性/并发端到端暴露出来的地方重构必须保持三者同步。✅ 亮点 — Command History 端到端暴露失败。History/*History/index.tsx的列表 Compare Restore 带确认 进行中 错误 toast是模块里唯一把失败态一路带到用户面前的流程与差距 ②③④ 中被吞掉的保存/元数据/历史失败形成 ✅ 对照这正是它承重的原因。✅ 亮点 — Header 实体生命周期做对了→ 已落地为 ux Act §3.1 的 ✅ 案例。编辑器 Header 的删除/重命名/复制/导出/恢复中复制操作做了 try/catch 成功/错误messageHeader/useMenu.tsx——与差距 ⑤ 里静默的侧边栏操作形成对照同样的意图这里变更能暴露自己的失败。✅ 亮点 — 主舞台空态即引导。PageExplorerPlaceholderPageExplorerPlaceholder.tsx的新建/上传/Notion 卡片把无文档状态变成了富 CTA而不是死空间——增长侧空态是起点模式的规范实现差距 ⑦ 的侧边栏空态是它的 ⚠️ 反例。四、§3 — 体验差距按严重度排序技能的严重度标尺破坏信任数据/输入丢失、永久卡死、误导性空态掩盖失败、静默发送失败死路或误导无前进路径、状态含糊、缺进行中反馈摩擦/不一致/错失惊喜。以下 8 项差距 1 个盲区全部继承原文档并对关键证据在当前仓库中重新定位。① 侧边栏列表拉取失败 → 永久骨架屏 — Feedback §4.2 useFetchDocuments只在成功回调onData中写入documentsaction.ts 中onData: (documents) { ... internal_dispatchDocuments({ documents, type: setDocuments }) }而isDocumentsLoading documents undefinedselectors.ts 第 9 行。Body在 loading 期间渲染SkeletonList。拉取出错时documents保持undefined→ 骨架屏永远转没有错误、没有重试——这是典型的初始化标志被成功回调门控陷阱。② 正文自动保存静默失败 草稿缺口 — Feedback §4.4 / Edit §2.1 performSave的 catch 分支中非锁错误只把状态复位为saveStatus: idleaction.ts 的catch块仅CONFLICT置saveBlockedByLockFORBIDDEN弹 toast其余只console.error后回到idle。状态枚举是idle | saving | saved根本没有failedinitialState.ts 第 65 行。只有CONFLICT锁会被表面化网络错误/500 在用户看来与成功无法区分。同时isDirty保持 true但 usePageDraft 只在锁不健康时才做快照——健康锁下的持续性保存失败既没有 failed 态、也没有草稿备份刷新即静默丢失工作成果。③ 元数据标题/emoji保存失败静默 — Feedback §4.4 PageEditor/store/action.ts 中performMetaSave的 catch 同样把metaSaveStatus复位为idle——再次没有failed。一次没持久化成功的标题/emoji 编辑界面上看不出任何异常。④ 历史加载失败伪装成没有历史 — Read §1.1 History 的 SWR 解构只取了{ data, isLoading }丢掉了errorHistory/index.tsx渲染逻辑是items.length 0 ? Empty no history/。拉取失败 → 直接落到空态、无重试 → 用户会读到这篇文档没有版本这样的错误事实。⑤ 侧边栏新建/重命名/复制静默失败 — Act §3.1 createNewPage出错时 rethrowcrud/action.ts但调用方AddButton、PageExplorerPlaceholder的新建入口是 fire-and-forget——无 catch、无 toast乐观插入的页面闪现一下就消失还附带一个 unhandled rejection。侧边栏重命名Editing与复制Item/useDropdownMenu只有console.error。不一致之处编辑器 Header 的复制做对了try/catch 成功/错误messageHeader/useMenu.tsx——同一意图两套反馈行为。⑥ 全部页面搜索只过滤已加载子集 — Read §1.2 AllPagesDrawer 的Content用title/content.includes对allFilteredDocuments做客户端过滤且滚动加载在搜索中会中止。500 篇页面只加载了 40 篇时搜索一个未加载的页面会返回无结果——但它是存在的一个假空态分页排序必须走服务端规则的读侧孪生问题。⑦ 侧边栏空态没有 CTA — Read §1.1 PageEmpty.tsx只渲染一段描述它确实区分了没有页面与搜索无匹配——这点做得好但缺少创建你的第一页动作富 CTA 只存在于主舞台占位符中侧边栏空态因此是一个安静的死胡同。⑧ 硬编码英文字符串 — i18n PageExplorerPlaceholder中直接渲染了字面量Uploading...而不是走t()国际化 key——多语言用户会看到英文残留。⏳ 盲区分享视图的错误/空态是云构建桩 — 无法在 OSS 仓库审计分享视图把数据与错误交给业务外壳渲染而 OSS 仓库里的 PublishedShell.tsx 忽略data/error直接返回{children}所以一个失败/不存在的分享链接会渲染空白。真实行为在业务包cloud build里——只能留待 L2/L3 在云构建上确认。原文档明确把这一点列为盲点而不是缺陷正是证据边界规则的体现L1 在 OSS 仓库里看不见它的真实状态。五、§4 — 技能反馈审计如何回灌ux检查清单page.md的第四节记录了一次审计如何反哺技能体系回灌循环——这是整个方法论持续的关键新增/强化落地的ux条目Feedback§4.4— 新增检查清单行 PageEditor ❌ 案例保存状态枚举必须能够表示失败catch里复位到idle是把静默写入烧进类型的陷阱差距 ②③。Act§3.1— 新增乐观变更必须暴露失败规则 ❌侧边栏新建/重命名/复制vs ✅Header 复制对照案例差距 ⑤。Read§1.2— 新增对分页列表的搜索必须查询服务端全量规则AllPagesDrawer作为 ❌ 案例差距 ⑥。每条同步镜像进 SKILL.md 的 Quick review。验证了既有规则提供了好的 ❌ 引用案例§4.2 永久骨架屏差距 ①、Read §1.1 空态 vs 失败差距 ④、Read §1.1 空态需要 CTA差距 ⑦。技能文档强调ux是审计的度量基准审计是让ux保持诚实的机制——每次运行结束前必须完成落地三步修掉最严重的 或建单、把可泛化差距回灌成检查清单条目含 ✅/❌ 案例 Quick review 镜像行、把审计本身存为references/example/page.md供下次复用。如果一次运行真的没有可泛化的差距也要在报告里明确写出来——沉默不是合法的收尾。六、§5 — 待办L2 视觉 L3 动态page.md明确声明本次是 L1-only并在文末列出了后续必须执行的确认项——这示范了结论只声明自己证据层能支撑的部分L2视觉——确认侧边栏空态PageEmpty的真实观感死空间还是页面感Copilot / History 右侧面板布局编辑器单一主操作是否清晰占位符卡片在窄屏与暗色模式下的表现。L3动态——逐项强制故障来证实差距列表拉取离线 →实时确认差距 ①永久骨架屏、无重试健康锁下强制保存 500 →确认差距 ②静默看起来成功态、无草稿 → 刷新丢工作成果强制历史拉取报错 →确认差距 ④显示没有历史驱动新建/重命名/复制失败 →确认差距 ⑤条目消失、无 toast在全部页面抽屉中搜索一个未加载的页面 →确认差距 ⑥假空态测量骨架屏→内容切换与 Copilot 挂载过程中的编辑器 CLS/LCP。七、从这篇工作样本能学到什么page.md的价值不在Pages 模块有 8 个缺陷这个结论本身而在于它展示了可复制的审计形状先声明审计层与盲区L1 已跑 / L2、L3 未跑 / 云构建桩不可见每个结论都挂在它能被看见的层上模式表 亮点 差距三件套亮点与差距对等成文file:line级证据亮点直接变成检查清单的 ✅ 案例与重构回退保护线差距按严重度排序并标注违反的具体清单条目Feedback §4.2、Read §1.1 等使每个发现可独立检索、可验证回灌闭环可泛化的差距成为新的规则 ❌ 案例优秀实现反过来 sharpen 规则文本——审计跑完检查清单比跑之前更锋利待办即承诺L2/L3 的强制故障脚本写清楚下一轮审计可以从这份清单直接续跑。在 LobeHub 仓库中这套样本与 ux-audit 技能定义、三层操作文件L1 / L2 / L3以及references/example/下的其他模块样本共同构成了一套以证据而非感觉的界面体验治理流程而本文所引的全部代码证据src/store/page、src/store/document/slices/editor、src/features/PageEditor、src/features/Pages/PageLayout都可以按文中路径直接在当前仓库中复核——这正是该技能反复要求的引用之前重新验证。【免费下载链接】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），仅供参考