实用教程
用 Claude Opus 5.5 修手机端商品对比表，别只把字缩小
让 Claude Opus 5.5 修手机端表格时，要求它保留“比较商品”的任务，而不是只把表塞进屏幕。买家需要知道每个数值属于哪个型号、哪个属性。隐藏型号，或把未知值都写成“无”，即使版式整齐，也改变了比较的含义。
让 Claude Opus 5.5 修手机端表格时，要求它保留“比较商品”的任务，而不是只把表塞进屏幕。买家需要知道每个数值属于哪个型号、哪个属性。隐藏型号，或把未知值都写成“无”，即使版式整齐，也改变了比较的含义。
以下是含虚构商品示例的设计审查流程。准备真实数据、现有 HTML/CSS、目标视口和买家的问题。它与提取规格是两件事：先批准事实，再解决小屏幕上怎么比较。
根据读者任务选择移动端形式
移动端表格讨论提到了横向滚动、减少列数和独立卡片之间的取舍。这些是设计选项，不是提升销量的证明。先明确买家要比较哪两款，哪些属性会决定购买。
| 读者任务 | 候选版式 | 批准前检查 |
|---|---|---|
| 横向比较同一属性 | 可滚动的语义表格 | 属性和型号始终清楚 |
| 比较选中的两款 | 双商品选择器 | 换款后行的含义不变 |
| 逐款了解商品 | 带属性标签的卡片 | 每个值都保留标签 |
| 快速找不同 | 可选的差异筛选 | 未知值不能当作相等 |
从能完成任务的最简单形式开始。选择器会增加状态管理和键盘操作工作；卡片可能让横向对比更慢。不要维护两份独立的桌面与手机事实，否则迟早会有一份更新不及时。
用小样例暴露问题
假设台灯 A、B 分别重410 g、560 g。A 支持 USB-C 充电，B 的资料没有说明充电方式；两款都有三档亮度。有用的表格应保留重量差异，把 B 的充电项写成“未说明”，不能推断 B 不支持 USB-C。
开启“只看差异”时，相同的亮度档位可以隐藏，但充电信息不确定的行应保留。再放入一个带长本地化名称和脚注的第三款，能暴露两列短英文名称测不出的溢出与归属错误。这个例子定义验收行为，不是 Opus 实测结果。
对于简单的行列表格，W3C 指南用表头单元格与 `scope` 建立对应关系，并用 caption 说明表格。改视觉排版时要保留这些关联。漂亮截图无法显示屏幕阅读器实际会读出什么。
把验收条件写进提示词
官方 Opus 提示指南可用于明确补丁和检查要求。交给模型已批准的数据源，把事实修改排除在本次版式任务之外。
修复这张商品对比表在390 CSS像素视口下的显示。
买家任务：比较所选两款台灯的重量和充电方式。
桌面与手机使用同一份批准数据，不编造缺失值。
样例：A重410 g、支持USB-C；B重560 g、充电方式未说明；两者都有三档亮度。
先提出最简单合适的布局，再给最小HTML/CSS补丁。
每个值都必须能对应型号和属性名，保留caption及语义表头关系。
若用横向滚动，将滚动限制在表格区域，提供可见提示与可用的键盘操作。
若用选择器，提供标签，并在切换后保留焦点。
检查长本地化名称、文字放大、键盘导航，以及差异筛选中的未知值。
区分已执行和无法执行的检查，不要仅凭截图声称无障碍合格。不只检查第一屏
在目标宽度下走遍每一列或每个选择项。确认固定标签不会盖住数据，长单位和脚注仍属于正确属性。放大文字，并检查整页是否产生意外横向溢出。表格区域可以有意设计成滚动，整页左右滑通常不是预期。
用键盘和目标屏幕阅读器确认表头与控件可以理解。依赖选择器的设计，还要检查无脚本时的后备内容。记录实际执行过的项目；小表格如果不值得承担交互维护成本，就去掉多余交互。
让对比图片也保持一致
在 Panelly Studio 中制作角度与比例可比的商品画面。对比事实应保留为网页中的真实文字，而不是只放在图片里。这里没有声称 Panelly 会生成或认证表格代码。输入事实可用PDF 规格核对流程检查，整体结构可参考落地页修订。
能删掉所有相同行吗？
合适时，把它做成读者明确选择、能够恢复的选项。共同功能仍可能影响购买判断，缺失资料也不代表相等。要让人知道如何返回完整对比。
