最近 GitHub 上有个项目，看 Demo 的时候真的很容易停下来。
滚轮轻轻往下滑，镜头从一座微缩建筑外面钻进去，穿过精心设计的内部空间，再飞向下一个场景。
整个网页像一支可以用鼠标控制进度的品牌短片。
这种网站第一眼给人的感觉就很贵。
以前想做出类似效果，得同时处理视觉设计、视频生成、镜头衔接和网页动效。
任何一环没接好，页面都会突然跳一下，电影感当场消失。
这个开源项目把这套制作流程整理成了一个开源 Agent Skill，名字叫 scroll-world。
01、第一个项目叫 Scroll-world
装好之后，你可以把品牌资料、产品信息和想要的视觉风格交给 Agent。
它会帮你规划场景、生成图片和镜头视频，再把这些素材接进网页里的滚动播放引擎。
最后得到的页面大概是这种体验：你往下滚动，镜头就向前飞行。
滚到某个章节，品牌文案和产品卖点跟着场景出现。往回滚动，镜头也会沿着原来的路线退回去。
用它做产品发布页、品牌官网、旅行项目、地产展示或者个人作品集，都挺合适。
开源项目里提供完整的 Skill、提示词模板、批处理脚本和网页播放引擎，图片与视频则要为每个项目单独生成，不会随仓库一起提供。
02、如何生成自己的滚动官网
如果你使用 Claude Code，可以通过插件市场安装：
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world
安装完成后，输入 /scroll-world，或者描述你想要一个可以滚动穿行的品牌世界。
Codex 和其他支持 Agent Skills 的工具，可以使用 Vercel 的 skills CLI：
npx skills add oso95/scroll-world
# 安装到 Codex
npx skills add oso95/scroll-world -a codex
在 Codex 里可以通过 $scroll-world 调用。
安装 Skill 只是第一步。图片和视频还要交给生成模型处理，因此本地需要准备几项依赖。
目前默认的视频链路通过 Monid CLI 调用 Seedance 2.0。
Higgsfield CLI 负责生成场景图，也可以在 Monid 不可用时承担视频生成。帧提取和编码需要 ffmpeg、ffprobe。如果要制作手机竖屏画布，还会用到 Python 3 和 Pillow。
装有 Codex CLI 的情况下，场景图也可以通过 Codex 内置的图片生成功能完成，费用走你的 ChatGPT 订阅。
03、第二个项目叫 img2threejs
一张图片，重建成可以动画的 Three.js 模型。
你给它一张耳机、机械装置、建筑或者游戏道具的参考图，它会分析物体轮廓、组成结构、材质和细节，再生成一个可以放进浏览器运行的 Three.js 模型。
输出结果很高级。
开源地址：https://github.com/img2threejs/img2threejs
img2threejs 明确选择了纯代码重建路线。用基础几何体、程序化着色器和生成式几何重新搭出参考图里的物体。
这种代码模型很适合产品展示、浏览器小游戏和交互式官网。
想换颜色、移动一个零件或者给机关加动画，都能继续在代码里调整。
img2threejs 也没有让智能体看一眼图片就开始乱写。
它会先检查图片是否适合重建，再评估物体类型、复杂度和质量目标。
生成代码之前，还要整理一份 detailInventory，把倒角、螺丝、刻线、光泽、污渍这些决定辨识度的细节列出来，并且为它们安排真实的组件或材质实现。
接下来进入分阶段制作：结构搭建→ 形体细化→ 材质→ 表面细节→ 灯光→ 交互结构→ 优化
每完成一轮，它都会在浏览器里渲染模型，截一张图和原始参考图放在一起，再交给智能体做视觉检查。
轮廓不对就改规格，几何和材质没跟上就改代码。当前阶段通过以后，才能继续解锁下一轮。
我自己试了一下，重建效果啥样呢？这个样
04、如何使用这个 SKill
img2threejs 可以在 Claude Code、Codex 和 OpenCode 中使用。
通过 skills CLI 安装到 Codex：
npx skills add img2threejs/img2threejs -a codex
Claude Code 也可以按官方文档把仓库放进 skills 目录：
git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs
然后附上一张参考图，调用：
/img2threejs 把这个物体重构成 Three.js 模型, 保持原有的比例、角度和颜色。
