BEFORE传统走查
检查实现和设计稿
差了多少
- 01找到设计稿
- 02逐页对照实现
- 03标记还原差异
无设计稿或实现已偏离时，检查基准失效。
INPUT
REVIEW
OUTPUT
ACTUAL PAGE VERIFIABLE CONCLUSION
01
从输入到交付，
每一条结论都有来路。
3种输入
CODE / URL / SHOT
CODE / URL / SHOT
30项基础检查
CORE / VIS / A11Y
CORE / VIS / A11Y
4阶段闭环
A0 / A1 / B / C
A0 / A1 / B / C
02
WHY / 为什么做
没有设计稿，
也能做严谨的体验走查。
真实项目里，设计稿不一定存在，实现结果也不一定与设计稿一致。比起追问“还原了多少”，更需要回答“用户面对的实际产品好不好用”。
检查实现和设计稿
NOWUX Walkthrough
检查实际页面
能否支持用户任务
- 01建立用户任务契约
- 02检查流程与视觉质量
- 03用证据给出验收标准
以用户最终面对的产品为证据起点。
03
METHOD / 方法
不从“好不好用”开始。
从用户要完成什么开始。
先锁定人、任务、环境和成功标准，再进入界面。这会让设计判断有边界，也让后续修改真正可验收。
REVIEW BRIEF · 7/7 CONFIRMED
设计前置调查
确认走查范围、主要用户、核心目标、关键任务、PC 使用情境、成功标准和失败影响。
GATE7 项前提由用户明确确认
04
EVIDENCE / 证据
页面事实、专家推断、用户实证，
三者不混在一起。
先记录“看到了什么”
实际交互、页面截图、DOM、无障碍树和代码证据分别归档，不把推测包装成观察。
EV-03interactionPAGE-01HIGH
再解释“为什么是问题”
影响来源、用户任务和业务风险单独表达；没有用户实测，就不虚构错误率或效率数据。
证据不足，不硬定级
高、中置信的确定问题才进入问题清单；其他风险进入待验证队列，并给出验证方法。
05
COVERAGE / 覆盖
不用一个百分比，
遮住没有检查的地方。
页面视觉、关键任务和适用状态分别展示。每一个目标只能是已验证、有问题、未测试、不适用或被阻断。
VISUAL SURFACES05 / 05
CRITICAL TASKS02 / 03
APPLICABLE STATES08 / 10
TARGET
01
02
03
04
05
06
07
08
09
10
VISPAGE-01 订单列表
VISPAGE-02 处理弹层
CORETASK-01 批量处理
A11YTASK-01 批量处理
已验证有问题被阻断不适用
06
OUTPUT / 交付
不止是一份“看起来很专业”的报告。
REPORT.MD
完整走查报告
范围、方法、覆盖、问题、待验证风险、正向模式与限制。
REPORT.JSON
结构化证据模型
Issue、task、surface、state、evidence 和 coverage 双向引用，可继续处理。
ANNOTATIONS
可定位的标注图
URL 与截图模式的确定问题附带标注与 bbox，不手估位置。
REPORT.DOCX
可分发的本地文档
经结构和标注校验后生成，适合审阅、归档与设计评审。
FOLLOW-UP REVIEW
修改后，回到原验收标准复查
不记录“开发说已完成”，只判断修改后的实际设计体验，并检查受影响页面与相邻状态的回归。
RESOLVED已解决
PARTIAL部分解决
UNRESOLVED未解决
CANNOT VERIFY无法验证
07
BOUNDARIES / 边界
严谨，不等于什么都说。
PC 端 B 端产品
管理后台、业务工作台、数据管理、运营、配置与审批系统。
键盘、焦点与缩放
它们是 PC 体验的一部分，与对比度和辅助技术一起进入正式检查。
移动端与触屏任务
App、小程序、手势与跨设备连续性不在这套 Skill 的正式结论范围内。
INSTALL THEN REVIEW
先安装，
再开始走查。
这个页面现在包含真实的 ux-walkthrough Skill。先将安装指令发给 Codex；安装完成后新建一个任务，再用 $ux-walkthrough 调用。未安装时，调用指令只是普通文字。
STEP 01 · INSTALL安装真实 Skill
$skill-installer
请从 GitHub 仓库 https://github.com/liuyahui59/designhub-site 的 ux-walkthrough-skill 目录安装这个 Skill。安装完成后告诉我实际安装路径。STEP 02 · NEW TASK
$ux-walkthrough
对这个 PC 端 B 端产品做一次体验走查。
输入：<代码库 / URL / 截图>
本次范围：<页面或流程>
请先完成设计走查前置调查，再按四阶段流程执行。支持 CODE · URL · SCREENSHOTux-walkthrough@1.0.0