LLM-Powered Migration of UI Component Libraries at Scale

zalando · E-commerce · 2025 · source Agentic: no · promotional bias: low · source-backed · extracted with prompt 0.5.6 (schema v2)

Generated from extraction.json — do not edit by hand. Every claim cites verbatim source evidence; stated means the quote directly asserts the claim, implied means it supports it indirectly.

Problem

Domain: UI component library migration

Zalando needed to migrate partner-facing B2B applications from one in-house UI component library to another while reducing duplicated maintenance, inconsistent UX, and manual migration effort.

Constraints:

The migration covered 15 sophisticated B2B applications.
Source and target UI libraries differed substantially in interfaces and visual behavior.
Incorrect transformations could directly affect partner experience.
LLM-generated code still required visual verification for layout and complex edge cases.

Architecture

Zalando iteratively developed a GPT-4o-powered Python migration tool. The team first experimented through an internal hackathon, then enriched prompts with component interfaces, transformation instructions, manually verified examples, system prompts, deterministic settings, grouped context, continuation handling, prompt caching, and automated validation tests. The tool processes source files and applies component migrations while humans handle visual verification and hard edge cases.

Diagram confidence: explicit (topology described by the source).

flowchart LR
  Prompt_builder["Component prompt builder"] --> Migration_tool["Python migration tool"]
  Migration_tool --> GPT4o["GPT-4o transformer"]
  Migration_tool --> Continuation["Continuation handler"]
  Continuation --> GPT4o
  GPT4o --> Formatter["Output formatter"]
  Formatter --> Validation_examples["Validation examples"]
  Validation_examples --> Prompt_builder
  Validation_examples --> Human_review["Human visual verification"]

Drag to pan · scroll or use +/− to zoom · reconstructed from the source's described component topology

Components

Component	Role	Interacts with
`Component prompt builder`	Creates migration prompts from source component code, interfaces, transformation rules, and examples.	`Python migration tool`, `Validation examples`
`Python migration tool`	Processes source files and invokes GPT-4o through the llm conversation API.	`Component prompt builder`, `GPT-4o transformer`, `Continuation handler`
`GPT-4o transformer`	Transforms source UI component usage into target-library code according to prompts.	`Python migration tool`, `Output formatter`
`Continuation handler`	Sends a simple continue prompt when large-file transformations are truncated.	`Python migration tool`, `GPT-4o transformer`
`Output formatter`	System-prompt constraints that keep outputs as transformed code without explanatory markdown.	`GPT-4o transformer`, `Validation examples`
`Validation examples`	LLM-generated and manually verified examples used as regression tests for prompt changes.	`Component prompt builder`, `Output formatter`, `Human visual verification`
`Human visual verification`	Manual review path for visual implications and complex component-library gaps.	`Validation examples`

Data flow

Source component code is used to craft migration prompts containing interfaces, transformation rules, and examples. The Python tool processes files in source directories, sends grouped context and file content to GPT-4o through the llm conversation API, continues truncated outputs when needed, and returns transformed code for tests and human verification.

3 supporting quotes

“We developed a Python based migration tool using the llm library's conversation API.”article, stated

“The tool processed each file in the given source directories and applied LLM-powered migrations for the components present in the file.”article, stated

“These initial instructions included component interfaces, transformation rules, and example migrations.”article, stated

Why this architecture

Zalando chose an LLM migration tool because codemods require explicit edge-case programming, while LLMs can reason over code relationships when supplied with verified component context. The final architecture reflects lessons from failed single-pass attempts: divide context, provide examples, make output deterministic, validate prompt changes, and keep humans for visual risks.

3 supporting quotes

“Given the scale and complexity of this migration, we explored various automation approaches to reduce the effort and time required.”article, stated

“LLMs have a good understanding of the different elements of code and their relationships.”article, stated

“This is a powerful capability, compared to traditional alternatives like codemods, where we need to explicitly code every edge case.”article, stated

Models used: GPT-4o · LLMs · continue.dev

Scale

The migration scope covered 15 sophisticated B2B applications.
“The project's scope encompassed 15 sophisticated B2B applications, and due to significant differences between the source and target UI component libraries”article, stated
The LLM migration approach reached about 90% accuracy.
“the LLM-based approach achieved an accuracy of about 90% migrating components across large volumes of files”article, stated
Estimated cost was less than $40 per code repository.
“Based on the GPT-4o pricing, this would come to be less than $40 for each code repository.”article, stated
Processing ranged from 30 to 200 seconds per file.
“Processing times ranged between 30 and 200 seconds per file, making large-scale migrations time-intensive.”article, stated

Alternatives considered (roads not taken)

Direct migration from source code in one LLM pass

Rejected because: It produced inconsistent results because the model had to understand source, define interfaces, map libraries, and migrate all at once.

“Output: This produced inconsistent results with numerous errors.”article, stated

“It struggled to handle all these steps reliably in a single pass.”article, stated

Interfaces without verified transformation instructions/examples

Rejected because: Accuracy stayed low or medium and automated mappings missed visual equivalence such as button sizing.

“Output: This approach still yielded low accuracy, with the LLM failing to transform several component attributes.”article, stated

“LLM created direct size mappings (converting "medium" sized button to "medium"), when in reality, a "medium" button in the original library was visually equivalent to a "large" button”article, stated

Traditional codemods for every edge case

Rejected because: Codemods require explicit coding for edge cases, whereas LLMs could infer some code relationships from context.

“This is a powerful capability, compared to traditional alternatives like codemods, where we need to explicitly code every edge case.”article, stated

Patterns

`context-engineering` (prompting)

The team grouped components, constrained tokens, placed static examples before dynamic file content, and supplied interfaces/rules/examples to keep transformations focused.

“we organized components into logical groups (like 'form', 'core', etc.), keeping context tokens between 40-50K per group of components.”article, stated

“The prompt was organized to have the static part like transformation examples at top and the dynamic part (the file content) and the end”article, stated

`eval-driven-development` (evaluation)

Five prompt iterations, realistic test applications, and LLM-generated validation examples turned migration quality into an iterative measured process.

“We adopted an iterative approach, with each experiment building on insights from previous ones.”article, stated

“These examples served as validation tools and regression tests, helping us catch unexpected changes during the migration process.”article, stated

`human-in-the-loop-gate` (safety)

Examples were generated by the LLM but manually verified, and humans remained necessary for visual correctness and complex edge cases.

“The examples were generated by the LLM but verified manually.”article, stated

“This limitation meant that while a page could be syntactically migrated correctly, the layout may appear broken upon deployment.”article, stated

`semantic-caching` (cost-performance)

The migration prompt was structured to maximize prompt-cache hits across files.

“To leverage this capability effectively, we set up a structured prompt format that maximized cache hits.”article, stated

Tradeoffs

Use LLM transformation with human verification

Chose GPT-4o migration plus tests and manual visual review over fully automated migration with no human oversight.

Rationale: The LLM achieved high accuracy but could not reliably catch visual/layout implications or complex library gaps.

“Despite the strengths of LLM, we encountered some limitations, both LLM-specific issues and project-specific, that restricted full automation.”article, stated

Group component context rather than include everything

Chose logical groups with 40-50K context tokens over ever-growing all-component prompts.

Rationale: Accuracy declined as input prompt size grew, so grouping preserved model focus.

“We observed as the input prompt size grew, the transformation accuracy declined.”article, stated

Gotchas (what bit them)

Single-pass migration overloaded the model.

Root cause: The prompt required understanding source code, defining interfaces, mapping libraries, and migrating test code all at once.

Resolution: Iteratively add interfaces, transformation instructions, verified examples, and system prompts.

“The LLM needed to understand the source code, define an interface, create a mapping between the libraries, and then migrate the test application.”article, stated

Large-file output could truncate mid-transformation.

Root cause: Files exceeded the 4K token limit.

Resolution: Use the conversation API and a simple continue prompt to complete the transformation.

“When files exceeded the 4K token limit, the output would get truncated mid-transformation.”article, stated

“a simple "continue" prompt proved more reliable than more complex prompts to continue the transformation.”article, stated

LLMs could produce syntactically migrated but visually broken pages.

Root cause: The model could not verify visual implications of design-system differences like spacing and grid units.

Resolution: Keep human visual verification and set realistic expectations for complex transformations.

“LLMs are unable to verify visual implications of the changes when migrating between design systems with different fundamental units.”article, stated

Repeated runs on the same input produced inconsistent output.

Root cause: LLM outputs varied across runs unless deterministic settings were applied.

Resolution: Set temperature to 0 for reproducibility.

“Changing LLM settings, like setting the temperature parameter to 0 made the LLM's output to be more deterministic and reproducible.”article, stated

Evaluation

Zalando evaluated through iterative migration experiments, a realistic test application, automated regression tests using generated examples, cost estimates, and final migration accuracy.

Metrics: over 90% component migration accuracy · less than $40 per repository · 30 to 200 seconds per file · 15 B2B applications in scope

“To keep our experiments focused and measurable, we chose a set of sample UI components of varying complexity from simple buttons and to more complex Select components”article, stated

“High Accuracy: We achieved an overall accuracy of more than 90% for the component migration”article, stated

Outcomes

The tool achieved over 90% accuracy for component migration.
The estimated cost was under $40 per repository.
The LLM approach reduced manual fixes and accelerated migration-tool development.

The migration targeted 15 B2B applications and large volumes of component files, with per-file processing taking 30-200 seconds.

“This reduced the amount of manual fixes needed after the llm powered migration.”article, stated

“Through LLMs we were able to generate the migration prompts and develop the tool faster than using traditional alternatives like codemods”article, stated