| name | webgl-landing-steering |
| description | 当创建或打磨重度使用 WebGL 的落地页、且需要在保证转化清晰度、性能与实现复杂度之间取得平衡的同时，把视觉引导向某个特定结果（高端、技术、俏皮、电影感）时使用。 |
WebGL 落地页引导技能
用这个技能来引导结果
在写代码前，把落地页目标映射到 WebGL 方向。
1）定义页面意图
识别主要转化点与品牌信号：
- 高端 / 奢华 / 极简自信
- 技术 / 基础设施 / 数据权威
- 俏皮 / 消费级 / 社交能量
- 电影感 / 发布 / 叙事冲击
同时记录：
- 设备构成（偏桌面 vs 偏移动）
- 动效容忍度（
prefers-reduced-motion 策略）
- 生产约束（截止日期、团队技能、维护预算）
2）选择 WebGL 车道
选一条主导车道；避免在主视觉里混用 3-4 种重特效。
车道 A：微妙景深场（转化最安全）
用于：SaaS、生产力、B2B 工具，可读性优先。
- 视觉：柔和渐变网格、缓慢视差平面、轻 bloom
- 动效：低幅度，始终从属于文案
- 技术栈：Three.js 平面着色器或轻量着色器 canvas
- 准则：主视觉文本对比度与 CTA 突出度优先
车道 B：数据/粒子智能（技术可信度）
用于：AI、基础设施、分析、开发者产品。
- 视觉：粒子流、节点网络、矢量场、线框
- 动效：有目的地朝 CTA 区域定向流动
- 技术栈：Three.js + 自定义着色器/points，密集场可选 GPGPU
- 准则：传达“系统行为”，而非随机闪烁
车道 C：以对象为中心的 3D 产品时刻（特性清晰度）
用于：硬件、产品视觉强的应用、发布。
- 视觉：中央 GLTF 模型、受控相机环绕、材质高光
- 动效：交互驱动或基于时间轴的显现
- 技术栈：Three.js + GLTF/DRACO/KTX2 流水线
- 准则：一个主视觉对象、短循环、快速的首次有意义绘制降级方案
车道 D：沉浸式电影场景（品牌 campaign）
用于：以“惊艳感”为主要 KPI 的 campaign 页。
- 视觉：体积光、重后处理、密集场景构图
- 动效：随滚动分章的编排序列
- 技术栈：Three.js + 后处理 + 可选 GSAP ScrollTrigger
- 准则：提供静态/移动降级方案与严格的性能闸门
3）按落地页类型的引导矩阵
- 等候名单 / 预发布：车道 A 或 B。保持文案清晰、加载快。
- 产品特性页：车道 A 或 C。展示产品真相，而非抽象噪点。
- 定价 / 高意向页：主要用车道 A。让 WebGL 仅作装饰。
- 企业信任页：车道 B，配克制配色与低噪点。
- 消费级应用增长页：车道 B 配俏皮配色，但要限制 CPU/GPU 负载。
- Campaign 微站：车道 C 或 D，为低端设备提供明确降级方案。
4）上线前的质量闸门
在增加更多视觉复杂度前通过这些闸门：
- 信息闸：
- 主视觉标题 + CTA 在 3 秒内可读。
- WebGL 绝不阻碍对卖点的理解。
- 性能闸：
- 限制像素比：
Math.min(devicePixelRatio, 1.5-2)。
- 在常见移动设备上追求稳定帧时间。
- 懒加载重资产；立即展示非 WebGL 的海报/降级图。
- 无障碍闸：
- 尊重
prefers-reduced-motion（静止帧或低动效模式）。
- 在动画背景之上保持色彩对比度。
- 可靠性闸：
- 处理上下文丢失与 resize。
- 在 SPA 路由切换时 dispose 几何/材质/纹理。
5）按风险划分的实现策略
- 低风险（最快）：CSS + canvas 错觉、极少着色器
- 中风险：含 1-2 个网格的 Three.js 场景、轻量后期特效
- 高风险：多趟着色器、密集粒子、进阶后处理
除非用户明确要求 campaign 级沉浸，转化页默认走低/中风险。
6）用于 Codex 式执行的提示词模板
被要求构建 WebGL 落地页主视觉时，使用这个提示词模式：
“Build a [lane] WebGL hero for a [page type] with [brand adjectives].
Primary goal: [conversion].
Constraints: [device mix], [performance budget], [reduced motion policy].
Implement fallback first, then enhance with WebGL.
Keep hero copy clarity as priority over visual complexity.”
7）常见失败模式与纠正
- 失败：“看着酷但转化降了。”
- 修正：降低动效幅度、把背景调暗/调柔、提高 CTA 对比度。
- 失败：“移动端卡顿。”
- 修正：减少粒子数量、降低 DPR 上限、移除昂贵的后处理。
- 失败：“视觉风格显得通用。”
- 修正：选一个与品牌契合的标志性母题（网格、波、环绕、碎片）。
- 失败：“团队无法维护着色器复杂度。”
- 修正：简化为带文档参数的模块化 Three.js 场景。
应用本技能时的输出格式
返回：
- 推荐车道及原因
- 视觉规格（配色、动效行为、构图）
- 技术栈与复杂度档位
- 降级行为
- 性能 + 无障碍清单
- 构建顺序（先 MVP，后增强）
