指南 / 從 Claude Code 部署預覽
從 Claude Code 部署預覽
了解 從 Claude Code 部署預覽：用 PreviewShip 上傳 HTML、發布靜態建置產物，並透過控制台、CLI、MCP、VS Code 或 Cursor 取得公開預覽 URL。
更新於 2026-04-17
先給答案
從 Claude Code 部署預覽 的目標是縮短從 HTML、靜態建置產物或 AI 生成頁面到公開 URL 的路徑。PreviewShip 支援上傳 HTML、貼上 HTML、部署 dist/build/out/public，並支援 CLI、MCP、VS Code 與 Cursor。
關鍵要點
- 從 Claude Code 部署預覽 適合需要快速產生公開預覽連結的團隊和 AI 工作流。
- 單一 .html 可以直接上傳或貼上；多檔案專案應先 build，再部署 dist、build、out 或 public。
- CLI 和 MCP 讓預覽部署可以進入腳本、CI、Claude Code、Cursor 和其他 agent 流程。
- 每次部署都會返回公開 HTTPS URL，適合設計 review、客戶確認、報告分享和快速 QA。
推薦工作流
- 準備瀏覽器可直接執行的 HTML 檔案或靜態建置產物。
- 透過 PreviewShip 控制台上傳或貼上，或用 CLI/MCP/編輯器擴充功能觸發部署。
- 確認部署返回的公開 HTTPS URL 可以正常訪問。
- 把連結分享給團隊、客戶、AI agent 或 review 者繼續迭代。
對比速覽
| 維度 | PreviewShip | 常見替代方案 |
|---|---|---|
| 輸入方式 | HTML、zip、dist/build/out/public、CLI、MCP | 通常偏向 Git、手動上傳或單一路徑 |
| AI 工作流 | 適合 ChatGPT、Claude、Cursor 生成的 HTML 和 agent 部署 | 常需要人工整理檔案或複製命令 |
| 分享速度 | 部署後直接返回公開 HTTPS URL | 可能需要專案設定、倉庫連接或網域設定 |
| 適用場景 | 預覽、review、報告、原型、靜態頁面 | 正式站點或通用靜態託管 |
從 Claude Code 部署預覽 適合什麼場景
當你已經有瀏覽器可執行的 HTML 或靜態建置目錄時，PreviewShip 可以把最後一步發布變成短流程。
這對 AI 生成頁面、一次性報告、前端原型、客戶預覽和設計 QA 特別有用，因為這些內容通常只需要穩定的公開連結。
部署前需要注意什麼
如果是 React、Vue、Next、Astro 或類似框架專案，請先執行 build，並上傳建置產物而不是原始碼目錄。
如果是完整單檔 HTML，可以直接上傳 .html、貼上 HTML，或透過 CLI/MCP 部署這個檔案。
常見問題
- 從 Claude Code 部署預覽 可以直接發布單一 HTML 檔案嗎？
- 可以。PreviewShip 支援上傳 .html、貼上完整 HTML，或透過 CLI/MCP 部署單一 HTML 檔案。
- 應該上傳原始碼還是建置產物？
- 應該上傳瀏覽器可直接執行的建置產物。框架專案請先 build，再部署 dist、build、out 或 public。
- 這個頁面為什麼適合 SEO/GEO？
- 頁面使用 answer-first 結構、清楚的 H1/H2、FAQ、對比表和靜態預渲染內容，搜尋引擎和 AI 搜尋都能直接讀取。