截图转 React 质量清单：从视觉匹配到可维护 UI

一张截图只是某个视口下某一渲染状态的证据。它并不揭示原始的组件树、断点规则、数据源、权限或交互。因此，一次有用的转换应从匹配可见层级开始：页面外壳、导航、内容区域、重复项、主要操作和状态指示。

在调整阴影或渐变之前先比较大的几何关系。检查容器宽度、列关系、对齐、卡片密度，以及信息在较小屏幕上折叠的顺序。结构准确的版本即使还有少数装饰细节需要打磨，也更容易维护。

重复的卡片、行、筛选和导航项应当有清晰的组件边界和稳定的数据形状。只有当这样能提高可读性并保留可见结果时，才把重复的静态标记替换为映射数据。

保留语义元素：操作用按钮、导航用链接、控件用标签、标题按有意义的顺序排列、真正的表格数据用表格。视觉相似不构成把所有区域拍平成匿名 div 的理由。

补充加载、空、错误、禁用、选中、聚焦和校验状态。对于看板，决定图表无数据或表格窄于列时会发生什么。对于表单，定义必填字段、行内错误、提交反馈和键盘行为。

在集成工单或拉取请求中写明状态假设。这样能清楚哪些决策来自参考图，哪些由实现团队引入。

在代表性的移动端、平板和桌面宽度下测试页面。用键盘导航、检查焦点可见性、验证颜色对比度，并确认控件有无障碍名称。把仅作参考的图片和字体替换为有许可的生产素材。

最后，接入真实数据和事件、运行类型检查和测试，再把集成的界面与原始参考图对比一次。截图开启实现，但它不能替代工程审查。