# 第10集｜Hy4 Preview 实测：网页动效Prompt横评与代码实测说明

> 本指南配合视频评测使用：设计高难度网页粒子动效与物理弹簧交互 Prompt，同题盲测 Hy4 Preview、ChatGPT 4o 与 Gemini 1.5 Pro 的前端代码生成与一次成型能力。

---

## 盲测题目与评测标准

### 评测 Prompt（可直接复制测试各家模型）

```markdown
请编写一个单文件 index.html（包含内联 CSS 和 JS），实现一个高级极简风格的“引力场粒子吸附与液体形变动效”：
1. 视觉设计：深色背景（#0a0a0f），居中放置一个具有流体边缘波动的液态核心球体；
2. 粒子交互：屏幕散布 200 个微光粒子，粒子会受鼠标指针引力吸引并形成平滑拖尾轨迹；
3. 物理形变：当粒子碰撞或鼠标悬停在核心球体时，球体产生基于贝塞尔曲线的流体挤压弹性形变，伴随呼吸光晕；
4. 性能要求：使用原生 HTML5 Canvas 编写，保证 60FPS 流畅运行，不依赖任何第三方外部库；
5. 代码要求：结构干净规范，开箱即用，代码一次性完整输出，不留占位伪代码。
```

---

## 三家主流模型横向对比矩阵

| 评估维度 | ChatGPT 4o | Gemini 1.5 Pro | Hy4 Preview |
| :--- | :--- | :--- | :--- |
| **一次成型运行率** | 85%（偶有 Canvas 坐标偏移） | 90%（渲染逻辑严谨） | **98%（零报错直接运行）** |
| **动画物理真实感** | 粒子运动较机械，缓动略生硬 | 贝塞尔形变优秀，手感扎实 | **物理阻尼与弹性极细腻，富有生命力** |
| **代码洁净度** | 模块化清晰，但注释放置过多 | 逻辑紧凑，现代 ES6+ 语法 | **结构极致精简，数学公式推导扎实** |
| **复杂交互扩展性** | 易在后续修改中丢失状态 | 结构清晰，便于模块解耦 | **架构松耦合，易于增加新交互事件** |

---

## 学习结论与选型建议

1. **Hy4 Preview** 在纯代码推导、尤其是涉及三角函数、向量物理学与 Canvas 渲染管道等数学密集型任务时，表现出极高的一次性命中率；
2. 在开发酷炫落地页、Web 3D 微交互或数据可视化动效时，可优先尝试让 Hy4 生成核心渲染内核，再由 Codex 进行组件集成。