Skip to content

CONCEPT Cited by 1 source

Prompt interface+mapping+examples composition

Definition

Interface+Mapping+Examples is the three-layer prompt composition Zalando's Partner Tech department converged on for LLM-powered code migration between two UI component libraries. Each layer contributes information the others cannot supply, and dropping any one degrades accuracy.

The three layers

  1. Interface — LLM-generated, typed attribute descriptor per component for both the source and target libraries. Example: "type: 'filled' | 'outlined' | 'link' Default: 'filled'. Defines the type of the button. 'filled' is …" Answers: what attributes does this component have, and what values does each accept?

  2. Mapping — explicit transformation rule per attribute. Example: "Instruction to migrate button: 1. convert variant=primary or variant=default to type='filled'. 2. convert size='small' to size='medium' and size='medium' to size='large'." Answers: given a source attribute value, what target attribute value is semantically and visually equivalent? Auto-generated then manually verified by pair programmers + designers — see concepts/visual-equivalence-mapping for why the verification step is load-bearing.

  3. Examples — input/output code samples with migration notes. Example: "Source: <button size='medium' />. Target: <button size='large' />. Migration Notes: 1. size='medium' maps to size='large' due to visual equivalence." Answers: how do I emit the target syntax including non-obvious transformations and edge cases?

Why each layer is load-bearing (Zalando's experiments)

Prompt Accuracy Why it failed
Source code only Low LLM had to reverse-engineer interface + mapping in one pass — "multiple complex intermediary steps"
+ Interface Still low "Interface was detailed, it lacked essential information present in the original source code"
+ Mapping (auto) Medium Mapping inferred by LLM was wrong in visual-equivalence cases (medium → medium, should be medium → large)
+ Mapping (manually verified) Higher, basic only Complex components still failed — "most of [the information] was theoretical"
+ Examples High Examples gave the LLM concrete patterns to match on, beyond the abstract mapping rules

"Through this series of iterative experiments, we were able to finalize our approach" (Source: sources/2025-02-19-zalando-llm-powered-migration-of-ui-component-libraries).

Relation to industry

  • vs few-shot prompting: examples-alone (classical few-shot) can work for simple transformations but degrades on complex components. Interface+Mapping adds the "abstract rules" layer few-shot implicitly relies on the model to infer from examples — making the rules explicit constrains the model's decoding path harder.
  • vs AST codemods: codemods encode the mapping layer in code (one rule per transformation, exhaustively). The LLM-with-examples approach trades exhaustiveness for coverage of long-tail edge cases via the model's contextual intelligence.
  • vs runtime prompt refinement (PIXEL / Lyft): this is an offline composition. Once the three layers are verified, they're frozen into the prompt and shipped; no judge-LLM feedback loop at inference time. See concepts/iterative-prompt-methodology for that distinction.

Canonical placement in the prompt

Zalando orders the three layers as the static prefix of the prompt, ahead of the dynamic file-content suffix, to preserve prompt-cache hits — see concepts/static-dynamic-prompt-partitioning.

Failure modes

  • Interface drift. If the source or target library evolves, the interface layer goes stale. No mechanism described for keeping it in sync with library releases — presumably a manual re-run of the interface-generation step.
  • Mapping ambiguity where no visual equivalent exists. 12-column → 24-column grid mappings have no uniquely- correct rule; the mapping layer can't express "ask a human", so the residual lands in the post-migration manual-review bucket.
  • Example selection bias. Examples are LLM-generated and manually verified; if verification samples the same subspace as the example generator, blind spots persist into production.

Seen in

Last updated · 501 distilled / 1,218 read