用 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 转换接口和前端组件迁移到 Saavo。
4. 设计套餐与接入权益：配置免费和 Pro 套餐、用户额度、价格页面及权限校验。
5. 接入 Stripe 支付：配置 Stripe 产品、价格和 Webhook，连接购买流程与权益发放。
6. 完善网站与部署上线：完善网站页面和生产配置，部署 PDF Worker 与主站并完成上线验证。

首次阅读建议按顺序推进，每篇结尾都有本篇检查和下一篇入口。已有项目需要接入某个环节时，也可以直接打开对应文章，并先确认前面依赖的配置已经完成。