WebGL Site Builder — 总领 Skill
本文件是整个项目的入口。只加载本文件即可开始，后续由 AI 按需读取 agent-skills/ 下最窄匹配的实现技能。
如何工作
- 强制前置：会话首轮先运行
webgl-prompt-optimizer，把用户的一句话需求扩写为执行级超级 prompt。 - 读取本文件（入口、索引、质量门槛）。
- 按「车道选择」确定页面方向。
- 按「技能索引」只加载最窄匹配的 1–3 个实现技能，各自遵循其
SKILL.md流程。 - 每个技能自带
demo/index.html+demo/PROMPT.md，可直接复现或改造。
WebGL 车道选择（先定方向，再选技能）
| 车道 | 适用 | 主力技能 | 规则 |
|---|---|---|---|
| A：氛围深度 | SaaS / B2B / 高转化页 | vantajs / threejs / atmosphere-background |
动效低振幅，文案与 CTA 优先 |
| B：粒子数据 | AI / 数据 / 开发者产品 | build-interactive-particle-trail / globe-particles / background-grid-webgl |
表达“系统行为”，不做随机闪光 |
| C：3D 产品 | 硬件 / 产品发布 | build-threejs-scroll-worlds / add-mouse-driven-orbit / webgl-3d-object |
单一主角物体，短循环，带回退 |
| D：沉浸电影 | 品牌战役页 | build-threejs-scroll-worlds / add-shader-cursor-trail |
严格性能门槛 + 静态/移动端回退 |
避免一个 hero 里堆 3–4 个重效果；混合多条车道前先过质量门槛。
技能索引
入口 / Prompt 优化
| 技能 | 用途 |
|---|---|
| webgl-prompt-optimizer | 强制前置：将一句话需求扩写为四段式执行级超级 prompt（Experience / Layout / Motion / Interaction and quality） |
核心 WebGL / Three.js
| 技能 | 用途 |
|---|---|
| threejs | WebGL 3D 地基：场景/相机/渲染器、GLTF、材质、性能与释放 |
| webgl-landing-steering | WebGL 落地页方向决策（车道、风险、质量门槛） |
| build-threejs-scroll-worlds | 滚动联动 Three.js 3D 世界（页面主角） |
| add-mouse-driven-orbit | 鼠标驱动的 3D 旋转物体 |
| webgl-3d-object | 页面内单个 WebGL 3D 物体 |
| webgl-laser | 全屏 WebGL 激光光束背景 |
| background-grid-webgl | WebGL 网格背景 |
| add-shader-cursor-trail | WebGPU 着色器光标拖尾（半调点阵鼠标效果） |
| build-interactive-particle-trail | GPU 粒子拖尾 / 鼠标粒子交互 |
| globe-gl | 3D 地球数据可视化 |
| globe-particles | 3D 粒子星球 / 轨道球体 |
| vantajs | Vanta.js WebGL 动态背景（快速出效果） |
动态背景
| 技能 | 用途 |
|---|---|
| atmosphere-background | 暗色大气光幕背景 |
| ambient-section-particles | 区块环境粒子 |
| falling-leaves | 飘落树叶/对象背景 |
| matterjs | Matter.js 2D 物理交互背景/场景 |
| pointer-trail-emitter | 指针轨迹发射器 |
GSAP 动效与丝滑交互
| 技能 | 用途 |
|---|---|
| gsap | GSAP 核心（timeline、stagger、缓动） |
| gsap-scrolltrigger-storytelling | ScrollTrigger 粘性产品叙事 |
| cinematic-gsap-lenis-motion-system | GSAP + ScrollTrigger + Lenis 电影级动效系统 |
| cinematic-scroll-storytelling | 滚动叙事落地页（Lenis + ScrollTrigger） |
| animation-systems | 产品级 Web 动效体系（Stripe/Linear 级规范） |
| masked-reveal | 遮罩逐词揭示 |
| staggered-word-reveal | 编辑风逐词浮现 |
| marquee-loop | 无限跑马灯 |
| scroll-scrubbed-visual-sequence | 滚动同步视觉序列（图片序列/canvas/视频） |
整站支撑
| 技能 | 用途 |
|---|---|
| build-awwwards-quality-sites | 艺术指导 + 动效 + 3D 的 Awwwards 级整站搭建 |
| landing-page | 高转化落地页结构与文案 |
| tailwindcss | Tailwind 布局与响应式 |
性能与移动端
| 技能 | 用途 |
|---|---|
| optimize-threejs-games | Three.js 场景帧率 / 绘制调用 / 内存调优 |
| build-mobile-threejs-games | 移动端 Three.js 适配、HUD、性能 |
素材与参考捕获
| 技能 | 用途 |
|---|---|
| unsplash-asset-images | Unsplash 素材选图（按用途/比例） |
| aura-asset-images | Aura 素材库选图 |
| video-to-superprompt | 参考视频 → 复刻 Prompt |
| stitched-full-page-capture | WebGL 整页截图捕获（懒加载/动画页面） |
推荐构建流程
① 入口：webgl-prompt-optimizer 强制前置扩写 prompt → 读取本 SKILL.md → 用 webgl-landing-steering 定车道
② 整站骨架：landing-page / tailwindcss / build-awwwards-quality-sites
③ 主效果：按车道加载 1 个核心 WebGL 技能
④ 陪衬：动态背景（最多 1 个）+ GSAP 动效系统（gsap / cinematic-gsap-lenis-motion-system）
⑤ 素材：unsplash / aura 选图；参考页用 stitched-full-page-capture / video-to-superprompt
⑥ 性能与上线：optimize-threejs-games、build-mobile-threejs-games，过质量门槛
质量门槛（所有 WebGL 页面必过）
- 消息门槛：Hero 标题 + CTA 3 秒内可读，WebGL 不遮挡转化信息。
- 性能门槛：
Math.min(devicePixelRatio, 1.5–2)；移动端稳定帧率；重资产懒加载 + 立即回退画面。 - 可访问性门槛：尊重
prefers-reduced-motion；保证对比度。 - 可靠性门槛：处理 context loss / resize；SPA 路由切换时 dispose 几何、材质、纹理。
常见失误与修正
- “好看但转化掉” → 降低动效振幅、压暗背景、提高 CTA 对比。
- “手机端卡顿” → 减少粒子数、降低 DPR 上限、去掉昂贵 postprocessing。
- “风格普通” → 选一个贴合品牌的主签名效果（网格/波/轨道/碎片）。
- “复杂度难维护” → 收敛为模块化 Three.js 场景 + 文档化参数。
约定
- 本库 MIT 协议，重分发保留原始版权声明（见 LICENSE）。
- 每个技能目录保留
demo/index.html+demo/PROMPT.md作为可复现资源。 - 新增技能时在以上索引表中登记，并保持「窄匹配优先」。
