前端领域知识库构建与辅助代码研发中的创新实践

如果无法正常显示，请先停止浏览器的去广告插件。

1. 前端领域知识库构建与辅助代码研发中的创新实践杨颢

2. 自我介绍支付宝体验技术部引领体验科技，驱动数字生活姓名：杨颢（花名：颢阳）背景：浙江大学计算机硕士研究方向：计算机视觉、多模态大模型、AIGC 等。主要工作：蚂蚁集团- 支付宝体验技术部- 智能体验团队算法方向负责人。目前主要负责前端和体验技术领域的算法研究和工程化落地（AI For Frontend ）。曾参与支付宝前端 3.0 智能研发、UI 理解生成大模型 UI- UG 、智能 UI 推荐、用户体验度量、动效 AIGC 等项目。

3. 目录 01 前端领域知识库建设 02 代码仓库描述新范式 03 智能召回体系实践 04 领域知识辅助研发案例 05 总结与未来展望

5. 01 前端领域知识库建设

6. 前端研发演进历程 2024 2016 2010 2000 技术兴起蛮荒时代大模型 AI 时代基于大模型的辅助研发、Vibe Coding 开始蓬勃发展繁荣时代 BFF 层、小程序、Low Code 研发、D2C 等前后端分离，React/VUE 框架出现，模块化开始流行。 HTML +CSS+JS 企业级前端基建发展迅速引入前端“知识孤岛”

7. 大模型对于领域知识的局限性通用大模型无法理解领域知识包括：大模型无法理解企业级前端框架、组件、于是，我们重新思考： • 大模型缺的不是算力，而是「企业级前端世界观」。 • 大模型缺的不是上下文窗口，而是「上下文质量」。 JSAPI、平台、工具等。大模型无法理解企业级前端域内代码范式。解决方案： Q: Bigfish 是什么？ A: 大鱼，一首歌曲，一部电影，一家游戏公司… 实际上：蚂蚁集团内部的企业级前端开发框架。 More：如何使用 Bigfish 框架、研发规范、示例代码等。前端定制的RAG（检索增强生成） doc 挑战：前端的各种模态问题上下文限制召回准确率 image code API

8. 前端领域知识库- 知识录入大图

9. 多层级知识管理文档多层级结构处理 RAG应用的效果上限，很大程度上取决于对非结构化、半结构化和结构化数据的处理能力。因此我们需要有条理地组织知识信息，并提供更加丰富的多元化的语义信息。对于企业级的文档，我们使用了文档解析器，把企业内部文档解析成带层级的资产树，节点为文本片段、图片、视频等。构建树状或图状的知识结构，对提升后续召回效果至关重要。

10. 不同类型的数据处理文档型数据对于文档数据，我们使用基于Markdown 文档结构与固定Chunk 的两种方式结合，进行文字片段的抽取。上下文最多支持8K 。图片数据除了原始图片文件外，对于图片数据，我们额外使用多模态大模型的描述能力，抽取图片的文字内容和图片总结信息。这样图片数据可以在文本/多模态召回链路同时生效。代码数据除了官方框架文档的人工撰写的示例代码/代码片段外，对于企业内部依赖包，我们基于大模型自动完成了内部版Context7 的复现，以实现更好的代码模块覆盖率。

11. 前端组件录入基础组件业务组件复杂组件

12. 前端组件录入组件信息定义索引侧： ● 渲染截图：组件代码运行后，可视化的截图结果。 ● 功能描述：描述组件的功能、适用场景。由人工或者大模型总结得到。 ● 属性标签：版本、组件名称、所属组件库、业务域等标签。元信息侧： ● 组件版本：组件版本信息。 ● 依赖关系：依赖的其他组件/库的信息。 ● 组件接口：包含接口名、接口值、接口自然语言描述，描述由人工总结/大模型总结得到。 ● 静态资源：组件 cdn 等信息。 ● 案例代码：demo代码，展示如何使用该组件。

13. 02 仓库描述新范式

14. 智能仓库描述——仓库Wiki 1 仓库仓库更多信息 1. 设置 2 2.工具声明文件夹 3.运行环境 4.技术栈基础知识 3 4 文件 5.自定义rules 代码片段 system prompt

15. 智能仓库描述——AI Repomix 上下文过长，注意力不集中 Repomix：打包描述一个代码仓库

16. 智能仓库描述——AI Repomix AI Repomix 异步录入

17. 智能仓库描述——AI Repomix AI Repomix 运行时

18. 端云结合的上下文构造云端：前端领域知识库云端：最新仓库依赖信息企业级的系统化前端技术体系文档，包括通用框架级别的代码规范、基础知识、最佳实践等。基于内外部Context7 和文档等工具，获取指定仓库依赖对应版本的使用说明和示例代码。本地：仓库Wiki 对本地仓库进行大模型总结，描述仓库的目录结构，功能说明等基本信息。本地研发上下文依赖本地：代码文件本地化的、可潜在复用的代码片段，以及与需求相关的功能代码集合。本地代码文件也间接描述了研发者的代码风格和研发习惯。

19. 03 智能召回体系

20. 智能召回生成链路知识来源文档图片代码 API 本地仓库Wiki 本地代码多路召回召回链路意图输入意图重写召回拦截知识召回重排序分层召回意图模版生成链路知识过滤元信息抽取相关知识抽取 Prompt 构造大模型生成

21. 链路中的算法模型将文本片段映射为低维连续向量，保留语义相似性。文本 Embedding 模型选择：BGE 、Qwen 将源代码文件/代码片段直接转换为语义向量表示。应用于代码检索、克隆检测和智能编程辅助。代码 Embedding 、Jina… 召回阶段联合学习图像和文本的统一向量表示，实现跨模态语义对齐，如图文匹配或检索。在初步检索结果基础上进行精细化排序，提升相关结果的排名准确性。图片 Embedding 重排 Reranker 排序阶段

22. RAG 自动化评测体系评测指标说明 Context Precision：衡量检索到的上下文中与答案相关的信息占比，反映检索结果的精确性。 Context Recall：评估检索到的上下文覆盖真实答案所需信息的程度，体现检索的完整性。 Faithfulness：衡量生成答案在多大程度上忠实于检索到的上下文，避免幻觉或捏造内容。 Factual Correctness：评估答案在事实层面上的正确性，通常依赖外部知识或标注数据判断。 Answer Relevancy：衡量生成答案与用户问题的相关程度，反映答案是否切题。 Answer Similarity：通过与标准答案的语义相似度来评估生成答案的质量，常使用嵌入向量计算。基于Ragas 框架的评测

23. RAG 评估测试不同的召回策略实验对比，以提升整体效果 Context Precision Context Recall Faithfulness Factual Correctness Answer Relevancy Answer Similarity 纯向量召回 0.6235 0.5959 0.6396 0.2891 0.6680 0.7210 + Reranker重排 0.7806 0.6334 0.7026 0.3131 0.6886 0.7323 + 关键词 0.8156 0.6477 0.7238 0.3203 0.7082 0.7373 + Summary总结 0.8248 0.6703 0.7205 0.3276 0.7161 0.7414 + 知识图谱 0.8467 0.6704 0.7283 0.3232 0.7333 0.7422

24. 服务MCP 化 Agent + MCP 通过Agent 进行意图识别，根据任务难度决策是否要使用知识库MCP 服务。选择是否使用知识库MCP 1 4 根据意图和上下文背景，选择合适的知识来源和需要筛选检索知识库范围检索的内容数据。智能决策最佳参数通过预设的不同场景知识召回最佳实践，选择提供给 2 知识库服务的最佳参数。 3 发起MCP调用发起MCP 调用，获取知识库的结果，拼接到Agent 的上下文中，进行后续的大模型生成。

25. 04 知识辅助研发案例

26. 辅助问答研发助手 Ragas框架评测精准度评分 0.64 -> 0.84 召回率评分 0.55 -> 0.67 回答生成评分 0.59 -> 0.74 人工评测准确率前端研发平台 82% 前端研发框架 57% （提升40%） --- Top3结果包含全量知识内容

27. 多模态知识召回组件召回 UI 图片召回

28. 案例：知识辅助前端需求生码 System Prompt # 背景 { 你是一个前端领域专家，熟悉 react 等前端工程开发。正在根据用户问题和一些召回出来规范进行编码工作。 “component_desc”: “组件的基本描述，使用组件的场景", # 工作流程 "how_to_install": "安装组件的命令", - 深度理解用户需求。 "how_to_import": "引入组件并注册使用的配置方法", “component_api”: “组件属性及事件回调接口", - 理解召回出来可能有所帮助的信息。 - 根据用户需求，结合有用的额外信息进行编码。 "reference_url": "组件源码的参考链接" } - 直接输出遵循前端工程 react 编码规范不要有额外信息。 # 用户输入 {需求query} # 组件描述信息 ...(召回的知识信息) # 可参考的示例demo ...(召回的知识信息) { “component_demo”: “组件使用及行内布局用法 Demo" }

29. 案例：知识辅助前端需求生码 Query 写一个支持多维筛选的页面，用来过滤景点数据。数据维度包含：城市、星级、门票价格，城市默认值为杭州、星级默认五星，价格默认50元以内。生成mock的景点数据来填充，加一些布局元素来做视觉上的分割，只返回单一 tsx代码。 import React, { useState, useMemo } from 'react'; import { TagFilter } from '@alipay/tech-ui'; import styled from 'styled-components';

30. 案例：知识辅助前端需求生码 Query 写一个页面，用来展示每位员工的信息。采用左右分栏的布局。左栏写一些温暖的话。右栏是卡片区域，包含员工的头像、姓名、爱好，分三行四列。生成mock的员工信息填充，整体文字样式花哨一点，页面整体风格一致，使用支付宝蓝色。头像使用AntD里的icon填充。 Import { ProCard } from ‘@alipay/tech-ui'; Import { UserOutlined } from '@ant-design/icons';

31. 案例：AI IDE 中的代码研发 Query 帮我生成一个 user 页面，并且定义一个 state， state包含一个user的数据，用user在页面中做简单的用户信息展示。领域代码生成问题： 1. 未理解 Bigfish 项目目录 2. 未在路由中配置 3. 未使用 Valtio 配置生成

32. 案例：AI IDE 中的代码研发 Query 帮我把这个Bigfish项目改成 SSR。 Before：无法理解 Bigfish、无法知道 Bigfish 的框架信息。解决方案出现了极大的幻觉。

33. 案例：AI IDE 中的代码研发 Query 帮我把这个Bigfish项目改成 SSR。 After：能正确理解 Bigfish 的 config。知道如何开启 SSR。知道如何关闭微前端。

34. 05 总结与未来展望

35. 总结与未来展望文档 / 问答资产解析知识抽取知识录入组件 / 图片前端领域知识库代码 / API 意图改写知识消费多路召回 Memory for Frontend 大模型总结重排序向量数据库更丰富的数据来源图数据库更精细化的知识管理关系数据库更准确的知识召回

36.

37. 06 Q & A