大家好，我是LV。
都已经24年了，早已过了狂热追捧AI的时候，我现在看到那些 爆炸性的 的内容早就麻木了。
真正能脚踏实地，通过AI赋能实际工作流中，才是牛逼。
笔者未来很长一段时间将聚焦 AI赋能工作流。
本篇讨论AI赋能前端研发领域 ，这个话题也将会是 一系列的篇章，会总结笔者从 0 ～ 1 使用 AI 赋能前端的经验和探索历程。
分享出来，抛砖引玉，希望跟感兴趣的小伙伴有更多深入的交流，探索AI赋能的更多可能性。
欢迎大家点赞收藏防失联，不多说，开始。
市场现状
先说结论，从我下场实践，以及目前了解到的前端AI现状来看：
"目前还处在早期的阶段，前端未死，AI赋能大有可为！"
市面上的AI赋能前端案例，抽取部分代表性的，总结了下：
对话生成页面
- 直接生成整个网站，如 Dora，主打生成官网
- Vercel V0，生成 React 组件
详见：v0.dev/
图片生成页面
- ScreenShotToCode，截图转换为页面，包括html，react等代码，Star高的离谱。
- draw-a-ui，将原型草图转换为代码
辅助性的代码生成工具
- GitHub Copilot，Github做的辅助编程工具，十分推荐，官方也十分有自信，从slogan可以看出：The world's most widely adopted AI developer tool.（世界上使用最广泛的AI开发工具）
- 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赋能，共勉。