【AI赋能前端研发】落地全流程分析

大家好,我是LV。 都已经24年了,早已过了狂热追捧AI的时候,我现在看到那些 爆炸性的 的内容早就麻木了。 真正能脚踏实地,通过AI赋能实际工作流中,才是牛逼。 笔者未来很长一段时间将聚焦AI赋能。

大家好,我是LV。

都已经24年了,早已过了狂热追捧AI的时候,我现在看到那些 爆炸性的 的内容早就麻木了。

真正能脚踏实地,通过AI赋能实际工作流中,才是牛逼。

笔者未来很长一段时间将聚焦 AI赋能工作流

本篇讨论AI赋能前端研发领域,这个话题也将会是 一系列的篇章,会总结笔者从 0 ~ 1 使用 AI 赋能前端的经验和探索历程。

分享出来,抛砖引玉,希望跟感兴趣的小伙伴有更多深入的交流,探索AI赋能的更多可能性。

欢迎大家点赞收藏防失联,不多说,开始。

市场现状

先说结论,从我下场实践,以及目前了解到的前端AI现状来看:

“目前还处在早期的阶段,前端未死,AI赋能大有可为!”

市面上的AI赋能前端案例,抽取部分代表性的,总结了下:

对话生成页面

  • 直接生成整个网站,如 Dora,主打生成官网

【AI赋能前端研发】落地全流程分析

详见:www.dora.run/

  • Vercel V0,生成 React 组件

【AI赋能前端研发】落地全流程分析

详见:v0.dev/

图片生成页面

  • ScreenShotToCode,截图转换为页面,包括html,react等代码,Star高的离谱。

【AI赋能前端研发】落地全流程分析

详见:github.com/abi/screens…

  • draw-a-ui,将原型草图转换为代码

详见:github.com/SawyerHood/…

辅助性的代码生成工具

  • GitHub Copilot,Github做的辅助编程工具,十分推荐,官方也十分有自信,从slogan可以看出:The world’s most widely adopted AI developer tool.(世界上使用最广泛的AI开发工具)

【AI赋能前端研发】落地全流程分析

详见:github.com/features/co…

  • GPT4、Claude3 等通用 LLM:用他们辅助编程也是不错的,比如当成搜索引擎来用。

如上,确实枝繁叶茂,百花齐放。

但是,用这些产品一概而论来替代前端,却还远远不够:

一、从广度来看

如今是 大前端,不是单纯的“页面仔”。

还包括:前端工程化、前端框架、PC端、H5、原生移动端、可视化、跨平台(Taro、Uni-App)、小程序、Node伪全栈等等。

用几个AI生成页面产品来表达:“前端已死”,还是有点太笼统了。

从深度来看

确实,前端大部分人的工作都是在写页面,那些AI生成页面的产品真的能够取代前端写页面这部分的工作吗?

某些写页面的工作可以,比如一次性的活动界面,无需二次迭代的静态页面等。

但是绝大部分是不能。

要知道,市面上的AI生页面产品,大都也是通用型的,它不会根据你公司的工作规范或者私有化的组件库来生成页面。


从广度和深度来看,AI赋能前端,目前阶段还没有统一的解决方案。

因此,我们都是各自场景下的AI赋能探索者。

AI赋能金字塔模型

笔者总结了一个AI赋能工作流的模型—金字塔模型,AI赋能前端同样也适用。

【AI赋能前端研发】落地全流程分析

如上图,当做一件复杂的事情时,我们会拆分成各个环节,每个环节或许还能拆分为多个步骤。

AI赋能同样如此,总结起来:基于一个规范工作流,拆分为功能职责单一的环节或者步骤,尝试用AI针对每个环节/步骤进行赋能验证。

其中有2点需要注意一下:

1、2/8原则。

赋能20%的的重要环节,或许能提升整体80%的效能,因此需要评估一下AI赋能每个环节/步骤的优先级,优先赋能性价比最高的环节/步骤。

2、拆分颗粒度。

不拆分:会导致AI在理解复杂任务的时候容易“迷惑”。

拆分过度:容易简单问题复杂化。

前端工作流拆分

基于AI赋能金字塔的理论,我们来拆分前端的工作流。

不同公司的开发规范可能会不一样,笔者以自己公司的规范为例,大家可以做个参考。

AI赋能的金字塔如下:

【AI赋能前端研发】落地全流程分析

共分为2个环节,4个步骤

一、业务组件开发

1.1 从 0 ~ 1 开发业务组件

1.2 从 1 ~ 100 迭代业务组件

二、对接联调

2.1 从 0 ~ 1 对接联调

2.2 从 1 ~ 100 联调迭代

其中,重点放在 业务组件开发 环节的 从 0 ~ 1 开发业务组件步骤。

因为这个环节占据了我们整个页面开发流程80%的工作,属于重点赋能对象。

或许可以实现:只花整体20%的时间就能够完成80%的工作量。

确定各环节(步骤)赋能指标

如何评判某个环节/步骤的AI赋能是否有效果?

可以针对每个步骤/环节设置检测指标,如:效率、质量方面的指标,对比赋能前后的差异。

AI赋能前端开发 的工作流来看,包含2大核心指标:

1、质量,包括功能质量和代码质量。

进行功能对比测试、业务组件的单元测试 & 集成测试 & 代码Review等。

2、效率,对比开发同样质量的代码,所需要的时间。

总结

  • 针对目前市场前端领域的AI产品,从广度和深度分析来看:前端未死,AI赋能前端大有可为。

  • AI赋能金字塔模型:基于一个规范工作流,拆分为功能职责单一的环节或者步骤,尝试用AI针对每个环节/步骤进行赋能验证。

  • 2/8原则:赋能20%的环节或许能提升整体80%的效能


后续篇章,笔者将从 0 ~ 1 开发业务组件1 ~ 100 迭代业务组件0 ~ 1 对接联调等角度进行分析。


AI赋能,共勉。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
人工智能

【AI大模型应用开发】0. 开篇,用OpenAI API写个Hello World !

2024-6-1 23:36:42

人工智能

Stream Response 流式返回

2024-6-2 3:38:27

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索