AI应用实践｜利用LLM迁移内部UI组件库的方法及效果验证

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

在我们公司（Zalando），我们不断寻求改进流程的方法，并专注于使用合适的新技术为复杂挑战寻找有效的解决方案。内部 UI 库项目就是我们如何利用 LLM 有效解决技术债务的一个实际例子。

迁移项目概述

我在 Zalando 的合作伙伴技术部门工作，我们专注于授权合作伙伴在我们的平台上销售他们的产品（或作为零售商供应给 Zalando）。作为 Zalando 和合作伙伴之间的主要接口，我们开发了一系列用户界面来支持日常运营。

随着时间的推移，我们部门开发了两个不同的内部 UI 组件库，每个库都用于不同类型的面向合作伙伴的应用程序。这种碎片化导致了几个挑战，影响了我们的内部效率和合作伙伴体验：

• 面向不同合作伙伴的应用程序之间的用户体验不一致

• 重复的设计和开发工作

• 维护两种设计语言的设计方面复杂性

• 增加了工程团队的维护复杂性

• 新开发人员的入职时间更长

为了解决上述挑战，我们启动了一个项目，将应用程序从一个 UI 组件库迁移到另一个。该项目的范围涵盖 15 个复杂的 B2B 应用程序，由于源 UI 组件库和目标 UI 组件库之间存在显著差异，因此此次迁移需要大量资源和时间。

鉴于此次迁移的规模和复杂性，我们探索了各种自动化方法来减少所需的工作量和时间。我们研究了JavaScript codemod（https://github.com/facebook/jscodeshift）等传统方法，也希望探索大型语言模型 (LLM) 等 AI 技术，因为它们的功能最近有所进步。

使用LLM进行迁移：入门

当我们首次考虑使用 LLM 进行迁移时，我们有几个问题和顾虑需要解决，然后才能决定使用 LLM 进行迁移：模型会理解我们的自定义组件吗？它们能否高精度地进行迁移？是否存在引入难以察觉的细微错误的风险？这些顾虑不仅仅是理论上的——过程中的任何不准确之处都可能直接影响我们合作伙伴的体验。

LLM Hackathon - 调查可行性

为了验证 LLM 在我们的用例中的可行性，我们参加了由 Zalando 研究团队和技术学院组织的内部 LLM 黑客马拉松。在这次黑客马拉松中，来自不同团队的开发人员探索了 AI 解决工程挑战的各种方法。

我们的团队专注于验证 LLM 自动代码迁移的潜力并进行了多项实验。

实验设置：

为了确保实验的针对性和可衡量性，我们选择了一组复杂程度各异的 UI 组件示例，从简单的按钮到更复杂的 Select 组件，这些组件都应进行迁移。我们还使用了一个简单的测试应用