什么是星火织境？

星火织境（huo15-vibe-web-replica）是火一五为 OpenClaw / CatPaw 生态开发的 Vibe Coding 技能——让 AI 智能体像 OpenAI Codex 一样，自动复刻和创作视觉震撼的沉浸式网站。

灵感来自抖音「太阳Ai实验室」的 Codex vibe coding 系列：网友投稿网站，Codex 自动复刻，仅供技术研究和审美提高。

这个技能把整套工作流打包成了一个 SKILL.md + 代码模板 + 脚手架脚本 的标准技能包，安装后 AI 智能体就"学会了"如何从零搭建 Three.js 3D 渲染 + GSAP 滚动动画 + Lenis 平滑滚动的沉浸式网页。

技术栈一览

层	库	版本	作用
3D 渲染	Three.js	^0.169	WebGL2 实时 3D，粒子系统，GLB 模型加载
动画引擎	GSAP	3.12.7	ScrollTrigger 滚动驱动 + Timeline 链式动画
平滑滚动	Lenis	^1.1.20	惯性丝滑滚动，与 GSAP ticker 同步
后处理	EffectComposer + UnrealBloomPass	—	辉光效果
模型压缩	DRACOLoader	—	Draco 压缩 GLB，加载更快
纹理压缩	KTX2Loader + Basis	—	KTX2 压缩纹理，GPU 友好
音频	Web Audio API	native	点击解锁模式，音效播放
构建工具	Vite	^6.0	秒级热更新，生产优化

技能包含什么？

1. 脚手架脚本（scaffold.sh）

一条命令创建完整项目：

bash ~/.catpaw/skills/huo15-vibe-web-replica/scripts/scaffold.sh my-project
cd my-project && npm install && npm run dev

自动生成 Vite + Three.js + GSAP + Lenis 项目结构，所有模板预接线，开箱即跑。

2. 代码模板（5 个文件）

模板	内容
`three-scene.js`	完整 3D 场景：Scene/Camera/Renderer、三点光照、8000 粒子场、环形结(TorusKnot)、Bloom 后处理、DRACOLoader、鼠标视差
`gsap-scroll.js`	滚动动画：逐词标题揭示、Hero pin+scrub、卡片 stagger 入场、视差漂移、3D 场景滚动同步
`lenis-setup.js`	Lenis 初始化 + GSAP ticker 同步 + 点击滚动导航
`index.html`	HTML 入口：固定 3D canvas + 200vh 超长 Hero + 玻璃拟态卡片 + CTA
`main.js`	入口聚合：一行 import 串联所有模块

3. API 速查手册（reference.md）

覆盖所有关键库的核心 API 模式：

Three.js：场景设置 / 光照 / GLB 加载 / 粒子系统 / 后处理
GSAP：ScrollTrigger pin+scrub / Timeline 链 / SplitText 逐词揭示 / Observer 方向
Lenis：基础设置 / ScrollTrigger 联动 / scrollTo 导航
Web Audio：click-to-unlock 模式 / 音效播放
KTX2：压缩纹理加载
TagCloud.js：3D 标签云
Vite：构建配置 + chunk 分割

如何用对话方式使用这个技能？

场景一：复刻一个网站

你：帮我复刻这个网站 https://example.com，用 Three.js + GSAP

AI 自动执行：

分析目标：用 web_fetch 抓取页面，识别布局、色彩、交互模式
脚手架：运行 scaffold.sh 创建项目
3D 场景：基于 three-scene.js 模板，按目标风格调整几何体/光照/粒子
滚动动画：基于 gsap-scroll.js 模板，按章节编排 pin + scrub 动画时间线
平滑滚动：接入 Lenis，与 GSAP ticker 同步
迭代：启动 dev server，截图比对，调整参数

场景二：从零创作

你：做一个赛博朋克风格的 3D 滚动落地页，要粒子效果和霓虹辉光

AI 自动执行：

脚手架创建项目
three-scene.js 模板：改粒子颜色为青色/品红，Bloom 强度调到 2.0
gsap-scroll.js 模板：加故障文字效果，pin 每个章节
index.html 模板：改配色为深黑 + 霓虹色

场景三：快速原型

你：vibe coding 一下，随便来个酷炫的

AI：直接跑 scaffold + 默认模板，30 秒出活。

对标 Codex vibe coding

抖音视频中 Codex 用的技术 vs 星火织境提供的能力：

视频中的技术	技能覆盖	说明
Three.js / WebGL2	✅ 模板含	场景/相机/渲染器/光照/粒子/Bloom
GSAP + ScrollTrigger	✅ 模板含	pin/scrub/timeline/逐词揭示/视差
Lenis 平滑滚动	✅ 模板含	RAF 同步 + ScrollTrigger 联动
Draco 压缩 GLB	✅ 模板含	DRACOLoader 一行启用
Web Audio	✅ 参考含	click-to-unlock 模式
TagCloud.js	✅ 参考含	API 速查 + 示例
KTX2 纹理压缩	✅ 参考含	KTX2Loader + Basis

安装方式

从 ClawHub 安装

clawhub install huo15-vibe-web-replica --dir ~/.openclaw/workspace/skills

从源码安装

git clone https://cnb.cool/huo15/ai/huo15-skills.git
cp -r huo15-skills/huo15-vibe-web-replica/ ~/.catpaw/skills/

安装后重启 OpenClaw / CatPaw，说"复刻网站"或"做个 3D 页面"即可触发。

ClawHub 直链

👉 https://clawhub.ai/skills/huo15-vibe-web-replica

质量验证

这个技能发布前已完整验证：

✅ 脚手架执行成功
✅ npm install 16 包安装
✅ Vite 6.4 dev server 启动
✅ HTML 渲染正常
✅ JS 模块正确加载
✅ 生产构建 25 模块转译，dist 产物正常

🦞 用龙虾复刻沉浸式网站：星火织境 Vibe Coding 技能首发