盤點 2 個看起來賊炫酷酷酷的 GitHub 項目，炒的還挺火的。
整理版優先睇
呢篇文章盤點兩個近期爆紅嘅GitHub AI Skill：scroll-world同img2threejs，一個整滾動電影感網頁，一個將圖片變3D模型。
呢篇文章嚟自「逛逛 GitHub」公眾號，作者成日盤點開源項目，今次揀咗兩個最近炒得火熱嘅項目出嚟介紹。呢啲項目都係AI Agent Skill，目的係將複雜嘅視覺製作流程變成可執行嘅指令，令開發者可以快速做出高質素嘅互動內容。整體結論係，如果你想做產品展示、品牌官網或者互動遊戲，呢兩個工具都好值得一試。
第一個係scroll-world，佢提供一套完整嘅滾動電影感網頁製作流程。你只需將品牌資料、產品資訊同想要嘅視覺風格交畀Agent，佢就會規劃場景、生成圖片同鏡頭視頻，再整合成滾動播放引擎。效果就好似一條用滑鼠控制進度嘅品牌短片，適合產品發佈頁、品牌官網、旅行項目等。安裝方面，可以透過Claude Code嘅插件市場或者Vercel嘅skills CLI安裝，但實際生成圖片同視頻仲要依賴Monid、Higgsfield同ffmpeg等工具。
第二個係img2threejs，佢將一張參考圖重建做可以動畫嘅Three.js模型。呢個項目揀咗純代碼重建路線，用基礎幾何體同程序化着色器重新搭建物體。佢會先評估圖片係咪適合重建，再製作detailInventory列出細節，跟住分階段由結構、材質到燈光一步步生成，每一輪都會用渲染圖對比原始圖片做檢查。用家可以喺Claude Code或Codex安裝，再俾一張參考圖，就可以得到可調整嘅3D模型。總括嚟講，呢兩個項目都顯示咗AI輔助創作嘅潛力，值得一試。
- 呢兩個項目都係AI Agent Skill，將複雜嘅視覺製作流程變成可重用嘅指令，大幅降低創作門檻。
- scroll-world採用自然語言加品牌資料，自動生成場景同鏡頭視頻，整合成滾動播放網頁，適合做產品發佈同品牌官網。
- img2threejs行純代碼重建路線，用幾何體同shader重新搭建模型，輸出可隨時改動嘅Three.js代碼。
- 兩者都強調分階段製作同視覺檢查，確保AI生成結果貼近原始參考。
- 使用上可以透過Claude Code或Codex安裝，scroll-world要自備生成依賴，img2threejs只需要一張參考圖。
scroll-world Skill
用嚟生成滾動電影感網頁，包含完整流程、提示詞模板同播放引擎。安裝：Claude Code：/plugin marketplace add oso95/scroll-world 或 Codex：npx skills add oso95/scroll-world
img2threejs Skill
將圖片重建成Three.js模型嘅Skill，支援Claude Code、Codex同OpenCode。安裝：npx skills add img2threejs/img2threejs -a codex；Claude Code：git clone ~/.claude/skills/img2threejs
開場：GitHub 又有好嘢睇
最近GitHub上有個項目，睇Demo個陣真係會忍唔住停低。滾輪輕輕向下滑，鏡頭就會由一座微縮建築外面鑽入去，穿過精心設計嘅內部空間，再飛去下一個場景。
成個網頁好似一支可以用滑鼠控制進度嘅品牌短片
以前想做出類似效果，要同時處理視覺設計、視頻生成、鏡頭銜接同網頁動效，任何一環接唔好，成個電影感都會即場消失。
呢個開源項目將成個製作流程整理成一個開源 Agent Skill，叫 scroll-world
除咗scroll-world，文章仲會介紹一個將圖片變成3D模型嘅項目，叫做img2threejs。
Scroll-world：一條龍式滾動電影感網頁
裝好之後，你可以將品牌資料、產品資訊同想要嘅視覺風格交畀Agent。佢會幫你規劃場景、生成圖片同鏡頭視頻，再將呢啲素材接入網頁裏面嘅滾動播放引擎。
你向下滾動，鏡頭就向前飛行；滾到某個章節，品牌文案同產品賣點會跟住場景出現
來回滾動都有對應嘅鏡頭運動，用嚟做產品發佈頁、品牌官網、旅行項目、地產展示或者個人作品集都幾合適。
開源項目入面提供完整嘅 Skill、提示詞模板、批處理腳本同網頁播放引擎
要注意，圖片同視頻要為每個項目單獨生成，唔會隨倉庫附送。
Scroll-world 點安裝同生成
如果你用 Claude Code，可以透過插件市場安裝：
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-worldCodex 同其他支援 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 訂閲。
img2threejs：一張圖重建做 3D
第二個項目叫img2threejs，你可以畀佢一張耳機、機械裝置、建築或者遊戲道具嘅參考圖，佢會分析物體輪廓、組成結構、材質同細節，再生成一個可以放喺瀏覽器運行嘅Three.js模型。
輸出的確好高級，而且係純代碼重建路線
佢用基礎幾何體、程序化着色器同生成式幾何重新搭出參考圖嘅物體，所以模型係代碼組成，啱曬產品展示、瀏覽器小遊戲同交互式官網。
想換顏色、移動零件或者加動畫，都可以繼續喺代碼入面改
佢唔會一嚟就亂寫，會先檢查圖片適唔適合重建，再評估物體類型、複雜度同質量目標。
生成代碼之前，要整理一份 detailInventory，列低倒角、螺絲、刻線、光澤、污漬呢啲決定辨識度嘅細節，並為佢哋安排真實嘅組件或材質實現
之後就進入分階段製作：
- 結構搭建 → 形體細化 → 材質 → 表面細節 → 燈光 → 交互結構 → 優化
- 每完成一輪，都會喺瀏覽器渲染模型，截圖同原始參考圖並排，再交畀智能體做視覺檢查
- 輪廓唔啱就改規格，幾何同材質冇跟上就改代碼，通過先繼續下一輪
img2threejs 使用同安裝
img2threejs可以用喺Claude Code、Codex同OpenCode。用skills CLI安裝到Codex：
npx skills add img2threejs/img2threejs -a codexClaude Code 就可以按官方文件將倉庫放入skills目錄：
git clone
https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs然後附上一張參考圖，調用：
/img2threejs 把呢個物體重構成Three.js模型，保持原有的比例、角度和顏色。調用時要俾清楚參考圖同要求，例如「保持原有比例、角度同顏色」
呢個Skill嘅源碼同更新可以喺GitHub揾到
最近 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/img2threejsimg2threejs 明確咁揀咗純代碼重建路線。用基礎幾何體、程序化著色器同生成式幾何，重新砌返參考圖入面嘅物體。
呢種代碼模型好適合產品展示、瀏覽器小遊戲同互動式官網。
想換顏色、移動一個零件或者為機關加入動畫，都可以繼續喺代碼入面調整。
img2threejs 都冇話畀個 Agent 睇一眼張圖片就開始亂寫。
它會首先會檢查張圖片適唔適合重建，再評估物體類型、複雜度同質量目標。
生成代碼之前，仲要整理一份 detailInventory，將倒角、螺絲、刻線、光澤、污漬呢啲決定辨識度嘅細節列曬出嚟，仲要為佢哋安排真實嘅組件或者材質實現。
之後就進入分階段製作：結構搭建→ 形體細化→ 材質→ 表面細節→ 燈光→ 交互結構→ 優化
每完成一輪，佢都會喺瀏覽器入面渲染個模型，截一張圖同原始參考圖擺埋一齊，再交畀個 Agent 做視覺檢查。
輪廓唔啱就改規格，幾何同材質跟唔上就改代碼。而家呢個階段通過之後，先可以繼續解鎖下一輪。
我自己試咗一下，重建出嚟嘅效果係點樣呢？這個樣
04
點樣用呢個 Skill
img2threejs 可以用喺 Claude Code、Codex 同 OpenCode 入面。
透過 skills CLI 安裝到 Codex：
npx skills add img2threejs/img2threejs -a codexClaude Code 都可以跟官方文件將倉庫放入 skills 目錄：
git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs然後附上一張參考圖，再呼叫：
/img2threejs 把這個物體重構成 Three.js 模型, 保持原有的比例、角度和顏色。05
㩒下面張卡，關注逛逛 GitHub
呢個公眾號以前發佈過好多有趣嘅開源項目，如果你唔想翻文章一個一個咁揾，你可以直接關注微信公眾號：逛逛 GitHub ，喺後台傾偈就得㗎喇：
最近 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/img2threejsimg2threejs 明確選擇了純代碼重建路線。用基礎幾何體、程序化着色器和生成式幾何重新搭出參考圖裏的物體。
這種代碼模型很適合產品展示、瀏覽器小遊戲和交互式官網。
想換顏色、移動一個零件或者給機關加動畫，都能繼續在代碼裏調整。
img2threejs 也沒有讓智能體看一眼圖片就開始亂寫。
它會先檢查圖片是否適合重建，再評估物體類型、複雜度和質量目標。
生成代碼之前，還要整理一份 detailInventory，把倒角、螺絲、刻線、光澤、污漬這些決定辨識度的細節列出來，並且為它們安排真實的組件或材質實現。
接下來進入分階段製作：結構搭建→ 形體細化→ 材質→ 表面細節→ 燈光→ 交互結構→ 優化
每完成一輪，它都會在瀏覽器裏渲染模型，截一張圖和原始參考圖放在一起，再交給智能體做視覺檢查。
輪廓不對就改規格，幾何和材質沒跟上就改代碼。當前階段通過以後，才能繼續解鎖下一輪。
我自己試了一下，重建效果啥樣呢？這個樣
04
如何使用這個 SKill
img2threejs 可以在 Claude Code、Codex 和 OpenCode 中使用。
通過 skills CLI 安裝到 Codex：
npx skills add img2threejs/img2threejs -a codexClaude Code 也可以按官方文檔把倉庫放進 skills 目錄：
git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs然後附上一張參考圖，調用：
/img2threejs 把這個物體重構成 Three.js 模型, 保持原有的比例、角度和顏色。05
點擊下方卡片，關注逛逛 GitHub
這個公眾號歷史發佈過很多有趣的開源項目，如果你懶得翻文章一個個找，你直接關注微信公眾號：逛逛 GitHub ，後台對話聊天就行了：