第057期:从创意到上线:程序员必知的AI开发黄金流程,效率提升100%不是梦!

广告位招租
扫码页面底部二维码联系

据GitHub 2025年报告,78%的开发者使用AI辅助编程,平均提升开发效率35%。然而,”用AI写代码”不等于”让AI替你写代码”——高效的AI辅助编程依赖于开发者对工具的驾驭能力。

本文可结合播客节目一起收听:

喜马拉雅:https://www.ximalaya.com/sound/943949481
小宇宙同步可收听,搜“Robust:程序员的TALK PLACE”来关注节目

播客节目中,我讲了更多细节,本文则是非常精炼的文字版本。帮助你瞬间get到我要表达的观点。

引言:AI编程的信任危机与突破之道

2025年,AI编程已然渗透了各行各业,影响着软件的整个生命周期。但有趣的是,用户对AI的正面评价从70%以上跌至60%;而在应对复杂开发任务时的信任度,也从35%下滑到29%。

这种信任度的下降并非AI技术本身的问题,而是缺乏系统化的AI开发流程。大多数程序员只是零散地使用AI工具,而没有建立完整的开发体系。

经过两个月的沉浸式vibe coding实践,我总结出了一套可靠的AI开发流程,这套流程用于应对vibe coding的这种不确定性,通过流程控制,提升我们AI编程的效果。流程将AI开发分为两个关键阶段:产品startup阶段功能迭代阶段

第一阶段:产品Startup阶段 – 从0到1的AI赋能

如果你是在已有的项目上开发,寻求获得AI赋能,可以直接跳到下一阶段进行阅读。但是,如果你作为独立开发者,打算做自己的产品独立发布,那么,这个部分的内容你一定不能错过。

1.1 创意idea的梳理和完善

痛点: 大多数创意夭折在萌芽阶段,因为缺乏系统化的验证机制。

解决方案: 让AI成为你的产品经理和商业分析师。

  • 竞品分析: 利用AI的联网能力,找出全部有类似功能的产品,生成竞品对比表
  • 可行性评估: AI帮你分析技术复杂度、成本投入、目标用户、产品风格等关键因素
  • 热情测试: 如果与AI探讨后热情下降,果断放弃——这是AI帮你做的第一个重要决策

一上来就开始写代码,这是很多程序员的“通病”。程序员的做事惯性,让我们不善于在事情开始之前,对要做的事情做好调研和规划。当我们有一个点子之后,我们不应该用代码去验证它的可行性,能否做出来产品和能否能否做活产品,是完全不一样的两件事。我们应该先去验证,这个想法,是否能被市场(用户)所接受,以及付费的可能性。

在这一阶段,AI于我们来说,就是“导师”的角色,它不直接告诉我们该怎么做。核心方法论,就是让AI扮演那个对我们的创意“质疑”的人,通过让AI尖锐的对我们的创意进行质问,让我们逐渐清晰,自己的创意是否值得去做成产品。以及,将采用什么商业模式,来做活这个产品。

要完成“创意解析、市场调研、竞品分析、用户画像、产品风格”等一系列的前置工作。这些工作都可以交给AI来做。现在的AI Agent拥有联网、调用工具的能力,例如做竞品分析分析,我们可以让AI通过联网去检索和我们的创意有重叠的其他产品,并让AI为我们分析该产品在该功能上的设计与市场反馈。同样的道理,我们可以让AI帮我们去调用工具,去分析从网上找到的数据,做用户画像分析和其他调研。

形成一套自己的agent组合,每次开始新项目时都可以复用这些agent完成市场调研工作。

1.2 产品文档的创建

基于创意文档,让AI生成完整的产品文档,包括:

  • 产品概念文档:明确产品定位和核心价值
  • UI/UX设计文档:包含页面结构、功能交互、主题风格
  • 技术架构设计文档:技术选型、系统架构、数据流设计

其中,UI/UX设计文档和技术架构文档非常重要,UI/UX文档将作为UI界面生成的依据,而技术架构文档,将为AI提供代码生成的参考。

作为程序员,往往会忽略UI/UX文档的重要性,因为自己从来没有参与过设计工作,大部分时间都是接收设计师的输出来实现。而当我们要准备自己去做产品的时候,我们就需要AI来帮我们扮演设计师的角色。如何让AI可控性较高的生成设计稿,就是要靠文档。在设计文档中,不仅要让AI为我们设计应用有哪些页面,还要为我们设计具体的交互流程,不同登录态、点击态下的交互效果。

关键技巧: 不要直接修改文档,而是通过对话让AI调整——AI可以对全文进行一致性修改,避免遗漏。

之所以不要直接修改文档,而是通过与AI对话的方式让AI来修改文档,主要有两个原因:1. 你和AI之间的对话所形成的上下文是在对话程序内部的,而文档本身并不在上下文中,当你继续与AI对话的时候,你所做的修改,不在上下文中,新生成的文档,AI可能用老的内容将你修改过的内容覆盖了;2. 你自己去修改文档,可能只修改了一处,而没有把关联逻辑的其他地方也进行修改,而有的时候,你修改了一些很底层的设计,如果不让AI顺着你的思路,重新对文档进行调整,那么,你的文档本身是存在内在逻辑错误的。

1.3 UI界面的生成

Google旗下的产品stitch是专门针对应用(PC或手机)进行UI设计的工具。它实际会生成HTML代码来呈现界面,因此,当我们要调整一些颜色、主题、布局等通过调整代码就可以实现的效果时,直接调整代码就可以做到,因此,它提供了丰富的主题调整能力,这些调整基于代码修改来实现,极大的保证了设计稿的一致性。但是,虽然它是代码,但我们从用户角度,会完全把stitch作为一个设计工具来用。

使用stitch,可以很轻松的生成产品UI界面。不过,在使用时,应注意以下技巧:

  • 分批次生成: stitch一次最多生成5个页面,需要分多次完成
  • 风格迭代: 不满意就重新开启session,直到获得满意的界面风格
  • 细节完善: 通过对话调整细节,补充界面元素

完成后使用stitch的一键导出功能将界面导入aistudio。它会将设计稿界面图片和HTML代码一并提交给aistudio。

1.4 产品原型的开发

接下来,我们在aistudio中进行原型开发。aistudio是google提供的AI工具,其build模式可以轻松创建应用。Gemini对UI的生成非常敏感,可以做到几乎1:1的界面还原,是当下处理AI生成最好的工具。通过aistudio,可以非常轻松的生成应用的前端代码,目前仅支持react和angular应用。虽然它是网页端的工具,但你完全可以把它当作编程工具。在使用中,请注意以下技巧:

  • 逐步生成: 界面较多时,分多轮对话逐步生成所有页面,因为它在第一次只能生成不多于5个界面,所以,即使你从stitch导入了全部界面,也必须检查它是不是把所有界面都生成好了
  • 数据与UI分离: 通过System instructions实现高可移植性,命令它按分层理念,设计代码结构,把所有涉及后端操作的都收拢到前端数据层,用mock数据来填充,这样方便后续我们自己实现与后端的对接
  • 代码下载: 完成原型开发后将代码下载到本地

完成这一步,我们的产品原型就已经做好了。这个时候,我们就可以做一些DEMO了,我们可以给我们的客户演示新产品的完整交互,展示产品逻辑和概念。甚至,我们可以开始寻找投资人为产品注入价值。

1.5 项目代码初始化

在从aistudio下载代码之前,你就需要对项目进行初始化。

我的个人建议是,你应该有一套功能完备的框架,包括前后端的能力基础,然后可以直接让aistudio下载下来的代码,无需做任何处理,就可以直接接入这套框架。这样做的好处是,你还可以继续在aistudio修改前端代码。

建立可复用的代码框架:

# 示例:项目初始化结构
project/
├── documents/          # 给AI看的文档
├── src/               # 源代码
├── CLAUDE.md          # AI导航文档
└── RULES.md           # AI代码规范
  • documents目录: 存放所有设计文档和第三方库手册
  • CLAUDE.md: 使用claude code的/init命令生成,作为AI的代码地图
  • RULES.md: 简洁的AI代码规范,避免过多token消耗

我们尽可能的提供关于整个项目的概念、架构设计、具体实现的文档作为参考,提供给AI作为上下文,只要有足够的信息,AI可以非常轻松掌握你的项目代码,并按照你的项目逻辑设计新代码。

1.6 项目开发的正式启动

接下来,就是开始用AI写代码的阶段了。我们让aistudio帮我们完成了前端的大部分工作,后端的API接口部分则需要让AI根据产品文档、技术文档,为我们提供符合项目架构的代码。最好,你有一些写好的例子,让AI参考这些例子去实现,从而保持代码的一致性。

并行开发策略:

  1. 研发规划文档: 让agent规划开发步骤、里程碑、功能测试
  2. 多agent并行: 根据规划文档中互不冲突的任务,启用多个agent并行开发
  3. 前后端协同: AI根据产品设计和前端代码,开发后端API接口

重要前提: 拥有一套成熟的后台框架(用户系统、订单支付、消息通知等)。如果没有,建议先打磨或购买一套功能完备的框架。

1.7 项目上线

部署策略建议:

  • 不推荐: supabase+vercel方案(数据不可控)
  • 推荐: 腾讯云/阿里云海外虚拟服务器(自主可控)
  • 自动化: 构建github actions或n8n流水线进行自动化部署

初创阶段要快,不要过度追求完美测试,能用就上线。

第二阶段:功能迭代阶段 – AI最擅长的领域

接下来,就是我们程序员最喜欢的环节——功能实现的环节。然而,请暂停一下,当我们用AI来实现功能,或者对原有功能进行修改时,你应该让AI能够理解你的意图,否则,AI只会按照自己的随机发挥,给出可能完全不符合你要求的结果。因此,在进行功能迭代时,我设计了更为可靠的开发流程来让AI更稳定。

2.1 功能调研文档

在开始具体功能开发前,让AI完成全面的技术调研:

  • 产品层面拆解: 功能在产品中的定位和价值
  • 技术层面拆解: 技术方案对比、第三方库评估、风险点识别
  • 技术降级方案: 准备备用方案应对技术风险

向AI描述清楚我们要做什么功能,这个功能有哪些特点,让AI基于我们当前项目的实际进度,生成功能调研文档。此时,就像最开始的创意文档一样,AI会给我们一份它对这个功能的理解、技术方案对比、技术选型对比、风险点、优先级等等。通过阅读这份文档,我们可以知道AI是否真的理解了我们的需求。同时,我们也做到了对AI生成的代码的“心中有数”,避免所谓的“无限软件危机”。通过文档沉淀,未来开发新功能时,AI也知道当前系统中不同功能是怎么实现的。

2.2 功能实施文档

基于调研结果,把调研文档作为输入,让AI设计具体实施步骤:

  • 技术架构设计: 功能的具体技术实现方案
  • 文件级规划: 具体到修改/新增哪个文件,fake code示例
  • 步骤分解: 详细的开发步骤和预期结果

这是一个非常重要的步骤,是确保AI能够实现好效果代码的关键。有了这个文档,程序员自己也能清晰知道如何开发。我认为,这份文档是全部文档中,最关键的,它直接明确了AI要做什么,以及怎么做。如果你的AI工具是非常严格按照文档执行的,理论上,它不会出现任何幻觉。

由于我们已经让AI在文档中,非常细致的给出了要修改/新增哪些文件,甚至具体到哪个函数,而且还给出了fake code,这已经相当于是一份指令了。如果一个刚毕业的到你团队的毕业生,他不知道完整的项目逻辑,但是,如果你给了他这个文档,只要他按照这个文档做,应该也是可以完成这次任务的。

2.3 正式进入开发

接下来,我们就进入了正式的开发。开始让AI给我们写代码了。在这里,我建议你开启vibe coding的”计划”功能:

  1. 步骤拆分: AI基于实施文档进行详细步骤拆分
  2. 按步实施: 按步骤执行开发任务
  3. 实时干预: 发现问题立即打断,提供指导后继续

不同的工具可能叫法不同,cursor叫“Plan”,Trae在SOLO模式下是一个“计划”开关。通过计划功能,可以让我们更清晰的了解当前的开发进度。一般来说,计划步骤越细,稳定性效果越好。

2.4 循环调试

大部分情况下,我们都不可能一次性就得到完全想要的结果。每一轮对话结束,我们都需要验证AI编码的效果,是否符合我们的目标。这里,我提出了高效调试策略:

  • 批量提交: 一次性提交所有修改点,避免零散修改
  • 精准定位: 明确指出文件路径和函数修改方法
  • 参考图辅助: 虽然目前效果有限,但可以尝试使用
  • 学会“让我们换一个策略”:当一个问题AI始终解决不了时,可以适当“换一个策略”,通过直接改变现有交互或架构来解决

批量提交修改点这个策略非常重要。为什么要批量提交,而不是一个修改点一个修改点的提交呢?有两点。1)你提交1个修改点所执行的时间,可能与你提交多个修改点的执行时间差不了太多;2)你提交1个修改点之后,可能它修改的还不尽如人意,你还会继续修改这个点,如此多几次,剩下的点全都没动,耐心都没了。

不过,如果你提交的修改点太多,Agent可能不能一次都完成,这个时候,开启Plan/计划功能就非常重要,通过check计划列表,可以很好的解决多个修改点一次性修改点准度问题。

部分工具或模型支持“参考图”,例如在aistudio中,可以通过截图,截图后通过标注,告诉AI,“把这个按钮移除”,“点击这里的时候,改为弹出层方式呈现”……这种提供“参考图”交互的方式,如果是我们人,当然是很容易理解的,但是对于AI来说,要将截图中的内容与实际的代码对应起来,其实难度还是很大的。

黄金流程

好了,到这里,我们用AI来开发产品的所有流程就结束了。我们来总结一下,用AI来开发产品的黄金流程。

用AI来开发产品的黄金流程

在这套流程中,我们的核心思想就是“AI驱动的文档生成,文档驱动的AI编程,围绕文档构建开发流程”。在AI时代,用文档来为AI提供背景信息、运行指令,是非常妥当的一种编程模式。

AI开发的最佳实践与进阶技巧

工具选择与配置

2024年程序员必装的AI编程神器:

  1. Claude Code: 基于Claude模型,深度理解代码上下文
  2. stitch: UI界面生成的利器
  3. ai studio: 原型开发的快速平台

效率提升的黄金法则

三大核心原则:

  1. 小步快跑: 将大任务拆分为小步骤,快速验证
  2. 文档驱动: 所有开发都基于详细的文档指导
  3. 并行处理: 利用多agent能力并行处理不冲突的任务

避免的常见陷阱

AI编程的四大误区:

  1. 过度依赖: 把AI当代码生成器,而不是结对编程的另一半
  2. 缺乏验证: 不验证AI生成的代码,直接使用
  3. 文档缺失: 跳过文档阶段,直接进入开发
  4. 流程混乱: 没有清晰的开发流程,想到哪做到哪

结语:AI时代程序员的角色转变

AI编程不是要取代程序员,而是要重新定义程序员的角色。从代码编写者转变为:

  1. 产品架构师: 设计整体产品和技术架构
  2. AI训练师: 训练和指导AI完成具体任务
  3. 质量把控者: 验证和优化AI的输出结果
  4. 流程设计者: 设计高效的AI开发流程

未来属于那些能够驾驭AI的程序员,而不是被AI驾驭的程序员。

这套AI开发黄金流程已经在多个实际项目中验证,提升开发效率100%以上。关键在于建立系统化的流程,而不是零散地使用AI工具。如果你对用AI来进行产品开发的流程,有什么想法,不妨在本文下方留言,让我们一起来探讨。

2025-12-27 364

为价值买单,打赏一杯咖啡

本文价值3.64RMB