mcpField
W
webgl-landing-steering

webgl-landing-steering

github.com/mengto设计与 UI7.1k1.7k 次安装3 天前更新
代码仓库

关于 webgl-landing-steering

用于在实现前为落地页选择和规划 WebGL 视觉方案的技能。它将页面目标映射到视觉方向，并设定性能、无障碍、可靠性和回退检查。

主要功能

  1. 01根据页面意图选择 WebGL 方向
  2. 02为不同落地页类型选择视觉方案
  3. 03设定性能与无障碍门槛
  4. 04规划回退方案和实现风险

适用场景

  1. 01规划产品页的 WebGL 主视觉
  2. 02为定价页选择克制的视觉效果
  3. 03制定移动端与减少动态效果的回退方案

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mengto/skills --skill webgl-landing-steering

安装后在 Claude Code 中输入/webgl-landing-steering确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

REFERENCES.md
demo/
index.html
PROMPT.md

详细介绍

WebGL 落地页引导技能

使用此技能引导效果

编写代码前，先将落地页目标映射为 WebGL 方向。

1) 明确页面意图

确定主要转化目标和品牌信号：

  • 高端 / 奢华 / 简约自信
  • 技术 / 基础设施 / 数据权威性
  • 活泼 / 消费者 / 社交活力
  • 电影感 / 发布 / 叙事冲击力

还需记录：

  • 设备构成（以桌面设备为主还是以移动设备为主）
  • 动效容忍度（prefers-reduced-motion 策略）
  • 生产限制（截止日期、团队技能、维护预算）
2) 选择 WebGL 方向

选定一个主导方向；避免在首屏混用 3–4 种高负载效果。

方向 A：微妙的纵深场景（高转化安全性）

适用于：SaaS、效率工具、B2B 工具等可读性优先的场景。

  • 视觉效果：柔和的渐变网格、缓慢的视差平面、轻微泛光
  • 动效：幅度较小，始终以文案为主
  • 技术栈：Three.js 平面着色器或轻量级着色器画布
  • 规则：优先保证首屏文本对比度和 CTA 的醒目程度
方向 B：数据 / 粒子智能感（技术可信度）

适用于：AI、基础设施、分析、开发者产品。

  • 视觉效果：粒子流、节点网络、矢量场、线框
  • 动效：有目的地朝 CTA 区域流动
  • 技术栈：Three.js + 自定义着色器 / 点；密集场景可选用 GPGPU
  • 规则：传达“系统行为”，而非随机闪光
方向 C：以对象为中心的 3D 产品展示（功能清晰度）

适用于：硬件、具有鲜明产品视觉的应用、产品发布。

  • 视觉效果：居中的 GLTF 模型、受控的相机环绕、材质高光
  • 动效：由交互驱动或基于时间线展示
  • 技术栈：Three.js + GLTF/DRACO/KTX2 流程
  • 规则：只展示一个首屏主体对象，循环时长要短，并为首次有效绘制提供快速回退方案
方向 D：沉浸式电影感场景（品牌营销活动）

适用于：以惊艳效果为主要 KPI 的营销活动页面。

  • 视觉效果：体积效果、重度后期处理、密集的场景构图
  • 动效：配合滚动章节的编排序列
  • 技术栈：Three.js + 后期处理 + 可选的 GSAP ScrollTrigger
  • 规则：为移动设备提供静态回退方案，并设置严格的性能门槛
3) 按落地页类型选择引导方向
  • 候补名单 / 发布前页面：方向 A 或 B。确保文案清晰易读，并能快速加载。
  • 产品功能页面：方向 A 或 C。展示真实的产品特性，而非抽象噪点。
  • 定价 / 高意向页面：以方向 A 为主。WebGL 仅用于装饰。
  • 企业信任页面：使用方向 B，采用克制的配色并降低视觉噪点。
  • 消费类应用增长页面：使用方向 B 和活泼的配色，但要限制 CPU/GPU 负载。
  • 营销活动微型网站：使用方向 C 或 D，并为低端设备明确提供回退方案。
4) 发布前的质量门槛

增加视觉复杂度前，先通过以下门槛：

  1. 信息传达门槛：
  • 首屏标题和 CTA 必须能在 3 秒内读清。
  • WebGL 绝不能妨碍用户理解产品方案。
  1. 性能门槛：
  • 限制像素比：Math.min(devicePixelRatio, 1.5-2)。
  • 在常见移动设备上实现稳定的帧耗时。
  • 延迟加载大型资源；立即显示非 WebGL 海报 / 回退内容。
  1. 无障碍门槛：
  • 遵循 prefers-reduced-motion（静态帧或低动效模式）。
  • 确保动画背景上的颜色对比度达标。
  1. 可靠性门槛：
  • 处理上下文丢失和尺寸变化。
  • 在 SPA 路由切换时释放几何体 / 材质 / 纹理。
5) 按风险制定实现策略
  • 低风险（最快）：CSS + 画布视觉效果，少量着色器
  • 中风险：包含 1–2 个网格的 Three.js 场景、轻量级后期特效
  • 高风险：多通道着色器、密集粒子、高级后期处理

对于转化页面，默认采用低 / 中风险方案，除非用户明确要求达到营销活动级别的沉浸感。

6) Codex 风格执行的提示词模板

当要求构建 WebGL 落地页主视觉时，使用此提示词模式：

"为 [page type] 构建一个 [lane] WebGL 主视觉，采用 [brand adjectives]。 主要目标：[conversion]。 限制条件：[device mix]、[performance budget]、[reduced motion policy]。 先实现回退方案，再使用 WebGL 增强。 优先保证主视觉文案清晰，而非追求视觉复杂度。"

7) 常见失败模式及修正方法
  • 失败：“看起来很酷，但转化率下降了。”
    • 修正：减小动态幅度、加深或柔化背景、提高 CTA 对比度。
  • 失败：“移动设备上卡顿。”
    • 修正：减少粒子数量、降低 DPR 上限、移除开销较大的后期处理。
  • 失败：“视觉风格感觉很普通。”
    • 修正：选择一种与品牌相符的标志性元素（网格、波浪、轨道、碎片）。
  • 失败：“团队无法维护复杂的着色器。”
    • 修正：简化为带有已记录参数的模块化 Three.js 场景。

应用此技能时的输出格式

返回：

  1. 推荐的方向及原因
  2. 视觉规格（调色板、动态效果、构图）
  3. 技术栈和复杂度等级
  4. 回退行为
  5. 性能与无障碍检查清单
  6. 构建顺序（先做 MVP，再进行增强）

评论

支持 Markdown