实用教程
用 Claude Opus 5.5 修复商品页过小的触控区域
让 Claude Opus 5.5 检查商品页控件真正接收点击的区域，不要只看图标大小。图标变大，按钮仍可能过小；用透明区域扩展点击范围，又可能与旁边的操作重叠。应交付可测量的布局修复和实际交互检查。
让 Claude Opus 5.5 检查商品页控件真正接收点击的区域，不要只看图标大小。图标变大，按钮仍可能过小；用透明区域扩展点击范围，又可能与旁边的操作重叠。应交付可测量的布局修复和实际交互检查。
测量真正接收点击的控件
提供渲染后的页面、组件 CSS、视口尺寸，以及数量加减、规格色块、图库箭头和关闭按钮清单。用 CSS 像素记录边界矩形。截图能说明布局，却不能告诉你哪个元素实际收到了指针事件。
一则 2012 年关于触控间距的讨论区分了“大按钮”和“相邻冲突操作”。它是历史社区讨论，不是对今天商店的测量。W3C 当前的目标尺寸说明规定了 24 × 24 CSS 像素的最小尺寸及明确例外，其中包括小目标的间距判断。这并不等于所有行内文字链接都必须套用同一种尺寸。
| 发现 | 候选修复 | 修改后检查 |
|---|---|---|
| 小图标放在小按钮内 | 扩大按钮盒子 | 边缘点击能触发正确操作 |
| 看似有间距，点击区却重叠 | 消除重叠，用布局间距 | 点空隙不会误触两侧 |
| 按钮很宽但高度不足 | 增加纵向空间 | 两个方向都达到设计目标 |
| 色块只能靠颜色辨认 | 提供有意义的可访问名称 | 键盘操作与辅助标签仍清楚 |
算清数量控件需要的空间
假设两个正方形按钮各宽 20 像素，间距为 2 像素，中心相距 22 像素。以两个中心分别画直径 24 像素的圆，会发生重叠，因此这一具体布局不符合间距例外。这是虚构布局的尺寸计算，不是线上无障碍审计。
本例选择 44 × 44 的正方形按钮和 8 像素间距，作为更宽裕的设计方案。两个按钮加一个间距占 96 像素，还没有算数量显示。如果中间数字区宽 40 像素，两侧各留 8 像素，整行减号／数字／加号需要 144 像素。先为整行留够空间，别在最后又把按钮挤小。
.quantity-button {
min-inline-size: 44px;
min-block-size: 44px;
display: inline-grid;
place-items: center;
}
.quantity-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}这段 CSS 只是起点，不是合规证明。边框、形状、变换和覆盖元素都会影响实际目标。为了保持视觉平衡，图标可以继续较小。不要用互相重叠的伪元素扩大点击范围，否则相邻操作会变得含糊。
完整的 Opus 修复提示词
检查提供的商品页组件在 390 和 1280 CSS 像素视口下的触控目标。输入包括渲染页面、CSS 源码、DOM，以及数量、规格、图库控件。如果没有浏览器访问能力，明确区分估计尺寸和实测结果。
逐项列出可访问名称、实际点击区域、相邻间距和观察到的重叠。区分 W3C 的 24 × 24 最小尺寸及其例外，与本例自行选定的 44 × 44 正方形按钮目标。不要据此宣称整个网站合规。
提出最小布局补丁，保留价格、已选规格、数量上下限、焦点提示和响应式行为。把图标视觉尺寸与按钮尺寸分开，不制造重叠的透明点击区。
测试中心和边缘点击、相邻空隙、键盘焦点、连续修改数量，以及最小数量时的禁用状态。记录实际执行和未测试项目，交付测量表、补丁及修改前后的交互结果。这是一种拟议的 Opus 用法：官方提示词指南可作为组织明确任务与验收条件的参考，但本文不是模型实测。补丁落地后要实际点击；仅测 DOM 矩形，查不出透明覆盖层截获事件的问题。
上线前的常见疑问
**图标改成 44 像素就够了吗？** 只有实际控件足够大且能接收点击才有意义。图标和按钮要分别检查。
**所有控件都要同样的间距吗？** 不需要。8 像素是本例的布局选择，不是通用标准，应结合适用规则和相邻操作判断。
**弹窗关闭按钮怎么办？** 触控尺寸与弹窗焦点恢复解决不同问题，两者都要验收。
可以把批准的商品图带入 Panelly Studio制作广告创意，再单独检查落地页的真实控件。图片里画得漂亮的 CTA 不会自动成为可点击按钮；这里也不声称 Panelly 已集成 Opus。
