可重複、可擴張的交付流程是你的生產力護城河。 每個案子不再從頭想——流程定義了品質的下限，AI 在每步都有具體槓桿點。
完整交付 SOP（8 步驟）
Step 1：Intake（接案問卷）
目標：在第一次電話前，已經了解 80% 你需要的資訊。
Intake form 必問項目：
- 你的業務是做什麼的？目標客群是誰？
- 現在的網站（如果有）最大的問題是什麼？
- 用戶看到網站後，你最希望他們做什麼？（電話、預約、填表、到店、購買）
- 你有的素材：照片、logo、現有文案？
- 上線時間需求、預算範圍？
- 競品或你喜歡的網站範例？
AI 槓桿：用 Claude 分析 intake 回覆，生成初步業務理解摘要——在第一次通話前就展示出「你已經理解了他們的業務」。
Step 2：SDD（規格先行 / Spec-Driven Development）
這是和 Fiverr 接案者最大的差距點，也是和 Problem Framing ＋ SDD 方法論的直接連結。
SDD 規格文件包含：
- 目標：這個網站要讓什麼指標移動？（不是「要好看」，是「每月多 N 個電話詢問」）
- 目標受眾：誰會看到這個網站？他們在決策前最需要看到什麼？
- 轉換定義：什麼算成功的一次訪問？轉換漏斗是什麼？
- 頁面結構：Hero → 問題/方案 → 社會認同 → CTA → 聯絡資訊的標準結構，根據客戶業務調整
- 不做什麼清單：明確說明範圍外的項目（多語言、電商、複雜後台等）
AI 槓桿：用 Claude 根據 intake 資料生成 SDD 草稿，客戶審閱確認——大幅壓縮這一步的時間。
SDD 是合約的一部分：客戶確認後，範圍不再隨意擴張（scope creep 防護）。
Step 3：Problem Framing（問題框架確認）
目標：確認你解的是真正的問題，而不是客戶以為的問題。
常見的 mismatch：
- 客戶說「我要更漂亮的網站」，真正的問題是「沒有人在網站上留下聯絡方式」
- 客戶說「我要更多功能」，真正的問題是「首頁沒有說清楚你是做什麼的」
Problem Framing 的工具是一個簡單問句：「如果這個問題解決了，你怎麼知道它解決了？」——讓客戶定義可衡量的成功標準。
直接引用 Problem Framing ＋ SDD 方法論。
Step 4：設計（Design）
工具鏈：
- Sitemap：FigJam 或手繪，AI 輔助生成初版架構
- Wireframe：Figma，低保真先行，聚焦資訊架構
- Visual Design：Figma，高保真，品牌色/字型/元素
- AI 槓桿：Figma AI 生成佈局變體；Claude 生成初版文案；Midjourney/ideogram 生成視覺素材草稿
設計流程：
- Wireframe 確認（不要在低保真前進行視覺討論）
- Moodboard / 風格確認
- 高保真設計稿（1–2 輪修改）
- 客戶確認
重要原則：在 wireframe 確認前，不要開始視覺設計。設計方向改變比內容改變成本高 3 倍。
Step 5：可維護實作（Build）
詳見 技術落地。
關鍵原則：
- 選客戶能自己維護的技術棧（根據客戶技術能力決定 CMS 深度）
- 手機優先（mobile-first）開發
- 效能基線：Core Web Vitals 達標
- 無障礙基線：WCAG 2.1 AA
AI 槓桿：GitHub Copilot 加速重複性程式碼生成（Stack Overflow 2024：76% 的開發者節省 30%+ 時間）。Claude 生成 SEO 結構化資料、元標籤、robots.txt。
Step 6：QA（品質確認）
QA 清單（每個案子必跑）：
- ☐ 手機 / 平板 / 桌面三個視窗大小都正確
- ☐ 所有連結和 CTA 按鈕可用
- ☐ 表單送出測試（送出後有確認訊息）
- ☐ Google PageSpeed 分數 ≥ 80（Mobile）
- ☐ 基本 SEO：title、description、heading hierarchy 正確
- ☐ 圖片有 alt text
- ☐ 載入速度 < 3 秒（4G 模擬）
- ☐ 客戶確認所有文案和素材正確
AI 槓桿：Claude 生成 QA 清單；Lighthouse CI 自動化效能/無障礙測試。
Step 7：上線（Launch）
上線前確認：
- DNS 設定完成（提前告知客戶 24–48 小時生效時間）
- SSL 憑證啟用（全部必須 HTTPS）
- Google Analytics / GA4 追蹤設定
- Google Search Console 提交 Sitemap
- 301 redirect（如果有舊網站）
上線後動作：
- 在你的作品集更新這個案例（截圖、簡短描述）
- 給客戶發上線確認訊息（含流量追蹤 dashboard 的截圖）
Step 8：交接與維護（Handoff & Maintenance）
交接文件（交給客戶的）：
- 如何更新內容（影片教學或截圖步驟文件）
- 域名和主機的登入資訊（由客戶自行保管）
- 聯絡你的方式和回應時間（維護 SLA）
維護選項（在交接時提出）：
- 自助維護（免費，附教學文件）
- 維護月費（300/月，N 次更新 + 安全監控 + 月度報告）
轉介請求：在交接電話最後主動提問（見 營銷與獲客 的轉介系統）。
每步的時間估算（標準版 $3,500 專案）
| 步驟 | 估算時間 | AI 節省比例 |
|---|---|---|
| Intake + SDD | 2–4 小時 | ~50%（草稿生成） |
| Problem Framing | 1–2 小時 | ~20%（框架應用） |
| 設計 | 8–16 小時 | ~30%（變體生成） |
| 實作 | 12–24 小時 | ~30%（程式碼生成） |
| QA | 2–4 小時 | ~20%（清單自動化） |
| 上線 + 交接 | 2–4 小時 | ~10%（文件生成） |
| 總計 | 27–54 小時 | 平均 ~30% 節省 |
⚠️ 框架標示：AI 節省比例為估算，基於 Stack Overflow 2024（整體開發）與 Figma AI 使用者回報，並非針對網站設計 productized service 的受控研究。
延伸
- SDD 方法論詳解 → Problem Framing ＋ Spec-Driven Development
- 技術棧選擇 → 技術落地
- 怎麼把流程轉化為護城河 → 護城河與差異化
- 回到全景 → 小商務落地客製化網站服務首頁