QCon上海2025-VibeCoding-前端领域知识库构建与辅助代码研发中的创新实践-杨颢 (10.22版).pdf

1、前端领域知识库构建与辅助代码研发中的创新实践杨颢自我介绍姓名：杨颢姓名：杨颢（花名：颢阳）背景背景：浙江大学计算机硕士研究方向研究方向：计算机视觉、多模态大模型、AIGC 等。主要工作主要工作：蚂蚁集团-支付宝体验技术部-智能体验团队算法方向负责人。目前主要负责前端和体验技术领域的算法研究和工程化落地（AI For Frontend）。曾参与支付宝前端3.0 智能研发、UI 理解生成大模型 UI-UG、智能 UI 推荐、用户体验度量、动效 AIGC 等项目。支付宝体验技术部引领体验科技，驱动数字生活目录01020304前端领域知识库建设代码仓库描述新范式智能召回体系实践领域知识辅助研发案例05

2、总结与未来展望01前端领域知识库建设前端研发演进历程企业级前端基建发展迅速2000HTML+CSS+JS蛮荒时代2010前后端分离，React/VUE 框架出现，模块化开始流行。技术兴起2016BFF 层、小程序、Low Code 研发、D2C 等繁荣时代2024基于大模型的辅助研发、VibeCoding 开始蓬勃发展大模型 AI 时代引入前端“知识孤岛”大模型对于领域知识的局限性通用大模型无法理解领域知识解决方案：前端定制的RAG（检索增强生成）挑战：前端的各种模态问题上下文限制召回准确率包括：大模型无法理解企业级前端框架、组件、企业级前端框架、组件、JSAPIJSAPI、平台、工具、平台、

3、工具等。大模型无法理解企业级前端域内代码范式企业级前端域内代码范式。于是，我们重新思考：大模型缺的不是算力，而是企业级前端世界观。大模型缺的不是上下文窗口，而是上下文质量。APIdoccodeimageQ:Bigfish 是什么？A:大鱼，一首歌曲，一部电影，一家游戏公司实际上：蚂蚁集团内部的企业级前端开发框架。More：如何使用 Bigfish 框架、研发规范、示例代码等。前端领域知识库-知识录入大图多层级知识管理RAG应用的效果上限，很大程度上取决于对非结构化、半结构化和结构化数据的处理能力。因此我们需要有条理地组织知识信息，并提供更加丰富的多元化的语义信息。对于企业级的文档，我们使用了文

4、档解析器，把企业内部文档解析成带层级的资产树，节点为文本片段、图片、视频等。构建树状或图状的知识结构，对提升后续召回效果至关重要。文档多层级结构处理不同类型的数据处理文档型数据对于文档数据，我们使用基于Markdown文档结构与固定Chunk 的两种方式结合，进行文字片段的抽取。上下文最多支持8K。图片数据除了原始图片文件外，对于图片数据，我们额外使用多模态大模型的描述能力，抽取图片的文字内容和图片总结信息。这样图片数据可以在文本/多模态召回链路同时生效。代码数据除了官方框架文档的人工撰写的示例代码/代码片段外，对于企业内部依赖包，我们基于大模型自动完成了内部版Context7 的复现，以实现

5、更好的代码模块覆盖率。前端组件录入基础组件复杂组件业务组件前端组件录入索引侧：渲染截图：组件代码运行后，可视化的截图结果。功能描述：描述组件的功能、适用场景。由人工或者大模型总结得到。属性标签：版本、组件名称、所属组件库、业务域等标签。元信息侧：组件版本：组件版本信息。依赖关系：依赖的其他组件/库的信息。组件接口：包含接口名、接口值、接口自然语言描述，描述由人工总结/大模型总结得到。静态资源：组件 cdn 等信息。案例代码：demo代码，展示如何使用该组件。组件信息定义02仓库描述新范式智能仓库描述仓库Wiki1仓库2文件夹3文件4代码片段1.设置2.工具声明3.运行环境4.技术栈基础知识5.

6、自定义rules仓库更多信息system prompt智能仓库描述AI RepomixRepomixRepomix：打包描述一个代码仓库：打包描述一个代码仓库上下文过长，上下文过长，注意力不集中注意力不集中智能仓库描述AI RepomixAIAI RepomixRepomix 异步录入异步录入智能仓库描述AI RepomixAIAI RepomixRepomix 运行时运行时端云结合的上下文构造本地研发本地研发上下文依赖上下文依赖基于内外部Context7 和文档等工具，获取指定仓库依赖对应版本的使用说明和示例代码。云端：最新仓库依赖云端：最新仓库依赖信息信息本地化的、可潜在复用的代码片段，以