AI建站做SaaS产品官网，定价页和试用流程怎么设计？

照着做完这一篇，你能拿到一套可以直接上线的 SaaS 官网定价页结构，以及一条不会在试用期出事儿的试用流程。

第一步：先定信息架构，再让 AI 生成页面

这一步要拿到的是页面骨架，不是像素级设计。在 v0.dev 里新建项目，输入提示词时把区块顺序写死，别让 AI 自己发挥：

生成一个 SaaS 定价页，区块顺序固定为：Hero 标题区、月付/年付切换、三栏价格卡、功能对比表、FAQ、底部 CTA。

如果你用的是 Framer，路径是 顶部菜单 AI → Generate Page，在弹窗里选 Pricing 模板后再改文案；Webflow 则是 右上角 AI Assistant 图标，输入同一段提示词。Bolt.new 和 Lovable 同理，都是提示词驱动，区别只是生成的框架不同。

生成完之后你会发现它默认给的是两栏或四栏。三栏是转化最高的结构，改法是把中间那栏单独拉出来加高亮。

注意：AI 生成的定价卡数字是硬编码在 JSX 里的，一个价格会出现在卡片、对比表、FAQ 三个地方。先别急着改文案，下一步统一处理。

第二步：三栏定价卡的具体配置

这一步要拿到一张能直接给用户看的定价区。三档就够了：Starter（$9/月）、Pro（$29/月）、Team（$79/月）。

中间 Pro 档做三件事：卡片整体放大 5%、加一条 border-2 border-indigo-500、顶部挂一个 "最受欢迎" 徽章。徽章文案别写 "Popular"，写 "80% 的用户选这个"，具体数字比形容词有用。

月付/年付切换用一个 Toggle，默认停在年付，标签写 "年付 省 20%"。切换到月付时，三个价格按 1.25 倍换算，同时把 CTA 按钮下方的小字从 "按年计费 $348" 改成 "按月计费 $29"。

每张卡的 CTA 按钮文案要分档：

• Starter：开始免费试用
• Pro：开始 14 天免费试用
• Team：联系销售

按钮下方统一一行灰字：无需信用卡。

注意：如果你的试用流程其实要绑卡，这行字必须删掉。官网写"无需信用卡"、注册时又弹绑卡页，是 SaaS 官网最高频的投诉来源。

第三步：把价格抽成一份数据源

这一步要拿到的是"改一次价格、全站同步"的能力。在项目根目录建 src/data/pricing.ts：

export const plans = [
  { id: 'starter', name: 'Starter', monthly: 9, yearly: 90,
    cta: '开始免费试用', href: '/signup?plan=starter', highlight: false },
  { id: 'pro', name: 'Pro', monthly: 29, yearly: 278,
    cta: '开始 14 天免费试用', href: '/signup?plan=pro', highlight: true },
  { id: 'team', name: 'Team', monthly: 79, yearly: 758,
    cta: '联系销售', href: '/contact', highlight: false },
];

然后回到定价页组件，把三张卡改成 plans.map() 渲染，对比表也用同一份数据判断打勾还是打叉。做完这一步，以后调价只改这一个文件。

注意：对比表的功能项别塞进这份数据里，它和价格是两套维度，混在一起后面加一行功能要动结构。

第四步：设计试用流程

这一步要拿到的是从点击 CTA 到进入产品的完整路径，一共四段：

1. 注册页：只要邮箱和密码，Social 登录放 Google 一个就够。
2. 服务端写入试用期：注册成功时在数据库 users 表写 trial_ends_at = now() + 14 days，同时给 plan = 'trial'。
3. Onboarding：进产品后第一屏不要放仪表盘，放一个三步清单——连接数据源、创建第一个项目、邀请一位同事。每完成一步打勾。
4. 到期处理：倒计时 3 天时页面顶部出现提示条，附升级链接；到期当天不锁账号，自动降级到 Free 档，保留只读权限。

注意：试用倒计时绝对不能用前端 localStorage 存开始时间，用户改系统时间就绕过了。所有判断以后端的 trial_ends_at 为准，前端只负责显示。

第五步：埋点，确认这条链路真的在跑

这一步要拿到三个数字。在按钮和关键节点加事件：pricing_view、cta_click（带 plan 参数）、trial_started、trial_converted。埋点工具用 Plausible 或 Umami 都行，免费额度够早期用。

上线一周后看两个比值：cta_click / pricing_view 应该在 8%–15%，trial_converted / trial_started 在 15%–25%。第一个比值低，问题在定价卡；第二个低，问题在 onboarding 清单。

小结

• 先定区块顺序再让 AI 生成，否则改结构比重新生成还慢
• 三档定价，中间档高亮，CTA 文案分档，按钮下方写清要不要信用卡
• 价格抽成一份 pricing.ts，全站引用，别硬编码
• 试用期必须写在服务端，前端只做展示
• 到期降级到 Free 而不是锁号，转化率更高，投诉更少