Vibe Coding 生产级工作流
从灵感到营收，一条可复现的 AI 开发路径
📊 整体进度4 / 15 任务完成
💡
把模糊的想法变成清晰的文档和可视化原型。这一步决定了 AI 后续生成的准确性。
📋 任务清单
- 用 Claude Code 进行需求澄清，产出 PRD.md
- 用 v0.dev 生成初版 UI，确立设计语言
- 确定技术栈选型（框架、数据库、部署平台）
📦 输出物：产品需求文档 + 可点击原型
🛠️ 推荐工具
Claude Codev0.devLovableFigma AIBolt.new
↓
🖥️
AI 辅助编码的核心阶段。关键是建立好上下文规则，让 AI 保持一致的代码风格。
📋 任务清单
- 在 Cursor 中配置 .cursorrules 约束代码风格
- 用 Bolt.new 即时运行全栈环境，避免本地配置地狱
- Git 结合 AI 生成 Conventional Commits
📦 输出物：功能完整的 MVP 代码库
🛠️ 推荐工具
CursorClaude CodeCodexWindsurfBolt.newAider
↓
⚙️
搭建后端服务和数据库。Vibe Coding 时代首选 BaaS 方案，让 AI 通过 MCP 协议直接操作数据库。
📋 任务清单
- 用 Supabase 搭建数据库和认证，AI 通过 MCP 直连操作
- AI 生成 Drizzle ORM Schema，同步 TypeScript 类型
- 配置 Row Level Security 安全策略
📦 输出物：生产可用的后端服务
🛠️ 推荐工具
SupabaseDrizzle ORMNeonXataPrisma
↓
🚀
将代码推送到生产环境。现代部署平台让这一步变得极其简单，几分钟内即可获得公网地址。
📋 任务清单
- Vercel 连接 GitHub 仓库，自动部署预览链接
- 配置自定义域名和 SSL 证书
- 接入 Sentry 错误追踪，AI 可分析 Log 定位 Bug
📦 输出物：公网可访问的生产环境
🛠️ 推荐工具
VercelCloudflare PagesSentryAxiomRailway
↓
💰
让产品产生收入并持续增长。从支付集成到数据分析，AI 可以帮助快速接入各种商业工具。
📋 任务清单
- 接入 Stripe/Polar 实现订阅或一次性付费
- 配置 Plausible 隐私友好分析，追踪转化漏斗
- 接入 Resend 发送事务邮件和营销邮件
📦 输出物：有收入的正向现金流
🛠️ 推荐工具
StripePolarPlausibleResendLemonSqueezy
📋 复制你的工作流配置，分享到社区