SuperAPI AI 工具集

webgl-landing-steering

通用与其它

查看项目

更新于 10-15 21:09

技能介绍

用途:在编写代码之前,把落地页目标映射到明确的 WebGL 方向,避免堆叠特效而损害转化与性能。

主要流程与能力:

  1. 定义页面意图:确认主要转化与品牌信号(高端/极简、技术/数据权威、趣味/社交、电影感/叙事),并记录设备分布、动效容忍度(prefers-reduced-motion 策略)与生产约束(截止时间、团队能力、维护预算)。
  2. 选择单一主导路线:A 细微景深场(SaaS、效率、B2B,优先可读性);B 数据/粒子智能(AI、基础设施、分析、开发者产品,传达系统行为而非随机闪烁);C 以物体为中心的 3D 产品时刻(硬件、强产品视觉,单主角对象、短循环、快速回退);D 沉浸式电影场景(品牌营销页,需静态/移动回退与严格性能门槛)。
  3. 按页面类型给出转向矩阵:等待名单/预售用 A 或 B;功能页用 A 或 C;定价/高意向页以 A 为主且 WebGL 仅作装饰;企业信任页用 B 且克制;消费级增长页用 B 但限制 CPU/GPU 负载;活动微站用 C 或 D 并显式回退。
  4. 发布前质量门:信息门(标题与 CTA 3 秒内可读,WebGL 不阻碍理解)、性能门(像素比上限 Math.min(devicePixelRatio, 1.5-2),移动端稳定帧时间,懒加载重资源并提供非 WebGL 海报/回退)、无障碍门(尊重 prefers-reduced-motion,保持对比度)、可靠性门(处理上下文丢失与缩放,SPA 路由切换时释放几何体/材质/纹理)。
  5. 按风险选择实现:低风险为 CSS+canvas 错觉与极简着色器;中风险为 1-2 个网格的 Three.js 场景与轻量后处理;高风险为多遍着色器、密集粒子与高级后处理。转化页默认低/中风险。
  6. 提供 Codex 风格提示模板与常见失败修正(转化下降、移动端卡顿、风格同质、着色器难维护)。

输出格式:推荐路线及理由、视觉规格、技术栈与复杂度层级、回退行为、性能与无障碍清单、先 MVP 后增强的构建顺序。

限制:该技能为方向指导与检查清单,不包含完整可直接运行的代码示例;具体价格、平台支持等信息暂未提供。