AI 来势汹汹,这些方向值得试试
小麦2025年03月29日1742 字
当前人工智能技术可谓是日新月异,面对来势汹汹的 AI,
前端还有没有价值花时间去投入?
在前端岗位上的我们又应该往哪些方向去探索?
看完今年 D2 终端技术大会的所有 PPT 后,我反而看到了很多机会。
我总结了我认为的,在当前这个时间点,前端比较容易做出成果的三个方向和大家分享。
分别是 AI 辅助研发、生成式 UI 以及下一代工程技术。个人见解难免有疏漏,欢迎评论区交流。
如果你是入门级小白,也不妨跟随我的视频,开拓开拓眼界,说不定很快就会不期而遇了。
首先是 AI 辅助研发,容易想到的就是利用各种 AI 工具自动写代码。
然而很多时候存在这样一种现象,同一个 AI 模型,自己用和别人用感觉差距很大。
提示词写得不够好或许只是其中一个原因,更关键的地方在于模型背后的系统性工程。
阿里云前端团队使用通义灵码作为编程模型。
为了提升代码生成质量,他们在提示词优化、知识库检索和模型微调上面也做了非常多的工作。
我们来说说前两个具体应该怎么做。
做好提示词优化就可以解决很多问题,对前端工程而言,提升 AI 生成代码的一致性,降低幻觉发生的概率是比较重要的。
要做到这一点,在对话框中自由发挥显然不是最优实践。
我们可以采用类似 eslintrc、cursorrules 配置文件的方式,在其中编写可复用的规则集,形成一套面向 AI 的代码规范。包括风格偏好,技术栈要求,依赖引用要求,代码注释要求,组件实现案例等等。
相比写一个 “团队规范文档”,这种方式显然更有价值。
当然,这样的提示词优化方案只能解决通用性问题,AI 所处的真实业务环境可能是很复杂的。那么如何让 AI 使用业务组件库?如何让 AI 理解业务需求?
RAG 检索增强是更进一步的优化方案,简言之就是通过向量检索的技术,在背后为模型提供更多上下文,比如团队需求池中的需求文档,团队的组件库文档等等。
这样不仅可以让 AI 接地气,还盘活了吃灰已久的文档库,可谓是一举两得。
当然我们也可以另辟蹊径,直接改造集成开发环境。字节的 Trae 其实就是一个很好的例子,不仅在传统 IDE 的基础上增加了 AI 功能,同时对 VSCode 的 UI 层和应用服务层做了大幅度改进。
类似的 AI IDE 还有很多,这是一条更有挑战性的方向,但最终也会殊途同归。
接下来说生成式 UI,这是一个比较新鲜的话题。
大家可能听说过 D2C,即将设计稿或图像,通过一定的规则或算法转换成可运行的前端代码。
比如 imgcook 和 Figma 的 D2C 插件等等。
生成式 UI 的技术路线可以说是 D2C 的进阶版,借助大模型的能力,它能够通过提示词直接生成代码和 UI,并具备更通用的图形理解能力。
比如支付宝体验技术前端,就尝试了使用提示词,输出示例,并结合 mock 数据和图片示例,生成了用于描述界面的 DSL。
随后通过渲染器将 DSL 渲染为可交互 UI。
类似的还有蚂蚁平台智能体验技术团队的 WeaveFox AI 产品,
它可以通过更通用的中间表示而不是 JSON Schema 来生成不同框架、平台下的 GUI。
另外,生成式 UI 技术路线在动效制作方面也有应用,模型可以从需求中提取动词,随后输出动效曲线数据来完成动效。
如果你正在做业务研发,那么生成式 UI 是一个非常值得探索的方向。
最后说下一代工程技术。
有两个明显趋势,第一是工具链一体化,第二是工程实践的 AI 化。
我们知道前端拥有一个庞大的开源生态,类似的场景往往存在 N 种不同的技术选型方案,这也造成了碎片化。
而让工具链一体化的核心目标之一,就是解决过于碎片化的前端生态,减少开发者的负担。
围绕 Vite 的统一工具链 VoidZero,以及基于 Rust 的 Rstack 一体化研发工具,都是这个方向上的先行者。
另一方面,AI 技术的到来给工程化创造出了新思路。
比如在前端测试领域,来自字节跳动前端的 midscene.js UI 自动化测试框架,就是使用自然语言描述测试需求,AI 自动执行和提取数据,然后进行断言测试。
完全改变了传统用代码的方式编写测试用例的流程。
此外国外还有类似 Browser Use,利用 AI Agent 操作浏览器,进行内容提取和执行自动化工作流的方案,同样也适用于测试复杂的前端 UI。
在白屏检测工程实践方面,快手的商业化前端团队借助 AI 提升了白屏检测的可靠性和普适性。
在 UI 异常检测,风控检测方面,AI 大模型也比传统编程算法更有优势。
如果你正在做技术基建,那么不妨多想想如何将自己团队的工具链进行统一,以及如何利用 AI 优化现有工程实践。
这些都是不错的方向。
那么这就是本期视频的全部内容了,如果觉得好的话记得给个一键三连。
我是小麦,一位热爱分享的前端工程师,期待和你分享更多硬核有用的内容。