上傳靜態頁面, 立即取得 分享連結
上傳 HTML、Markdown、PDF、ZIP 或已建置完成的靜態頁面,立即取得可分享的連結。不用設定網域、伺服器或 Git。
產物變成預覽連結
瀏覽器可直接開啟的靜態產物,無需 Git 設定即可分享評審。
dist/index.html
previewship deploy --json
https://demo.previewship.net
demo.preview...
上傳 React/Vue 建置產物、HTML、Markdown 或 PDF
React/Vue/Vite/Next 等專案先建置,再上傳 dist/build/out/public 或包含 index.html 的 zip;單一 HTML、Markdown 和 PDF 檔案仍可直接發布。
拖入 dist/build/out zip、.html、.md 或 .pdf
上傳瀏覽器可直接開啟的產物,不是原始碼專案。
可以上傳
不要上傳
圍繞使用者已經在嘗試的工作流建構
AI HTML 產物
發布 ChatGPT、Claude、Cursor 和 coding agents 生成的報告、原型、dashboard 與單檔頁面。
直接支援 HTML、Markdown 和 PDF
直接上傳 .html、Markdown 或 .pdf,貼上 HTML,或用 CLI/MCP 部署 ./page.html、./README.md、./report.pdf。PDF 連結使用瀏覽器原生全螢幕閱讀器。
框架建置產物
React、Vue、Vite、Next、Astro、Svelte 等專案先 build 後即可部署;上傳 dist/build/out/public,不上傳原始碼目錄。
覆蓋每一種產物到公開連結的工作流
大多數託管工具只最佳化一條路徑:貼上 HTML、上傳 zip 或執行 CLI。PreviewShip 同時覆蓋 React/Vue/Vite/Next 建置產物、AI 生成 HTML、Markdown、PDF 文件、編輯器部署和 MCP 智能體。
貼上 HTML 並發布
在控制台貼上完整 HTML 文件,為 ChatGPT、Claude、Gemini 或 Cursor 輸出取得即時 URL。
了解更多上傳單一 HTML、Markdown 或 PDF 檔案
上傳 report.html、README.md、docs.markdown、report.pdf 或其他獨立文件。HTML 和 Markdown 會產生網頁入口,PDF 透過瀏覽器原生全螢幕閱讀器開啟。
了解更多部署 React/Vue 建置產物
部署 Vite、React、Vue、Next 靜態匯出、Astro 或 Svelte 輸出:dist、build、out、public,或包含 index.html 的建置產物 zip。
了解更多讓 AI 智慧體部署
透過 MCP 或 CLI JSON 輸出,讓 Claude Code、Cursor、Windsurf 和 Codex 完成部署並返回預覽連結。
了解更多實際演示
開發者與 AI 程式設計智慧體之間的一段對話示例。
我來幫你部署到 PreviewShip,取得一個可分享的連結。
從創意到可分享連結——無需離開對話。
即時預覽所需的一切
從控制台、編輯器、終端或 AI agent 部署 React/Vue/Vite/Next 建置產物、產生的 HTML、Markdown、PDF 文件和前端產物。無需複雜設定。
即時預覽
上傳 dist/build/out/public 等建置產物,幾秒內取得即時預覽連結。無需 CI/CD 設定。
AI HTML 就緒
將產生的 HTML 報告、Markdown 筆記、儀表板、落地頁和原型發布為公開預覽連結。
AI 智慧體就緒
為 Claude Code、Cursor、Windsurf、Codex、OpenClaw 等 AI 程式設計智慧體打造。支援 MCP 或 CLI 部署。
Codex 對話分享
安裝可選的 share-codex-chat skill,把目前 Codex 對話還原成高保真頁面並發布成 PreviewShip 連結。
Claude Code 對話分享
安裝可選的 share-claude-code-chat skill,把 Claude Code 對話發布成含工具時間線、隱藏思考內容的可分享頁面。
CLI 部署
從終端用一條命令部署 dist/build/out,或單一 HTML、Markdown、PDF 檔案,適合腳本、CI 流水線和 AI agent。
原生 MCP 支援
一流的 MCP 伺服器支援。任何 MCP 相容智慧體都可以將部署作為工具呼叫。
手動上傳
在控制台拖放上傳建置產物 zip、單一 HTML/Markdown/PDF 檔案,或貼上 HTML。無需外掛,任何瀏覽器都可使用。
隨處分享
取得唯一的預覽連結,即時分享給團隊成員、客戶或利害關係人。
為 AI 工具實際生成的頁面而設計
當輸出已經能在瀏覽器執行,下一步就是分享給別人,PreviewShip 在這個環節最有價值。
為 AI 智慧體打造
直接從 AI 程式設計智慧體部署預覽。兩種整合方式——選擇適合你的工作流程。
# Install (or use npx directly)
npm install -g previewship
# Set your API Key
previewship login
# Deploy
previewship deploy ./dist
previewship deploy ./report.html
# JSON output for agents
previewship deploy ./dist --json
previewship deploy ./report.html --jsonCLI
一條指令即可從任何終端或 AI 智慧體部署。結構化 JSON 輸出便於自動化。
一鍵部署
單條指令或工具呼叫即可建立線上站點。
零設定
無需清單或專案檔案。指向即部署。
結構化輸出
JSON 回應便於智慧體解析。
全球 CDN
站點透過全球邊緣網路分發。
可選 Agent 對話 skills
當工作過程本身也需要上下文時,直接分享 AI 編程對話。
對 Codex 和 Claude Code 使用者來說,PreviewShip skills 可以把可見聊天記錄還原成高保真 HTML 頁面,並發布成公開連結,用於除錯上下文、實作記錄和 review 交接。
分享 Codex 對話
把目前可見的 Codex 聊天記錄匯出為高保真 PreviewShip 頁面。
npx skills add blockdancez/PreviewShip --skill share-codex-chat -a codex -g --yes$share-codex-chat 分享当前 Codex 对话分享 Claude Code 對話
讀取 Claude Code JSONL 歷史,隱藏思考原文,並把工具呼叫過程保留為可折疊時間線。
npx skills add blockdancez/PreviewShip --skill share-claude-code-chat -a codex -g --yes$share-claude-code-chat 分享 Claude Code 对话當你只需要公開預覽 URL,比 Git 託管更快
GitHub Pages、Vercel、Netlify、Surge、Tiiny Host、HTML Pub 和 Aired 都解決了部分靜態託管問題。PreviewShip 專注於 AI 建構者反覆遇到的流程:生成 HTML 或建置產物輸入,分享連結輸出。
| 工作流 | PreviewShip | 通用靜態託管 |
|---|---|---|
| 單一 HTML/Markdown/PDF | 貼上 HTML、上傳 .html/.md/.markdown/.pdf,或從 CLI/MCP/編輯器部署 ./page.html 和 ./README.md。 | 通常需要倉庫、檔案管理器、子域設定或包含 index.html 的 zip。 |
| AI 智慧體 | MCP server、CLI 和結構化 JSON 輸出是一等路徑。 | 通常面向人工控制台或 Git push 工作流。 |
| 前端建置產物 | 上傳可直接服務的 dist/build/out/public 或 zip。 | 常常綁定 Git、建置設定或生產託管。 |
| 評審連結 | 為臨時預覽、設計評審、QA 和客戶確認而設計。 | 通常是更寬泛的網站託管或生產部署。 |
工作流程
三個簡單步驟,分享您的前端預覽。
上傳
透過控制台、VS Code/Cursor、CLI 或 MCP 智能體上傳 React/Vue/Vite/Next 建置後的靜態產物;單一 HTML、Markdown 和 PDF 檔案可直接發布。
部署
我們將您的專案部署到全球 CDN,並產生唯一的預覽連結。
分享
將預覽連結分享給團隊。他們可以在任何瀏覽器中即時查看。
編輯器擴充套件
在 VS Code 或 Cursor 中一條指令即可部署。
Cursor
Cursor 完全相容 VS Code 擴充套件,安裝步驟相同。
- 1
打開 Cursor,按 Ctrl+P(Mac 按 Cmd+P),貼上以下指令並按 Enter:
ext install previewship.previewship - 2
在命令面板(Ctrl+Shift+P)中執行「PreviewShip: Set API Key」,輸入你的 API Key。
- 3
開啟專案資料夾,執行「PreviewShip: Deploy Workspace, HTML, Markdown, or PDF File」;或開啟 .html/.md/.pdf 檔案並執行「PreviewShip: Deploy Active HTML, Markdown, or PDF File」——幾秒內取得預覽連結。
VS Code
從 VS Code 擴充套件商店安裝,或使用命令面板。
- 1
打開 VS Code,按 Ctrl+P(Mac 按 Cmd+P),貼上以下指令並按 Enter:
ext install previewship.previewship - 2
在命令面板(Ctrl+Shift+P)中執行「PreviewShip: Set API Key」,輸入你的 API Key。
- 3
開啟專案資料夾,執行「PreviewShip: Deploy Workspace, HTML, Markdown, or PDF File」;或開啟 .html/.md/.pdf 檔案並執行「PreviewShip: Deploy Active HTML, Markdown, or PDF File」——幾秒內取得預覽連結。
還沒有 API Key?免費註冊後,在控制台的 API Keys 頁面建立即可。
用於在 Cursor / VS Code 中離線或手動安裝
常見問題
關於 PreviewShip 的常見問題。