用 Saavo 從零開發網頁轉 PDF 工具

這一系列教學會完整記錄我使用 Saavo 範本開發線上產品的過程，從確認需求、設計功能，一直到部署上線。為了盡量貼近實際專案，我還特別註冊了 webpagetopdf.dev 網域。

網頁轉 PDF 不一定是值得長期投入的產品方向，但功能不算複雜，產品開發該有的環節也一個不少：核心功能、使用者、額度、付款和部署都會涉及。用它走一遍完整開發流程，正好可以看看 Saavo 範本是否能支撐一款產品從零上線。

教學目標

最後完成的 WebpageToPDF 包含 Quick Convert、Custom 和 Visual Editor 三種轉換模式，以及註冊登入、每日額度、Pro 會員訂閱和正式環境部署。API 轉換和點數包先保留設定，供日後擴充，首版不開放。

第一篇會保留從初步構想到原型驗證後調整範圍的過程，後續各篇都依調整後的功能範圍繼續。

開始之前

本教學使用 Windows、PowerShell、Cursor 和 Codex 示範，你也可以使用熟悉的開發工具。建立正式專案前，需要準備 Saavo 範本使用權限、Git 和 Node.js，詳見事前準備。網域、付款和其他外部服務，會在相關章節逐步設定。

如果尚未使用過 Saavo，可以先閱讀快速開始，了解建立專案、在本機執行及部署的基本流程。

閱讀順序

1. 產品設計與原型驗證：決定 WebpageToPDF 的產品方向、首版範圍和 PDF 轉換方案。
2. 建立專案與品牌設定：建立 Saavo 專案，完成本機初始化、網站文案和主題色彩設定。
3. 移植 PDF 轉換功能：了解專案分層，將原型中的 PDF 轉換 API 和前端元件移植到 Saavo。
4. 設計方案與串接使用權益：設定免費與 Pro 方案、使用者額度、定價頁面和權限檢查。
5. 串接 Stripe 付款：設定 Stripe 產品、價格和 Webhook，串接購買流程與使用權益授予。
6. 完善網站與部署上線：補齊網站頁面和正式環境設定，部署 PDF Worker 與主站，並完成上線驗證。

第一次閱讀時，建議依序進行。每篇結尾都有本篇檢查項目和下一篇連結。如果既有專案只需要串接某個環節，也可以直接閱讀對應文章，但請先確認前面依賴的設定已完成。