大家好，我是LV。
都已经24年了，早已过了狂热追捧AI的时候，我现在看到那些 「爆炸性的」 的内容早就麻木了。
真正能脚踏实地，通过AI赋能实际工作流中，才是牛逼。
笔者未来很长一段时间将聚焦 「AI赋能工作流」。
本篇讨论「AI赋能前端研发领域」，这个话题也将会是 「一系列的篇章」，会总结笔者从 0 ～ 1 使用 AI 赋能前端的经验和探索历程。
分享出来，抛砖引玉，希望跟感兴趣的小伙伴有更多深入的交流，探索AI赋能的更多可能性。
欢迎大家点赞收藏防失联，不多说，开始。
市场现状
先说结论，从我下场实践，以及目前了解到的前端AI现状来看：
“目前还处在早期的阶段，前端未死，AI赋能大有可为！”
市面上的AI赋能前端案例，抽取部分代表性的，总结了下：
「对话生成页面」
直接生成整个网站，如 Dora，主打生成官网
详见：https://www.dora.run/
Vercel V0，生成 React 组件
详见：https://v0.dev/
「图片生成页面」
ScreenShotToCode，截图转换为页面，包括html，react等代码，Star高的离谱。
详见：https://github.com/abi/screenshot-to-code
draw-a-ui，将原型草图转换为代码
详见：https://github.com/SawyerHood/draw-a-ui
「辅助性的代码生成工具」
GitHub Copilot，Github做的辅助编程工具，十分推荐，官方也十分有自信，从slogan可以看出：The world’s most widely adopted AI developer tool.（世界上使用最广泛的AI开发工具）
详见：https://github.com/features/copilot
GPT4、Claude3 等通用 LLM：用他们辅助编程也是不错的，比如当成搜索引擎来用。
如上，确实枝繁叶茂，百花齐放。
但是，用这些产品一概而论来替代前端，却还远远不够：
「一、从广度来看」
如今是 「大前端」，不是单纯的“页面仔”。
还包括：前端工程化、前端框架、PC端、H5、原生移动端、可视化、跨平台（Taro、Uni-App）、小程序、Node伪全栈等等。
用几个AI生成页面产品来表达：“前端已死”，还是有点太笼统了。
「从深度来看」
确实，前端大部分人的工作都是在「写页面」，那些AI生成页面的产品真的能够取代前端「写页面」这部分的工作吗？
某些写页面的工作可以，比如一次性的活动界面，无需二次迭代的静态页面等。
但是绝大部分是不能。
要知道，市面上的AI生页面产品，大都也是「通用型」的，它不会根据你公司的工作规范或者私有化的组件库来生成页面。
从广度和深度来看，AI赋能前端，目前阶段还没有统一的解决方案。
因此，我们都是各自场景下的AI赋能探索者。
AI赋能金字塔模型
笔者总结了一个AI赋能工作流的模型---金字塔模型，AI赋能前端同样也适用。
如上图，当做一件复杂的事情时，我们会拆分成各个环节，每个环节或许还能拆分为多个步骤。
AI赋能同样如此，总结起来：基于一个规范工作流，拆分为功能职责单一的环节或者步骤，尝试用AI针对每个环节/步骤进行赋能验证。
其中有2点需要注意一下：
「1、2/8原则。」
赋能20%的的重要环节，或许能提升整体80%的效能，因此需要评估一下AI赋能每个环节/步骤的优先级，优先赋能性价比最高的环节/步骤。
「2、拆分颗粒度。」
不拆分：会导致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赋能，共勉。
