最近 GitHub 上有个项目，看 Demo 的时候真的很容易停下来。滚轮轻轻往下滑，镜头从一座微缩建筑外面钻进去，穿过精心设计的内部空间，再飞向下一个场景。整个网页像一支可以用鼠标控制进度的品牌短片。

这种网站第一眼给人的感觉就很"贵"。以前想做出类似效果，得同时处理视觉设计、视频生成、镜头衔接和网页动效。任何一环没接好，页面都会突然跳一下，电影感当场消失。

这个开源项目把这套制作流程整理成了一个开源 Agent Skill，名字叫 scroll-world。

项目一：Scroll-world

装好之后，你可以把品牌资料、产品信息和想要的视觉风格交给 Agent。它会帮你规划场景、生成图片和镜头视频，再把这些素材接进网页里的滚动播放引擎。

最后得到的页面体验是：你往下滚动，镜头就向前飞行。滚到某个章节，品牌文案和产品卖点跟着场景出现。往回滚动，镜头也会沿着原来的路线退回去。

用它做产品发布页、品牌官网、旅行项目、地产展示或者个人作品集，都挺合适。

如何生成自己的滚动官网

Claude Code 安装：通过插件市场安装 /plugin marketplace add oso95/scroll-world，安装完成后输入 /scroll-world 即可。

Codex 安装：

npx skills add oso95/scroll-world
npx skills add oso95/scroll-world -a codex

在 Codex 里可以通过 $scroll-world 调用。

安装 Skill 只是第一步。图片和视频还要交给生成模型处理，本地需要准备的依赖包括：默认视频链路通过 Monid CLI 调用 Seedance 2.0，Higgsfield CLI 负责生成场景图，帧提取和编码需要 ffmpeg、ffprobe。装有 Codex CLI 的情况下，场景图也可以通过 Codex 内置的图片生成功能完成。

项目二：img2threejs

一张图片，重建成可以动画的 Three.js 模型。

给它一张耳机、机械装置、建筑或者游戏道具的参考图，它会分析物体轮廓、组成结构、材质和细节，再生成一个可以放进浏览器运行的 Three.js 模型。

img2threejs 明确选择了纯代码重建路线。用基本几何体、程序化着色器和生成式几何重新搭出参考图里的物体。这种代码模型很适合产品展示、浏览器小游戏和交互式官网。想换颜色、移动一个零件或者给机关加动画，都能继续在代码里调整。

img2threejs 也没有让智能体看一眼图片就开始乱写。它会先检查图片是否适合重建，再评估物体类型、复杂度和质量目标。生成代码之前，还要整理一份 detailInventory，把倒角、螺丝、刻线、光泽、污渍这些决定辨识度的细节列出来。

接下来进入分阶段制作：结构搭建 → 形体细化 → 材质 → 表面细节 → 灯光 → 交互结构 → 优化。每完成一轮，都会在浏览器里渲染模型，截一张图和原始参考图放在一起，再交给智能体做视觉检查。轮廓不对就改规格，几何和材质没跟上就改代码。

如何使用

img2threejs 可以在 Claude Code、Codex 和 OpenCode 中使用。

Codex 安装：

npx skills add img2threejs/img2threejs -a codex

Claude Code 安装：

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

然后附上一张参考图，调用：

/img2threejs 把这个物体重构成 Three.js 模型, 保持原有的比例、角度和颜色。

总结

scroll-world 和 img2threejs 两个项目都代表了 AI 时代网页和 3D 内容创作的新方向——把原本需要专业设计师和开发者才能完成的工作，变成了可以通过自然语言驱动的 Agent Skill。

scroll-world 地址：github.com/oso95/scroll-world

img2threejs 地址：github.com/img2threejs/img2threejs