AI Agent / Creative Coding
scroll-world：用 Agent Skill 生成可捲動的 3D 品牌世界
scroll-world 是 oso95 開源的 Agent Skill，可讓 Claude Code、Codex 等 SKILL.md 相容 agent 透過 Higgsfield 生成 scroll-scrubbed 3D 品牌世界 landing page；重點不是即時 WebGL，而是用預渲染影片、frame-identical seam 與 vanilla JS scrub engine 做出連續飛行感。
2026年7月15日3 分鐘閱讀👁 7
Creative Coding / Agent Skill
scroll-world 把「可捲動的 3D 品牌世界」變成 Agent Skill
這則 Threads 討論的是 oso95/scroll-world：一個給 Claude Code、Codex 與其他 SKILL.md 相容 agent 使用的技能。它不是傳統意義上直接替你寫一套大型 WebGL 專案，而是把「品牌故事 → 場景設計 → AI 生成素材 → 影片銜接 → scroll scrub 前端引擎」包成可重複執行的流程。
Kate 判斷：這個專案的價值在「把高成本 3D landing page 的製作流程產品化」，不是魔法般消滅前端與設計。真正可用時，仍要花 Higgsfield credits、做品牌腳本、檢查每段影片 seam、壓縮與手機效能 QA。
原文訊號
- Threads 作者描述：過去以為要做滑鼠下滾、品牌世界跟著轉的 3D 網站，需要前端團隊與數月工期；現在有人做成一個 skill，輸入品牌名就能產出可捲動的 3D 世界。
- 原文連到 GitHub：oso95/scroll-world。
- 原文提到星數 1,678；實查 GitHub API 時已上升到約 2,234 stars、269 forks（2026-07-15），代表熱度仍在快速增加。
- 高訊號留言補充：有人提到用 Codex 開發效果不錯，但一個 project 可能用掉 200 Higgsfield credits；也有人提醒重點仍是內容與故事呈現。
它實際做什麼
scroll-world 的 README 將它定位為一個 agent skill：為任何產業或品牌建立沉浸式、scroll-scrubbed「飛進品牌世界」landing page。使用者向 agent 描述品牌、產業、故事段落與美術方向後，skill 會引導 agent 產生素材與前端組裝。
| 階段 | 實作方式 | 重點 |
|---|---|---|
| 品牌訪談 | 蒐集品牌名、色票、tone、場景順序、桌機/手機需求 | 不是只輸入一句 prompt；故事節奏仍要設計 |
| 場景生成 | 用 Higgsfield / GPT Image 2 產生一致風格的 isometric diorama scene | 每個場景共用同一段 style preamble，避免風格漂移 |
| 鏡頭影片 | 用 Seedance / Kling 類模型生成 dive-in 與 connector clips | scroll 只是控制影片時間軸，鏡頭運動本身是預渲染 |
| 無縫銜接 | 從已渲染影片抽取前後 frame，再用 start/end image 生成 connector | 專案反覆強調 seam 必須 frame-identical，否則會跳格 |
| 前端播放 | 內建 vanilla JS scrub engine，可嵌入 HTML / Next.js / Vue / Python served page | 不綁框架；核心是 blob seek、lazy load、crossfade、手機 seek hardening |
安裝與使用
Claude Code plugin
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world