在魔搭社群發布你的 Vibe Coding 作品

網頁終於做出來了，接下來要找個地方展示，讓朋友、同學或真正的使用者可以直接開啟。

我們可以租伺服器，自己設定網域、HTTPS 和部署流程；也可以把作品託管到成熟的開源社群，少處理一些維運工作，把精力留給頁面本身。這一節選擇第二種方式：把網頁發布到 魔搭社群（ModelScope）。

魔搭社群（ModelScope）是由阿里巴巴聯合 CCF 開源發展委員會發起的開源社群。除了 20 萬+開源模型和 3 萬+資料集，它也提供展示應用的 創空間（Studio）。對我們來說，創空間最實用的一點是：不用先成為維運專家，也能為作品準備一個可以免費分享的地址。

本文依據魔搭社群目前的創空間頁面、官方 Skill 和命令列資料整理，最後核驗於 2026 年 8 月 11 日。魔搭仍在快速更新，按鈕位置可能改變，但「建立 Static 創空間 → 上傳建置產物 → 部署 → 透過創空間連結存取」的主要流程不變。

魔搭的 創空間（Studio） 不只可以執行 Gradio、Streamlit 和 Docker 應用，也支援 static 類型，也就是已經建置好的純靜態網站。如果網頁最後能變成 index.html、CSS、JavaScript 和圖片等檔案，就能用這種方式發布。

發布完成後，會得到類似下面的公開頁面：

https://modelscope.cn/studios/你的使用者名稱/你的空間名稱

先選對發布方式

專案	創空間類型	發布前要做什麼
純 HTML / CSS / JavaScript	Static / 靜態網頁	不用建置，直接準備網頁檔案
Vue、React、Vite、Svelte 等前端專案	Static / 靜態網頁	先執行建置，只上傳 dist 或 build 裡的內容
Gradio 應用	Gradio	準備 app.py 和 requirements.txt
Streamlit 應用	Streamlit	準備 Streamlit 入口檔案和相依套件
有自訂後端、系統相依或特殊啟動方式	Docker	撰寫 Dockerfile，服務監聽平台要求的連接埠

本文重點講前兩種。不要把 Vue、React 的原始碼直接當成 Static 網站上傳：瀏覽器不會替你執行 npm install 和 npm run build。

建議方式：使用官方 Skill 與 AI 協作發布

魔搭官方維護 ModelScope Skills，其中與發布網頁最相關的是下面兩個 Skill：

Skill	作用	何時使用
ms-hub	魔搭平台的統一入口，涵蓋倉庫、模型、資料集、創空間、MCP 和 Skills Center	第一次接入魔搭，或只需要執行創空間的一般操作
ms-studio-deploy	專門把本機專案部署到創空間，涵蓋專案辨識、建立空間、Git 同步、部署、日誌檢查和故障診斷	發布或更新本機網頁時優先使用

ms-studio-deploy 會依專案檔案判斷執行類型：根目錄已有 index.html 的建置產物會辨識為 static。Static 創空間不負責執行 npm run build，所以 Vue、React、Vite 專案仍要先在本機建置。

安裝 Skill

先安裝魔搭 SDK，再安裝統一入口和創空間部署 Skill：

python -m pip install -U modelscope
modelscope skills add @ModelScope/ms-hub @ModelScope/ms-studio-deploy

如果目前的 modelscope 指令沒有 skills 子指令，可以使用官方安裝腳本：

curl -fsSL https://modelscope.cn/skills/install.sh | bash -s -- @ModelScope/ms-hub
curl -fsSL https://modelscope.cn/skills/install.sh | bash -s -- @ModelScope/ms-studio-deploy

Skill 預設安裝到 ~/.agents/skills/。Codex、Cursor、Claude Code 等支援 Agent Skills 的工具都能從這裡發現它們。安裝後重新開始一次 Agent 工作階段，讓工具更新可用 Skill 清單。

怎樣用 Skill 發布

依照魔搭官方的 ms-studio-deploy 教學，你不用自己逐條執行建立、推送、部署和查日誌指令。準備好三樣東西即可：

1. 已安裝 ms-studio-deploy Skill，並重新開啟一次 Agent 工作階段；
2. 目前目錄就是準備發布的目錄，且根目錄直接包含 index.html；
3. 本機已設定魔搭 Access Token。

第一次使用時，前往 Access Token 頁面取得權杖，並在終端機設定：

export MODELSCOPE_API_KEY="你的權杖"

純 HTML 專案直接進入網頁目錄。Vue、React、Vite 等專案先建置，再進入產物目錄：

npm run build
cd dist

上面以 Vite 的 dist 為例；如果專案產生的是 build 目錄，就進入 build。

接著在 Codex、Cursor、Claude Code 等支援 Agent Skills 的工具中開啟這個目錄。

最簡單的提示詞

只要說這一句：

請使用 ms-studio-deploy Skill，把目前網頁發布到魔搭社群的 Static 創空間，完成後把存取連結給我。

Skill 會先檢查 index.html 和登入資訊。如果需要建立新空間，還會確認空間名稱以及公開或私密；沒有特別需求時，建議先使用私密空間。

如果想一次把要求說清楚，可以使用下面這個版本：

請使用 ms-studio-deploy Skill，把目前目錄發布到魔搭中國站的 Static 創空間。
空間名稱使用 my-portfolio，先設為私密；部署後檢查執行狀態和日誌。
如果失敗就依日誌修復並重新部署，成功後把存取連結給我。

AI 接下來會做什麼

官方 Skill 把發布流程整理成：

辨識專案類型 → 確認中國站或國際站 → 取得帳號資訊
→ 建立或重用創空間 → 檢查敏感資訊 → 同步到 master
→ 觸發部署 → 檢查狀態與日誌 → 診斷並修復 → 回傳存取連結

如果 AI 詢問「公開或私密」，第一次發布建議選私密，確認頁面正常後再改為公開。Static 網站不需要付費硬體；若其他類型涉及付費資源，Skill 必須先取得你的明確同意。

權杖同時用於 API 驗證和 Git 推送。不要把權杖寫進網頁原始碼、README、提示詞或可分享的截圖。

手動方式：第 0 步，準備可以發布的網站

前面的 Skill 方式比較省事。下面保留不使用 Skill 的手動流程，方便理解創空間頁面，或在 Agent 暫時無法使用時完成發布。

情況 A：純 HTML 網頁

最小目錄如下，index.html 必須位於準備發布內容的根目錄：

my-site/
├── index.html
├── styles.css
├── app.js
└── images/
    └── cover.jpg

發布前可以在終端機做一次本機檢查：

cd my-site
python3 -m http.server 8000

瀏覽器開啟 http://localhost:8000。不要只雙擊 index.html 檢查，因為 file:// 和真正的 HTTP 存取在模組、跨來源和路徑處理上不同。

情況 B：Vue、React、Vite 等專案

先安裝相依套件並建置：

npm install
npm run build

常見輸出目錄：

工具或框架	常見輸出目錄
Vite / Vue + Vite / React + Vite	dist/
Create React App	build/
Vue CLI	dist/

要發布的是輸出目錄裡的內容，並確保最後倉庫根目錄直接出現 index.html：

正確：index.html
錯誤：dist/index.html

如果部署後 CSS、JavaScript 或圖片出現 404，Vite 專案可以先嘗試使用相對資源基底：

// vite.config.js / vite.config.ts
export default {
  base: './'
}

修改後重新執行 npm run build。單頁應用也可以使用 Hash 路由，例如 /#/about，因為純靜態託管不一定會把所有路徑都重新導向 index.html。

手動方式：第 1 步，進入創空間並登入

開啟魔搭社群創空間。頁面頂部會顯示「建立空間 → 搭建應用 → 發布空間 → 分享創意」的流程。

點選建立按鈕，或直接進入建立創空間。尚未登入時，平台會先要求登入或註冊。中國站 modelscope.cn 和國際站 modelscope.ai 的帳號、權杖與內容並不互通；面向中國使用者時通常選擇中國站。

手動方式：第 2 步，填寫空間基本資訊

在「建立創空間」頁面填寫基本資訊：

1. 所屬帳號或組織：決定連結中的擁有者名稱。
2. 空間名稱：建議使用小寫英文字母、數字和連字號，例如 my-portfolio。
3. 顯示名稱與簡介：填寫訪客看得懂的標題和說明。
4. 可見性：第一次部署建議先選私密，驗收後再公開。
5. 授權條款：依專案實際情況選擇。

確認資訊後，點選頁面底部的建立按鈕，等待進入創空間詳細頁。

手動方式：第 3 步，上傳網頁檔案

下面是一個已經執行的 Static 創空間檔案頁。可以看到網頁入口 index.html 直接位於倉庫根目錄，旁邊還有 README.md。

進入新空間的檔案頁，上傳 index.html、CSS、JavaScript 和圖片。完成後，根目錄必須直接出現 index.html，不能再包一層 dist、build 或專案目錄。

手動上傳適合純 HTML 頁面或檔案很少的專案。檔案多、更新頻繁時，回到前面的方式，讓 ms-studio-deploy 自動完成 Git 同步會更穩妥。

手動方式：第 4 步，在部署設定中選擇 Static

檔案上傳完成後，進入創空間的部署設定，在 SDK 類型中選擇 Static。頁面會提示 Static 適合展示已準備好的 HTML 頁面；同一區域也會提供 Gradio、Streamlit 和 Docker。

再次確認倉庫根目錄有 index.html，然後儲存部署設定。

如果網頁需要資料庫、私密 API Key 或伺服器端運算，它就不是純靜態網頁。此時應選擇 Gradio、Streamlit、Docker，或把後端部署到其他服務。寫進前端 JavaScript 的金鑰無法保密。

手動方式：第 5 步，等待部署並驗收

儲存部署設定後，平台通常會自動部署。如果沒有，就在創空間頁面點選部署、重新啟動或重新執行。等待狀態變為「執行中」，再開啟類似下面的地址：

https://modelscope.cn/studios/你的使用者名稱/你的空間名稱

開啟最後連結，確認：

• 首頁能否開啟；
• CSS、JavaScript 和圖片是否正常；
• 瀏覽器主控台是否有 404、CORS 或 JavaScript 錯誤；
• 手機寬度下是否仍能使用；
• 公開空間的連結能否在未登入視窗中開啟。

如果空間目前是私密，確認頁面正常後再改為公開，並用未登入視窗檢查公開連結。

手動方式：第 6 步，更新已發布的網頁

修改原始碼後，先在本機測試並重新建置。回到創空間的檔案頁，用新的 dist 或 build 內容替換舊檔案，再重新部署。

修改原始碼 → 本機測試 → 重新建置 → 替換創空間檔案
→ 重新部署 → 開啟最後連結驗收

對 Vite、React、Vue 專案，仍然只上傳建置產物，不要上傳 node_modules、開發設定和完整原始碼。更新次數增加後，建議改用前面的 Skill 方式。

排障仍然建議使用 Skill

ms-studio-deploy · 排障助手

网页哪里不对？

选择最接近的现象，复制提示词交给 AI；Skill 会继续检查、修复和部署。

404

当前现象页面 404 或空白

最可能的原因

发布目录选错，或创空间仓库根目录没有 index.html。

Skill 会怎么处理

检查当前发布目录和远端文件结构，修正后重新同步并部署。

直接发给 AI

请使用 ms-studio-deploy 检查当前创空间为什么出现 404 或空白页。确认仓库根目录是否有 index.html，修正发布目录后重新同步、部署，并把最终链接发给我。

資料來源

• 魔搭社群創空間（頁面與截圖核驗於 2026-08-11）
• 魔搭核心開發者共創會回顧
• ModelScope 官方統一操作說明
• ModelScope 官方創空間部署 Skill
• ModelScope Hub 官方用戶端
• 公開 Static 創空間範例