第 4 章 · 选模板与技术方案：一次完整选型推理
从 PRD 提取技术约束，学怎么找、怎么查、怎么试用模板，跟着生词本案例走一遍完整的选型推理——决策与查证事实分开写。
这一章解决什么问题
PRD 定了「做什么」，还差「站在什么基础上做」。生词本需要数据库和登录——这两样从零手写是新手不该碰的深水区（自制密码系统是著名的安全事故来源），成熟的做法是从起点模板开始：模板负责脚手架、登录接线、部署配置，你把精力花在真正的业务上（录词、筛选、权限）。
但「用模板」不等于「随便挑一个 star 多的」。这一章教一套可复用的选型方法：找候选 → 五项检查 → 对比推理 → 试用确认，并且全程把「查证到的事实」和「我做的决策」分开写——因为事实会过期，写下查证日期，三个月后的你才知道哪些要重查。
开始前你要有什么
- 第 3 章的 PRD（本步只用它的三个部分：页面清单、数据需求、异常情况）
- 一个 GitHub 账号（查证和试用模板都需要）
- 能问 AI 的会话
分工：人判断什么，AI 做什么
| 人负责（判断） | AI / Skills 负责（加工） |
|---|---|
| 从 PRD 提炼技术约束（要什么能力） | 列候选清单、汇总仓库信息 |
| 接受哪些取舍、最终选谁 | 帮你读许可证条款、README、部署要求 |
| 试用后拍板「就用它」 | 试用时帮你把模板跑起来、解读报错 |
AI 推荐的任何候选都必须查证后再信——它可能推荐一个已停维护的仓库、或记错许可证。查证不难，下面每一步都给方法。
怎么做
第 1 步：从 PRD 提取技术约束（约 5 分钟）
对着 PRD 问自己三个问题，写成一张约束卡：
技术约束（来自 PRD）
1. 需要数据库吗？→ 要（数据需求一节有 words 表）
2. 需要登录吗？→ 要（邮箱登录；AC1/AC8 依赖它）
3. 前端形态？→ 手机+电脑都要好用的网页（响应式）
4. 部署与维护偏好？→ 托管服务优先，免费额度够用（D7）这四条是后面所有评估的打分标准。候选再热门，不满足约束就出局。
第 2 步：找候选（约 10 分钟）
四个渠道，按可靠度排序：
- 技术栈官方示例：比如 Next.js 官方仓库的 examples 目录、Supabase 官方文档的快速开始模板——官方维护，最不容易坑；
- 平台模板市场：Vercel、Supabase、Cloudflare 各自的模板库——通常部署配置是现成的；
- GitHub 搜索：
nextjs supabase starter这类关键词，按 star 排序，点进去看最近提交日期再下结论； - 问 AI：「我要做……，推荐三个起点模板，附仓库地址」——它的答案按第 3 步逐项查证，一条都别跳过。
案例找齐四个候选（覆盖了四种典型思路）：
- A. 单文件 HTML + localStorage：第一课路线的自然延伸，无后端；
- B. Next.js + Supabase 起步模板（候选：nextbase-nextjs-supabase-starter 这类社区模板）；
- C. T3 全家桶脚手架（create-t3-app）：一条命令生成 Next.js + tRPC + Prisma + 认证的全栈骨架；
- D. Cloudflare Workers + D1：Cloudflare 家的无服务器 SQL 数据库（官方文档口径：serverless SQL database，SQLite 方言），配合 Pages/Workers 部署。
第 3 步：五项检查，事实与评估分开（约 20 分钟）
每项检查都给「怎么查」的方法——这套方法比案例结论更值钱，因为数据会过期，方法不会。
| 检查项 | 怎么查 | 为什么重要 |
|---|---|---|
| 许可证 | 仓库根目录 LICENSE 文件；没有写明许可证 = 默认保留所有权利，别用 | 商用、改版的法律边界 |
| 已有能力 | README + 模板跑起来后实际点一遍 | 「模板说有」和「你能用上」是两回事 |
| 维护情况 | 最近一次提交时间、issue 区是否有人回应 | 停维护的模板 = 漏洞没人修、问题没人答 |
| 部署限制 | 模板 README 的部署一节 + 平台免费额度页 | 有些模板只能在特定平台跑 |
| 试用成本 | 本地跑起来要几步、要不要注册几个服务 | 三步能跑的模板才适合新手 |
案例查证结果（查证日期 2026-09-23，来源 GitHub 公开数据与官方文档；这些数字会随时间变化，动手前请重查）：
| 候选 | 许可证 | 规模线索 | 最近提交（查证日） | 事实小结 |
|---|---|---|---|---|
| A. 单 HTML + localStorage | 不涉及（自写） | — | — | 无第三方依赖，也就无第三方风险 |
| B. nextbase 起步模板 | MIT | 819 stars | 2026-09-08 | 近期仍在维护；MIT 允许自由改用 |
| C. create-t3-app | MIT | 29,134 stars | 2025-12-13 | 星标极高，但查证日已 9 个多月无提交——热度是历史，维护是现状 |
| D. CF Workers + D1 | 平台服务（按平台条款） | 官方文档活跃（更新至 2026-08） | — | 官方文档明确：serverless SQL、SQLite 方言；认证需另接 |
注意 C 行教的事：star 数回答「曾经多受欢迎」，最近提交回答「现在还有没有人管」。评估维护情况时，后者权重远大于前者。
第 4 步：对比推理（决策部分，约 10 分钟）
拿第 1 步的四条约束当评分卡，逐个过：
- A 单 HTML + localStorage：D5 要换设备可见，localStorage 换浏览器就没了——约束 1、2 双双不满足，出局。但它不是废物：不需要保存状态的展示类页面（项目库里的六个跟做项目）走 A 路线成本最低。选型要跟着需求走，需求变了答案就变。
- B Next.js + Supabase 起步模板：数据库 ✓（Supabase 托管 Postgres）、登录 ✓（模板自带邮箱登录接线）、响应式 ✓（Tailwind 预配）、维护省心 ✓（两边都是托管服务，免费档对单人自用绰绰有余——具体额度以官网价格页为准，不在此引用具体数字免得过期）。
- C create-t3-app：能力上全覆盖，但对新手引入了 tRPC、Prisma 一堆新概念；且查证日已 9 个多月无提交。方法上是好工具，此刻不适合本案例的第一版。
- D Cloudflare Workers + D1：数据库 ✓、部署省心 ✓（本站自己就托管在 Cloudflare Pages），但认证要另拼——对单人自用是额外一块工程。等你的产品已经在 Cloudflare 生态里、或对成本极敏感时，D 是值得认真评估的路线。
案例决策：选 B。 一句话理由：它是唯一一个四条约束全满足、且每条都不用我自己拼的候选；登录和数据库恰好是新手最容易做错的两块，模板把这两块承包了。
复用与补充清单（选完立刻写，防止「以为模板都有」）：
| 模板直接给 | 还要自己补 |
|---|---|
| 项目脚手架、构建与部署配置 | words 表建表（第 6 章的 DDL） |
| 邮箱登录的完整接线 | 录入表单 + 校验（第 6 章 validateWord） |
| 连数据库的客户端代码 | 列表/筛选/状态切换界面（AC4/AC5） |
| 基础页面布局与样式基调 | 按账号过滤的查询逻辑（AC8 的核心） |
第 5 步：试用确认（约 30 分钟）
选型最后一步不是想，是跑。把模板 clone 下来，照 README 跑起来，用这个清单试用：
- 30 分钟内本地跑起来了吗？跑不起来的部分卡在哪？
- 模板自带的登录能注册、能退出、刷新后还保持登录吗？
- 页面在手机宽度下正常吗？（浏览器开发者工具切设备模拟）
- 目录结构你大概看得懂吗？（看不懂 = 以后每次改动的沟通成本）
- 部署 README 读了吗？目标平台你愿意注册吗？
任何一条亮红灯，回到第 4 步换下一个候选——这时换方向只花了 30 分钟，开工后再换要按周算。
产物与检查
产物：选型记录一份。检查表：
- 约束卡来自 PRD，不是凭感觉列的
- 每个候选都做了五项检查，事实带查证日期
- 「事实」和「我的决策」分开写；决策引用约束编号
- 有复用/补充清单
- 试用清单跑过一遍，结论写进了选型记录
不满意或失败时怎么调整
- 模板本地跑不起来：先看仓库 issue 区搜报错关键词；没有答案就带着完整报错问 AI。issue 区冷清 + 长期无人回应 = 回第 4 步换人。
- 两个候选都说服不了自己放弃：选你看得懂的那个。功能全但看不懂的模板，会让你在每次改动时求 AI 盲改——第 7 章的排错会加倍痛苦。
- 发现约束本身定错了（比如试用后意识到单人根本不需要邮箱登录）：这是好事，回 PRD 改，回决策表改 D6——选型阶段的返工是整个流程里最便宜的。
交给下一章什么
- 技术栈 + 起步模板——第 5 章任务清单的第一项就是「让这个模板的空壳跑通部署」；
- 复用/补充清单——直接变成任务清单里各任务的原料：模板给的不用做，要补的就是全部工作量。
案例进度：选定 Next.js + Supabase 起步模板（B 路线），补充清单四项。下一章把 PRD 的 8 条 AC 切成 5 个可以逐步验收的开发任务。