Ship to Show
七階段框架，用於將原型轉變為作品集案例研究。
何時使用此技能
- 使用者有一個原型（React、Vue、HTML 或 Figma 匯出檔）並希望加以記錄
- 使用者想為自己的作品集建立案例研究
- 使用者想製作介面展示影片
- 使用者想將原型專案發佈到自己的網站
需要確認的前提條件
開始之前，請確認已安裝以下工具：
node --version && npm --version && ffmpeg -version | head -1 && git --version && gh --version && vercel --version
如果缺少某項工具，請指示安裝命令（macOS）：
- Node.js：
brew install node - FFmpeg：
brew install ffmpeg - Git：
brew install git - GitHub CLI：
brew install gh然後執行gh auth login - Vercel CLI：
npm i -g vercel
七個階段
1. 界定階段 → 識別產業、使用者、問題與設計觀點
2. 結構階段 → 讓原型可在本地執行
3. 豐富階段 → 補齊缺少的互動流程以產出 5 支影片
4. 拍攝階段 → 透過 Puppeteer + FFmpeg 產出影片
5. 敘事階段 → 撰寫具有敘事結構與圖說的案例研究
6. 打包階段 → GitHub、Vercel、自足式整合檔案
7. 發佈階段 → 整合到作品集網站
請依序執行各個階段。每個階段在進入下一階段前都必須產出具體的交付物。請勿壓縮階段。
階段 1：界定階段（15 分鐘）
輸入：一個程式碼檔案或原型 輸出：case-study.md（v1）、CLAUDE.md、專案記憶檔案
動作
- 閱讀原型原始碼
- 識別：
- 所屬產業與市場背景
- 目標使用者（角色、使用情境、壓力點）
- 解決的問題（如果可能，附上關鍵數字）
- 既有的關鍵功能
- 設計觀點（原型正在測試什麼假設）
- 撰寫一篇含敘事性小標題的 1500 字摘要
- 建立一個包含專案定位的 CLAUDE.md
- 建立一個包含完整脈絡的記憶檔案
檢查清單
- 已識別產業
- 已描述使用者（角色、情境、壓力點）
- 問題已用數字形式表述
- 設計觀點明確
- 摘要已撰寫完成
- CLAUDE.md 已建立
階段 2：結構階段（10 分鐘）
輸入：原始程式碼檔案 輸出：可在 localhost 上執行的專案
動作
- 根據檢測到的相依套件建立 package.json
- 設定建置工具（建議使用 Vite）
- 如果使用了 Tailwind CSS，請進行設定
- 建立 index.html 與進入點
- 執行 npm install
- 在 localhost 上啟動
注意事項
如果專案位於網路檔案系統（Google Drive、Dropbox、OneDrive），請先複製到本機再啟動。檔案監聽器在遠端檔案系統上無法運作。
檢查清單
- npm install 執行無誤
- npm run dev 啟動伺服器
- 原型在瀏覽器中正常顯示
- 無主控台錯誤
階段 3：豐富階段（30-45 分鐘）
輸入：可執行的原型 + 界定階段產出 輸出：具有完整流程、可供拍攝的原型
動作
- 識別 5 個可拍攝的流程：
- 總覽 / 分類（收件匣、篩選、選擇）
- 主要功能（產品的關鍵互動）
- 決策與回饋（動作、確認、影響）
- 邊界情況（誤報、錯誤、快速案例）
- 完整流程（串接、會話指標）
- 列出每個流程缺少的互動
- 補齊缺少的互動
- 為每個案例加入多樣化的資料
- 加入模擬的連線（Slack、電子郵件、CRM、匯出）
- 加入微互動（動畫、聲音回饋，如適用）
檢查清單
- 5 個流程已識別且可運作
- 每個案例使用不同的資料
- 模擬整合可見
- 每個流程拍攝時間為 10 到 20 秒
階段 4：拍攝階段（30 分鐘）
輸入：定義好的流程 + 可執行的原型 輸出：5 到 8 支 MP4 影片、5 張 PNG 截圖
動作
- 建立影片管線的目錄結構：
video-scenes/
├── capture.js
├── scenes/
│ ├── shared/
│ │ ├── design-tokens.css
│ │ ├── animations.css
│ │ └── components.css
│ ├── 01-scene.html
│ └── ...
└── output/
- 從原型中提取設計標記（顏色、字體、間距、圓角）
- 建立共用的 CSS 動畫（淡入、上滑、縮放、交錯、打字效果）
- 為每個場景建立 HTML 檔案，包含：
- 以 CSS 註解形式呈現的分鏡時間表
- 可逐幀控制的 CSS 時間線動畫
- 再現原型介面的標記
- 建立 capture.js（Puppeteer + FFmpeg），並透過 Web Animations API 進行控制
- 渲染所有影片
- 拍攝 5 張原型的 Retina 螢幕截圖
關鍵技術：逐幀控制
// 暫停所有動畫
document.getAnimations({ subtree: true }).forEach(a => a.pause());
// 對每一幀，推進時間
document.getAnimations({ subtree: true }).forEach(a => {
a.currentTime = currentTimeMs;
});
影片規格
- 1920x1080
- 30 fps
- H.264（MP4）+ 可選 WebM
- 黑色背景（#0a0a0a）
- 字體：Inter（Google Fonts）
- 每支影片長度 8 到 20 秒
檢查清單
- 所有影片已渲染為 MP4 格式
- 預覽可存取（透過本機 HTTP 伺服器）
- Retina 螢幕截圖已拍攝
- 視覺品質已確認
階段 5：敘事階段（20 分鐘）
輸入：界定階段產出 + 影片 + 流程 輸出：case-study.md（繁體中文）、case-study-en.md（英文）
動作
-
依照以下敘事結構撰寫案例研究：
- 頁首（標題、副標題、類別、作者）
- Hero 圖片（滿版）
- 實驗意圖（個人背景，3 個段落）
- 核心洞察（附上數字的問題）
- 影片：前後對比（或比較）
- 設計問題（指導原則）
- 影片：資料流程 / 架構
- 每個功能一個區段（文字 + 影片 + 圖說）
- 學習心得（可轉移的機制）
- 技術棧 + 連結
-
每支影片都附有圖說：
- 粗體標題（影片展示的內容）
- 痛點： 使用者的問題
- 效益： 帶來的價值
-
不要出現沒有上下文的影片網格。每支影片都有各自的敘述。
-
產出繁體中文與英文版本
語氣
以一位分享實驗的實踐者身份書寫，而非推銷產品的賣家。標題應具體且專業（避免口語用語）。結構清晰：問題、機制、影響。
檢查清單
- 繁體中文案例研究已完整
- 英文案例研究已完整
- 每支影片都附有痛點 / 效益圖說
- 學習心得區段包含可轉移的機制
- 區段標題具有敘事性且專業
階段 6：打包階段（15 分鐘）
輸入：前幾個階段的全部交付物 輸出：GitHub 儲存庫、Vercel 原型、PORTFOLIO-INTEGRATION.md
動作
- 建立 .gitignore（node_modules、dist、.env、frames）
- 初始化 git 儲存庫，結構化提交
- 推送到 GitHub（公開儲存庫）
- 將原型部署到 Vercel（正式環境）
- 建立自足式的 PORTFOLIO-INTEGRATION.md：
- 專案的 YAML 元資料
- 靜態資源複製指令
- 案例研究的完整內容，逐區段列出
- 靜態資源清單（影片、螢幕截圖、位置）
- 影片格式（autoplay/loop/muted/playsinline）
- 圖說格式
- 發佈檢查清單
檢查清單
- GitHub 儲存庫已建立並推送
- 原型已部署到 Vercel
- PORTFOLIO-INTEGRATION.md 自足完整
- 檔案已複製到作品集專案中
階段 7：發佈階段（時間不定）
輸入：作品集專案中的 PORTFOLIO-INTEGRATION.md 輸出：在網站上發佈的專案頁面
動作
此階段在另一個獨立的會話中執行，位置為作品集專案。提示字如下：
閱讀 PORTFOLIO-INTEGRATION.md，並將該案例研究作為一個專案
實作到我的網站上。該檔案包含所有指示：靜態資源、
內容、頁面結構、影片格式以及圖說。
檢查清單
- 靜態資源已複製到作品集專案
- 專案頁面已建立
- 影片設定為 autoplay/loop/muted
- 每支影片下方有圖說
- og:image 已設定
- 繁體中文與英文版本皆已建立
- 原型與 GitHub 連結可正常運作
總結
| 階段 | 所需時間 | 交付物 |
|---|---|---|
| 1. 界定階段 | 15 分鐘 | case-study v1、CLAUDE.md |
| 2. 結構階段 | 10 分鐘 | 本機專案 |
| 3. 豐富階段 | 30-45 分鐘 | 可拍攝的原型 |
| 4. 拍攝階段 | 30 分鐘 | 影片 + 螢幕截圖 |
| 5. 敘事階段 | 20 分鐘 | 繁體中文 / 英文案例研究 |
| 6. 打包階段 | 15 分鐘 | GitHub、Vercel、整合套件 |
| 7. 發佈階段 | 時間不定 | 作品集頁面 |
| 總計 | 約 2 小時 30 分 | 完整的案例研究已發佈 |