资深开发者AI全栈SaaS工作流：从规划到部署

用AI生成一个漂亮的落地页早已不是难事，但把它变成带认证、支付、数据库、实时消息和视频通话的真正应用，是另一回事。一位资深开发者完整展示了他的AI全栈SaaS工作流——不是零散地让AI生成功能，而是先规划、再设计、后实现，每一步都有可复用的方法。

核心思路：让AI先理解再动手

初学者最常见的错误是打开编辑器就直接对AI说"帮我把这个应用做出来"。问题在于：你自己都没想清楚要什么，AI只能猜测每一个功能细节，最终产出的东西往往不是你想要的。

正确做法是先花时间规划。这位开发者使用一份"Plan Mode"提示词，让AI反过来采访你——问支付用Stripe还是别的、采用一次性付费还是订阅制、订阅月费定多少。AI会提出二三十个这类问题，覆盖用户流程、页面结构、技术栈等所有关键决策点。

全部回答后，AI生成一份完整的plan.md文件，包含架构决策、技术栈假设和功能清单。这份文件随后会一直作为AI的上下文参考。作者强调：这个规划提示词是通用的，可以复用到任何项目。

他把这套流程总结为一个循环：规划 → UI设计 → 逐个构建功能 → 手动自检 → 让AI审查代码 → 修复问题 → 提交进度 → 下一个功能。

Plan Mode 是AI编程工具（如Cursor等）中的一种交互模式，其设计意图是让模型先进入"规划"状态而非直接输出代码。在该模式下，AI会暂停代码生成，转而通过追问来澄清需求边界——包括技术选型、业务规则、页面结构等。这与"直接生成"模式形成对比：后者虽然响应快，但会把所有未明确的决策都交给模型隐式猜测，导致返工。Plan Mode产出的plan.md本质上是一份可追溯的规格文档，后续每次对话都可将其作为系统提示的一部分注入，从而在整个开发周期内保持上下文一致，避免AI在不同会话中对同一功能产生相互矛盾的实现。

UI设计：参考图是关键

直接让AI"设计一个好看的界面"，得到的往往是一股AI味。作者的解法是提供视觉参考：在Pinterest搜索website design或fitness website design，找到喜欢的截图放进项目的design文件夹，然后让AI"受这张图启发"来构建整个UI。

如果要特定的背景图或素材，可以把参考截图丢给GPT或Gemini，要求生成"不含文字和logo"的版本；也可以接入Higgsfield的MCP让AI在编辑器内直接生成图片。作者提醒：用1K质量而非4K，能省下大量额度。

这个阶段先用假数据把全部页面和交互跑通。视频中构建的健身教练平台包含教练发现页、课程购买页、预约页面、教练仪表盘等，全部带着硬编码的模拟数据。UI完成后立刻提交，触发自动部署。

MCP（Model Context Protocol） 是一种开放协议，用于让AI编码代理以标准化方式连接外部工具和数据源。在本文语境中，Higgsfield的MCP服务器使AI能在编辑器内直接调用图像生成能力，无需切换到外部网站手动生成再下载。类似地，Chrome MCP让AI能够实际操作浏览器——打开页面、点击元素、读取DOM，从而完成"自己测试直到UI正常"这类闭环验证。MCP的价值在于把AI从"只会写代码"扩展为"能调用工具并观察结果"，使调试和素材生成都能在同一工作流内完成，减少人工搬运环节。

工具链：每个环节都有专门的服务

整个项目的技术栈分工明确，且大部分工具提供免费起步额度：

• Neon：从Postgres数据库扩展为完整后端，提供认证（底层用Better Auth）、实时特性和对象存储。视频中演示了预约时段的实时同步——一个用户订走某个时段后，另一个用户的界面立即禁用该时段，无需刷新。
• Stream：负责实时聊天和一对一视频通话，支持表情回应、回复、话题串和输入指示。视频通话包含摄像头/麦克风控制、屏幕共享和录制。
• ImageKit：处理图片和视频上传、优化与自适应码率流媒体播放。同一张教练照片可以按URL参数实时变换为聊天头像、个人页头图和列表卡片，无需多次上传。
• Sentry：错误监控与自动化调试。
• Cloudways Velocity：部署托管，推送代码即自动重新部署。

作者特别提到Stream的"Agent Skills"——一套Markdown格式的技能包，教会AI编码代理正确使用Stream的SDK。安装后，AI可以直接查询最新的官方文档，而不是依赖过时的训练数据。这解决了一个AI编程的常见痛点：库的API变化快，模型的记忆可能已经过时。

Agent Skills与工具集成的新范式

视频中最有价值的方法论细节，是多个服务商开始提供面向AI代理的"技能包"或"文档即上下文"能力。ImageKit的每页文档有一个"Copy for LLM"按钮，一键复制完整实现指引粘贴给AI；Stream通过CLI安装技能包后，AI能获取实时文档；Sentry则提供MCP服务器，让AI代理直接访问生产环境的错误和调试上下文。

这意味着AI编程的瓶颈正在从"模型能力"转向"上下文质量"。给AI喂准确的、最新的、针对具体工具的文档，比换一个更强的模型可能更有效。

Agent Skills 通常以Markdown文件或轻量包的形式分发，内容是该服务SDK的正确用法、常见陷阱和最新API示例。安装后，AI代理在需要调用该服务时会主动读取这些文档作为上下文，而不是依赖训练时学到的旧版本知识。这与传统的"把文档链接贴给AI"不同：技能包是可版本化、可随CLI更新的一等产物，服务商可以持续修订。对开发者而言，这意味着接入新服务时不必再手写冗长的提示词去"教"AI，只需安装对应技能包；对服务商而言，这是在新范式下争夺AI默认技术选型的一种渠道。

调试：截图即修复

作者展示了一个非常务实的调试习惯：遇到任何问题，直接截图发给AI，附一句"这是我遇到的问题，请修复"。预约时段的实时同步一开始失效，他就是靠一张截图让AI定位并修复的。同理，聊天界面UI错乱时，他把截图发过去并要求"用浏览器自己测试直到UI正常"——AI借助Chrome MCP连接浏览器实际验证，一次提示就修好了。

在仪表盘配置中遇到不确定的地方，他的做法同样直接：截图问AI"我这里需要配置什么"。AI会给出待办清单，甚至告诉你可以跳过哪些步骤。

Sentry + Seer：从被动救火到自动修复

部署后的错误监控是区分玩具项目和真实产品的分水岭。Sentry监控应用、捕获错误、提供堆栈和上下文，还能配置邮件、Slack、Discord告警。但更值得关注的是它的AI调试代理Seer。

Seer的工作分三步：检测（捕获错误）、诊断（读取GitHub上的代码定位根因）、修复（生成补丁并开Pull Request）。你只需要审核并合并PR。作者演示了完整流程——故意埋一个bug触发错误，Seer分析出原因和复现步骤，生成修复计划，最终提交PR。

更激进的是全自动模式：配置好GitHub代码映射后，当某个错误触发超过10次，Seer自动启动上述全流程，你醒来时PR已经躺在仓库里了。

需要注意的是，Seer从GitHub读取代码，而非本地机器——这也解释了为什么整个工作流坚持每完成一步就推送代码。

Seer 的工作前提是"代码映射"：需要在Sentry中关联GitHub仓库，使错误事件能够对应到具体的仓库、分支和提交。由于Seer读取的是GitHub上的远端代码而非开发者本地文件，本地未推送的改动对它不可见——这正是原文强调"每完成一步就推送"的技术原因。此外，自动修复模式设有触发阈值（如错误超过10次），目的是过滤偶发抖动、避免为噪声开PR。生成的补丁仍需人工审核合并，因为AI定位的根因可能只是症状之一，合并前应确认修复没有掩盖更深层的设计问题。

这套工作流能带走什么

视频最后，作者把Stripe支付集成留作练习，理由是流程已经演示得很清楚：拿到密钥、交给AI、遇到困惑就截图提问。

真正可迁移的不是这个健身平台，而是几个原则：先规划再动手，让AI采访你而不是你猜测AI；给参考而非指令，一张设计截图胜过十句"做得好看点"；截图即反馈，用视觉信息替代冗长的文字描述；每个服务都用它的Agent Skills或LLM友好文档，让AI拿到准确上下文；小步提交，让部署和自动修复始终有据可依。

在AI编程工具日趋同质化的今天，决定产出质量的往往不是模型，而是这套围绕规划、参考、验证和自动化的工作流程。