2025QECon全球软件质量效能大会：多模态模型驱动前端研发变革

QECon2025全球软件质量&效能大会

·上海站2025GLOBAL

SOFTWARE

QUALITY

&EFFICIENCY

CONFERENCE

SHANGHAL多模态模型驱动前端研发变革唐辉|百度资深工程师、Comate

AI

IDE

技术负责人唐辉百度资深工程师现在主要负责百度的大模型产品

Comate

AI

IDE。拥有超5年软件工程效能提效经验，过去曾负责百度内部50多个产品的云化改造，落地微前端、PWA

、组件库、低代码工具等。长期参与

提效工具研发，保持团队技术先进性，清理团队技术债务，提升团队交付效率。QECon全球软件质量&效能大会QECon全球软件质量&效能大会

效率和质量的困境

使用多模态模型破局

推进落地04

总结与展望目录CONTENTS全球软件质量&效能大会PART

01效率和质量的困境技术方案调研API

定义代码编写单元测试前后端联调代码评审开发

测试

发布手工测试用例功能测试测试问题修复QE

Con

全球软件质量&效能大会

·上海站前期调研需求编写需求评审(多次)产品需求

设计交互设计交互评审

视觉设计视觉评审

产品交付的全流程一句话需求联调费时不会用

AI工具ShowCase需求变更需求做完没人用O

代码不符合团队规范、质量差测试用例更新不及时○

边界

Case

没覆盖缺少安全、性能的考量流程中的困境效率质量困境的原因协作跨职能角色间(项目、产品、交互、视觉、研发)因信息传

递漏斗、相关知识背景图、专业壁垒，存在沟通损耗，需反复对齐以确保目标与理解的一致性。个体性每个人对于产品目标、产品设计、交互设计、视觉设计有各自的见解。实际全流程落地中，大家会站在各自的视角看问题

。竞争、内卷企业竞争、公司内卷下，要求业务交付周期短，从而压缩各环节时间。人性-抵触新事物能用就行。更喜欢沿用已经习惯的研发流程。对于新出的东西不愿意尝

试

。大模型的输出不确定性，研发同学对于模型能完成哪些任务

不确定，需要多次使用掌握之后才能慢慢接纳。成本大模型产品有使用成本。部分管理者没有完全认可大模型的成本收益。QE

Con

全球软件质量&效能大会

·上海站QEQECon

全球软件质量&效能大会

·上海站QE

为什么多模态模型会有一席之地AI

是一个能力越来越强的程序员。人与人的沟通图片、视频都有不

可替代性。和

AI

程序员的沟通，也是这样。已观看视频并实现相同功能；·创建了drag_drop.py-拖拽功能·创建了animation.Css-

动画效果·添加了触摸屏支持和错误处理功能完全复现!def

quick_sort(arr):已分析您的UI设计图并生成代码：·创建了login.html-登录页面结构·

创建了scipt

js-表单验证逻辑完全还原了您的设计·创建了styles.cSS-

响应式样式AI

代

码

助

手您好!我是AI代码助手，可以帮您生成、修改和优化代码。帮我写

一

个Python

排序函数已为您创建了快速排序函数输入消息…全球软件质量&效能大会PART

02使用多模态模型破局QE

Con全球软件质量&效能大会

·上海站体验差评审的时候大家看个大概，没有直

观感受，评审通过了。实际ShowCase

环节，大家一试用，反

馈较多，需要返工。QE

产品需求&设计环节(前端视角)细节考虑不全面一个人设计产品，难免考虑不全面。会带来评审次数的增加，以及开发

环节的返工等。沟通成本对于需求评审、交互设计、视觉设计，多轮的沟通对于前端同学来说，沟通时间成本较高。页面丑不走设计的页面丑，经过设计的页

面周期长。会有返工微调。

标准化的产品文档(研发希望的)产品文档结构示意图版本记录是需求详情描述

标准产品文档问：每个需求按标准产品文档写?答：做不到。QE

Con全球软件质量&数能大会

·上海站2.竞品分析竞争对手分析、市场定位、差异化优势3.产品功能概要设计整体架构、核心功能模块、功能流程图4.产品功能详细设计详细功能说明、交互设计、界面原型5.产品非功能需求·

性能诉求

·

兼容性诉求·

安全诉求·

埋点诉求

其他非功能性需求：可用性、可维护性、可扩展性等0.基本信息·

目标上线时间

·

产品目标

·

衡量指标1.产品需求分析1

.

1业务场景/需求背景

1

.

2用户故事否

需求大或影

响范围大等此图履示了完整的产品文档结构，从版本管理到详细设计的全流程实际评审人赵六变更内容初始版本功能优化版本号v1.0v1.1需求修改人王五更新时间2024-01-15>console@0.0.1

startnode:internal/modules/esm/resolve:873throw

new

ERR_MODULE_NOT_FOUND(packageName,fileURLToPath(base),null);Error[ERR_MODULE_NOT_FOUND]:Cannotfindpackage'@antfu/install-pkg'imported

from/Users/tanghui03/baidu/ide/console/node_modules/@reskript/cli/dist/DynamicImportCommand.jsat

packageResolve(node:internal/modules/esm/resolve:873:9)at

moduleResolve(node:internal/modules/esm/resolve:946:18)at

defaultResolve(node:internal/modules/esm/resolve:1188:11)at

ModuleLoader.defaultResolve(node:internal/modules/esm/Loader:642:12)at

#cachedDefaultResolve(node:internal/modules/esm/loader:591:25)at

ModuleLoader.resolve(node:internal/modules/esm/Loader:574:38)atmoauteLoaer.getnoluleJobForImport(node:internal/modules/esm/Loader:23npde:internal/modules/esm/module_job:130:49){code:'ERR

MODULE

NOTEDUND'QE

Con全球软件质量&效能大会

·上海站问

题

：需求描述过于简单，实际开发时很多细节需要确认。QE

实际案例-

Terminal

区域增加一个快捷添加原始需求：

Terminal

区域选中一段输出后，

出来一个悬浮框，可以将上下文添加到对话。QE

Con全球软件质量&效能大会

·上海站QE

把好需求设计(交互设计)第一关需求调研智能体根据产品经理的需求概要说明和图片，需求调研智

能体利用网络检索、历史需求文档等出一份需求调研文档。产品经理同学也会进行同步的需求调研。最终产品同学根据智能体的调研结果进行查缺补漏。产品说明智能体(访问网站+理解图片)产品同学自行编写产品说明书。同时，根据合并后

的调研结果，智能体自行进行产品设计进行查缺补漏。>产品说明智能体考虑的会更全面。前端视角需求审查智能体根据产品说明书，考虑响应式、交互态(空状态、

加载态、错误态等)、数据校验、边缘情况、逻辑

(登录与否、业务逻辑合理性)等提出建议。前端视角

需求审查三大智能体产品说明需求调研智能体能提出哪些建议，补充哪些内容：1.

快捷键是否需要和打开对话区域的快捷键保持一致?2.

快捷键按下或者点按按钮，对话区如果是关闭状态，

是否需要打开。3.

是否需要更显著的操作反馈。4.

一段上下文快捷键多次按下的效果。5.

是否会对用户干扰，是否需要支持用户配置关闭。如

果可以关闭，建议在右键里也增加一个操作入口。6.是否需要增加埋点7.按钮的显示位置如何定义，如果超过一屏幕的选中内

容这类边界情况，这类的显示位置。8.

如果用户在快捷键配置里删除了快捷键，是否还展示

快捷键9.……throw

new

ERR_MODULENOT_FOUND(packageName,fileURLToPath(base),null);Error[ERR_MODULE_NOT_FOUND]:Cannotfindpackage'@antfu/install-pkgimportedfrom/Users/tanghui03/baidu/ide/console/node_modules/@reskript/cli/dist/DynamicImportCommand.jsatpackageResolve(node:internal/modules/esm/resolve:873:9)atmoduleResolve(node:internal/modules/esm/resolve:946:18)atdefaultResolve(node:internal/modules/esm/resolve:1188:11)atModuleLoader.defaultResolve(node:internal/modules/esm/Loader:642:12)at#cachedDefaultResolve(node:internal/modules/esm/loader:591:25)atModuleLoader.resolve(node:internal/modules/esm/Loader:574:38)

atmoouteLoaaer.getnoduleJobForImport(node:internal/modules/esm/Loader:23bde:internal/modules/esm/module_job:130:49){QE

Con全球软件质量&数能大会

·上海站QE

实际案例

-

智能体参与后(多模态)原始需求：

Terminal

区域选中一段输出后，

出来一个悬浮框，可以将上下文添加到对话

。

(产品同学的配图)OE

三大智能体带来的变化产品同学的成本提升

产品说明的质量提升沟通成本

(UX、FE)介绍：通过需求描述生成页面，再通过不断的对话改变页面，最终达到想要的效果。其中，融合了需求设计、交互设

计、视觉设计的工作，此外，也包含部分代码编写工作。优势点：1.

模型考虑比较全面，生成的应用具有较好的完整性。2.

可以快速学习领域知识。3.

各个角色可以更早的感受和试用产品，减少返工。4.

更美观。5

.产出快。QECon全球软件质量&效能大会

·上海站▲VercelvO秒哒QE

从对话到应用(需求、交互、视觉的融合)对话=>

应用QE

从对话到应用中存在的问题·

已有页面的修改不方便·

部分修改不需要自然语言(元素调试)·

部分修改用自然语言难以描述QECon全球软件质量&效能大会

·上海站传统低代码的升级1.

丰富的设计来源。

·

图片·

自然语言·拷贝网站其他页面的元素·

拷贝任意网站的元素到页面中

使用2.

在已有的项目中进行设计。QE

Con

全球软件质量&效能大会

·上海站DecorationuComate

Browser①about:blank|TypographyDefaultBoldLine

Height0.95Alignment三

三Color□DefaultBackground□DefaultLayoutMargin回

OpxPaddingQE

页面设计与编辑欢迎使用Comate

独立浏览器预览功能您可以在这里开始您的开发之旅请输入您的项目URL

地址DefautLetterSpacingOpxOpx亘响应式

适配问题这里需要优化布局内容区前端A用户体验颜需色统搭一配

后端交

互视

觉QE

页面微调团队协作讨论页面优化QE

Con全球软件质量&数能大会

·上海站网站标题要改进产

品浏览器直观操作AI感知选中元素AI修改所见即

所得QE

Con

全球软件质量&效能大会

·上海站现状选择页面元素添加到对话进行对话QE

页面微调

-QE

页面微调-代码定位页面微调目前本质上是找到相关代码，配合自然语言或者图片完成修改。代码找的不准，很

重要

。QECon

全球软件质量&效能大会

·

上海站Dom

特征Code

Inspect图片特征

页面微调

-

未来通过语音+电视画板(手势),在实时讨论会议中，直接应用修改。团队协作讨论页面优化网站标题盛琵磊QECon

全球软件质量&效能大会

·上海站优

化XKX内容区产品

解嘴QE

从对话到应用带来的变化产品同学的成本产品说明的质量需要交互和视觉同学介入设计的需求数量

>把关还是需要的~沟通成本

研发成本相关接口的格式或数据数据库表结构新页面的图片产品说明自然语言已有代码新的

API

的定义新页面的图片产品说明自然语言已经生成好的页面代码QE

Con全球软件质量&效能大会

·上海站QE

开发相关的环节-

API

定义(前端不用等～)MCP续写

智能体画布连续TabQE

开发相关的环节-代码编写Inline

ChatRulesF2CQE

Con全球软件质量&效能大会

·上海站开发相关的环节

-

代码编写

-

F2C技术栈兼容提高代码可

提高开发效维护性

率QECon

全球软件质量&效能大会

·上海站F2C

的核心价值：

生成可直接合并的代码Convert

Figma

to

Code

with

Comate保持团队习惯与代码风格一致输出高质量可直接合并的代码文件位置符

合项目规范命名遵循项

目约定QEQECon全球软件质量&效能大会

·上海站node_modulesscriptssrc.tmpserver_projectdiff.patch通过前后端同学的修改，以及前期的API定义，去校验代码是否匹配，前后端是否按要求实现。package.jsonREADME.mdreskript.config.tstsconfig.jsonQE

开发相关的环节-联调QE

开发相关的环节-单测、代码评审配置

hook,提交代码时，触发执行`comatechat"XXX"。更新测试用例、评

审代码。自定义评审

Rule,

结合公司规范要求，追加团队要求。存储未采纳的建议内容，积累后，根据未采纳的内容更新

Rule。QECon全球软件质量&效能大会

·上海站QECon全球软件质量&数能大会

·上海站03

异常状态预测每次操作后截图，使用模型验证是否

异常。04

自适应验证使用无头浏览器运行结果，并将生成

的图片发送给多模态模型，校验结果

是否异常。02

语义化测试用例将自然语言测试需求(如"登录按钮应

在密码输入框下方")自动转化为

XPath

或CSS

选择器，结合CV

模型验

证元素空间关系。01

视觉回归检测利用多模态模型对比设计稿与实现页

面的截图，通过SSIM

(结构相似性指数)和感知哈希(pHash)量化差异，

定位像素级偏差。QE

开发相关的环节-手工用例-智能测试全球软件质量&效能大会PART

03推进落地QE

推进落地试错：新的AI能力要求试用一个月，

一个月后自行选择是否继续使用。并行：推行双代码库并行开发。共享：专人整理

Rule

、MCP

、知识。成本：前期不计成本，出效果后再评

估。边界：用的越多越知道模型的边界，

就会越用。QE

Con

全球软件质量&效能大会

·上海站技术文档.md定义好技术架构、规范，让模型检索代码更有针对性，代码生成质量更高。产品文档.md介绍清楚产品，产品的结构，利于模型后续从需求到代码的生成。实践经验落地通过自定义智能体，Rule,

把实践经验落地。QE

Con

全球软件质量&效能大会

·上海站QE

推进落地难点-写好文档1.#Terminal区域增加快捷入口知识库文档我要做这个需求，先帮我分析下，我要如何修改，修改哪些代码。2.terminal

里实现一个选中出来的菜单，总共有几种实现方式3.参考

terminal/context,帮我实现下terminal/selection/context请帮我完整的实现下4.#terminallnstance.ts#L1204-1239menu和action的计算没有问题，但是没有浮层出来，应该使用dom实现下，平铺展示下。5.#terminallnstance.ts#L1246-1255位置不对，我希望弹出层的左上角是选中文字最后一个

文字的位置6.参考#figma选中元素的样式，帮我调整下整个这块的样式。7.样式没有自适应主题，修复下。

推进落地难点-磨合一两次性生成的不理想的时候，很多同学会放弃

使用。接受不完美，不断的调试，不断的习惯。QE

Con

全球软件质量&数能大会

·

上海站at#cachedDefaultResolveat

ModuleLoader.resolve

tMoauteLoaaer.geTro

JulAdd

to

Chat

Y'ERR

MODULE

NOT

FbUN全球软件质量&效能大会PART04总结与展望工具

准确性越来越高，生成的颗粒度越来越大多模态

图片理解能力更强，人机交流更顺畅，图片即应用工程师

效率提升，人机协同模式变迁QE

Con全球软件质量&效能大会

·上海站

多模态模型的演进推进编码

L4

时代的到来L3-智能体组合任务分配L4-输入即应用自然语言编程L2-

研发助理指令唤起L1-加速器实时推荐软件工程智能化QECon全球软件质量&效能大会感谢聆听关注公众号作为企业第三方专业人力提升培训服务供应商，秉承互联共成长的理念，恪守客户实际业务需求为第一优先级的本职。我们公司定位于专业、专注、全方位服务于IT研发中心，产品、技术、工具、团队管理方向的培训课程；有公开课，定制内训，在线课，T

技术峰会一站式采购等产品；更多的从客户需求角度出发，匹配更适合团队学习的资讯和课程推荐；更好的为客户服务，有专业的培训顾问，对整个IT行业峰会，讲师情况，课程方向都有比较深的了解。公开课

微咨询云计算专业

IT

技术培训服务供应商组织管理课程方向产品经理持续运维质量管理大数据数据库前端开发5大服务为企业人才培养需求提供多方位的讲师课程推荐，在线学习质量把关，资料学习推荐及直播课堂服务。在线

课程内训

定制技术

峰会智盟创课www.zmeng测试开发敏捷开发开发编程架构设计咨询电话ECon2025全球软件质量&效能大会2025GLOBAL

SOFTWARE

QUALITY&EFFICIENCY

CONFERENCE2025.10.31-11.01◎北京希尔顿逸林酒店

(3层宴会厅)

查看更多会议详情质效领域Agent

实践大模型在研发提效中的深度实践自动化到智能化测试实践字节智能测试技术探索及实践大模型驱动的DevOps

工具链质效度量：从洞察到智能化Vibe

Coding模式下代码质效数据治理和知识工程

AI原生应用的质量评测

两

场

3

小时深度工作坊

两场2小时闭门会软件工程智能化标准与实践数据驱动测试与精准测试LLM

测试工具创新实践预防到自愈：测试策略×稳定性工程协同进化