实用教程
用 Claude Opus 5.5 修好产品页动效，让静态页面也能读懂
让 Claude Opus 5.5 先保证产品页在静态状态下内容完整，再为有解释价值的变化添加动效。价格、规格和购买入口不应等滚动动画触发后才出现。先修内容的初始状态；如果脚本失效时内容仍隐藏，把动画缩短也无济于事。
让 Claude Opus 5.5 先保证产品页在静态状态下内容完整，再为有解释价值的变化添加动效。价格、规格和购买入口不应等滚动动画触发后才出现。先修内容的初始状态；如果脚本失效时内容仍隐藏，把动画缩短也无济于事。
以下是建议实现方案，不是 Opus 效果实测。官方提示词指南可帮助明确交付和验收条件。把相关 HTML、CSS、JavaScript 一起提供，模型才能看清究竟是谁控制了可见性。
分清三种动效用途
| 动效 | 有用的作用 | 静态替代 |
|---|---|---|
| 色卡切换 | 表达选择已改变 | 选中标签与立即更新的图片 |
| 产品拆解图 | 解释部件关系 | 带标注的部件图 |
| 滚动入场 | 装饰呈现 | 内容按文档顺序直接可见 |
一则网页开发者讨论提到，反复等待内容入场会让阅读受阻。这是定性的使用反馈，不证明某个固定时长能提高转化。
逐个记录触发方式、受影响元素、初始和结束状态，以及 JavaScript 失败时的行为。重点找那些等待观察器或时间线运行才能解除的 `opacity: 0`、移出屏幕或高度为零的样式。购买链接存在于 DOM，并不等于用户看得见。
默认状态就应当可见
下面的小示例默认显示卡片，只在用户没有要求减少动态效果时添加短暂入场。距离与时长是示意选择，不是通用门槛。
```css
.product-card {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
animation: product-enter 180ms ease-out both;
}
@keyframes product-enter {
from { opacity: 0.85; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
[MDN 的减少动态效果文档](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)说明这个媒体特性如何反映用户偏好。但 CSS 不会自动停止另一套 JavaScript 动画循环或视频自动播放，需要在相应控制逻辑中检查同一偏好。
不要全局把所有动画时长直接设为零。有些代码等动画事件发生才显示内容或清理状态。静态分支应明确进入完成状态，并核实完成逻辑只执行一次，不能让页面停在过渡中间。
## 可直接复制的修复提示词
```text
检查所附产品页 HTML、CSS 与 JavaScript。保留文案、产品事实、链接及当前文档顺序。
列出每个动画的触发方式、起止状态，以及脚本失败或启用减少动态效果时的行为。
默认状态下让价格、规格、购买入口可见且可用。只在 no-preference 时添加装饰动画。解释性动效提供包含相同事实的静态标注图。
分别检查 CSS、JavaScript 时间线、requestAnimationFrame 循环与视频自动播放，不要声称一个 CSS 媒体查询能解决全部问题。
消除依靠动画事件才显示关键内容的逻辑。静态分支中的清理和完成处理仍须恰好执行一次。
返回最小修改，以及测试矩阵：普通动画、加载前启用减少动态效果、页面打开时更改偏好、禁用 JavaScript、键盘操作、窄屏版式。
不要重做整页设计，也不要承诺提高转化率。验收静态分支，而不只看动画
先启用减少动态效果再加载页面，确认同样的产品事实与操作立即可用。页面打开时切换偏好，检查现有运动能否停止，是否留下半透明卡片或展开一半的图解。
禁用 JavaScript 后重新加载，核心信息仍应能读懂；复杂选择器可能需要更简单的替代。用 Tab 键逐项移动，入场时序不能遮住当前聚焦控件。在窄屏下，静态图的标签应完整，关键比较不应必须横向拖拽才能阅读。
保存静态与动态状态供审核，逐项标为已测、失败或未测。生成一段看似合理的代码和解释，不等于浏览器测试通过。
为两种呈现准备视觉素材
在 Panelly Studio制作完整商品图或带标注的静态图解，作为可读的基础内容，后续再用动效补充说明。这里没有声称 Panelly 与 Opus 直接集成，也没有声称它导出这些网页代码。
调整版式可看落地页修订。若需要独立渲染的宣传片，而非可交互网页，则看截图宣传视频。
常见问题
减少动态效果是不是只显示空白或简化页面？
不是。信息与操作保持完整，用可用的静态状态替代运动。
动画更快就够了吗？
不够。缩短时长不能修复脚本失败，也不保证用户能接受剩余运动。静态分支要单独验收。
