Vibe Coding新手完整教程：从零构建并上线一个SaaS产品

AI帮你生成一个漂亮的页面并不难，难的是让用户真正能用——注册登录、数据持久化、订阅付费、刷新后数据还在。这正是本教程要解决的问题：用Vibe Coding的方式，从零规划、设计、构建、测试并上线一个完整的发票SaaS产品。

整个流程并非"一句话生成一个App"那么简单。核心方法论是：先用ChatGPT做深度规划，再借助Hostinger AI Builder逐步构建，最后部署到自定义域名。中间穿插了大量的提示词设计、设计系统选择、功能测试和移动端优化。

什么是Vibe Coding？

Vibe Coding是一种用自然语言描述需求、由AI生成代码来构建软件的方式。你不需要手写每一行代码，而是描述你想做什么，AI生成代码，你测试结果、发现问题、再让AI改进。

基本工作流可以概括为三步：构建 → 检查 → 修正。创建初版，审视AI生成的内容，识别问题，持续迭代直到应用正常运行。

初学者最常犯的错误，是打开AI构建工具后输入"帮我做一个App"，然后期待立刻得到完美产品。AI的输出质量取决于你的引导质量——规划越清晰、需求越具体、步骤拆分越细，最终结果越好。

适合Vibe Coding入门的项目包括：落地页、计算器、任务追踪器、发票工具和小型商业工具。这些项目聚焦、实用、更容易完整交付。不建议一上来就做下一个亚马逊级别的复杂平台。

工具选择：为什么用Hostinger AI Builder

初学者可以选Loveable、Base44和Hostinger AI Builder，它们能创建包含数据库、用户账户等核心功能的完整应用。有经验的开发者可以用Cursor和Claude Code，但需要更多技术决策。

本教程选择Hostinger AI Builder，原因是它在同一个平台内集成了域名注册、托管、支付集成和AI构建能力。作者注册了jfdtutor.com域名并连接站点，域名解析可能需要几小时到一两天，但期间可以继续构建。

工具面板提供了几个实用功能：AI积分查看和购买（100积分约$5，50积分约$20）、项目复制（方便在不影响主站的情况下做实验）、账户共享（团队协作）、完成提示音。内置的AI Agent可以随时对话而不消耗积分。

AI积分是这类托管式AI构建平台常见的计费单位。与按调用次数直接扣费不同，积分通常被设计成可购买的额度包，构建过程中的每一次生成、修改、迭代都会消耗一定数量。因此理解积分的消耗节奏很重要：规划越清晰、提示词越精确，返工越少，积分浪费也越少。这也解释了作者为什么把最耗费反复沟通的规划环节放到ChatGPT里完成，只在需要真正落地成可运行代码时才消耗构建平台的积分。

规划阶段：用ChatGPT设计整个产品

这是整个流程中最关键也最容易被跳过的部分。作者没有直接在AI Builder里规划，因为那会消耗积分且不够灵活。取而代之的是在ChatGPT中完成完整的规划工作。

第一步：生成首页设计截图

第一个提示词要求ChatGPT为一个叫"Simple Voice"的高级发票SaaS生成3个不同风格的首页设计截图。关键技巧是附上一个设计系统文件——作者从getdesign.md下载了Airtable的设计系统，让ChatGPT基于真实的色彩、字体、组件规范来设计。

ChatGPT生成了三个方案：极简风、专业商务风、创意风。作者选择了第二个——专业且简洁，绿色调与发票产品"处理金钱"的定位契合。

**设计系统（Design System）**是一套约束产品视觉与交互的规范集合，通常包含色彩令牌、字体层级、间距规则、圆角、阴影以及可复用组件（按钮、输入框、卡片）的定义。它的价值在于把"好看"翻译成AI可以遵循的具体规则。如果只对AI说"做得专业一点"，生成结果会高度随机；而提供一份真实的设计系统文件后，AI就在明确的色板、字重和组件样式内工作，不同页面之间也更容易保持视觉一致，这正是作者下载 Airtable 设计系统的原因。

第二步：生成仪表盘设计

第三个提示词聚焦仪表盘设计，要求包含侧边栏导航、顶栏搜索和通知、创建发票按钮、总收入/已付/待付/逾期统计卡片、收入图表和最近发票列表。ChatGPT生成的结果让作者"被惊艳到了"。

为什么先要截图而不是直接生成构建提示词？作者给出了两个理由：一是在动手之前就能看到最终效果的大致方向；二是让AI先"可视化"再输出构建方案，理解更深入。

第三步：生成分步构建计划

第五个提示词是整个规划阶段的核心——要求ChatGPT生成一个4到6步的构建计划，每一步的提示词不超过2000字符，每步只关注当前任务，基于前一步继续，并且明确要求AI Builder不要重新设计已完成的区块。

这个约束非常重要。作者指出，很多AI构建工具在执行后续步骤时会不小心重新设计前面的页面，导致之前的成果被覆盖。

**提示词长度限制（约2000字符）**并非随意设定，它与模型的上下文管理和输出稳定性直接相关。过长的单次提示词会把多个不相关的任务混在一起，模型容易在后期"遗忘"前面的约束，出现遗漏或自我覆盖。把构建拆成4到6个短步骤后，每一步都在一个较小的决策空间内执行，出错时也更容易定位到具体是哪一步、哪一句提示词导致的问题。这种"小步提交"的思路和软件工程里的增量开发是一致的。

构建阶段：分五步完成SaaS

拿到ChatGPT生成的分步提示词后，作者开始逐步在Hostinger AI Builder中构建。

第一步构建首页。AI Builder生成了包含产品展示、功能亮点、三步流程说明、模板浏览、用户评价和定价区块的完整首页。作者的第一反应是"完全不像AI生成的粗糙产物"。

第二步构建认证系统和仪表盘。AI Builder生成了注册表单、登录系统、密码重置、以及包含设置、发票、客户端、仪表盘的完整后台。作者创建了测试账户，验证了账户创建、仪表盘访问、业务设置修改等功能确实可用。

第三步构建数据库和核心业务逻辑。这一步涉及用户配置、客户管理、产品服务、发票明细、自动计算金额、发票状态（草稿/已付/待付/逾期）等。每个记录都归属于当前登录用户，用户之间数据隔离。

第四步完善发票工作流和公开页面。发票列表支持搜索、筛选、状态编辑、保存草稿、删除等功能。之前预留的模板页、产品页、定价页、资源页都填充了实际内容。

第五步实现订阅逻辑。免费计划每月最多3张发票，付费计划$3/月无限发票，包含当前计划展示、账单状态、取消和续费处理。

测试与发布

所有页面构建完成后，作者进行了完整的端到端测试：创建客户、生成发票、预览发票、打印或保存为PDF。生成的发票包含了发件人信息、客户信息、明细项、税额、折扣和总计。

支付集成通过Hostinger的e-commerce模块连接Stripe完成。在移动端适配方面，作者用了一个优化提示词来居中文本、修复死链接、调整响应式间距。

最终点击发布按钮，网站上线到自定义域名。

核心经验总结

整个项目最有价值的不是最终产品本身，而是这套方法论：规划 → 分步构建 → 测试 → 修正 → 发布。作者反复强调，Vibe Coding不等于"一句话生成一个App"，而是需要你持续参与规划、审视输出、做出决策。

值得记住的几个技巧：用真实的设计系统文件引导AI生成设计；让AI先可视化再动手；生成分步提示词而非一次性巨型提示词；明确要求AI不要覆盖已完成的工作；每一步构建后都要实际测试。

当你理解了这套流程，就能用同样的思维方式去构建完全不同的应用。

背景补充

订阅计费与Stripe的作用：SaaS的付费能力通常不由构建平台自己实现，而是交给专业支付服务商处理。Stripe 在其中承担的是支付信息收集、订阅周期管理、扣款与失败重试、发票与账单记录等职责，平台侧只需要做两件事：创建订阅（或用结账页引导用户付款）和监听支付状态变化，据此决定用户当前处于免费还是付费计划。本教程中"每月3张发票"与"$3/月无限发票"的区分，正是靠这套状态判断来执行的，因此支付成功后的状态同步是必须测试的环节。