VibeCoding实践，AI能为开发提升多少效率？

VibeCoding在社交平台上一直是一个有争议性的话题。有人觉得AI能写代码之后不再需要程序员了，有人觉得AI写的代码实现不了复杂的功能，有人觉得AI写的代码有bug修复起来更花时间，有人觉得AI会偷走自己的业务代码。。

但不可否认的是，对于大多数开发者，AI已经是工作中的一部分。下面我会分享一个使用AI完成一个桌面端小工具的例子。体验一下使用AI能提升多少效率。

当然如果不想看例子我也把总结放到最前面。

总结

AI没有办法完成所有工作：

用户输入需求，AI直接生成产品。这种理想化的场景目前基本上不可能实现。原因不仅在于AI能力本身不足，也在于非专业用户表达需求的能力不足。人们往往愿意承认自己不是一个程序员，但不愿意识到自己也不是一个产品经理。在一些复杂的业务场景中，写代码比使用自然语言描述效率更高。

AI作为效率工具，对人力的替换方式是：高级程序员 + 初级程序员 => 高级程序员 + AI

很多人认为的AI替代程序员是从产品经理 + 程序员 + 测试 => 产品经理 + AI +测试。但事实上的替换过程是：高级程序员 + 初级程序员 => 高级程序员 + AI。这个过程已经在作画，写网文等类似领域反复验证。由AI生成大量的素材+高级的专业人员来进行审查筛选=>产出将会变成标准的模式。
题外："打怪升级"的技能提升方式将被架空，初级的专业人员不再被需要，"出了新手村就是大boss"的情况会越来越常见。。

使用AI最佳的场景：实现起来困难，但是验证起来简单。

由于幻觉的存在，AI返回的内容并不总是可靠的，必须要经过人的审查/验证才可信。但是如果一件任务验证的难度超过人直接去做这件任务的难度，那就得不偿失了。我这里可以提出两个比较常见的场景：
- 前端开发补全css。前端开发写css是一件非常费时的事情，但是用AI补全css，提出要求与既有风格相符。AI生成代码后，开发只需要在前端页面验证是否符合预期即可。
- 实现模块化的单点功能，比如实现防抖，节流，重试等常见的标准能力。同样AI生成代码后，开发只需要验证单点功能是否符合预期即可。

工具有适用的场景。

我们不会因为自行车不能在水上骑，就认为自行车没有用，也不会期望自行车能解决所有的出行问题。

现在是开发者VibeCoding的窗口

现在的AICoding对非专业的用户还不够友好，但是对专业的开发者开发效率的提升非常可观。这对个人/小开发团队来说是一个好的窗口。

从零开始开发桌面端工具

工具总览

技术栈：桌面端 Tauri (前端 Angular，后端 Rust) 服务端 (java)。
Vibe Coding：Tauri前端：910(AI生成750) Tauri后端:190(AI生成90) 合计AI生成代码 840 / 1100 76%。
开发时长：4小时。

业务背景

当前工作中，我们通常在windows上开发代码打包，在实验室环境上部署服务进行测试。因此我希望能开发一个桌面端的小工具。来解决打完包到部署服务之间的GAP。

实现的基本功能如下：

提供一个简单的用户输入界面，包含如url，实验室环境ip/用户名/密码等必须字段。
访问输入的url地址下载服务打包好的zip包。
将zip包推送至实验室环境。
在实验室环境顺序执行一些bash脚本，完成服务的部署。

用到的AI工具：豆包。(当然使用Trae会有更好的体验，但是考虑安全因素不使用外部ide)

输入限制：不输入任何已有的本地代码，仅允许输入提示词、实现本工具新写的代码、豆包自身生成的代码。

确定技术栈

因为我没有太多开发桌面端的经验，因此也通过简单描述工具功能寻求豆包建议。可以看到首次提问时我对整个工具并没有非常清晰的规划，但是豆包仍然给出了多个建议。

同样对于不熟悉的领域也寻求了专家的建议，出现了和豆包建议重合的框架Tauri。因此最终选用的Tauri框架来实现。

搭建Tauri框架(累计耗时0.5小时)

打开Tauri官网 tauri.app/start/

根据官网文档安装依赖：

按照官网文档创建项目：

考虑到团队内部的技术积累，选取前端UI模板Angular：

前端Coding

人工完成前端基本功能开发(累计耗时1小时)

前端实现直接手写了html+ts代码，主要包含两个功能：

输入url-查询-返回表单-过滤条件
表单中勾选文件，点击下载

使用自然语言描述对我而言更复杂也更花费时间，手写代码实现基本的页面框架更高效。代码中为相同类型的组件预置了相同的class，我期望这种写法在后续使用AI补全css代码时能得到更好的结果。

html 复制代码

<main class="container">
  <form class="url-form" (submit)="query($event, inputUrl.value)">
    <div class="form-row">
      <textarea #inputUrl id="url-input" class="url-text textarea" placeholder="支持传入多个url 每个url单独一行 例：
https://xxxx1.com
https://xxxx2.com
......"></textarea>
      <button type="submit" class="button primary">查询</button>
    </div>
    <div class="form-row">
      <input type="text" class="search-text  input" placeholder="请输入搜索关键字" [(ngModel)]="filterKey"
        [ngModelOptions]="{standalone: true}" (input)="applyFilter()">
      <input type="checkbox" class="checkbox" [(ngModel)]="selectAll" (change)="toggleAll()"
        [ngModelOptions]="{standalone: true}" /> 全选
      <input type="checkbox" class="checkbox" [(ngModel)]="onlyZip" (change)="applyFilter()"
        [ngModelOptions]="{standalone: true}" /> 仅显示zip/gz文件
    </div>
  </form>
  <div class="table">
    <ng-container
      *ngFor="let v of data.filteredData | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage }">
      <div class="fileRow">
        <input type="checkbox" class="checkbox" [(ngModel)]="v.checked" (click)="checkBoxClick($event,v)" [ngModelOptions]="{standalone: true}" />
        <div class="fileText">{{v.name}}</div>
      </div>
    </ng-container>
  </div>
  <form (submit)="download($event,user.value,userPwd.value,roowPwd.value,turnkey.value,downLoadPath.value)">
    <div class="group">
      <div class="row">
        <div class="label">登录用户：</div>
        <input #user id="user-input" class="input" placeholder="请输入登录用户" value="sopuser" />
      </div>
      <div class="row">
        <div class="label">登录用户密码：</div>
        <input #userPwd id="userPwd-input" type="password" class="input" placeholder="请输入登录用户密码" value="" />
      </div>
    </div>
    <div class="group">
      <div class="row">
        <div class="label">ip：</div>
        <input #ip id="ip-input" class="input" placeholder="请输入turnkey ip地址" value="" />
      </div>
      <div class="row">
        <div class="label">下载目标目录：</div>
        <input #downLoadPath id="downLoadPath-input" class="input" placeholder="请输入下载目标目录：" value="" />
      </div>
    </div>
    <div class="download-info" *ngIf="data.fileList.length > 0">
      <button type="submit" class="download-button button primary">下载</button>
    </div>
  </form>
</main>