靜態頁面立即變成分享連結

上傳靜態頁面, 立即取得 分享連結

上傳 HTML、Markdown、PDF、ZIP 或已建置完成的靜態頁面,立即取得可分享的連結。不用設定網域、伺服器或 Git。

部署預覽
PreviewShip

產物變成預覽連結

瀏覽器可直接開啟的靜態產物,無需 Git 設定即可分享評審。

輸入

dist/index.html

部署

previewship deploy --json

分享

https://demo.previewship.net

執行狀態
已驗證產物
已產生路由
已同步邊緣節點
可分享
格式
BuildHTMLMDPDF
結果

demo.preview...

輸入
dist/build/out/public、zip、.html、.md、.pdf 或貼上 HTML
輸出
公開 HTTPS 預覽連結
智能體路徑
MCP、CLI 或 JSON 輸出
設定
無需 Git/CI/CD;框架專案先 build,單 HTML/Markdown/PDF 可直接發布
上傳優先工作流

上傳 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

上傳瀏覽器可直接開啟的產物,不是原始碼專案。

可以上傳

React/Vue/Vite/Next 靜態匯出後的 dist、build、out 或 public zip(含 index.html)
包含 index.html、CSS、JS、圖片等資源的建置產物
report.html、README.md、docs.markdown、report.pdf,或從 agent 貼上的生成 HTML

不要上傳

包含 package.json 和 src/ 的原始碼 zip
node_modules 或相依目錄
執行 build 命令之前的 React/Vue/Next/Vite 原始碼
建置產物、HTML、Markdown 或 PDF
靜態部署
Live URL

圍繞使用者已經在嘗試的工作流建構

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,不上傳原始碼目錄。

實際演示

開發者與 AI 程式設計智慧體之間的一段對話示例。

智慧體交接連結就緒
幫我建置一個 SaaS 產品的落地頁,包含 Hero 區域、功能網格和定價表。
AI 智慧體
好的,我來為你建置。 Write(landing/index.html) — 186 行 Write(landing/style.css) — 124 行 Write(landing/app.js) — 95 行 你的落地頁已經準備好了!打開 landing/index.html 預覽。
看起來很棒!能幫我部署一下,讓我分享給團隊嗎?
AI 智慧體

我來幫你部署到 PreviewShip,取得一個可分享的連結。

$ previewship deploy ./landing --json
已上線!把這個連結分享給你的團隊: https://my-saas.previewship.net 連結公開可存取——任何人都可以查看。

從創意到可分享連結——無需離開對話。

即時預覽所需的一切

從控制台、編輯器、終端或 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 智慧體打造

直接從 AI 程式設計智慧體部署預覽。兩種整合方式——選擇適合你的工作流程。

CLI
# 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 --json

CLI

一條指令即可從任何終端或 AI 智慧體部署。結構化 JSON 輸出便於自動化。

一鍵部署

單條指令或工具呼叫即可建立線上站點。

零設定

無需清單或專案檔案。指向即部署。

結構化輸出

JSON 回應便於智慧體解析。

全球 CDN

站點透過全球邊緣網路分發。

可選 Agent 對話 skills

當工作過程本身也需要上下文時,直接分享 AI 編程對話。

對 Codex 和 Claude Code 使用者來說,PreviewShip skills 可以把可見聊天記錄還原成高保真 HTML 頁面,並發布成公開連結,用於除錯上下文、實作記錄和 review 交接。

一般部署不需要安裝高保真還原對話記錄適合 review 上下文
查看 Claude Code skill 文件

分享 Codex 對話

把目前可見的 Codex 聊天記錄匯出為高保真 PreviewShip 頁面。

Codex 文件
安裝 skill
npx skills add blockdancez/PreviewShip --skill share-codex-chat -a codex -g --yes
在 Codex 中使用
$share-codex-chat 分享当前 Codex 对话

分享 Claude Code 對話

讀取 Claude Code JSONL 歷史,隱藏思考原文,並把工具呼叫過程保留為可折疊時間線。

Claude Code 文件
安裝 skill
npx skills add blockdancez/PreviewShip --skill share-claude-code-chat -a codex -g --yes
在 Codex 中使用
$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 和客戶確認而設計。通常是更寬泛的網站託管或生產部署。

工作流程

三個簡單步驟,分享您的前端預覽。

01

上傳

透過控制台、VS Code/Cursor、CLI 或 MCP 智能體上傳 React/Vue/Vite/Next 建置後的靜態產物;單一 HTML、Markdown 和 PDF 檔案可直接發布。

02

部署

我們將您的專案部署到全球 CDN,並產生唯一的預覽連結。

03

分享

將預覽連結分享給團隊。他們可以在任何瀏覽器中即時查看。

編輯器擴充套件

在 VS Code 或 Cursor 中一條指令即可部署。

Cursor

Cursor 完全相容 VS Code 擴充套件,安裝步驟相同。

  1. 1

    打開 Cursor,按 Ctrl+P(Mac 按 Cmd+P),貼上以下指令並按 Enter:

    ext install previewship.previewship
  2. 2

    在命令面板(Ctrl+Shift+P)中執行「PreviewShip: Set API Key」,輸入你的 API Key。

  3. 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. 1

    打開 VS Code,按 Ctrl+P(Mac 按 Cmd+P),貼上以下指令並按 Enter:

    ext install previewship.previewship
  2. 2

    在命令面板(Ctrl+Shift+P)中執行「PreviewShip: Set API Key」,輸入你的 API Key。

  3. 3

    開啟專案資料夾,執行「PreviewShip: Deploy Workspace, HTML, Markdown, or PDF File」;或開啟 .html/.md/.pdf 檔案並執行「PreviewShip: Deploy Active HTML, Markdown, or PDF File」——幾秒內取得預覽連結。

還沒有 API Key?免費註冊後,在控制台的 API Keys 頁面建立即可。

下載 VSIX

用於在 Cursor / VS Code 中離線或手動安裝

簡單透明的定價

免費開始;需要密碼存取、更長保留、更多可回滾歷史或更高部署額度時再升級。結帳時會自動套用首發優惠。

免費版

$0 永久免費
  • 1 個專案位(可刪除不用的專案騰出空間)
  • 每日 5 次部署
  • 最大 15 MB zip
  • 3 天預覽有效期
  • 最近 3 個可回滾版本
  • 顯示 PreviewShip 浮水印
免費開始
最受歡迎

專業版(月付)

$9
$8.10 /月
自動套用 10% 優惠
  • 20 個專案
  • 每日 50 次部署
  • 最大 50 MB zip
  • 30 天預覽有效期
  • 固定連結密碼存取
  • 10 個可回滾版本
  • 移除 PreviewShip 浮水印
訂閱

專業版(年付)

$84
$75.60 /年 ($6.30/月)
自動套用 10% 優惠
  • 40 個專案
  • 每日 80 次部署
  • 最大 80 MB zip
  • 365 天預覽有效期
  • 固定連結密碼存取
  • 40 個可回滾版本
  • 移除 PreviewShip 浮水印
訂閱

常見問題

關於 PreviewShip 的常見問題。