Vibe Coding实战：用AI工作流从零搭建出海项目

引言：为什么工作流比代码能力更重要

在AI编程时代，很多人的做法是对着AI一通输出，AI也一通输出，但过程中没有保存，做着做着出了问题就没办法回头了。这期「鸡血君」开发实战直播，UP主分享了一套经过半年验证的AI开发工作流，核心理念是：不要教AI怎么写代码，而要用管人的方式管理AI的工作流程。

这套方法论对于非程序员背景的技术出海者尤其重要——你不需要懂代码细节，但必须懂得如何建立正确的开发框架。

重新理解AI：它不是工具，是灵活的协作者

传统软件提供的是确定性——Git、GitHub Desktop这些工具，写出来的功能测试完了，不管谁用、在什么环境下，实现的都是同样的功能。

而AI提供的是灵活性——它什么都可以做，但每次做会有些区别。因此我们要把AI当成一个人来看待，而不是一个工具。

关键认知：

• AI写代码的能力比绝大多数人都强，不需要严格教它怎么写代码
• 但AI每次的想法会有些许变化，像人一样有"情绪"
• 我们要做的是建立行为准则和工作流程，用管人的方式管理AI

这与当前流行的"Harness"观点不同——UP主认为不需要过度约束AI的代码实现，而是要约束它的工作流程。

建立AI行为准则：工作留痕与文档管理

为什么工作必须留痕

AI有上下文限制，我们没办法在一个对话中完成所有事情。所谓上下文窗口（Context Window），是指模型在一次对话中能够"记住"的文本长度上限。以Claude为例，其上下文窗口约为200K tokens，GPT-4 Turbo约为128K tokens。当项目代码量超过这个限制时，AI就会"遗忘"早期的对话内容，导致前后矛盾或重复犯错。如果你像UP主一样订阅了多家AI（Claude、Codex等），甚至没办法用一个AI完成所有工作。因此，工作留痕是第一原则——文档充当了AI的"外部记忆"，让不同对话、不同AI之间能够保持一致性。

文档管理的关键原则

留痕的方法是保留文档，但这里有个重要经验：早期的文档是正资产，中后期的文档会变成负资产。过多的文档会成为项目中的垃圾，影响项目发展。这是因为AI在处理项目时会读取这些文档作为上下文，过时或冗余的文档不仅浪费宝贵的上下文窗口空间，还可能误导AI做出错误的技术决策。

只保留必要的文档，分为四个方向：

1. 如何使用项目 - 基础的README
2. 如何执行测试 - 测试流程说明
3. 如何执行部署 - 部署操作指南
4. 开发中积累的长期关注事项 - 技术决策、架构选择、依赖说明等

对于技术选型、缓存设计、并发设计等决策，要记录决策依据和最终决策，避免后续踩坑。通过周期性维护迭代，逐步完善这些文档，项目就会非常健壮。

实战流程：从设计到开发计划

第一步：版本管理

使用GitHub创建代码仓库，推荐使用GitHub Desktop客户端——它把复杂的Git操作变成了可视化界面，对非程序员友好。Git是分布式版本控制系统，它记录代码的每一次变更，允许开发者在任意时间点回退到之前的状态。对于AI开发场景，这一点尤为重要：当AI生成的代码引入了bug或偏离了预期方向时，你可以一键回退到上一个正常的版本，而不是从头开始。GitHub Desktop将Git的命令行操作（如commit、push、pull、branch、merge等）封装成图形界面，用户只需点击按钮即可完成版本管理，极大降低了非程序员的使用门槛。仓库设为public，方便社区参考学习。

第二步：用Claude Design完成UI设计

将PRD（产品需求文档，即Product Requirements Document，详细描述产品功能、用户场景、交互逻辑等需求的文档）导入Claude Design，让AI完成界面设计。设计完成后，通过Claude Design右上角的"Share → Send to Claude Code"功能，直接将设计稿发送给Claude Code。这种设计到代码的无缝衔接，省去了传统流程中设计师与开发者之间反复沟通、标注切图的环节。

第三步：在Claude Code中制定开发计划

关键操作是先切换到Plan Mode（计划模式），不要让AI直接开写代码。Plan Mode是Claude Code提供的一种交互模式，在该模式下AI只输出实施计划和技术方案，不会实际修改任何文件。这对应了软件工程中"先设计后编码"的经典原则。如果直接让AI进入Auto Mode编写代码，它可能基于自己的"默认偏好"做出一系列技术选型，等你发现不对时，大量代码已经生成，修改成本极高。Plan Mode相当于在动工前审图纸，确保方向正确再投入资源。直接开稿的结果往往效果不好。

UP主在计划阶段做了以下技术决策调整：

• 样式方案：要求使用Tailwind CSS（AI默认可能不选这个）。Tailwind CSS是一种"实用优先"（Utility-First）的CSS框架，与传统CSS框架（如Bootstrap）预定义组件不同，它提供大量原子化的CSS类名（如p-4表示padding为1rem，text-blue-500表示蓝色文字），开发者通过组合这些类名来构建界面。这种方式特别适合AI编程场景：AI可以直接在HTML标签中写样式，不需要在多个文件之间跳转维护CSS，减少了上下文切换的复杂度，也降低了样式冲突的风险。
• 图标系统：选择Firstferd而非常见的Lucide，因为支持填充图标且包含品牌图标（如Twitter、GitHub等社交平台logo），这在出海产品中非常实用
• 部署平台：Cloudflare Worker + OpenNext（而非更贵的Vercel）。Cloudflare Worker是一种边缘计算（Edge Computing）平台，代码运行在全球300多个数据中心的边缘节点上，用户的请求会被路由到距离最近的节点处理，延迟极低，非常适合面向全球用户的出海项目。但Worker使用的是V8引擎而非完整的Node.js运行时，导致Next.js等框架无法直接运行。OpenNext正是为了解决这个问题而生的开源适配层，它将Next.js应用转换为可以在Cloudflare Worker上运行的格式。
• 基础设施：全部使用Cloudflare生态（D1数据库、KV键值存储、R2对象存储等），统一技术栈可以减少跨平台集成的复杂度
• 认证方案：BetterAuth，先做邮箱+密码登录，暂不做社交登录。BetterAuth是一个开源的身份认证库，专为现代Web框架设计，相比NextAuth等方案提供了更灵活的数据库适配和更细粒度的控制。先做基础登录而暂不做社交登录（如Google OAuth）是一个务实的MVP策略——社交登录涉及第三方OAuth配置、回调URL管理、token刷新等额外复杂度，可以在产品验证后再逐步添加。

第四步：进入Auto Mode执行

计划确认后，选择Auto Mode让Claude Code自动执行。Auto Mode下AI会自主读取文件、创建文件、安装依赖、运行命令，整个过程几乎不需要人工干预。整个过程从讨论需求到出计划大约35分钟，执行代码生成大约几个小时。相比传统开发流程（写项目计划、技术评审、分工排期等需要一两周），效率提升极为显著。

AI工具选择建议

核心原则：选你能负担得起的最贵的AI。

这个原则背后的逻辑是：更贵的AI模型通常意味着更大的参数量、更长的上下文窗口、更高的推理能力和更快的响应速度。在AI编程场景中，模型能力的差距会直接体现在代码质量、bug率和一次性成功率上，而这些差异最终都会转化为你的时间成本。

预算	推荐方案
2000元/月	Claude Code 200美金档
700-800元/月	Claude Code 100美金档
不想翻墙	OpenAI Codex 100美金档
更低预算	国产DeepSeek

UP主不建议使用闲鱼合租账号或中转站，因为便宜的方案往往有坑——合租账号可能面临封号风险，中转站的API响应速度和稳定性无法保证，而且可能存在数据安全隐患。时间成本更高。核心逻辑是：用钱买时间，再把时间卖得更贵。

部署平台选择：Cloudflare vs Vercel

• Cloudflare Worker：最便宜，5美金月租即可获得大量额度（包含每天10万次免费请求），但需要配合OpenNext使用，有一定适配工作。Cloudflare的全球CDN网络和边缘计算能力使其特别适合出海场景，用户无论在哪个国家访问都能获得较低的延迟。
• Vercel：最简单，与Next.js深度集成，git push即可自动部署，零配置体验极佳。但有流量后会很贵——Vercel的Pro计划20美金/月，但带宽和Serverless函数调用超出免费额度后按量计费，对于流量较大的项目月费可能飙升到数百美金。
• Supabase：也是常用选择，它本质上是一个开源的Firebase替代品，提供PostgreSQL数据库、认证、存储、实时订阅等后端即服务（BaaS）功能，适合需要快速搭建后端的项目。

对于出海项目，Cloudflare的性价比最高，但技术门槛稍高一些。建议在项目早期就确定部署平台，因为不同平台的运行时环境差异（如Node.js vs Edge Runtime）会影响代码的编写方式和依赖选择，后期迁移的成本非常高。

总结：AI开发工作流的核心要点

这期实战的核心收获：

1. AI开发的关键不是代码能力，而是工作流管理——就像管理一个能力极强但需要明确指引的团队成员
2. 从一开始就搭好框架，否则后期"眼看离成功差一步却够不上"会非常痛苦。这包括版本管理、文档规范、技术选型和部署方案的确定
3. Plan Mode先行，不要让AI直接开写。花30分钟做计划，可以节省后续数小时的返工时间
4. 文档要精不要多，只保留必要的决策记录。随着项目推进，定期清理过时文档
5. 选最好的工具，用钱换时间。在AI编程时代，工具的选择直接决定了你的生产力上限

下一期将展示Plan执行完成后的部署上线和效果验证，敬请期待。