一个 AI Agent Skill，从网页中提取 WebGL / Canvas / Shader 视觉特效代码，反混淆后移植为独立可运行的原生 JS 项目。
功能介绍
Web Shader Extractor 是一个为 Claude Code 等 AI 编程助手设计的 Skill。当你看到一个网页上精美的 shader 视觉特效，想要提取并复用时，只需给 AI 一个网址，它就能自动完成从抓取、分析、反混淆到移植的全流程。
核心能力：
- 自动识别技术栈：Three.js / Babylon.js / PixiJS / Raw WebGL / TSL 等
- 从混淆后的 JS bundle 中提取 GLSL shader 源码和渲染参数
- 解码加密配置（Base64 + XOR、Nuxt payload、Next.js NEXT_DATA）
- 智能选择移植策略：纯 2D 全屏 shader 输出为零依赖 WebGL2，3D 场景保留原始框架
- 零配置启动：自动检测并安装 Node.js、Playwright 及 Chromium 浏览器，首次使用无需手动配置环境
- 全程自主执行：除最终简化评估外，所有步骤自动完成不中断用户，遇到问题自行修复或降级
- 生成独立可运行的项目，仅需浏览器即可预览
抓取效果示例
以下是使用 Web Shader Extractor 从网页抓取并移植的实际效果：
示例 1：Stainless Steel — 3D 金属质感
- 来源：https://shaders.com/collection/stainless-steel/a92be03a-7df7-4f54-91f3-a87ba40bd320
- 技术栈：Three.js r183 + TSL 节点着色器
- 特效：SDF 玻璃折射、色差、3 点光源 + 4 环境球、胶片颗粒
- 移植方案：TSL 反编译为标准 GLSL，4-pass 渲染管线，使用 CDN importmap 加载 Three.js
- 项目体积：~1.1 MB（含 SDF 纹理）
示例 2：Metallic Rings — 等离子体 + 同心旋转
- 来源：https://shaders.com/collection/metallic-rings/c531cc9f-c1f0-4ef4-a47c-80d8bb194eb6
- 技术栈：纯 WebGL2（零依赖）
- 特效：密度波等离子体变形、环形旋转扭曲、OkLab 色彩空间插值、胶片颗粒
- 移植方案：原生 WebGL2，双 shader pass + 合成
- 项目体积：~28 KB
示例 3：Framer Shaders — 液态渐变 + 粒子
- 来源：https://www.framer.com/updates/shaders
- 技术栈：纯 WebGL2（零依赖）
- 特效：湍流噪声驱动的液态渐变、粒子发射/消散、OkLab 色彩混合、抖动处理
- 移植方案：原生 WebGL2，3 层 shader + 合成
- 项目体积：~36 KB
安装
通过 skills.sh 安装：
npx skills add <https://github.com/lixiaolin94/skills> --skill web-shader-extractor
安装后 Skill 会自动链接到你的 AI 编程助手目录。支持 Claude Code、Cursor、Windsurf、Codex 等 44+ 种 Agent。
使用方法
安装后无需任何配置。直接在对话中告诉 AI 你想提取的网页特效即可：
- "把这个网站的背景 shader 效果抓下来：https://example.com"
- "提取这个页面的 canvas 动画效果"
- "复刻这个网站的 WebGL 视觉特效"
AI 会自动执行 8 个阶段的工作流（Phase 0 仅首次运行）：
- 环境检查 — 自动检测并安装 Node.js、Playwright 及 Chromium，首次运行一键完成，国内用户自动使用镜像加速
- 获取源码 — Playwright 渲染 DOM + curl 获取原始 HTML，交叉提取 JS bundle
- 技术栈识别 — 从 canvas 引擎字段和 bundle 特征扫描确认框架；已知平台（Unicorn Studio、shaders.com）自动跳转专用提取流程
- 配置提取 — 从公开 API / Nuxt payload / Next.js 数据 / bundle 默认值中获取参数
- Shader 提取 — Agent 深度分析 1MB+ 的 JS bundle，反混淆提取 GLSL 和渲染逻辑
- 移植 — 根据技术栈选择最优方案，生成独立可运行项目
- 简化评估 — 效果正确后，向用户提议是否去除框架依赖
- 提取报告 — 询问用户是否生成
EXTRACTION-REPORT.md，记录提取时间线、场景结构、渲染管线和关键经验
💡 Phase 0
5 全程自动执行，无需用户确认。Phase 67 分别询问用户后执行。Playwright 安装失败时自动降级为 curl 模式。
推荐：使用自动确认模式运行
Skill 本身已设计为全程自主执行（提取是只读操作，安全性无风险），但 AI 编程助手默认会在每次 shell 命令前请求确认。建议开启自动确认模式，让工作流不被打断：
Claude Code — 启动时添加 --dangerously-skip-permissions 标志：
claude --dangerously-skip-permissions
或在 settings.json 中配置权限白名单，按需放行 Bash、读写文件等权限（推荐此方式，更安全）。
Codex — 使用 full-auto 模式：
codex --approval-mode full-auto
完整的提取流程通常需要 5–15 分钟，涉及数十次工具调用。自动确认模式下你可以去泡杯咖啡，回来就能看到提取好的项目。
Skill 设计思路
为什么需要这个 Skill？
网页 shader 特效的源码通常深埋在混淆压缩后的 JS bundle 中，手动提取需要大量逆向工程。AI 虽然擅长代码分析，但面对这类任务缺少结构化的工作流引导。Web Shader Extractor 提供了：
- 确定性的工作流 — 将开放性的"提取特效"任务分解为 8 个明确阶段，每个阶段有清晰的输入输出
- 框架特征知识库 — 预置了 Three.js / PixiJS / Babylon.js 等框架的混淆后特征模式，帮助 AI 快速识别技术栈
- 反混淆规则集 — 从构造函数参数、方法调用模式推断原始类名和变量名的规则
- 边界情况参考 — TSL 节点着色器重建、onBeforeCompile 注入陷阱、编码配置解码等专题文档
Skill 架构
Skill 由一个主文件和 9 个按需加载的参考文档组成：
web-shader-extractor/
├── SKILL.md # 主工作流（8 阶段决策树）
├── references/
│ ├── tech-signatures.md # 框架特征速查表
│ ├── extraction-workflow.md # Agent 提取 prompt + 反混淆规则
│ ├── config-extraction.md # 配置参数提取策略
│ ├── tsl-extraction.md # Three.js TSL → GLSL 映射
│ ├── encoded-definitions.md # 编码/加密配置解码
│ ├── shader-injection.md # onBeforeCompile 注入陷阱
│ ├── porting-strategy.md # 移植框架选择 + 项目结构模板
│ ├── unicorn-studio.md # Unicorn Studio 专用提取流程
│ └── shaders-com.md # shaders.com 专用提取流程
└── scripts/
├── fetch-rendered-dom.mjs # Playwright DOM 抓取脚本（内置自动安装）
└── scan-bundle.sh # Bundle 技术栈扫描工具
参考文档按需读取，避免一次性加载过多上下文。AI 只在需要时查阅对应专题，保持上下文窗口高效利用。
设计原则
- 先 1:1 复刻，再考虑简化 — 确保效果完全正确后才评估是否可以去除框架依赖。不会为了"轻量化"而牺牲效果保真度。
- 全程自主，只在关键处询问 — 提取是只读操作，所有步骤（包括环境配置、依赖安装、错误恢复）均自动完成。只有 Phase 6（简化评估）和 Phase 7（提取报告）需要用户决策。
- 容错降级 — Playwright 安装失败自动降级为 curl 模式；npm 下载慢自动切换国内镜像。不因环境问题中断流程。
仓库地址
GitHub：https://github.com/lixiaolin94/skills
免责声明
本工具仅供学习和研究目的使用。
- 提取的代码可能受原始网站的版权和许可证保护。使用者有责任确认提取内容的合法使用范围
- 本工具不鼓励、不支持任何形式的知识产权侵权行为
- 请在使用前确认目标网站的使用条款，尊重原作者的劳动成果
- 建议仅将提取的代码用于个人学习、技术研究或在获得原作者授权后进行商业使用
- 作者对因使用本工具产生的任何法律纠纷不承担责任