Spec模式赋能百度网盘场景提效

本文将通过2个实践案例,带大家感受SPEC模式的魅力~看Spec如何在百度网盘场景下赋能研发提效!

Case 1 :通过Spec模式生成代码库Rules数据看板

百度网盘的技术老师最近在做通用Rules开发,过程中的监控指标是团队代码库Rules占比,但缺少一个能看到各团队占比的页面,现在的任务就是从0到1去解决这件事。当然,不是要生成一个临时项目,而是生成一个可持久维护的、符合当前团队技术栈的项目。

观看【通过Spec模式,从0到1生成各团队代码库Rules占比页面】视频👉mp.weixin.qq.com/s/z2Qmp7Blq...

实际工作中经常会遇到一个痛点:在内部开发过程中,设计资源往往非常紧张,尤其像数据统计这类页面,经常没有现成的设计稿,因此也无法直接使用F2C(Figma to Code)这类功能。如果走传统开发模式,从零开始构建一个功能,需要到处寻找合适的组件、梳理交互逻辑,整个过程既耗时又容易出错。现在有了SPEC模式 ,情况就完全不同了。它能够带领我们从需求设计 出发,一步步推进到架构设计 ,最后进入执行阶段,帮助我们高效、系统地实现一个完整功能,大大提升了整体效率。

在介绍SPEC模式流程前,先设问: "面临'无图开发'这个困境,一个理想的辅助工具,应该从哪几个环节帮助我们?理解需求、搭好架子、生成代码,这其实就是SPEC模式的核心脉络。"

一起看下SPEC生成效果,可以看到,Zulu已经成功完成了:

1 完整的工程化能力: 完整的工程化能力是项目完成的一大步,后续也都可以基于本次构建团队的TPL模板以进行复用

  • 工作空间配置
  • 符合规范文件结构:monorepo拆分为业务包frontend、以及shared便于后续多个业务包复用相同逻辑

2 可维护性强的代码:

  • 生成人类可读'的代码,类型定义和使用

3 合理的业务分层:

  • 组件、页面、状态管理、Service服务、工具函数等符合常规分层逻辑

4 符合预期的功能:

  • 各个团队本身的Rules占比一目了然;
  • 如果需要的话,只需给它说一下美化样式或者增加图表展示即可;
  • 甚至还额外做了一些他觉得需要,我们没有想起来的功能,如数据下载;
  • 本次的Prompt有点类似『闲聊版』,并没有很结构化,它具备一定的信息提取整理能力,说明使用AI编程的门槛并不高。结构化之后,可以实现更复杂的任务。

Spec模式本质上是一种 "先计划,后执行" 的人机协作范式。它要求AI在动笔写代码之前,必须先把它的理解、方案和任务拆解写成详细的文档,并提交给人来确认。真正约束了AI生成代码的行为,让其更加规范,生成更准确的代码。

这就像建筑施工前需要审核设计蓝图一样,把质量管控的关口大幅前移,避免在建设过程中有问题出现返工的情况。

本案例中看到的是SPEC模式处理"从0到1"场景的能力。但它更大的想象空间在于,它可能成为团队内部统一需求表述、快速产出技术方案原型的'协作桥梁': 产品、后端和前端,或许可以用同一种"语言"来沟通功能的雏形。

Case 2 :用Zulu进行AI代码审查

在刚才生成数据看板的场景,SPEC模式能大幅减少因方向错误、理解偏差导致的无效工作和返工,提升了代码生成质量。但如果之前的项目没有使用SPEC模式,现在想要进行代码审查,优化一下代码,有什么好的方法呢?传统上一般是靠人工逐字逐句审查代码的问题,费时费力,现在可以借助Zulu的能力在多个场景(如编码阶段、流水线构建阶段等)帮助做代码审查。

在用Zulu进行代码审查前,要先准备符合本团队项目最佳实践(本团队的函数命名、Store使用、性能质量、组件使用等)的和本技术栈通用型(包含运行时崩溃风险、严重的逻辑和状态错误、内存泄露问题、原型污染、安全红线等)常见问题的Rules。

下面针对百度网盘GenFlow超能搭子项目做代码的审查演示,GenFlow超能搭子能帮你做文件智能整理、能生成视频、生成PPT。(GenFlow功能在百度网盘APP首页底部最显眼的TAB,WEB端、桌面端也有相应入口)

本地添加了一部分问题代码,便于演示。

观看【在编码阶段进行团队项目规范的代码审查】视频👉mp.weixin.qq.com/s/z2Qmp7Blq...

观看【在编码阶段进行技术栈严重问题的代码审查】视频👉mp.weixin.qq.com/s/z2Qmp7Blq...

如果没有在本地使用代码审查,或者某同学需要对同学A\B\C等的代码进行评审,众多代码的审查费时费力,如果把Zulu的代码审查能力接入开发工作流中,是不是会极大提高代码审查的效率呢?

观看【在构建阶段进行技术栈严重问题的代码审查】视频👉mp.weixin.qq.com/s/z2Qmp7Blq...

针对团队的所有代码审查,可以在内部平台管理和监控,对AI代码审查的拦截效果做评估和改进,形成代码审查的正向循环飞轮。经过代码审查,Comate找到了以上代码修改的所有漏洞。

上文演示的AI代码审查功能清晰、高效。它通过系统化的步骤------从智能分析变更文件、依据规范逐项检查,到自动评分并生成详细报告和建议------真正实现了在代码提交评审之前,就能主动发现和修复问题。 这样一来,不仅大大提升了代码质量,也节省了团队反复沟通和修改的时间。

相关推荐
QT 小鲜肉2 小时前
【Linux命令大全】001.文件管理之find命令(实操篇)
linux·运维·前端·chrome·笔记
大模型教程2 小时前
AI Agent开发路线图2025:从入门到精通,一文读懂智能体技术
程序员·llm·agent
大模型教程2 小时前
AI 工程学习路线图:8 个方向,从基础到前沿
程序员·llm·agent
一念之间lq2 小时前
Elpis 第四阶段· Vue3 完成动态组件建设
前端·vue.js
akira09122 小时前
滚动控制视频播放是如何实现的?GSAP ScrollTrigger + seek 实践 vivo官网案例
前端·产品
用户636836608552 小时前
前端使用nuxt.js的seo优化
前端
OldBirds2 小时前
烧脑时刻:Dart 中异步生成器与流
前端·后端
湛海不过深蓝2 小时前
【echarts】折线图颜色分段设置不同颜色
前端·javascript·echarts
昨晚我输给了一辆AE862 小时前
关于 react-hook-form 的 isValid 在有些场景下的值总是 false 问题
前端·react.js